@nascentdigital/funnel-core 4.4.4

package/dist/ui/block-layout/BlockLayout.js

@@ -0,0 +1,286 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockLayout = void 0;
+const fast_xml_parser_1 = require("fast-xml-parser");
+const errors_1 = require("../../errors");
+// extension
+var BlockLayout;
+(function (BlockLayout) {
+    let List;
+    (function (List) {
+        let ItemType;
+        (function (ItemType) {
+            // values
+            ItemType.values = ['message', 'message+visual'];
+            // helper
+            function parse(value, fallback) {
+                // return if it's a match
+                if (ItemType.values.includes(value)) {
+                    return value;
+                }
+                // or fallback if we have one
+                else if (fallback) {
+                    return fallback;
+                }
+                // or throw
+                else {
+                    throw new errors_1.ArgumentError(`Invalid BlockLayout.List.ItemType "${value}"`, 'value');
+                }
+            }
+            ItemType.parse = parse;
+        })(ItemType = List.ItemType || (List.ItemType = {}));
+    })(List = BlockLayout.List || (BlockLayout.List = {}));
+    let MobileOrder;
+    (function (MobileOrder) {
+        // values
+        MobileOrder.values = ['first', 'last'];
+        // helper
+        function parse(value, fallback) {
+            // return if it's a match
+            if (MobileOrder.values.includes(value)) {
+                return value;
+            }
+            // or fallback if we have one
+            else {
+                return fallback;
+            }
+        }
+        MobileOrder.parse = parse;
+    })(MobileOrder = BlockLayout.MobileOrder || (BlockLayout.MobileOrder = {}));
+    let Size;
+    (function (Size) {
+        // values
+        Size.values = ['xs', 'sm', 'md', 'lg', 'full'];
+        // helper
+        function parse(value, fallback) {
+            // return if it's a match
+            if (Size.values.includes(value)) {
+                return value;
+            }
+            // or fallback if we have one
+            else if (fallback) {
+                return fallback;
+            }
+            // or throw
+            else {
+                throw new errors_1.ArgumentError(`Invalid BlockLayout.Size "${value}"`, 'value');
+            }
+        }
+        Size.parse = parse;
+    })(Size = BlockLayout.Size || (BlockLayout.Size = {}));
+    let Alignment;
+    (function (Alignment) {
+        // values
+        Alignment.values = ['start', 'center', 'end'];
+        // helper
+        function parse(value, fallback) {
+            // return if it's a match
+            if (Alignment.values.includes(value)) {
+                return value;
+            }
+            // or fallback if we have one
+            else if (fallback) {
+                return fallback;
+            }
+            // or throw
+            else {
+                throw new errors_1.ArgumentError(`Invalid BlockLayout.Alignment "${value}"`, 'value');
+            }
+        }
+        Alignment.parse = parse;
+    })(Alignment = BlockLayout.Alignment || (BlockLayout.Alignment = {}));
+    let TextAlignment;
+    (function (TextAlignment) {
+        // values
+        TextAlignment.values = ['left', 'center', 'right'];
+        // helper
+        function parse(value, fallback) {
+            // return if it's a match
+            if (TextAlignment.values.includes(value)) {
+                return value;
+            }
+            // or fallback if we have one
+            else if (fallback) {
+                return fallback;
+            }
+            // or throw
+            else {
+                throw new errors_1.ArgumentError(`Invalid BlockLayout.TextAlignment "${value}"`, 'value');
+            }
+        }
+        TextAlignment.parse = parse;
+    })(TextAlignment = BlockLayout.TextAlignment || (BlockLayout.TextAlignment = {}));
+    let AspectRatio;
+    (function (AspectRatio) {
+        // values
+        AspectRatio.values = ['auto', 'square', 'phone', 'tv', 'widescreen', 'cinema'];
+        // helper
+        function parse(value, fallback) {
+            // return if it's a match
+            if (AspectRatio.values.includes(value)) {
+                return value;
+            }
+            // or fallback if we have one
+            else if (fallback) {
+                return fallback;
+            }
+            // or throw
+            else {
+                throw new errors_1.ArgumentError(`Invalid BlockLayout.AspectRatio "${value}"`, 'value');
+            }
+        }
+        AspectRatio.parse = parse;
+    })(AspectRatio = BlockLayout.AspectRatio || (BlockLayout.AspectRatio = {}));
+    // parser
+    const xmlParser = new fast_xml_parser_1.XMLParser({
+        ignoreDeclaration: true,
+        ignoreAttributes: false,
+        attributeNamePrefix: '',
+        preserveOrder: true
+    });
+    function parse(xml) {
+        // parse xml (not sure if this throws on error)
+        const blockJson = xmlParser.parse(xml);
+        // walk json to create block data
+        return parseeBlock(blockJson[0]);
+    }
+    BlockLayout.parse = parse;
+})(BlockLayout || (exports.BlockLayout = BlockLayout = {}));
+// helpers
+function parseeBlock(json) {
+    // parse block
+    const block = ParsedElement.parse({ data: json, expectedTags: ['block'], expectedChildren: 1 });
+    // return block
+    return {
+        name: block.attributes['name'],
+        root: parseRoot(ParsedElement.parse({ data: block.children[0], expectedTags: ['row', 'col', 'stack'] })),
+        fullbleed: block.attributes['fullbleed'] === 'true'
+    };
+}
+function parseRoot({ tag, attributes, children }) {
+    // parse attributes
+    const itemAttributes = parseItemAttributes(attributes);
+    // create root
+    switch (tag) {
+        case 'row':
+            return Object.assign(Object.assign({ type: 'row' }, itemAttributes), { items: children.map(data => parseNestedItem(ParsedElement.parse({
+                    data,
+                    expectedTags: ParsedElement.tags.filter(t => t !== tag)
+                }))) });
+        case 'col':
+            return Object.assign(Object.assign({ type: 'column' }, itemAttributes), { items: children.map(data => parseNestedItem(ParsedElement.parse({
+                    data,
+                    expectedTags: ParsedElement.tags.filter(t => t !== tag)
+                }))) });
+        case 'stack':
+            return Object.assign(Object.assign({ type: 'stack' }, itemAttributes), { items: children.map(data => parseNestedItem(ParsedElement.parse({
+                    data,
+                    expectedTags: ParsedElement.tags.filter(t => t !== tag)
+                }))) });
+        default:
+            throw new errors_1.ArgumentError(`Invalid XML BlockLayout root encountered "${tag}" where instead of "row" or "col"`);
+    }
+}
+function parseNestedItem({ tag, attributes, children }) {
+    // parse attributes
+    const _a = parseItemAttributes(attributes), { size } = _a, itemAttributes = __rest(_a, ["size"]);
+    // create container
+    switch (tag) {
+        case 'row':
+        case 'col':
+        case 'stack':
+            return Object.assign(Object.assign({ type: tag === 'col' ? 'column' : tag }, itemAttributes), { items: children.map(data => parsePanel(Object.assign({}, ParsedElement.parse({
+                    data,
+                    expectedTags: ParsedElement.tags.filter(t => t !== 'row' && t !== 'col')
+                })))) });
+        default:
+            return parsePanel({ tag, attributes, children });
+    }
+}
+function parsePanel({ tag, attributes }) {
+    var _a;
+    const key = (_a = attributes['key']) !== null && _a !== void 0 ? _a : tag;
+    const itemAttributes = parseItemAttributes(attributes);
+    switch (tag) {
+        case 'message':
+            return Object.assign(Object.assign({ type: 'message', key }, itemAttributes), { textAlign: BlockLayout.TextAlignment.parse(attributes['textAlign'], 'left') });
+        case 'visual':
+            return Object.assign(Object.assign({ type: 'visual', key }, itemAttributes), { aspectRatio: BlockLayout.AspectRatio.parse(attributes['aspect'], 'auto') });
+        case 'list':
+            return Object.assign(Object.assign({ type: 'list', key }, itemAttributes), { itemType: BlockLayout.List.ItemType.parse(attributes['itemType'], 'message+visual') });
+        default:
+            throw new errors_1.ArgumentError(`Invalid XML BlockLayout - encountered "${tag}" where instead of BlockLayout.Panel`);
+    }
+}
+function parseItemAttributes(attributes) {
+    return {
+        mobileOrder: BlockLayout.MobileOrder.parse(attributes['mobileOrder']),
+        size: BlockLayout.Size.parse(attributes['size'], 'full'),
+        alignX: BlockLayout.Alignment.parse(attributes['alignX'], 'start'),
+        alignY: BlockLayout.Alignment.parse(attributes['alignY'], 'start')
+    };
+}
+var ParsedElement;
+(function (ParsedElement) {
+    // tags
+    ParsedElement.tags = [
+        'block', 'row', 'col', 'stack',
+        'message', 'visual', 'list'
+    ];
+    function parse({ data, expectedTags: expectedTagsRaw, expectedChildren }) {
+        var _a;
+        // normalize tags (or use all)
+        const expectedTags = expectedTagsRaw && expectedTagsRaw.length > 0
+            ? expectedTagsRaw
+            : ParsedElement.tags;
+        // look for a specific tag
+        let tag = undefined;
+        let children = undefined;
+        for (const expectedTag of expectedTags) {
+            // stop if tag matches
+            if (expectedTag in data) {
+                // capture tag / children
+                tag = expectedTag;
+                children = data[tag];
+                // stop processing
+                break;
+            }
+        }
+        // throw if there's no tag/children
+        if (!tag || !children || !Array.isArray(children)) {
+            throw new errors_1.ArgumentError(`Block XML missing expected elements: [${expectedTags.join(', ')}]`);
+        }
+        // or throw if there are children when there shouldn't be
+        else if (expectedChildren === false && children.length !== 0) {
+            throw new errors_1.ArgumentError(`Block XML found children at "${tag}" but expected none`);
+        }
+        // or throw if count doesn't match
+        else if (expectedChildren && children.length !== expectedChildren) {
+            throw new errors_1.ArgumentError(`Block XML expected ${expectedChildren} children at "${tag}" but found ${children.length}`);
+        }
+        // return parsed block
+        return {
+            tag,
+            attributes: Object.entries((_a = data[':@']) !== null && _a !== void 0 ? _a : {})
+                .reduce((attributes, [key, value]) => {
+                // map
+                attributes[key] = value;
+                // keep reducing
+                return attributes;
+            }, {}),
+            children
+        };
+    }
+    ParsedElement.parse = parse;
+})(ParsedElement || (ParsedElement = {}));

