@acorex/platform 1.0.0

package/fesm2022/acorex-platform-layouts-phone-widget-edit.component-MKzlZ0_B.mjs

@@ -0,0 +1,318 @@
+import * as i4 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i6 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i4$1 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import { AXPlatform } from '@acorex/core/platform';
+import { MockDataService } from '@acorex/platform/mocks';
+import { AXPWidgetEditBase } from '@acorex/platform/schema';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, effect, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+// import { AXButtonModule } from '@acorex/components/button';
+// import { AXDecoratorModule } from '@acorex/components/decorators';
+// import { AXSelectBoxModule } from '@acorex/components/select-box';
+// import { AXTextBoxModule } from '@acorex/components/text-box';
+// import { AXPlatform } from '@acorex/core/platform';
+// import { AXPWidgetEditBase } from '@acorex/platform/schema';
+// import { CommonModule } from '@angular/common';
+// import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+// import { FormsModule } from '@angular/forms';
+// @Component({
+//   template: `
+//     <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+//       <ng-container *ngIf="multiple">
+//         @for(item of value;track item?.value) {
+//         <ax-text-box [(ngModel)]="item.value" type="text" class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8">
+//         </ax-text-box>
+//         <ax-select-box
+//           [dataSource]="phoneLabels"
+//           [(ngModel)]="item.label"
+//           class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
+//         >
+//         </ax-select-box>
+//         <ax-button
+//           look="twotone"
+//           color="danger"
+//           (onClick)="handleRemoveItem(item)"
+//           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>
+//         }
+//       </ng-container>
+//       <ng-container *ngIf="!multiple">
+//         <ax-text-box [(ngModel)]="value[0].value" type="text" class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8">
+//         </ax-text-box>
+//         <ax-select-box
+//           [dataSource]="phoneLabels"
+//           [(ngModel)]="value[0].label"
+//           class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
+//         >
+//         </ax-select-box>
+//       </ng-container>
+//       <ax-button
+//         *ngIf="multiple"
+//         [text]="value.length == 0 ? 'Add New' : 'Add Another'"
+//         look="twotone"
+//         (onClick)="handleAddItem()"
+//         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>
+//     </div>
+//   `,
+//   standalone: true,
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+//   imports: [CommonModule, AXButtonModule, FormsModule, AXTextBoxModule, AXDecoratorModule, AXSelectBoxModule],
+//   inputs: ['multiple'],
+// })
+// export class AXPPhoneWidgetEditComponent extends AXPWidgetEditBase<
+//   { value?: string | null; label?: string | undefined }[]
+// > {
+//   protected platform = inject(AXPlatform);
+//   protected multiple!: boolean;
+//   phoneLabels: string[] = ['Mobile', 'Home', 'Work', 'Other'];
+//   protected handleAddItem() {
+//     this.value.push({ label: 'Mobile', value: undefined });
+//   }
+//   protected handleRemoveItem(item: any) {
+//     this.value = this.value.filter((c) => c != item);
+//   }
+//   ngOnInit(): void {
+//     if (!this.value || this.value?.length == 0) {
+//       this.value = [
+//         {
+//           label: 'Mobile',
+//           value: '',
+//         },
+//       ];
+//     }
+//   }
+// }
+class AXPPhoneWidgetEditComponent extends AXPWidgetEditBase {
+    constructor() {
+        super(...arguments);
+        this.mockerService = inject(MockDataService);
+        this.platform = inject(AXPlatform);
+        this.convertedValue = signal([]);
+        this.phoneLabels = ['Mobile', 'Home', 'Work', 'Other'];
+        this.changeValueEffect = effect(() => {
+            if (this.multiple) {
+                if (this.hasLabel)
+                    this.value = this.convertedValue().map((i) => ({ value: i.value, label: i.label }));
+                else
+                    this.value = this.convertedValue().map((i) => i.value);
+            }
+            else {
+                if (this.hasLabel)
+                    this.value = this.convertedValue().map((i) => ({ value: i.value, label: i.label }))[0];
+                else
+                    this.value = this.convertedValue().map((i) => i.value)[0];
+            }
+        });
+    }
+    handlePhoneChange(e, id) {
+        if (e.isUserInteraction) {
+            this.convertedValue.update((prev) => prev.map((i) => (i.id === id ? { ...i, value: e.value } : i)));
+        }
+    }
+    handleLabelChange(e, id) {
+        if (e.isUserInteraction) {
+            this.convertedValue.update((prev) => prev.map((i) => (i.id === id ? { ...i, label: e.value } : i)));
+        }
+    }
+    handleAddItem() {
+        // this.value.push({ label: 'Primary', value: undefined });
+        this.convertedValue.update((prev) => [
+            ...prev,
+            { label: this.hasLabel ? 'Primary' : '', value: '', id: this.mockerService.uid() },
+        ]);
+    }
+    handleRemoveItem(item) {
+        this.convertedValue.update((prev) => prev.filter((c) => c != item));
+    }
+    ngOnInit() {
+        // Initialize with an empty array if there's no value or it's empty
+        if (!this.value || this.value.length === 0) {
+            this.initializeEmptyValue();
+            return;
+        }
+        // Process the input based on `multiple` and `hasLabel`
+        if (this.multiple) {
+            this.handleMultipleValue();
+        }
+        else {
+            this.handleSingleValue();
+        }
+    }
+    initializeEmptyValue() {
+        this.convertedValue.set([{ value: '', label: '', id: this.mockerService.uid() }]);
+    }
+    handleMultipleValue() {
+        const newValue = this.value.map((item) => ({
+            value: this.hasLabel ? item.value : item,
+            label: this.hasLabel ? item.label : null,
+            id: this.mockerService.uid(),
+        }));
+        this.convertedValue.set(newValue);
+    }
+    handleSingleValue() {
+        const newValue = [
+            {
+                value: this.hasLabel ? this.value.value : this.value,
+                label: this.hasLabel ? this.value.label : null,
+                id: this.mockerService.uid(),
+            },
+        ];
+        this.convertedValue.set(newValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPPhoneWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPPhoneWidgetEditComponent, isStandalone: true, selector: "ng-component", inputs: { multiple: "multiple", hasLabel: "hasLabel" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <ng-container *ngIf="multiple">
+        @for(item of convertedValue();track item?.value) {
+        <ax-text-box
+          [(ngModel)]="item.value"
+          (onValueChanged)="handlePhoneChange($event, item.id)"
+          type="text"
+          class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
+          [class.lg:!ax-col-end-12]="!hasLabel"
+        >
+        </ax-text-box>
+        @if(hasLabel){
+        <ax-select-box
+          [dataSource]="phoneLabels"
+          [(ngModel)]="item.label"
+          (onValueChanged)="handleLabelChange($event, item.id)"
+          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
+        >
+        </ax-select-box>
+        }
+        <ax-button
+          look="twotone"
+          color="danger"
+          (onClick)="handleRemoveItem(item)"
+          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>
+        }
+      </ng-container>
+      <ng-container *ngIf="!multiple">
+        <ax-text-box
+          [(ngModel)]="convertedValue()[0].value"
+          (onValueChanged)="handlePhoneChange($event, convertedValue()[0].id)"
+          type="text"
+          class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
+          [class.lg:!ax-col-end-13]="!hasLabel"
+        >
+        </ax-text-box>
+        @if(hasLabel){
+        <ax-select-box
+          [dataSource]="phoneLabels"
+          [(ngModel)]="convertedValue()[0].label"
+          (onValueChanged)="handleLabelChange($event, convertedValue()[0].id)"
+          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
+        >
+        </ax-select-box>
+        }
+      </ng-container>
+
+      <ax-button
+        *ngIf="multiple"
+        [text]="convertedValue().length == 0 ? 'Add New' : 'Add Another'"
+        look="twotone"
+        (onClick)="handleAddItem()"
+        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>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i4.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange"] }, { 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: AXTextBoxModule }, { kind: "component", type: i4$1.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: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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", "itemTemplate", "emptyTemplate", "loadingTemplate"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPPhoneWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-4">
+      <ng-container *ngIf="multiple">
+        @for(item of convertedValue();track item?.value) {
+        <ax-text-box
+          [(ngModel)]="item.value"
+          (onValueChanged)="handlePhoneChange($event, item.id)"
+          type="text"
+          class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
+          [class.lg:!ax-col-end-12]="!hasLabel"
+        >
+        </ax-text-box>
+        @if(hasLabel){
+        <ax-select-box
+          [dataSource]="phoneLabels"
+          [(ngModel)]="item.label"
+          (onValueChanged)="handleLabelChange($event, item.id)"
+          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12"
+        >
+        </ax-select-box>
+        }
+        <ax-button
+          look="twotone"
+          color="danger"
+          (onClick)="handleRemoveItem(item)"
+          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>
+        }
+      </ng-container>
+      <ng-container *ngIf="!multiple">
+        <ax-text-box
+          [(ngModel)]="convertedValue()[0].value"
+          (onValueChanged)="handlePhoneChange($event, convertedValue()[0].id)"
+          type="text"
+          class="ax-col-start-1 ax-col-end-13 lg:ax-col-end-8"
+          [class.lg:!ax-col-end-13]="!hasLabel"
+        >
+        </ax-text-box>
+        @if(hasLabel){
+        <ax-select-box
+          [dataSource]="phoneLabels"
+          [(ngModel)]="convertedValue()[0].label"
+          (onValueChanged)="handleLabelChange($event, convertedValue()[0].id)"
+          class="ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13"
+        >
+        </ax-select-box>
+        }
+      </ng-container>
+
+      <ax-button
+        *ngIf="multiple"
+        [text]="convertedValue().length == 0 ? 'Add New' : 'Add Another'"
+        look="twotone"
+        (onClick)="handleAddItem()"
+        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>
+    </div>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXButtonModule, FormsModule, AXTextBoxModule, AXDecoratorModule, AXSelectBoxModule],
+                    inputs: ['multiple', 'hasLabel'],
+                }]
+        }] });
+
+export { AXPPhoneWidgetEditComponent };
+//# sourceMappingURL=acorex-platform-layouts-phone-widget-edit.component-MKzlZ0_B.mjs.map

