@salla.sa/twilight-components 2.14.540 → 2.14.541

package/dist/collection/components/salla-attachment-view/salla-attachment-view.css

@@ -0,0 +1,164 @@
+/*!twlt*/.s-attachment-view-modal-host .s-modal-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  min-height: 2.75rem;
+}
+.s-attachment-view-modal-host .s-modal-close {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.s-attachment-view-modal-host .s-modal-header-inner {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 0;
+  text-align: start;
+  padding-inline: 2.75rem;
+}
+@media (min-width: 768px) {
+  .s-attachment-view-modal-host .s-modal-header-inner {
+    justify-content: flex-start;
+    padding: 0 1.5rem !important;
+    margin-top: 0.5rem;
+  }
+}
+.s-attachment-view-modal-host .s-modal-header-content,
+.s-attachment-view-modal-host .s-modal-title {
+  text-align: center !important;
+}
+@media (min-width: 768px) {
+  .s-attachment-view-modal-host .s-modal-header-content,
+  .s-attachment-view-modal-host .s-modal-title {
+    text-align: start !important;
+  }
+}
+.s-attachment-view-modal-host .s-modal-title {
+  margin-bottom: 0;
+}
+@media (min-width: 768px) {
+  .s-attachment-view-modal-host .s-modal-title {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.s-attachment-view-modal {
+  --s-attachment-view-thumb-size: 2.5rem;
+  --s-attachment-view-thumb-gap: 10px;
+  width: 100%;
+  padding: 0.75rem;
+}
+.s-attachment-view-modal .s-slider-block__title-nav button {
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+.s-attachment-view-gallery {
+  width: 100%;
+}
+.s-attachment-view-thumbs {
+  display: flex;
+  gap: var(--s-attachment-view-thumb-gap);
+  margin-top: 0.75rem;
+  padding-bottom: 0.25rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.s-attachment-view-thumb-btn {
+  flex: 0 0 auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: opacity 0.2s ease;
+}
+.s-attachment-view-thumb-btn:not(.is-active) {
+  opacity: 0.75;
+}
+.s-attachment-view-thumb-btn:hover {
+  opacity: 1;
+}
+.s-attachment-view-thumb-btn.is-active .s-attachment-view-thumb {
+  box-shadow: 0 0 0 2px var(--color-primary, #004d5a);
+}
+.s-attachment-view-slider .s-slider-container .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.s-attachment-view-slider .s-slider-container .s-attachment-view-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.s-attachment-view-slider .s-slider-container img {
+  width: 100%;
+  max-width: 100%;
+  height: min(50vh, 320px);
+  object-fit: contain;
+  margin-inline: auto;
+}
+.s-attachment-view-slider video.s-attachment-view-video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: min(50vh, 320px);
+  object-fit: contain;
+  margin-inline: auto;
+  background-color: #000;
+}
+.s-attachment-view-thumb {
+  width: var(--s-attachment-view-thumb-size);
+  height: var(--s-attachment-view-thumb-size);
+  overflow: hidden;
+  border-radius: 0.25rem;
+}
+.s-attachment-view-thumb img,
+.s-attachment-view-thumb video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.s-attachment-view-thumb.is-video {
+  position: relative;
+}
+.s-attachment-view-thumb-play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+}
+.s-attachment-view-thumb-play svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  fill: #fff;
+  opacity: 0.95;
+}
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.s-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+.s-scrollbar::-webkit-scrollbar-track {
+  background-color: #eee;
+}
+.s-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-primary);
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}

package/dist/collection/components/salla-attachment-view/salla-attachment-view.js

@@ -0,0 +1,250 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { Host, h } from "@stencil/core";
+import { isVideoMimeType } from "../salla-file-upload/upload-limits";
+import PlayIcon from "../../assets/svg/play-circle.svg";
+/**
+ * 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);
+ */
+export class SallaAttachmentView {
+    constructor() {
+        /**
+         * Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a
+         * JSON string of the same shape (for consumers outside of JSX/Stencil).
+         */
+        this.attachments = [];
+        this.isOpen = false;
+        this.activeIndex = 0;
+        this.handleKeyDown = (event) => {
+            if (!this.isOpen)
+                return;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+                return;
+            }
+            const items = this.getAttachments();
+            if (items.length <= 1)
+                return;
+            const isRtl = document.documentElement.dir === 'rtl';
+            const goPrevious = () => this.goToSlide(this.activeIndex - 1);
+            const goNext = () => this.goToSlide(this.activeIndex + 1);
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                (isRtl ? goNext : goPrevious)();
+                return;
+            }
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                (isRtl ? goPrevious : goNext)();
+            }
+        };
+        this.handleModalVisibilityChanged = (open) => {
+            this.isOpen = open;
+            if (open) {
+                window.addEventListener('keydown', this.handleKeyDown);
+                this.scrollActiveThumbIntoView();
+                return;
+            }
+            window.removeEventListener('keydown', this.handleKeyDown);
+            this.pauseVideos();
+        };
+        this.handleSlideChange = (event) => {
+            const swiper = event.detail;
+            if (swiper?.activeIndex == null) {
+                return;
+            }
+            this.activeIndex = swiper.activeIndex;
+            this.pauseVideos();
+            this.scrollActiveThumbIntoView();
+        };
+    }
+    componentWillLoad() {
+        Salla.lang.onLoaded(() => {
+            Salla.lang.addBulk({
+                'blocks.comments.customer_feedback': { ar: 'مراجعة العميل', en: 'Customer feedback' },
+            });
+        });
+    }
+    /**
+     * Open the viewer at the given attachment index.
+     * @param index - Index of the attachment to show first (defaults to 0).
+     */
+    async open(index = 0) {
+        const items = this.getAttachments();
+        if (!items.length)
+            return;
+        this.activeIndex = Math.min(Math.max(index, 0), items.length - 1);
+        this.isOpen = true;
+        await this.modal?.open();
+        this.scrollActiveThumbIntoView();
+    }
+    /** Close the viewer. */
+    async close() {
+        this.modal?.close();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keydown', this.handleKeyDown);
+    }
+    getAttachments() {
+        if (typeof this.attachments !== 'string') {
+            return Array.isArray(this.attachments) ? this.attachments : [];
+        }
+        try {
+            const parsed = JSON.parse(this.attachments);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    isVideo(file) {
+        return isVideoMimeType(file.mimeType, file.url);
+    }
+    pauseVideos() {
+        this.host.querySelectorAll('video.s-attachment-view-video').forEach(element => {
+            const video = element;
+            video.pause();
+            video.currentTime = 0;
+        });
+    }
+    goToSlide(index) {
+        const items = this.getAttachments();
+        const nextIndex = Math.min(Math.max(index, 0), items.length - 1);
+        if (nextIndex === this.activeIndex) {
+            return;
+        }
+        this.activeIndex = nextIndex;
+        this.sliderEl?.slideTo(nextIndex);
+        this.pauseVideos();
+        this.scrollActiveThumbIntoView();
+    }
+    scrollActiveThumbIntoView() {
+        requestAnimationFrame(() => {
+            const activeThumb = this.thumbsScroller?.querySelector('.is-active');
+            activeThumb?.scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' });
+        });
+    }
+    renderSlide(file) {
+        if (this.isVideo(file)) {
+            return (h("video", { class: "s-attachment-view-video", src: file.url, controls: true, playsInline: true, preload: "metadata" }));
+        }
+        return h("img", { src: file.url, alt: "" });
+    }
+    renderThumb(file) {
+        if (this.isVideo(file)) {
+            return (h("div", { class: "s-attachment-view-thumb is-video" }, h("video", { src: file.url, muted: true, playsInline: true, preload: "metadata" }), h("span", { class: "s-attachment-view-thumb-play", innerHTML: PlayIcon })));
+        }
+        return (h("div", { class: "s-attachment-view-thumb" }, h("img", { src: file.url, alt: "" })));
+    }
+    render() {
+        const items = this.getAttachments();
+        if (!items.length)
+            return null;
+        const itemsKey = items.map(file => file.id).join('-');
+        return (h(Host, null, h("salla-modal", { ref: el => (this.modal = el), class: "s-attachment-view-modal-host", width: "md", noPadding: true, onModalVisibilityChanged: event => this.handleModalVisibilityChanged(!!event.detail) }, h("div", { class: "s-attachment-view-modal" }, this.isOpen && (h("div", { class: "s-attachment-view-gallery" }, h("salla-slider", { ref: el => (this.sliderEl = el), class: "s-attachment-view-slider", key: `attachment-${itemsKey}`, id: `${this.host.id || 'attachment-view'}-preview`, autoHeight: true, showControls: items.length > 1, sliderConfig: JSON.stringify({ initialSlide: this.activeIndex }), onSlideChange: event => this.handleSlideChange(event) }, h("div", { slot: "items" }, items.map(file => (h("div", { class: "s-attachment-view-slide", key: file.id }, this.renderSlide(file)))))), items.length > 1 && (h("div", { class: "s-attachment-view-thumbs s-scrollbar", ref: el => (this.thumbsScroller = el) }, items.map((file, index) => (h("button", { type: "button", class: {
+                's-attachment-view-thumb-btn': true,
+                'is-active': this.activeIndex === index,
+            }, key: file.id, "aria-label": `${index + 1}`, "aria-current": this.activeIndex === index ? 'true' : undefined, onClick: () => this.goToSlide(index) }, this.renderThumb(file))))))))))));
+    }
+    static get is() { return "salla-attachment-view"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["salla-attachment-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["salla-attachment-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "attachments": {
+                "type": "string",
+                "attribute": "attachments",
+                "mutable": false,
+                "complexType": {
+                    "original": "Attachment[] | string",
+                    "resolved": "Attachment[] | string",
+                    "references": {
+                        "Attachment": {
+                            "location": "local",
+                            "path": "/home/runner/_work/twilight/twilight/packages/twilight-components/src/components/salla-attachment-view/salla-attachment-view.tsx",
+                            "id": "src/components/salla-attachment-view/salla-attachment-view.tsx::Attachment"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attachments to display. Accepts an array of `{ id, url, mimeType? }` or a\nJSON string of the same shape (for consumers outside of JSX/Stencil)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "activeIndex": {}
+        };
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "(index?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "- Index of the attachment to show first (defaults to 0)."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Open the viewer at the given attachment index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index - Index of the attachment to show first (defaults to 0)."
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Close the viewer.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-attachments/salla-attachments.css

@@ -0,0 +1,69 @@
+/*!twlt*/:host {
+  display: block;
+}
+
+.s-attachments {
+  display: flex;
+  max-width: 100%;
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  gap: 0.5rem;
+}
+
+.s-attachments-image-thumb,
+.s-attachments-video-thumb {
+  position: relative;
+  width: 65px;
+  height: 65px;
+  flex-shrink: 0;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.s-attachments.is-clickable .s-attachments-image-thumb,
+.s-attachments.is-clickable .s-attachments-video-thumb {
+  cursor: pointer;
+}
+
+.s-attachments-image-thumb img,
+.s-attachments-video-thumb video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.s-attachments-more-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 700;
+  pointer-events: none;
+}
+
+.s-attachments-video-thumb-play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+}
+.s-attachments-video-thumb-play svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: #fff;
+  opacity: 0.95;
+}
+.visible {
+  visibility: visible;
+}
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}