package/dist/ui/block-layout/index.d.ts

@@ -0,0 +1 @@
+export * from './BlockLayout';

package/dist/ui/block-layout/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BlockLayout"), exports);

package/dist/ui/browser/BlurHasher.d.ts

@@ -0,0 +1,13 @@
+export declare namespace BlurHasher {
+    type CreateHashOptions = {
+        sourceSize?: number;
+        blurSize?: number;
+    };
+    function createHash(target: HTMLImageElement | HTMLVideoElement, { sourceSize, blurSize }?: CreateHashOptions): string | undefined;
+    type RenderArgs = {
+        canvas: HTMLCanvasElement;
+        blurHash: string;
+        blurSize?: number;
+    };
+    function render({ canvas, blurHash, blurSize }: RenderArgs): void;
+}

package/dist/ui/browser/BlurHasher.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlurHasher = void 0;
+const BlurHash = __importStar(require("blurhash"));
+var BlurHasher;
+(function (BlurHasher) {
+    function createHash(target, { sourceSize = 64, blurSize = 4 } = {}) {
+        // determine scaled sizing
+        const targetSize = target instanceof Image
+            ? { width: target.naturalWidth, height: target.naturalHeight }
+            : { width: target.videoWidth, height: target.videoHeight };
+        const ratio = Math.min(sourceSize / targetSize.width, sourceSize / targetSize.height);
+        const scaledWidth = Math.round(targetSize.width * ratio);
+        const scaledHeight = Math.round(targetSize.height * ratio);
+        // create/configure canvas
+        const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
+        // draw on canvas (and clear it)
+        const canvasContext = canvas.getContext('2d');
+        canvasContext === null || canvasContext === void 0 ? void 0 : canvasContext.drawImage(target, 0, 0, scaledWidth, scaledHeight);
+        const imageData = canvasContext === null || canvasContext === void 0 ? void 0 : canvasContext.getImageData(0, 0, scaledWidth, scaledHeight);
+        // skip if there's no image data
+        if (!imageData) {
+            return undefined;
+        }
+        // create hash
+        return BlurHash.encode(imageData.data, scaledWidth, scaledHeight, blurSize, blurSize);
+    }
+    BlurHasher.createHash = createHash;
+    function render({ canvas, blurHash, blurSize = 32 }) {
+        // extract pixels
+        const pixels = BlurHash.decode(blurHash, blurSize, blurSize);
+        // create context (or fail)
+        const canvasContext = canvas.getContext('2d');
+        if (!canvasContext) {
+            return;
+        }
+        // render to canvas
+        const imageData = canvasContext === null || canvasContext === void 0 ? void 0 : canvasContext.createImageData(canvas.width, canvas.height);
+        imageData.data.set(pixels);
+        canvasContext.putImageData(imageData, 0, 0);
+    }
+    BlurHasher.render = render;
+})(BlurHasher || (exports.BlurHasher = BlurHasher = {}));