package/fesm2022/acorex-platform-layouts-phone-widget-edit.component-MKzlZ0_B.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-layouts-phone-widget-edit.component-MKzlZ0_B.mjs","sources":["../../../../libs/platform/layouts/src/lib/widgets/phone/phone-widget-edit.component.ts"],"sourcesContent":["// import { AXButtonModule } from '@acorex/components/button';\n// import { AXDecoratorModule } from '@acorex/components/decorators';\n// import { AXSelectBoxModule } from '@acorex/components/select-box';\n// import { AXTextBoxModule } from '@acorex/components/text-box';\n// import { AXPlatform } from '@acorex/core/platform';\n// import { AXPWidgetEditBase } from '@acorex/platform/schema';\n// import { CommonModule } from '@angular/common';\n// import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\n// import { FormsModule } from '@angular/forms';\n\n// @Component({\n//   template: `\n//     <div class=\"ax-grid ax-grid-cols-12 ax-gap-4\">\n//       <ng-container *ngIf=\"multiple\">\n//         @for(item of value;track item?.value) {\n//         <ax-text-box [(ngModel)]=\"item.value\" type=\"text\" class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-8\">\n//         </ax-text-box>\n//         <ax-select-box\n//           [dataSource]=\"phoneLabels\"\n//           [(ngModel)]=\"item.label\"\n//           class=\"ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12\"\n//         >\n//         </ax-select-box>\n//         <ax-button\n//           look=\"twotone\"\n//           color=\"danger\"\n//           (onClick)=\"handleRemoveItem(item)\"\n//           class=\"ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end\"\n//         >\n//           <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n//         </ax-button>\n//         }\n//       </ng-container>\n//       <ng-container *ngIf=\"!multiple\">\n//         <ax-text-box [(ngModel)]=\"value[0].value\" type=\"text\" class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-8\">\n//         </ax-text-box>\n//         <ax-select-box\n//           [dataSource]=\"phoneLabels\"\n//           [(ngModel)]=\"value[0].label\"\n//           class=\"ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13\"\n//         >\n//         </ax-select-box>\n//       </ng-container>\n//       <ax-button\n//         *ngIf=\"multiple\"\n//         [text]=\"value.length == 0 ? 'Add New' : 'Add Another'\"\n//         look=\"twotone\"\n//         (onClick)=\"handleAddItem()\"\n//         class=\"ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13\"\n//       >\n//         <ax-prefix> <ax-icon class=\"fa-solid fa-add\"></ax-icon> </ax-prefix\n//       ></ax-button>\n//     </div>\n//   `,\n//   standalone: true,\n//   changeDetection: ChangeDetectionStrategy.OnPush,\n//   imports: [CommonModule, AXButtonModule, FormsModule, AXTextBoxModule, AXDecoratorModule, AXSelectBoxModule],\n//   inputs: ['multiple'],\n// })\n// export class AXPPhoneWidgetEditComponent extends AXPWidgetEditBase<\n//   { value?: string | null; label?: string | undefined }[]\n// > {\n//   protected platform = inject(AXPlatform);\n//   protected multiple!: boolean;\n\n//   phoneLabels: string[] = ['Mobile', 'Home', 'Work', 'Other'];\n\n//   protected handleAddItem() {\n//     this.value.push({ label: 'Mobile', value: undefined });\n//   }\n\n//   protected handleRemoveItem(item: any) {\n//     this.value = this.value.filter((c) => c != item);\n//   }\n\n//   ngOnInit(): void {\n//     if (!this.value || this.value?.length == 0) {\n//       this.value = [\n//         {\n//           label: 'Mobile',\n//           value: '',\n//         },\n//       ];\n//     }\n//   }\n// }\n\nimport { AXButtonModule } from '@acorex/components/button';\nimport { AXValueChangedEvent } from '@acorex/components/common';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXSelectBoxModule } from '@acorex/components/select-box';\nimport { AXTextBoxModule } from '@acorex/components/text-box';\nimport { AXPlatform } from '@acorex/core/platform';\nimport { MockDataService } from '@acorex/platform/mocks';\nimport { AXPWidgetEditBase } from '@acorex/platform/schema';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, WritableSignal, effect, inject, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n  template: `\n    <div class=\"ax-grid ax-grid-cols-12 ax-gap-4\">\n      <ng-container *ngIf=\"multiple\">\n        @for(item of convertedValue();track item?.value) {\n        <ax-text-box\n          [(ngModel)]=\"item.value\"\n          (onValueChanged)=\"handlePhoneChange($event, item.id)\"\n          type=\"text\"\n          class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-8\"\n          [class.lg:!ax-col-end-12]=\"!hasLabel\"\n        >\n        </ax-text-box>\n        @if(hasLabel){\n        <ax-select-box\n          [dataSource]=\"phoneLabels\"\n          [(ngModel)]=\"item.label\"\n          (onValueChanged)=\"handleLabelChange($event, item.id)\"\n          class=\"ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-12\"\n        >\n        </ax-select-box>\n        }\n        <ax-button\n          look=\"twotone\"\n          color=\"danger\"\n          (onClick)=\"handleRemoveItem(item)\"\n          class=\"ax-col-start-11 ax-col-end-13 lg:ax-col-start-12 lg:ax-col-end-13 ax-justify-self-end\"\n        >\n          <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n        </ax-button>\n        }\n      </ng-container>\n      <ng-container *ngIf=\"!multiple\">\n        <ax-text-box\n          [(ngModel)]=\"convertedValue()[0].value\"\n          (onValueChanged)=\"handlePhoneChange($event, convertedValue()[0].id)\"\n          type=\"text\"\n          class=\"ax-col-start-1 ax-col-end-13 lg:ax-col-end-8\"\n          [class.lg:!ax-col-end-13]=\"!hasLabel\"\n        >\n        </ax-text-box>\n        @if(hasLabel){\n        <ax-select-box\n          [dataSource]=\"phoneLabels\"\n          [(ngModel)]=\"convertedValue()[0].label\"\n          (onValueChanged)=\"handleLabelChange($event, convertedValue()[0].id)\"\n          class=\"ax-col-start-1 ax-col-end-11 lg:ax-col-start-8 lg:ax-col-end-13\"\n        >\n        </ax-select-box>\n        }\n      </ng-container>\n\n      <ax-button\n        *ngIf=\"multiple\"\n        [text]=\"convertedValue().length == 0 ? 'Add New' : 'Add Another'\"\n        look=\"twotone\"\n        (onClick)=\"handleAddItem()\"\n        class=\"ax-col-start-8 lg:ax-col-start-10 2xl:ax-col-start-10 ax-col-end-13\"\n      >\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  `,\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, AXButtonModule, FormsModule, AXTextBoxModule, AXDecoratorModule, AXSelectBoxModule],\n  inputs: ['multiple', 'hasLabel'],\n})\nexport class AXPPhoneWidgetEditComponent extends AXPWidgetEditBase<any> {\n  protected mockerService = inject(MockDataService);\n  protected platform = inject(AXPlatform);\n\n  protected multiple!: boolean;\n  protected hasLabel!: boolean;\n  protected convertedValue: WritableSignal<{ value: string; label?: string; id: string }[]> = signal([]);\n\n  protected phoneLabels: string[] = ['Mobile', 'Home', 'Work', 'Other'];\n\n  private changeValueEffect = effect(() => {\n    if (this.multiple) {\n      if (this.hasLabel) this.value = this.convertedValue().map((i) => ({ value: i.value, label: i.label }));\n      else this.value = this.convertedValue().map((i) => i.value);\n    } else {\n      if (this.hasLabel) this.value = this.convertedValue().map((i) => ({ value: i.value, label: i.label }))[0];\n      else this.value = this.convertedValue().map((i) => i.value)[0];\n    }\n  });\n\n  protected handlePhoneChange(e: AXValueChangedEvent, id: string) {\n    if (e.isUserInteraction) {\n      this.convertedValue.update((prev) => prev.map((i) => (i.id === id ? { ...i, value: e.value } : i)));\n    }\n  }\n  protected handleLabelChange(e: AXValueChangedEvent, id: string) {\n    if (e.isUserInteraction) {\n      this.convertedValue.update((prev) => prev.map((i) => (i.id === id ? { ...i, label: e.value } : i)));\n    }\n  }\n\n  protected handleAddItem() {\n    // this.value.push({ label: 'Primary', value: undefined });\n    this.convertedValue.update((prev) => [\n      ...prev,\n      { label: this.hasLabel ? 'Primary' : '', value: '', id: this.mockerService.uid() },\n    ]);\n  }\n\n  protected handleRemoveItem(item: any) {\n    this.convertedValue.update((prev) => prev.filter((c) => c != item));\n  }\n  ngOnInit(): void {\n    // Initialize with an empty array if there's no value or it's empty\n    if (!this.value || this.value.length === 0) {\n      this.initializeEmptyValue();\n      return;\n    }\n\n    // Process the input based on `multiple` and `hasLabel`\n    if (this.multiple) {\n      this.handleMultipleValue();\n    } else {\n      this.handleSingleValue();\n    }\n  }\n\n  private initializeEmptyValue(): void {\n    this.convertedValue.set([{ value: '', label: '', id: this.mockerService.uid() }]);\n  }\n\n  private handleMultipleValue(): void {\n    const newValue = this.value.map((item: any) => ({\n      value: this.hasLabel ? item.value : item,\n      label: this.hasLabel ? item.label : null,\n      id: this.mockerService.uid(),\n    }));\n    this.convertedValue.set(newValue);\n  }\n\n  private handleSingleValue(): void {\n    const newValue = [\n      {\n        value: this.hasLabel ? this.value.value : this.value,\n        label: this.hasLabel ? this.value.label : null,\n        id: this.mockerService.uid(),\n      },\n    ];\n    this.convertedValue.set(newValue);\n  }\n}\n"],"names":["i2","i4","i5"],"mappings":"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"}

