@salla.sa/twilight-components 2.14.539 → 2.14.541

package/dist/types/components.d.ts

@@ -5,6 +5,8 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { Attachment } from "./components/salla-attachment-view/salla-attachment-view";
+import { Attachment as Attachment1 } from "./components/salla-attachment-view/salla-attachment-view";
 import { Option } from "./components/salla-booking-field/interfaces";
 import { AddressCreatedEvent, BulletDeliveryConfirmedEvent, HeaderContextUpdateEvent } from "./components/salla-bullet-delivery/interfaces";
 import { Coupon } from "./components/salla-cart-coupons/interfaces";
@@ -33,6 +35,8 @@ import { ReviewFactor as ReviewFactor1 } from "./components/salla-review-factors
 import { ReviewType, SortingOption, Source } from "./components/salla-reviews/interfaces";
 import { DropdownItem } from "./components/salla-searchable-dropdown/interfaces";
 import { Phone } from "./components/salla-tel-input/interfaces";
+export { Attachment } from "./components/salla-attachment-view/salla-attachment-view";
+export { Attachment as Attachment1 } from "./components/salla-attachment-view/salla-attachment-view";
 export { Option } from "./components/salla-booking-field/interfaces";
 export { AddressCreatedEvent, BulletDeliveryConfirmedEvent, HeaderContextUpdateEvent } from "./components/salla-bullet-delivery/interfaces";
 export { Coupon } from "./components/salla-cart-coupons/interfaces";
@@ -198,6 +202,81 @@ export namespace Components {
          */
         "vertical": boolean;
     }
