@salla.sa/twilight-components 2.14.295 → 2.14.296

package/dist/types/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Option } from "./components/salla-booking-field/interfaces";
 import { Color, Options } from "./components/salla-color-picker/interfaces";
 import { Comment, CommentType } from "./components/salla-comments/interfaces";
+import { CustomField } from "./components/salla-user-profile/interfaces";
 import { DateLimit, DateOption, LocaleKey } from "./components/salla-datetime-picker/interfaces";
 import { FilePondFile } from "./components/salla-file-upload/interfaces";
 import { FilePondErrorDescription } from "filepond/types/index";
@@ -22,10 +23,10 @@ import { Donation, Option as Option1 } from "./components/salla-product-options/
 import { Review } from "./components/salla-review-card/interfaces";
 import { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
 import { Phone } from "./components/salla-tel-input/interfaces";
-import { CustomField } from "./components/salla-user-profile/interfaces";
 export { Option } from "./components/salla-booking-field/interfaces";
 export { Color, Options } from "./components/salla-color-picker/interfaces";
 export { Comment, CommentType } from "./components/salla-comments/interfaces";
+export { CustomField } from "./components/salla-user-profile/interfaces";
 export { DateLimit, DateOption, LocaleKey } from "./components/salla-datetime-picker/interfaces";
 export { FilePondFile } from "./components/salla-file-upload/interfaces";
 export { FilePondErrorDescription } from "filepond/types/index";
@@ -40,7 +41,6 @@ export { Donation, Option as Option1 } from "./components/salla-product-options/
 export { Review } from "./components/salla-review-card/interfaces";
 export { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
 export { Phone } from "./components/salla-tel-input/interfaces";
-export { CustomField } from "./components/salla-user-profile/interfaces";
 export namespace Components {
     /**
      * @salla /ui-components
@@ -531,6 +531,17 @@ export namespace Components {
          */
         "size": 'sm' | 'md' | 'lg';
     }
+    interface SallaCustomFields {
+        "fields": string | CustomField[];
+        "fileUploadUrl": string;
+        "getFieldValues": () => Promise<{ [key: string]: unknown; }>;
+        /**
+          * @default true
+         */
+        "isEditable": boolean;
+        "setFields": (fields: CustomField[]) => Promise<void>;
+        "validateFields": () => Promise<boolean>;
+    }
     interface SallaDatetimePicker {
         /**
           * Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
@@ -1059,6 +1070,11 @@ export namespace Components {
           * File input name in the request payload
          */
         "payloadName": string;
+        /**
+          * Allow to pass extra params to be sent with the upload request
+          * @default {}
+         */
+        "payloadParams"?: Record<string,unknown>;
         /**
           * Set the component to be profile image uploader with a preview and a circular shape
           * @default false
@@ -2719,8 +2735,6 @@ export namespace Components {
      * customizable fields, and seamless integration with the Salla API. 
      * It dynamically fetches translated strings for labels and messages from the 
      * Salla localization object, allowing for a multilingual user interface. Users 
-     * can extend the default form with custom fields through the `customFields`
-     * property and the setCustomFields method. The component manages user data 
      * retrieval from the Salla configuration and includes fields for first name, 
      * last name, birthday, gender, email, mobile, and custom additions. Form 
      * validation and submission are handled through various event handlers, ensuring 
@@ -2732,21 +2746,11 @@ export namespace Components {
      * rich set of features and customization options.
      */
     interface SallaUserProfile {
-        /**
-          * Custome fields to be rendered in addition to the default ones.
-         */
-        "customFields": string;
         /**
           * The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid. Defaults to 10.
-          * @type {number}
           * @default 10
          */
         "minAge": number;
-        /**
-          * Sets custom fields for the component. Can be handy for non HTML usage.
-          * @param fields - An array of custom fields.
-         */
-        "setCustomFields": (fields: CustomField[]) => Promise<void>;
     }
     interface SallaUserSettings {
     }
@@ -2801,6 +2805,10 @@ export interface SallaColorPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSallaColorPickerElement;
 }
+export interface SallaCustomFieldsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSallaCustomFieldsElement;
+}
 export interface SallaDatetimePickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSallaDatetimePickerElement;
@@ -3082,6 +3090,32 @@ declare global {
         prototype: HTMLSallaCountDownElement;
         new (): HTMLSallaCountDownElement;
     };
+    interface HTMLSallaCustomFieldsElementEventMap {
+        "fieldChanged": {
+    fieldId: string | number;
+    value: unknown;
+    isValid: boolean;
+  };
+        "fileUploaded": {
+    fieldId: string | number;
+    file: File;
+    isValid: boolean;
+  };
+    }
+    interface HTMLSallaCustomFieldsElement extends Components.SallaCustomFields, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSallaCustomFieldsElementEventMap>(type: K, listener: (this: HTMLSallaCustomFieldsElement, ev: SallaCustomFieldsCustomEvent<HTMLSallaCustomFieldsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSallaCustomFieldsElementEventMap>(type: K, listener: (this: HTMLSallaCustomFieldsElement, ev: SallaCustomFieldsCustomEvent<HTMLSallaCustomFieldsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSallaCustomFieldsElement: {
+        prototype: HTMLSallaCustomFieldsElement;
+        new (): HTMLSallaCustomFieldsElement;
+    };
     interface HTMLSallaDatetimePickerElementEventMap {
         "picked": any;
         "invalidInput": any;
@@ -3770,8 +3804,6 @@ declare global {
      * customizable fields, and seamless integration with the Salla API. 
      * It dynamically fetches translated strings for labels and messages from the 
      * Salla localization object, allowing for a multilingual user interface. Users 
-     * can extend the default form with custom fields through the `customFields`
-     * property and the setCustomFields method. The component manages user data 
      * retrieval from the Salla configuration and includes fields for first name, 
      * last name, birthday, gender, email, mobile, and custom additions. Form 
      * validation and submission are handled through various event handlers, ensuring 
@@ -3840,6 +3872,7 @@ declare global {
         "salla-conditional-offer": HTMLSallaConditionalOfferElement;
         "salla-contacts": HTMLSallaContactsElement;
         "salla-count-down": HTMLSallaCountDownElement;
+        "salla-custom-fields": HTMLSallaCustomFieldsElement;
         "salla-datetime-picker": HTMLSallaDatetimePickerElement;
         "salla-drawer": HTMLSallaDrawerElement;
         "salla-file-upload": HTMLSallaFileUploadElement;
@@ -4381,6 +4414,24 @@ declare namespace LocalJSX {
          */
         "size"?: 'sm' | 'md' | 'lg';
     }
+    interface SallaCustomFields {
+        "fields"?: string | CustomField[];
+        "fileUploadUrl"?: string;
+        /**
+          * @default true
+         */
+        "isEditable"?: boolean;
+        "onFieldChanged"?: (event: SallaCustomFieldsCustomEvent<{
+    fieldId: string | number;
+    value: unknown;
+    isValid: boolean;
+  }>) => void;
+        "onFileUploaded"?: (event: SallaCustomFieldsCustomEvent<{
+    fieldId: string | number;
+    file: File;
+    isValid: boolean;
+  }>) => void;
+    }
     interface SallaDatetimePicker {
         /**
           * Allows the user to enter a date directly into the input field. By default, direct entry is disabled.
@@ -4916,6 +4967,11 @@ declare namespace LocalJSX {
           * File input name in the request payload
          */
         "payloadName"?: string;
+        /**
+          * Allow to pass extra params to be sent with the upload request
+          * @default {}
+         */
+        "payloadParams"?: Record<string,unknown>;
         /**
           * Set the component to be profile image uploader with a preview and a circular shape
           * @default false
@@ -6358,8 +6414,6 @@ declare namespace LocalJSX {
      * customizable fields, and seamless integration with the Salla API. 
      * It dynamically fetches translated strings for labels and messages from the 
      * Salla localization object, allowing for a multilingual user interface. Users 
-     * can extend the default form with custom fields through the `customFields`
-     * property and the setCustomFields method. The component manages user data 
      * retrieval from the Salla configuration and includes fields for first name, 
      * last name, birthday, gender, email, mobile, and custom additions. Form 
      * validation and submission are handled through various event handlers, ensuring 
@@ -6371,13 +6425,8 @@ declare namespace LocalJSX {
      * rich set of features and customization options.
      */
     interface SallaUserProfile {
-        /**
-          * Custome fields to be rendered in addition to the default ones.
-         */
-        "customFields"?: string;
         /**
           * The minimum allowed age for a user. Users with a birthdate indicating an age less than this value will be considered invalid. Defaults to 10.
-          * @type {number}
           * @default 10
          */
         "minAge"?: number;
@@ -6435,6 +6484,7 @@ declare namespace LocalJSX {
         "salla-conditional-offer": SallaConditionalOffer;
         "salla-contacts": SallaContacts;
         "salla-count-down": SallaCountDown;
+        "salla-custom-fields": SallaCustomFields;
         "salla-datetime-picker": SallaDatetimePicker;
         "salla-drawer": SallaDrawer;
         "salla-file-upload": SallaFileUpload;
@@ -6562,6 +6612,7 @@ declare module "@stencil/core" {
             "salla-conditional-offer": LocalJSX.SallaConditionalOffer & JSXBase.HTMLAttributes<HTMLSallaConditionalOfferElement>;
             "salla-contacts": LocalJSX.SallaContacts & JSXBase.HTMLAttributes<HTMLSallaContactsElement>;
             "salla-count-down": LocalJSX.SallaCountDown & JSXBase.HTMLAttributes<HTMLSallaCountDownElement>;
+            "salla-custom-fields": LocalJSX.SallaCustomFields & JSXBase.HTMLAttributes<HTMLSallaCustomFieldsElement>;
             "salla-datetime-picker": LocalJSX.SallaDatetimePicker & JSXBase.HTMLAttributes<HTMLSallaDatetimePickerElement>;
             "salla-drawer": LocalJSX.SallaDrawer & JSXBase.HTMLAttributes<HTMLSallaDrawerElement>;
             "salla-file-upload": LocalJSX.SallaFileUpload & JSXBase.HTMLAttributes<HTMLSallaFileUploadElement>;
@@ -6686,8 +6737,6 @@ declare module "@stencil/core" {
              * customizable fields, and seamless integration with the Salla API. 
              * It dynamically fetches translated strings for labels and messages from the 
              * Salla localization object, allowing for a multilingual user interface. Users 
-             * can extend the default form with custom fields through the `customFields`
-             * property and the setCustomFields method. The component manages user data 
              * retrieval from the Salla configuration and includes fields for first name, 
              * last name, birthday, gender, email, mobile, and custom additions. Form 
              * validation and submission are handled through various event handlers, ensuring 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "2.14.295",
+  "version": "2.14.296",
   "license": "GPL-3.0",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -80,9 +80,9 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@salla.sa/applepay": "2.14.295",
-    "@salla.sa/twilight": "2.14.295",
-    "@salla.sa/twilight-tailwind-theme": "2.14.295",
+    "@salla.sa/applepay": "2.14.296",
+    "@salla.sa/twilight": "2.14.296",
+    "@salla.sa/twilight-tailwind-theme": "2.14.296",
     "@types/node": "^20.4.8",
     "animejs": "^3.2.2",
     "filepond": "^4.30.6",
@@ -100,5 +100,5 @@
     "vanilla-lazyload": "^17.8.5",
     "vanilla-picker": "^2.12.2"
   },
-  "gitHead": "d21bdbd99cac9545cd42a71bd9033e8ebe87fcef"
+  "gitHead": "5e2bf652182c2fc925892a6fe9ddeb27bac620e0"
 }