package/fesm2022/acorex-platform-layouts-phone-widget-view.component-NEO22XO7.mjs

@@ -0,0 +1,126 @@
+import * as i1$1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXPClipBoardService } from '@acorex/platform/common';
+import { AXPWidgetBase } from '@acorex/platform/schema';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy } from '@angular/core';
+
+class AXPPhoneWidgetViewComponent extends AXPWidgetBase {
+    constructor() {
+        super(...arguments);
+        this.clipboard = inject(AXPClipBoardService);
+        this.list = [];
+    }
+    getIcon(type) {
+        switch (type) {
+            case 'home':
+                return 'fa-home';
+            case 'mobile':
+                return 'fa-phone';
+            default:
+                return 'fa-phone';
+        }
+    }
+    render() {
+        const rawValue = this.context[this.prop.name];
+        this.list = Array.isArray(rawValue) ? rawValue.map((c) => this.extractItem(c)) : [this.extractItem(rawValue)];
+    }
+    extractItem(item) {
+        return typeof item == 'object'
+            ? {
+                value: item.value ?? '-',
+                type: item.type ?? 'mobile',
+                label: item.label,
+            }
+            : {
+                value: item,
+                type: 'mobile',
+                label: null,
+            };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPPhoneWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPPhoneWidgetViewComponent, isStandalone: true, selector: "ng-component", inputs: { context: "context", value: "value", multiple: "multiple", hasLabel: "hasLabel" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-2 ">
+      <ng-container *ngIf="multiple">
+        @for(item of list;track item?.value) {
+        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
+        }
+      </ng-container>
+
+      <ng-container *ngIf="!multiple">
+        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: list[0] }" ]></ng-template>
+      </ng-container>
+
+      <ng-template #itemTemplate let-item="data">
+        <ng-container *ngIf="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">
+                <i class="fa-solid ax-text-neutral-400 fa-phone"></i>
+              </div>
+              <a class="group-hover:!ax-text-primary-500" href="tel:{{ item.value }}">{{ 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('Phone Number', 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-container>
+      </ng-template>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPPhoneWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <div class="ax-grid ax-grid-cols-12 ax-gap-2 ">
+      <ng-container *ngIf="multiple">
+        @for(item of list;track item?.value) {
+        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: item }" ]></ng-template>
+        }
+      </ng-container>
+
+      <ng-container *ngIf="!multiple">
+        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ data: list[0] }" ]></ng-template>
+      </ng-container>
+
+      <ng-template #itemTemplate let-item="data">
+        <ng-container *ngIf="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">
+                <i class="fa-solid ax-text-neutral-400 fa-phone"></i>
+              </div>
+              <a class="group-hover:!ax-text-primary-500" href="tel:{{ item.value }}">{{ 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('Phone Number', 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-container>
+      </ng-template>
+    </div>
+  `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXBadgeModule],
+                    inputs: ['context', 'value', 'multiple', 'hasLabel'],
+                }]
+        }] });
+
+export { AXPPhoneWidgetViewComponent };
+//# sourceMappingURL=acorex-platform-layouts-phone-widget-view.component-NEO22XO7.mjs.map

package/fesm2022/acorex-platform-layouts-phone-widget-view.component-NEO22XO7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-layouts-phone-widget-view.component-NEO22XO7.mjs","sources":["../../../../libs/platform/layouts/src/lib/widgets/phone/phone-widget-view.component.ts"],"sourcesContent":["import { AXBadgeModule } from '@acorex/components/badge';\nimport { AXPClipBoardService } from '@acorex/platform/common';\nimport { AXPWidgetBase } from '@acorex/platform/schema';\nimport { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject } from '@angular/core';\n\n@Component({\n  template: `\n    <div class=\"ax-grid ax-grid-cols-12 ax-gap-2 \">\n      <ng-container *ngIf=\"multiple\">\n        @for(item of list;track item?.value) {\n        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ data: item }\" ]></ng-template>\n        }\n      </ng-container>\n\n      <ng-container *ngIf=\"!multiple\">\n        <ng-template [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ data: list[0] }\" ]></ng-template>\n      </ng-container>\n\n      <ng-template #itemTemplate let-item=\"data\">\n        <ng-container *ngIf=\"item\">\n          <div class=\"ax-col-start-1 ax-col-end-10 lg:ax-col-end-7\">\n            <div class=\"ax-flex ax-flex-1 ax-gap-3 ax-items-center ax-w-max ax-group\">\n              <div class=\"ax-w-6 ax-h-6 ax-flex ax-items-center ax-justify-center\">\n                <i class=\"fa-solid ax-text-neutral-400 fa-phone\"></i>\n              </div>\n              <a class=\"group-hover:!ax-text-primary-500\" href=\"tel:{{ item.value }}\">{{ item.value }}</a>\n              <span\n                class=\"ax-text-neutral-400  ax-cursor-pointer ax-invisible group-hover:ax-visible hover:!ax-text-primary-500\"\n                (click)=\"clipboard.copy('Phone Number', item.value)\"\n              >\n                <i class=\"fa-solid fa-copy \"></i>\n              </span>\n              @if(hasLabel){\n              <ax-badge color=\"primary\" [look]=\"'twotone'\" [text]=\"item.label\"></ax-badge>\n              }\n            </div>\n          </div>\n        </ng-container>\n      </ng-template>\n    </div>\n  `,\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, AXBadgeModule],\n  inputs: ['context', 'value', 'multiple', 'hasLabel'],\n})\nexport class AXPPhoneWidgetViewComponent extends AXPWidgetBase {\n  protected clipboard = inject(AXPClipBoardService);\n  protected multiple!: boolean;\n  protected hasLabel!: boolean;\n\n  protected list: { value: string; type: string; label: string }[] = [];\n\n  protected getIcon(type: string) {\n    switch (type) {\n      case 'home':\n        return 'fa-home';\n\n      case 'mobile':\n        return 'fa-phone';\n\n      default:\n        return 'fa-phone';\n    }\n  }\n\n  override render() {\n    const rawValue = this.context[this.prop.name];\n    this.list = Array.isArray(rawValue) ? rawValue.map((c) => this.extractItem(c)) : [this.extractItem(rawValue)];\n  }\n\n  private extractItem(item: any): any {\n    return typeof item == 'object'\n      ? {\n          value: item.value ?? '-',\n          type: item.type ?? 'mobile',\n          label: item.label,\n        }\n      : {\n          value: item,\n          type: 'mobile',\n          label: null,\n        };\n  }\n}\n"],"names":["i2"],"mappings":"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"}

package/fesm2022/acorex-platform-layouts-rich-text-widget-column.component-P0YzXTIB.mjs

@@ -0,0 +1,72 @@
+import * as i11 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+import { AXPWidgetBase } from '@acorex/platform/schema';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
+
+class AXPRichTextWidgetColumnComponent extends AXPWidgetBase {
+    render() {
+        if (this.context[this.prop.name]) {
+            this.value = this.context[this.prop.name];
+        }
+    }
+    dot3(text, limit) {
+        const innerText = this.extractContent(text);
+        if (innerText?.length >= limit) {
+            return innerText.slice(0, limit) + '...';
+        }
+        else
+            return innerText;
+    }
+    extractContent(s) {
+        var span = document.createElement('span');
+        span.innerHTML = s;
+        return span.textContent || span.innerText;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPRichTextWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: AXPRichTextWidgetColumnComponent, isStandalone: true, selector: "axp-rich-text-widget-column", inputs: { context: "context", hasTooltip: "hasTooltip", width: "width" }, usesInheritance: true, ngImport: i0, template: `
+    <div #parent>
+      @if(hasTooltip){
+      <div
+        class="ax-text-nowrap ax-overflow-hidden ax-text-ellipsis"
+        [axTooltip]="allContent"
+        [innerHTML]="dot3(value, 150)"
+      ></div>
+      <ng-template #allContent>
+        <div [innerHTML]="value" class="ax-p-4 ax-border ax-rounded-lg ax-bg-default"></div>
+      </ng-template>
+      }@else {
+      <div class="ax-text-nowrap ax-overflow-hidden ax-text-ellipsis" [innerHTML]="dot3(value, 150)"></div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i11.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AXPRichTextWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-rich-text-widget-column',
+                    template: `
+    <div #parent>
+      @if(hasTooltip){
+      <div
+        class="ax-text-nowrap ax-overflow-hidden ax-text-ellipsis"
+        [axTooltip]="allContent"
+        [innerHTML]="dot3(value, 150)"
+      ></div>
+      <ng-template #allContent>
+        <div [innerHTML]="value" class="ax-p-4 ax-border ax-rounded-lg ax-bg-default"></div>
+      </ng-template>
+      }@else {
+      <div class="ax-text-nowrap ax-overflow-hidden ax-text-ellipsis" [innerHTML]="dot3(value, 150)"></div>
+      }
+    </div>
+  `,
+                    standalone: true,
+                    encapsulation: ViewEncapsulation.None,
+                    inputs: ['context', 'hasTooltip', 'width'],
+                    imports: [AXTooltipModule],
+                }]
+        }] });
+
+export { AXPRichTextWidgetColumnComponent };
+//# sourceMappingURL=acorex-platform-layouts-rich-text-widget-column.component-P0YzXTIB.mjs.map

package/fesm2022/acorex-platform-layouts-rich-text-widget-column.component-P0YzXTIB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-layouts-rich-text-widget-column.component-P0YzXTIB.mjs","sources":["../../../../libs/platform/layouts/src/lib/widgets/rich-text/rich-text-widget-column.component.ts"],"sourcesContent":["import { AXTooltipModule } from '@acorex/components/tooltip';\nimport { AXPWidgetBase } from '@acorex/platform/schema';\nimport { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'axp-rich-text-widget-column',\n  template: `\n    <div #parent>\n      @if(hasTooltip){\n      <div\n        class=\"ax-text-nowrap ax-overflow-hidden ax-text-ellipsis\"\n        [axTooltip]=\"allContent\"\n        [innerHTML]=\"dot3(value, 150)\"\n      ></div>\n      <ng-template #allContent>\n        <div [innerHTML]=\"value\" class=\"ax-p-4 ax-border ax-rounded-lg ax-bg-default\"></div>\n      </ng-template>\n      }@else {\n      <div class=\"ax-text-nowrap ax-overflow-hidden ax-text-ellipsis\" [innerHTML]=\"dot3(value, 150)\"></div>\n      }\n    </div>\n  `,\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n  inputs: ['context', 'hasTooltip', 'width'],\n  imports: [AXTooltipModule],\n})\nexport class AXPRichTextWidgetColumnComponent extends AXPWidgetBase<any> {\n  protected value!: string;\n  protected hasTooltip!: boolean;\n\n  protected override render(): void {\n    if (this.context[this.prop.name]) {\n      this.value = this.context[this.prop.name];\n    }\n  }\n\n  protected dot3(text: string, limit: number) {\n    const innerText = this.extractContent(text);\n    if (innerText?.length >= limit) {\n      return innerText.slice(0, limit) + '...';\n    } else return innerText;\n  }\n\n  protected extractContent(s: string) {\n    var span = document.createElement('span');\n    span.innerHTML = s;\n    return span.textContent || span.innerText;\n  }\n}\n"],"names":["i1"],"mappings":";;;;;;AA2BM,MAAO,gCAAiC,SAAQ,aAAkB,CAAA;IAInD,MAAM,GAAA;QACvB,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAChC,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC3C;KACF;IAES,IAAI,CAAC,IAAY,EAAE,KAAa,EAAA;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC5C,QAAA,IAAI,SAAS,EAAE,MAAM,IAAI,KAAK,EAAE;YAC9B,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC;SAC1C;;AAAM,YAAA,OAAO,SAAS,CAAC;KACzB;AAES,IAAA,cAAc,CAAC,CAAS,EAAA;QAChC,IAAI,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;AAC1C,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;AACnB,QAAA,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAAC;KAC3C;8GArBU,gCAAgC,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gCAAgC,EArBjC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;AAeT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAIS,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,GAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAEd,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAvB5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,6BAA6B;AACvC,oBAAA,QAAQ,EAAE,CAAA;;;;;;;;;;;;;;;AAeT,EAAA,CAAA;AACD,oBAAA,UAAU,EAAE,IAAI;oBAChB,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,MAAM,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,OAAO,CAAC;oBAC1C,OAAO,EAAE,CAAC,eAAe,CAAC;AAC3B,iBAAA,CAAA;;;;;"}