+    /**
+     * A reusable lightbox for viewing image/video attachments in a modal with a
+     * scrollable thumbnails strip. Open it imperatively via the `open()` method.
+     * @example const viewer = document.querySelector('salla-attachment-view');
+     * viewer.attachments = [{ id: '1', url: '/a.jpg' }, { id: '2', url: '/b.mp4' }];
+     * viewer.open(0);
+     */
+    interface SallaAttachmentView {
+        /**
+          * Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a JSON string of the same shape (for consumers outside of JSX/Stencil).
+          * @default []
+         */
+        "attachments": Attachment[] | string;
+        /**
+          * Close the viewer.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Open the viewer at the given attachment index.
+          * @param index - Index of the attachment to show first (defaults to 0).
+         */
+        "open": (index?: number) => Promise<void>;
+    }
+    /**
+     * Renders a horizontal strip of image/video attachment thumbnails with an
+     * optional "+N" overflow indicator on the last visible item. When `clickable`
+     * is true, opens `salla-attachment-view` when a thumbnail is clicked.
+     * Media can be supplied as:
+     * - `attachments` — full `{ id, url, mimeType?/type? }` objects
+     * - `images` / `videos` — URL string arrays
+     * - `rating` — object with `images` / `videos` arrays
+     * - `productRatings` + `productId` — match a product rating, else fall back to `rating`
+     */
+    interface SallaAttachments {
+        /**
+          * Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a JSON string of the same shape.
+          * @default []
+         */
+        "attachments": Attachment1[] | string;
+        /**
+          * When true, clicking a thumbnail opens the attachment lightbox.
+          * @default false
+         */
+        "clickable": boolean;
+        /**
+          * Image URLs to display. Accepts a string array or a JSON string.
+          * @default []
+         */
+        "images": string[] | string;
+        /**
+          * Maximum number of thumbnails to show before displaying a "+N" overlay on the last visible item.
+          * @default 4
+         */
+        "maxVisible": number;
+        /**
+          * Product id used to match an entry in `productRatings`.
+          * @default null
+         */
+        "productId": number | string;
+        /**
+          * Product ratings list. When set with `productId`, the matching rating's media is preferred over `rating`.
+          * @default []
+         */
+        "productRatings": MediaSource[] | string;
+        /**
+          * Rating-like object with `images` / `videos` URL arrays. Used when `images`/`videos` are empty, and as a fallback when resolving `productRatings`.
+          * @default null
+         */
+        "rating": MediaSource | string;
+        /**
+          * Video URLs to display. Accepts a string array or a JSON string.
+          * @default []
+         */
+        "videos": string[] | string;
+    }
     interface SallaBadge {
         /**
           * The background color of the badge
@@ -577,15 +656,15 @@ export namespace Components {
         /**
           * Accept cookies consent.
          */
-        "accept": () => Promise<HTMLElement>;
+        "accept": () => Promise<HTMLElement | undefined>;
         /**
-          * Show cookies settings bar to allow updating consent.
+          * Show cookies settings bar to allow updating consent. Always opens on the initial consent step, same as first load — the customer picks "customize" to reach the per-category panel.
          */
-        "open": () => Promise<HTMLElement>;
+        "open": () => Promise<HTMLElement | undefined>;
         /**
           * Reject cookies consent.
          */
-        "reject": () => Promise<HTMLElement>;
+        "reject": () => Promise<HTMLElement | undefined>;
     }
     interface SallaCountDown {
         /**
@@ -1129,6 +1208,11 @@ export namespace Components {
           * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
          */
         "dropValidation": boolean;
+        /**
+          * Enable the custom gallery preview instead of FilePond thumbnails.
+          * @default false
+         */
+        "enableGallery": boolean;
         /**
           * If current file has id, pass it here, to be passed back in the `removed` event
          */
@@ -1181,7 +1265,7 @@ export namespace Components {
          */
         "ignoredFiles": Array<any>;
         /**
-          * Fixed image preview height, overrides min and max preview height
+          * Fixed image preview height, overrides min and max preview height. Also sets the gallery thumbnail size when using the swiper preview (default: 75px).
           * @default null
          */
         "imagePreviewHeight": number;
@@ -1223,11 +1307,27 @@ export namespace Components {
           * @default 1
          */
         "maxFilesCount": number;
+        /**
+          * Primary: maximum number of image files (split count mode). When set with or without maxVideosCount, maxFilesCount is ignored for count limits.
+         */
+        "maxImagesCount": number;
         /**
           * The maxmimum number of files that can be uploaded in parallel
           * @default 3
          */
         "maxParallelUploads": number;
+        /**
+          * Maximum video duration in seconds
+         */
+        "maxVideoDuration": number;
+        /**
+          * Maximum size for video files only, e.g. 50MB or 750KB
+         */
+        "maxVideoFileSize": `${number}MB` | `${number}KB`;
+        /**
+          * Primary: maximum number of video files (split count mode). When set with or without maxImagesCount, maxFilesCount is ignored for count limits.
+         */
+        "maxVideosCount": number;
         /**
           * The submit request method.
           * @default 'POST'
@@ -2696,12 +2796,12 @@ export namespace Components {
          */
         "close": () => Promise<HTMLElement>;
         "open": () => Promise<unknown>;
-        "openDeleteModal": (params: any) => Promise<unknown>;
+        "openDeleteModal": (params: { feedback_id: number; }) => Promise<unknown>;
         "openEditModal": (params: { type: "product" | "store" | "shipping"; feedback_id: number; }) => Promise<void>;
         /**
           * The order id, to rate on its products & shipping
          */
-        "orderId": number;
+        "orderId"?: number;
     }
     interface SallaRatingStars {
         /**
@@ -2770,6 +2870,12 @@ export namespace Components {
          */
         "ratingId"?: number;
     }
+    interface SallaReviewOrderItem {
+        /**
+          * Product id used to match `items[].product.id` and `rating.product[].product.id`. The order itself is fetched via `page.id`.
+         */
+        "productId"?: string | number;
+    }
     interface SallaReviews {
         /**
           * Controls the visibility of a link to the reviews page.  When set to `true`, a link will be displayed allowing users to navigate to the full reviews section.
@@ -3684,6 +3790,35 @@ declare global {
         prototype: HTMLSallaAppsIconsElement;
         new (): HTMLSallaAppsIconsElement;
     };
+    /**
+     * A reusable lightbox for viewing image/video attachments in a modal with a
+     * scrollable thumbnails strip. Open it imperatively via the `open()` method.
+     * @example const viewer = document.querySelector('salla-attachment-view');
+     * viewer.attachments = [{ id: '1', url: '/a.jpg' }, { id: '2', url: '/b.mp4' }];
+     * viewer.open(0);
+     */
+    interface HTMLSallaAttachmentViewElement extends Components.SallaAttachmentView, HTMLStencilElement {
+    }
+    var HTMLSallaAttachmentViewElement: {
+        prototype: HTMLSallaAttachmentViewElement;
+        new (): HTMLSallaAttachmentViewElement;
+    };
+    /**
+     * Renders a horizontal strip of image/video attachment thumbnails with an
+     * optional "+N" overflow indicator on the last visible item. When `clickable`
+     * is true, opens `salla-attachment-view` when a thumbnail is clicked.
+     * Media can be supplied as:
+     * - `attachments` — full `{ id, url, mimeType?/type? }` objects
+     * - `images` / `videos` — URL string arrays
+     * - `rating` — object with `images` / `videos` arrays
+     * - `productRatings` + `productId` — match a product rating, else fall back to `rating`
+     */
+    interface HTMLSallaAttachmentsElement extends Components.SallaAttachments, HTMLStencilElement {
+    }
+    var HTMLSallaAttachmentsElement: {
+        prototype: HTMLSallaAttachmentsElement;
+        new (): HTMLSallaAttachmentsElement;
+    };
     interface HTMLSallaBadgeElement extends Components.SallaBadge, HTMLStencilElement {
     }
     var HTMLSallaBadgeElement: {
@@ -3976,7 +4111,13 @@ declare global {
         "added": { error: FilePondErrorDescription | null, file: FilePondFile };
         "invalidInput": any;
         "uploaded": string;
-        "removed": FilePondFile;
+        "removed": string | number;
+        "galleryUpdated": {
+    count: number;
+    imageCount?: number;
+    videoCount?: number;
+    uploading?: boolean;
+  };
     }
     interface HTMLSallaFileUploadElement extends Components.SallaFileUpload, HTMLStencilElement {
         addEventListener<K extends keyof HTMLSallaFileUploadElementEventMap>(type: K, listener: (this: HTMLSallaFileUploadElement, ev: SallaFileUploadCustomEvent<HTMLSallaFileUploadElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4699,6 +4840,12 @@ declare global {
         prototype: HTMLSallaReviewFactorsTagsElement;
         new (): HTMLSallaReviewFactorsTagsElement;
     };
+    interface HTMLSallaReviewOrderItemElement extends Components.SallaReviewOrderItem, HTMLStencilElement {
+    }
+    var HTMLSallaReviewOrderItemElement: {
+        prototype: HTMLSallaReviewOrderItemElement;
+        new (): HTMLSallaReviewOrderItemElement;
+    };
     interface HTMLSallaReviewsElement extends Components.SallaReviews, HTMLStencilElement {
     }
     var HTMLSallaReviewsElement: {
@@ -5004,6 +5151,8 @@ declare global {
         "salla-alert": HTMLSallaAlertElement;
         "salla-app-install-alert": HTMLSallaAppInstallAlertElement;
         "salla-apps-icons": HTMLSallaAppsIconsElement;
+        "salla-attachment-view": HTMLSallaAttachmentViewElement;
+        "salla-attachments": HTMLSallaAttachmentsElement;
         "salla-badge": HTMLSallaBadgeElement;
         "salla-basket-gap": HTMLSallaBasketGapElement;
         "salla-booking-field": HTMLSallaBookingFieldElement;
@@ -5102,6 +5251,7 @@ declare global {
         "salla-rating-stars": HTMLSallaRatingStarsElement;
         "salla-review-card": HTMLSallaReviewCardElement;
         "salla-review-factors-tags": HTMLSallaReviewFactorsTagsElement;
+        "salla-review-order-item": HTMLSallaReviewOrderItemElement;
         "salla-reviews": HTMLSallaReviewsElement;
         "salla-reviews-page": HTMLSallaReviewsPageElement;
         "salla-reviews-summary": HTMLSallaReviewsSummaryElement;
@@ -5284,6 +5434,72 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
+    /**
+     * A reusable lightbox for viewing image/video attachments in a modal with a
+     * scrollable thumbnails strip. Open it imperatively via the `open()` method.
+     * @example const viewer = document.querySelector('salla-attachment-view');
+     * viewer.attachments = [{ id: '1', url: '/a.jpg' }, { id: '2', url: '/b.mp4' }];
+     * viewer.open(0);
+     */
+    interface SallaAttachmentView {
+        /**
+          * Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a JSON string of the same shape (for consumers outside of JSX/Stencil).
+          * @default []
+         */
+        "attachments"?: Attachment[] | string;
+    }
+    /**
+     * Renders a horizontal strip of image/video attachment thumbnails with an
+     * optional "+N" overflow indicator on the last visible item. When `clickable`
+     * is true, opens `salla-attachment-view` when a thumbnail is clicked.
+     * Media can be supplied as:
+     * - `attachments` — full `{ id, url, mimeType?/type? }` objects
+     * - `images` / `videos` — URL string arrays
+     * - `rating` — object with `images` / `videos` arrays
+     * - `productRatings` + `productId` — match a product rating, else fall back to `rating`
+     */
+    interface SallaAttachments {
+        /**
+          * Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a JSON string of the same shape.
+          * @default []
+         */
+        "attachments"?: Attachment1[] | string;
+        /**
+          * When true, clicking a thumbnail opens the attachment lightbox.
+          * @default false
+         */
+        "clickable"?: boolean;
+        /**
+          * Image URLs to display. Accepts a string array or a JSON string.
+          * @default []
+         */
+        "images"?: string[] | string;
+        /**
+          * Maximum number of thumbnails to show before displaying a "+N" overlay on the last visible item.
+          * @default 4
+         */
+        "maxVisible"?: number;
+        /**
+          * Product id used to match an entry in `productRatings`.
+          * @default null
+         */
+        "productId"?: number | string;
+        /**
+          * Product ratings list. When set with `productId`, the matching rating's media is preferred over `rating`.
+          * @default []
+         */
+        "productRatings"?: MediaSource[] | string;
+        /**
+          * Rating-like object with `images` / `videos` URL arrays. Used when `images`/`videos` are empty, and as a fallback when resolving `productRatings`.
+          * @default null
+         */
+        "rating"?: MediaSource | string;
+        /**
+          * Video URLs to display. Accepts a string array or a JSON string.
+          * @default []
+         */
+        "videos"?: string[] | string;
+    }
     interface SallaBadge {
         /**
           * The background color of the badge
@@ -6175,6 +6391,11 @@ declare namespace LocalJSX {
           * When enabled, files are validated before they are dropped. A file is not added when it's invalid.
          */
         "dropValidation"?: boolean;
+        /**
+          * Enable the custom gallery preview instead of FilePond thumbnails.
+          * @default false
+         */
+        "enableGallery"?: boolean;
         /**
           * If current file has id, pass it here, to be passed back in the `removed` event
          */
@@ -6227,7 +6448,7 @@ declare namespace LocalJSX {
          */
         "ignoredFiles"?: Array<any>;
         /**
-          * Fixed image preview height, overrides min and max preview height
+          * Fixed image preview height, overrides min and max preview height. Also sets the gallery thumbnail size when using the swiper preview (default: 75px).
           * @default null
          */
         "imagePreviewHeight"?: number;
@@ -6269,11 +6490,27 @@ declare namespace LocalJSX {
           * @default 1
          */
         "maxFilesCount"?: number;
+        /**
+          * Primary: maximum number of image files (split count mode). When set with or without maxVideosCount, maxFilesCount is ignored for count limits.
+         */
+        "maxImagesCount"?: number;
         /**
           * The maxmimum number of files that can be uploaded in parallel
           * @default 3
          */
         "maxParallelUploads"?: number;
+        /**
+          * Maximum video duration in seconds
+         */
+        "maxVideoDuration"?: number;
+        /**
+          * Maximum size for video files only, e.g. 50MB or 750KB
+         */
+        "maxVideoFileSize"?: `${number}MB` | `${number}KB`;
+        /**
+          * Primary: maximum number of video files (split count mode). When set with or without maxImagesCount, maxFilesCount is ignored for count limits.
+         */
+        "maxVideosCount"?: number;
         /**
           * The submit request method.
           * @default 'POST'
@@ -6287,14 +6524,23 @@ declare namespace LocalJSX {
           * Event emitted when the file has been added
          */
         "onAdded"?: (event: SallaFileUploadCustomEvent<{ error: FilePondErrorDescription | null, file: FilePondFile }>) => void;
+        /**
+          * Event emitted when the gallery preview list changes (upload/remove).
+         */
+        "onGalleryUpdated"?: (event: SallaFileUploadCustomEvent<{
+    count: number;
+    imageCount?: number;
+    videoCount?: number;
+    uploading?: boolean;
+  }>) => void;
         /**
           * Event emitted when the input is invalid
          */
         "onInvalidInput"?: (event: SallaFileUploadCustomEvent<any>) => void;
         /**
-          * Event emitted when the file is about to be removed. Returns boolean value.
+          * Event emitted when the file is about to be removed. Returns the removed file id when available.
          */
-        "onRemoved"?: (event: SallaFileUploadCustomEvent<FilePondFile>) => void;
+        "onRemoved"?: (event: SallaFileUploadCustomEvent<string | number>) => void;
         /**
           * Event emitted when the file has been uploaded and link to the file has been recieved from the server. Returns string value.
          */
@@ -7688,6 +7934,12 @@ declare namespace LocalJSX {
          */
         "ratingId"?: number;
     }
+    interface SallaReviewOrderItem {
+        /**
+          * Product id used to match `items[].product.id` and `rating.product[].product.id`. The order itself is fetched via `page.id`.
+         */
+        "productId"?: string | number;
+    }
     interface SallaReviews {
         /**
           * Controls the visibility of a link to the reviews page.  When set to `true`, a link will be displayed allowing users to navigate to the full reviews section.
@@ -8293,6 +8545,8 @@ declare namespace LocalJSX {
         "salla-alert": SallaAlert;
         "salla-app-install-alert": SallaAppInstallAlert;
         "salla-apps-icons": SallaAppsIcons;
+        "salla-attachment-view": SallaAttachmentView;
+        "salla-attachments": SallaAttachments;
         "salla-badge": SallaBadge;
         "salla-basket-gap": SallaBasketGap;
         "salla-booking-field": SallaBookingField;
@@ -8391,6 +8645,7 @@ declare namespace LocalJSX {
         "salla-rating-stars": SallaRatingStars;
         "salla-review-card": SallaReviewCard;
         "salla-review-factors-tags": SallaReviewFactorsTags;
+        "salla-review-order-item": SallaReviewOrderItem;
         "salla-reviews": SallaReviews;
         "salla-reviews-page": SallaReviewsPage;
         "salla-reviews-summary": SallaReviewsSummary;
@@ -8450,6 +8705,25 @@ declare module "@stencil/core" {
             "salla-alert": LocalJSX.SallaAlert & JSXBase.HTMLAttributes<HTMLSallaAlertElement>;
             "salla-app-install-alert": LocalJSX.SallaAppInstallAlert & JSXBase.HTMLAttributes<HTMLSallaAppInstallAlertElement>;
             "salla-apps-icons": LocalJSX.SallaAppsIcons & JSXBase.HTMLAttributes<HTMLSallaAppsIconsElement>;
+            /**
+             * A reusable lightbox for viewing image/video attachments in a modal with a
+             * scrollable thumbnails strip. Open it imperatively via the `open()` method.
+             * @example const viewer = document.querySelector('salla-attachment-view');
+             * viewer.attachments = [{ id: '1', url: '/a.jpg' }, { id: '2', url: '/b.mp4' }];
+             * viewer.open(0);
+             */
+            "salla-attachment-view": LocalJSX.SallaAttachmentView & JSXBase.HTMLAttributes<HTMLSallaAttachmentViewElement>;
+            /**
+             * Renders a horizontal strip of image/video attachment thumbnails with an
+             * optional "+N" overflow indicator on the last visible item. When `clickable`
+             * is true, opens `salla-attachment-view` when a thumbnail is clicked.
+             * Media can be supplied as:
+             * - `attachments` — full `{ id, url, mimeType?/type? }` objects
+             * - `images` / `videos` — URL string arrays
+             * - `rating` — object with `images` / `videos` arrays
+             * - `productRatings` + `productId` — match a product rating, else fall back to `rating`
+             */
+            "salla-attachments": LocalJSX.SallaAttachments & JSXBase.HTMLAttributes<HTMLSallaAttachmentsElement>;
             "salla-badge": LocalJSX.SallaBadge & JSXBase.HTMLAttributes<HTMLSallaBadgeElement>;
             "salla-basket-gap": LocalJSX.SallaBasketGap & JSXBase.HTMLAttributes<HTMLSallaBasketGapElement>;
             "salla-booking-field": LocalJSX.SallaBookingField & JSXBase.HTMLAttributes<HTMLSallaBookingFieldElement>;
@@ -8651,6 +8925,7 @@ declare module "@stencil/core" {
             "salla-rating-stars": LocalJSX.SallaRatingStars & JSXBase.HTMLAttributes<HTMLSallaRatingStarsElement>;
             "salla-review-card": LocalJSX.SallaReviewCard & JSXBase.HTMLAttributes<HTMLSallaReviewCardElement>;
             "salla-review-factors-tags": LocalJSX.SallaReviewFactorsTags & JSXBase.HTMLAttributes<HTMLSallaReviewFactorsTagsElement>;
+            "salla-review-order-item": LocalJSX.SallaReviewOrderItem & JSXBase.HTMLAttributes<HTMLSallaReviewOrderItemElement>;
             "salla-reviews": LocalJSX.SallaReviews & JSXBase.HTMLAttributes<HTMLSallaReviewsElement>;
             "salla-reviews-page": LocalJSX.SallaReviewsPage & JSXBase.HTMLAttributes<HTMLSallaReviewsPageElement>;
             "salla-reviews-summary": LocalJSX.SallaReviewsSummary & JSXBase.HTMLAttributes<HTMLSallaReviewsSummaryElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-components",
-  "version": "2.14.539",
+  "version": "2.14.541",
   "license": "GPL-3.0",
   "author": "Salla Team <support@salla.dev> (https://salla.dev)",
   "bugs": {
@@ -39,7 +39,7 @@
     "start": "node src/plugins/watch-utilities.js & stencil build --dev --watch --serve --secure",
     "watch": "npm run start",
     "test": "stencil test --spec --coverage",
-    "test:ci": "SPEC_CI=true stencil test --spec",
+    "test:ci": "SPEC_CI=true stencil test --spec --maxWorkers=2",
     "test.spec": "stencil test --spec",
     "test.e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
@@ -82,9 +82,9 @@
   },
   "dependencies": {
     "@googlemaps/markerclusterer": "2.6.2",
-    "@salla.sa/applepay": "2.14.539",
-    "@salla.sa/twilight": "2.14.539",
-    "@salla.sa/twilight-tailwind-theme": "2.14.539",
+    "@salla.sa/applepay": "2.14.541",
+    "@salla.sa/twilight": "2.14.541",
+    "@salla.sa/twilight-tailwind-theme": "2.14.541",
     "@salla.sa/ui-address-autocomplete-widget": "1.2.1",
     "@salla.sa/ui-google-map-render": "1.2.1",
     "@types/node": "^20.4.8",
@@ -105,5 +105,5 @@
     "vanilla-lazyload": "^17.8.5",
     "vanilla-picker": "^2.12.2"
   },
-  "gitHead": "66c78b711bf2513f56dbe99d89bee1ded74eb943"
+  "gitHead": "fbd8b4e6413f5121d42e758be52fc730ab9a7d60"
 }