package/dist/ui/browser/Browser.d.ts

@@ -0,0 +1,107 @@
+import { Callback } from '../../types';
+import { Rect } from '../geometry';
+/**
+ * A collection of helper methods for manipulating client-side DOM and web browser APIs.
+ */
+export declare namespace Browser {
+    /**
+     * Returns `true` if running within the actual browser and have access to HTML DOM and window object.
+     */
+    const available: boolean;
+    /**
+     * Returns `window` object if browser is available, or `undefined` otherwise.
+     */
+    const window: (Window & typeof globalThis) | undefined;
+    function getHtml(): HTMLElement | undefined;
+    function escapeCss(css: string): string;
+    /**
+     * Provides preset HTML element selectors for various purposes.
+     */
+    namespace Element {
+        const tabbable: readonly ["a[href]:not([tabindex^=\"-\"])", "area[href]:not([tabindex^=\"-\"])", "input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])", "input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])", "select:not([disabled]):not([tabindex^=\"-\"])", "textarea:not([disabled]):not([tabindex^=\"-\"])", "button:not([disabled]):not([tabindex^=\"-\"])", "iframe:not([tabindex^=\"-\"])", "audio[controls]:not([tabindex^=\"-\"])", "video[controls]:not([tabindex^=\"-\"])", "[contenteditable]:not([tabindex^=\"-\"])", "[tabindex]:not([tabindex^=\"-\"])"];
+    }
+    /**
+     * Scrolls to top of windows.
+     */
+    function scrollToTop(): void;
+    /**
+     * Locks top-level browser window scrolling.
+     *
+     * @param enabled disables scrolling if `true`, restores it otherwise
+     */
+    function setScrollEnabled(enabled: boolean): void;
+    type ElementTarget = HTMLElement | string;
+    type ElementsTarget = ElementTarget | ReadonlyArray<HTMLElement> | ReadonlyArray<string>;
+    /**
+     * Resolves the actual HTML elements for the given selectors (pass-thru if inputs are already resolved)
+     *
+     * @param targets the selector or selectors to use - if actual `Element` instances are passed in they are returned as is
+     * @param container the root element where the search should be anchored, otherwise the `window.document` is used
+     */
+    function getElements(targets: ElementsTarget, container?: Document | HTMLElement): HTMLElement[];
+    /**
+     * Resolves an actual HTML element for a given selector (pass-thru if input is already resolved)
+     *
+     * @param target the selector to use - if an actual `Element` instance is passed, it is returned directly
+     * @param container the root element where the search should be anchored, otherwise the `window.document` is used
+     */
+    function getElement(target: ElementTarget | undefined, container?: Document | HTMLElement): HTMLElement | undefined;
+    type GetElementRectOptions = {
+        absolute?: boolean;
+    };
+    function getElementRect(element: Rect | Element | string | null | undefined, { absolute }?: GetElementRectOptions): Rect | undefined;
+    /**
+     * A helper method used to select a set of HTML DOM elements and make temporary modifications that can be later
+     * rolled back via the returned `restore()` method.
+     *
+     * @param container an optional container used to scope the target selectors, otherwise the `window.document` is used
+     * @param targets a set of elements or selectors that are the scope of modification
+     * @param restoreKey a key that if provided will persist the restore snapshot into the DOM element via a `dataset` tag
+     * @param onModify the callback where modification should be made
+     */
+    function modifyElements({ container, targets, restoreKey, onModify }: modifyElements.Args): modifyElements.Restore;
+    namespace modifyElements {
+        type Args = {
+            container?: HTMLElement;
+            targets: ElementsTarget;
+            restoreKey?: string;
+            onModify: Callback<ElementModifier[]>;
+        };
+        type Restore = Callback.Void;
+    }
+    /**
+     * Locks all interactive browser elements from tab focus that are outside of the `target` scope (if provided).
+     * @param target The target (and its children) that should not be locked.
+     * @return An `unlock` callback that restores tab focus for the previously locked elements.
+     */
+    function lockFocus(target?: ElementTarget): Callback.Void;
+    /**
+     * A proxy used to manipulate an HTML DOM element.  This class provides a way to rollback changes and even
+     * persist the rollback snapshot directly in the DOM itself (via the `restoreKey`).
+     */
+    class ElementModifier {
+        readonly element: HTMLElement;
+        private readonly _restoreKey?;
+        private readonly _originalAttributes;
+        constructor(element: HTMLElement, _restoreKey?: string | undefined);
+        /**
+         * Sets an attribute on the underlying HTMLElement.
+         * @param name the name of the attribute being set
+         * @param value the attribute value
+         */
+        setAttribute(name: string, value: string): void;
+        /**
+         * Removes an attribute from the underlying HTMLElement.
+         * @param name the name of the attribute being removed
+         */
+        deleteAttribute(name: string): void;
+        /**
+         * Saves a snapshot of the pre-modified instance to the `Element`, but *only if* the `restoreKey` was specified.
+         */
+        snapshot(): void;
+        /**
+         * Restores the underlying element to its pre-modification state, clearing any snapshot data.
+         */
+        restore(): void;
+    }
+}