@financial-times/cp-content-pipeline-ui 13.3.2 → 13.4.0

package/CHANGELOG.md

@@ -574,6 +574,13 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [13.4.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v13.3.2...cp-content-pipeline-ui-v13.4.0) (2026-09-17)
+
+
+### Features
+
+* horizontal scrolling in ft-app ([6e31e9a](https://github.com/Financial-Times/cp-content-pipeline/commit/6e31e9aea847009cb426b9b83828145fd1d0bba1))
+
 ## [13.3.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v13.3.1...cp-content-pipeline-ui-v13.3.2) (2026-09-15)
 
 

package/lib/components/content-tree/CustomCodeComponent/client/index.d.ts

@@ -10,7 +10,11 @@ declare class CustomCodeComponentClient {
      * Track the mount of a custom code component
      */
     tracking: CustomCodeComponentTracker;
-    constructor(el: Element);
+    ftAppSwipeGestures: boolean | undefined;
+    element: Element;
+    constructor(el: Element, ftAppSwipeGestures?: boolean);
+    private cccTouched;
+    private cccReleased;
     static init(rootEl?: Element): CustomCodeComponentClient[] | void;
     static destroy(components: CustomCodeComponentClient[]): void;
 }

package/lib/components/content-tree/CustomCodeComponent/client/index.js

@@ -12,7 +12,11 @@ class CustomCodeComponentClient {
      * Track the mount of a custom code component
      */
     tracking;
-    constructor(el) {
+    ftAppSwipeGestures;
+    element;
+    constructor(el, ftAppSwipeGestures) {
+        this.element = el;
+        this.ftAppSwipeGestures = ftAppSwipeGestures;
         const trackingData = {
             component: {
                 id: el.getAttribute('id') ?? '',
@@ -21,14 +25,45 @@ class CustomCodeComponentClient {
             },
         };
         this.tracking = new tracking_1.CustomCodeComponentTracker(el, trackingData);
+        // ft-app only: ftAppSwipeGestures is false by default,
+        // meaning horizontal swipe gestures navigate to adjacent articles in the swipe flow
+        // if set to true, the ccc will signal to ft-app that the component swipe gestures should be given precendence.
+        // useful for horizontal scrolling of elements such as carousels
+        if (this.ftAppSwipeGestures) {
+            el.addEventListener('pointerdown', this.cccTouched);
+            el.addEventListener('pointerup', this.cccReleased);
+            el.addEventListener('pointercancel', this.cccReleased);
+        }
     }
+    cccTouched = () => {
+        if (!window.ftmob_scrolling) {
+            window.ftmob_scrolling = this;
+        }
+    };
+    cccReleased = () => {
+        if (window.ftmob_scrolling === this) {
+            window.ftmob_scrolling = false;
+        }
+    };
     static init(rootEl) {
         const root = rootEl instanceof Element ? rootEl : document;
-        return Array.from(root.querySelectorAll('custom-code-component:not([data-initialised])')).map((el) => new CustomCodeComponentClient(el));
+        return Array.from(root.querySelectorAll('custom-code-component:not([data-initialised])')).map((el) => {
+            const ftAppSwipeGestures = el.getAttribute('enable-ft-app-swipe-gestures') === 'true';
+            const client = new CustomCodeComponentClient(el, ftAppSwipeGestures);
+            return client;
+        });
     }
     static destroy(components) {
         components.forEach((component) => {
             component.tracking.destroy();
+            if (component.ftAppSwipeGestures) {
+                component.element.removeEventListener('pointerdown', component.cccTouched);
+                component.element.removeEventListener('pointerup', component.cccReleased);
+                component.element.removeEventListener('pointercancel', component.cccReleased);
+                if (window.ftmob_scrolling === component) {
+                    window.ftmob_scrolling = false;
+                }
+            }
         });
     }
 }

package/lib/components/content-tree/CustomCodeComponent/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/index.ts"],"names":[],"mappings":";;AAAA,yCAAuD;AAEvD;;;;;GAKG;AACH,MAAM,yBAAyB;IAC7B;;OAEG;IACH,QAAQ,CAA4B;IAEpC,YAAY,EAAW;QACrB,MAAM,YAAY,GAAG;YACnB,SAAS,EAAE;gBACT,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;gBACnC,IAAI,EAAE,uBAAuB;aAC9B;SACF,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,qCAA0B,CAC5C,EAAiB,EACjB,YAAY,CACb,CAAA;IACH,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,MAAgB;QAC1B,MAAM,IAAI,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;QAC1D,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAC,+CAA+C,CAAC,CACvE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAA;IAClD,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,UAAuC;QACpD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;QAC9B,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kBAAe,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/index.ts"],"names":[],"mappings":";;AAAA,yCAAuD;AAEvD;;;;;GAKG;AACH,MAAM,yBAAyB;IAC7B;;OAEG;IACH,QAAQ,CAA4B;IACpC,kBAAkB,CAAqB;IACvC,OAAO,CAAS;IAEhB,YAAY,EAAW,EAAE,kBAA4B;QACnD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;QACjB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;QAC5C,MAAM,YAAY,GAAG;YACnB,SAAS,EAAE;gBACT,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;gBACnC,IAAI,EAAE,uBAAuB;aAC9B;SACF,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,qCAA0B,CAC5C,EAAiB,EACjB,YAAY,CACb,CAAA;QAED,uDAAuD;QACvD,oFAAoF;QACpF,+GAA+G;QAC/G,gEAAgE;QAChE,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;YACnD,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;YAClD,EAAE,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;IAEO,UAAU,GAAG,GAAS,EAAE;QAC9B,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC;YAC5B,MAAM,CAAC,eAAe,GAAG,IAAI,CAAA;QAC/B,CAAC;IACH,CAAC,CAAA;IAEO,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,MAAM,CAAC,eAAe,KAAK,IAAI,EAAE,CAAC;YACpC,MAAM,CAAC,eAAe,GAAG,KAAK,CAAA;QAChC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,CAAC,IAAI,CAAC,MAAgB;QAC1B,MAAM,IAAI,GAAG,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAA;QAC1D,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAC,+CAA+C,CAAC,CACvE,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;YACX,MAAM,kBAAkB,GACtB,EAAE,CAAC,YAAY,CAAC,8BAA8B,CAAC,KAAK,MAAM,CAAA;YAC5D,MAAM,MAAM,GAAG,IAAI,yBAAyB,CAAC,EAAE,EAAE,kBAAkB,CAAC,CAAA;YACpE,OAAO,MAAM,CAAA;QACf,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,UAAuC;QACpD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;YAC/B,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;YAC5B,IAAI,SAAS,CAAC,kBAAkB,EAAE,CAAC;gBACjC,SAAS,CAAC,OAAO,CAAC,mBAAmB,CACnC,aAAa,EACb,SAAS,CAAC,UAAU,CACrB,CAAA;gBACD,SAAS,CAAC,OAAO,CAAC,mBAAmB,CACnC,WAAW,EACX,SAAS,CAAC,WAAW,CACtB,CAAA;gBACD,SAAS,CAAC,OAAO,CAAC,mBAAmB,CACnC,eAAe,EACf,SAAS,CAAC,WAAW,CACtB,CAAA;gBACD,IAAI,MAAM,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;oBACzC,MAAM,CAAC,eAAe,GAAG,KAAK,CAAA;gBAChC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AAED,kBAAe,yBAAyB,CAAA"}

package/lib/components/content-tree/CustomCodeComponent/client/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/content-tree/CustomCodeComponent/client/index.spec.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tracking_1 = require("./tracking");
+const index_1 = __importDefault(require("./index"));
+jest.mock('./tracking', () => ({
+    CustomCodeComponentTracker: jest.fn(),
+}));
+describe('CustomCodeComponentClient', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should initialize correctly', () => {
+        const el = document.createElement('custom-code-component');
+        el.setAttribute('id', 'test-id');
+        el.setAttribute('path', 'test-path');
+        document.body.appendChild(el);
+        const clients = index_1.default.init();
+        expect(clients).toHaveLength(1);
+        const client = clients[0];
+        expect(client).toBeInstanceOf(index_1.default);
+        expect(tracking_1.CustomCodeComponentTracker).toHaveBeenCalledWith(el, {
+            component: {
+                id: 'test-id',
+                name: 'test-path',
+                type: 'custom-code-component',
+            },
+        });
+    });
+    it('should return an empty array if no elements are present', () => {
+        const clients = index_1.default.init();
+        expect(clients).toHaveLength(0);
+    });
+    it('should handle multiple elements correctly', () => {
+        const el1 = document.createElement('custom-code-component');
+        el1.setAttribute('id', 'test-id-1');
+        el1.setAttribute('path', 'test-path-1');
+        document.body.appendChild(el1);
+        const el2 = document.createElement('custom-code-component');
+        el2.setAttribute('id', 'test-id-2');
+        el2.setAttribute('path', 'test-path-2');
+        document.body.appendChild(el2);
+        const clients = index_1.default.init();
+        expect(clients).toHaveLength(2);
+        expect(tracking_1.CustomCodeComponentTracker).toHaveBeenCalledWith(el1, {
+            component: {
+                id: 'test-id-1',
+                name: 'test-path-1',
+                type: 'custom-code-component',
+            },
+        });
+        expect(tracking_1.CustomCodeComponentTracker).toHaveBeenCalledWith(el2, {
+            component: {
+                id: 'test-id-2',
+                name: 'test-path-2',
+                type: 'custom-code-component',
+            },
+        });
+    });
+    it('should initialise with ft app scrolling if the element has the appropriate attribute', () => {
+        const el = document.createElement('custom-code-component');
+        el.setAttribute('id', 'test-id');
+        el.setAttribute('path', 'test-path');
+        el.setAttribute('enable-ft-app-swipe-gestures', 'true');
+        document.body.appendChild(el);
+        const client = index_1.default.init()[0];
+        expect(client?.ftAppSwipeGestures).toBe(true);
+    });
+    it('should not initialize with ft app scrolling if the attribute is not set to true', () => {
+        const el = document.createElement('custom-code-component');
+        el.setAttribute('id', 'test-id');
+        el.setAttribute('path', 'test-path');
+        el.setAttribute('enable-ft-app-swipe-gestures', 'false');
+        document.body.appendChild(el);
+        const client = index_1.default.init()[0];
+        expect(client?.ftAppSwipeGestures).toBe(false);
+    });
+    it('should not initialize with ft app scrolling if the attribute is missing', () => {
+        const el = document.createElement('custom-code-component');
+        el.setAttribute('id', 'test-id');
+        el.setAttribute('path', 'test-path');
+        document.body.appendChild(el);
+        const client = index_1.default.init()[0];
+        expect(client?.ftAppSwipeGestures).toBe(false);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/lib/components/content-tree/CustomCodeComponent/client/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../../src/components/content-tree/CustomCodeComponent/client/index.spec.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "13.3.2",
+  "version": "13.4.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/content-tree/CustomCodeComponent/client/index.spec.ts

@@ -0,0 +1,96 @@
+import { CustomCodeComponentTracker } from './tracking'
+import CustomCodeComponentClient from './index'
+
+jest.mock('./tracking', () => ({
+  CustomCodeComponentTracker: jest.fn(),
+}))
+
+describe('CustomCodeComponentClient', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+  })
+  it('should initialize correctly', () => {
+    const el = document.createElement('custom-code-component')
+    el.setAttribute('id', 'test-id')
+    el.setAttribute('path', 'test-path')
+    document.body.appendChild(el)
+
+    const clients = CustomCodeComponentClient.init()
+    expect(clients).toHaveLength(1)
+    const client = clients![0]
+    expect(client).toBeInstanceOf(CustomCodeComponentClient)
+    expect(CustomCodeComponentTracker).toHaveBeenCalledWith(el, {
+      component: {
+        id: 'test-id',
+        name: 'test-path',
+        type: 'custom-code-component',
+      },
+    })
+  })
+
+  it('should return an empty array if no elements are present', () => {
+    const clients = CustomCodeComponentClient.init()
+    expect(clients).toHaveLength(0)
+  })
+
+  it('should handle multiple elements correctly', () => {
+    const el1 = document.createElement('custom-code-component')
+    el1.setAttribute('id', 'test-id-1')
+    el1.setAttribute('path', 'test-path-1')
+    document.body.appendChild(el1)
+
+    const el2 = document.createElement('custom-code-component')
+    el2.setAttribute('id', 'test-id-2')
+    el2.setAttribute('path', 'test-path-2')
+    document.body.appendChild(el2)
+
+    const clients = CustomCodeComponentClient.init()
+    expect(clients).toHaveLength(2)
+    expect(CustomCodeComponentTracker).toHaveBeenCalledWith(el1, {
+      component: {
+        id: 'test-id-1',
+        name: 'test-path-1',
+        type: 'custom-code-component',
+      },
+    })
+    expect(CustomCodeComponentTracker).toHaveBeenCalledWith(el2, {
+      component: {
+        id: 'test-id-2',
+        name: 'test-path-2',
+        type: 'custom-code-component',
+      },
+    })
+  })
+
+  it('should initialise with ft app scrolling if the element has the appropriate attribute', () => {
+    const el = document.createElement('custom-code-component')
+    el.setAttribute('id', 'test-id')
+    el.setAttribute('path', 'test-path')
+    el.setAttribute('enable-ft-app-swipe-gestures', 'true')
+    document.body.appendChild(el)
+
+    const client = CustomCodeComponentClient.init()![0]
+    expect(client?.ftAppSwipeGestures).toBe(true)
+  })
+
+  it('should not initialize with ft app scrolling if the attribute is not set to true', () => {
+    const el = document.createElement('custom-code-component')
+    el.setAttribute('id', 'test-id')
+    el.setAttribute('path', 'test-path')
+    el.setAttribute('enable-ft-app-swipe-gestures', 'false')
+    document.body.appendChild(el)
+
+    const client = CustomCodeComponentClient.init()![0]
+    expect(client?.ftAppSwipeGestures).toBe(false)
+  })
+
+  it('should not initialize with ft app scrolling if the attribute is missing', () => {
+    const el = document.createElement('custom-code-component')
+    el.setAttribute('id', 'test-id')
+    el.setAttribute('path', 'test-path')
+    document.body.appendChild(el)
+
+    const client = CustomCodeComponentClient.init()![0]
+    expect(client?.ftAppSwipeGestures).toBe(false)
+  })
+})

package/src/components/content-tree/CustomCodeComponent/client/index.ts

@@ -11,8 +11,12 @@ class CustomCodeComponentClient {
    * Track the mount of a custom code component
    */
   tracking: CustomCodeComponentTracker
+  ftAppSwipeGestures: boolean | undefined
+  element: Element
 
-  constructor(el: Element) {
+  constructor(el: Element, ftAppSwipeGestures?: boolean) {
+    this.element = el
+    this.ftAppSwipeGestures = ftAppSwipeGestures
     const trackingData = {
       component: {
         id: el.getAttribute('id') ?? '',
@@ -24,18 +28,62 @@ class CustomCodeComponentClient {
       el as HTMLElement,
       trackingData
     )
+
+    // ft-app only: ftAppSwipeGestures is false by default,
+    // meaning horizontal swipe gestures navigate to adjacent articles in the swipe flow
+    // if set to true, the ccc will signal to ft-app that the component swipe gestures should be given precendence.
+    // useful for horizontal scrolling of elements such as carousels
+    if (this.ftAppSwipeGestures) {
+      el.addEventListener('pointerdown', this.cccTouched)
+      el.addEventListener('pointerup', this.cccReleased)
+      el.addEventListener('pointercancel', this.cccReleased)
+    }
+  }
+
+  private cccTouched = (): void => {
+    if (!window.ftmob_scrolling) {
+      window.ftmob_scrolling = this
+    }
+  }
+
+  private cccReleased = (): void => {
+    if (window.ftmob_scrolling === this) {
+      window.ftmob_scrolling = false
+    }
   }
 
   static init(rootEl?: Element): CustomCodeComponentClient[] | void {
     const root = rootEl instanceof Element ? rootEl : document
     return Array.from(
       root.querySelectorAll('custom-code-component:not([data-initialised])')
-    ).map((el) => new CustomCodeComponentClient(el))
+    ).map((el) => {
+      const ftAppSwipeGestures =
+        el.getAttribute('enable-ft-app-swipe-gestures') === 'true'
+      const client = new CustomCodeComponentClient(el, ftAppSwipeGestures)
+      return client
+    })
   }
 
   static destroy(components: CustomCodeComponentClient[]): void {
     components.forEach((component) => {
       component.tracking.destroy()
+      if (component.ftAppSwipeGestures) {
+        component.element.removeEventListener(
+          'pointerdown',
+          component.cccTouched
+        )
+        component.element.removeEventListener(
+          'pointerup',
+          component.cccReleased
+        )
+        component.element.removeEventListener(
+          'pointercancel',
+          component.cccReleased
+        )
+        if (window.ftmob_scrolling === component) {
+          window.ftmob_scrolling = false
+        }
+      }
     })
   }
 }

package/src/types/window.d.ts

@@ -1,9 +1,10 @@
 import type CarouselClient from '../components/content-tree/Carousel/client'
+import type CustomCodeComponentClient from '../components/content-tree/CustomCodeComponent/client'
 
 export {}
 
 declare global {
   interface Window {
-    ftmob_scrolling?: CarouselClient | false
+    ftmob_scrolling?: CarouselClient | CustomCodeComponentClient | false
   }
 }