@telia-ace/widget-core 1.0.0

package/lib-esm/component-platform/extend-component.js

@@ -0,0 +1,53 @@
+import { uuid } from '@telia-ace/widget-utilities';
+import { ComponentNodeController } from './component-controller';
+import { ComponentPlatform } from './component-platform';
+import { ComponentQuery } from './component-query';
+export var extendComponent = function (container, typeOrQuery, handler, ns, options) {
+    if (ns === void 0) { ns = uuid(); }
+    if (options === void 0) { options = {}; }
+    return container.getAsync('components').then(function (components) {
+        var target;
+        if (typeof typeOrQuery === 'string') {
+            var collection = new ComponentQuery(components);
+            collection.ofType(typeOrQuery);
+            target = collection;
+        }
+        else {
+            target = typeOrQuery;
+        }
+        var managedInstances = {};
+        var getOrCreateController = function (node) {
+            var existing = managedInstances[node.id];
+            if (existing) {
+                return Promise.resolve(existing.controller);
+            }
+            return ComponentPlatform.getInstance(container).then(function (platform) {
+                return new ComponentNodeController(platform, node, ns);
+            });
+        };
+        components.events.subscribe('components:node-enter', function (event, _a) {
+            var node = _a.node;
+            if (target.match(node)) {
+                getOrCreateController(node).then(function (controller) {
+                    Promise.resolve(handler(controller)).then(function (dispose) {
+                        managedInstances[node.id] = {
+                            dispose: dispose,
+                            controller: controller,
+                        };
+                    });
+                });
+            }
+        });
+        components.events.subscribe('components:node-exit', function (event, _a) {
+            var node = _a.node;
+            var instance = managedInstances[node.id];
+            if (instance) {
+                instance.dispose && instance.dispose();
+                if (!options.reuseController) {
+                    instance.controller.dispose();
+                    delete managedInstances[node.id];
+                }
+            }
+        });
+    });
+};

package/lib-esm/component-platform/index.d.ts

@@ -0,0 +1,16 @@
+export { ActionsController } from './actions-controller';
+export type { WatchActionDelegate } from './actions-controller';
+export type { ChangesetProvider } from './changeset-provider';
+export { AbstractComponentController, ComponentNodeController } from './component-controller';
+export { ComponentNode } from './component-node';
+export type { ChangesetOptions, ComponentNodeAttributes, ComponentNodeContext, ComponentNodeLayout, ComponentNodeProperties, ComponentNodeSettings, Size, } from './component-node';
+export { ComponentPlatform } from './component-platform';
+export type { SwitchMap } from './component-platform';
+export { ComponentQuery } from './component-query';
+export type { ComponentQueryRule } from './component-query';
+export { createComponentModel } from './create-component-model';
+export { asDescriptor } from './descriptor';
+export type { ComponentDescriptor } from './descriptor';
+export { extendComponent } from './extend-component';
+export type { ExtendComponentHandler, ExtendComponentOptions } from './extend-component';
+export { findComponent, findVisibleComponents, traverseComponents } from './queries';

package/lib-esm/component-platform/index.js

@@ -0,0 +1,9 @@
+export { ActionsController } from './actions-controller';
+export { AbstractComponentController, ComponentNodeController } from './component-controller';
+export { ComponentNode } from './component-node';
+export { ComponentPlatform } from './component-platform';
+export { ComponentQuery } from './component-query';
+export { createComponentModel } from './create-component-model';
+export { asDescriptor } from './descriptor';
+export { extendComponent } from './extend-component';
+export { findComponent, findVisibleComponents, traverseComponents } from './queries';

package/lib-esm/component-platform/queries.d.ts

@@ -0,0 +1,6 @@
+import { ComponentNode } from './component-node';
+import { SwitchMap } from './component-platform';
+export declare const traverseComponents: (root: ComponentNode, switches: SwitchMap, fn: (node: ComponentNode) => boolean | void) => void;
+export declare const findVisibleComponents: (root: ComponentNode, switches: SwitchMap) => ComponentNode[];
+export declare const findComponent: (root: ComponentNode, switches: SwitchMap, fn: (node: ComponentNode) => boolean) => ComponentNode | undefined;
+export declare const getAncestors: (node: ComponentNode) => ComponentNode[];

package/lib-esm/component-platform/queries.js

@@ -0,0 +1,46 @@
+var traverseComponentsRecursive = function (nodes, switches, fn) {
+    for (var i = 0, y = nodes.length; i < y; i++) {
+        if (fn(nodes[i]) === true) {
+            break;
+        }
+        var branch = switches[nodes[i].id] || 'default';
+        var children = nodes[i].getChildren(branch);
+        traverseComponentsRecursive(children, switches, fn);
+    }
+};
+export var traverseComponents = function (root, switches, fn) {
+    if (fn(root) !== true) {
+        var branch = switches[root.id] || 'default';
+        var children = root.children[branch];
+        traverseComponentsRecursive(children, switches, fn);
+    }
+};
+export var findVisibleComponents = function (root, switches) {
+    var nodes = [];
+    traverseComponents(root, switches, function (node) {
+        nodes.push(node);
+    });
+    return nodes;
+};
+export var findComponent = function (root, switches, fn) {
+    var matched;
+    traverseComponents(root, switches, function (node) {
+        if (fn(node)) {
+            matched = node;
+            return true;
+        }
+    });
+    return matched;
+};
+export var getAncestors = function (node) {
+    if (!node.parent) {
+        return [];
+    }
+    var tree = [];
+    var currentNode = node.parent;
+    while (currentNode) {
+        tree.unshift(currentNode);
+        currentNode = currentNode.parent;
+    }
+    return tree;
+};

package/lib-esm/component-platform/state-processor.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPlatform } from '.';
+import { ComponentNode } from './component-node';
+export declare type ProcessOptions = {
+    context?: boolean;
+    properties?: boolean;
+    layout?: boolean;
+    recursive?: boolean;
+};
+export declare type StateProcessor = (node: ComponentNode, options: ProcessOptions) => void;
+export declare type ProcessResult = Map<ComponentNode, ProcessOptions>;
+export declare type ProcessReportCallback = (report: ProcessResult) => void;
+export declare const createStateProcessor: (platform: ComponentPlatform, callback: ProcessReportCallback) => StateProcessor;

package/lib-esm/component-platform/state-processor.js

@@ -0,0 +1,205 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var calculateNodeIndex = function (node) {
+    var currentNode = node;
+    var index = 0;
+    while (currentNode.parent) {
+        index = index + 1;
+        currentNode = currentNode.parent;
+    }
+    return index;
+};
+var sortQueue = function (queue) {
+    var mapped = queue.map(function (_a) {
+        var _b = __read(_a, 2), node = _b[0], options = _b[1];
+        return [calculateNodeIndex(node), node, options];
+    });
+    return mapped
+        .sort(function (_a, _b) {
+        var _c = __read(_a, 1), a = _c[0];
+        var _d = __read(_b, 1), b = _d[0];
+        return a - b;
+    })
+        .map(function (_a) {
+        var _b = __read(_a, 3), node = _b[1], options = _b[2];
+        return [node, options];
+    });
+};
+var isObject = function (item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+};
+var mergeDeep = function (target) {
+    var _a, _b;
+    var sources = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        sources[_i - 1] = arguments[_i];
+    }
+    if (!sources.length)
+        return target;
+    var source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (var key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, (_a = {}, _a[key] = {}, _a));
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, (_b = {}, _b[key] = source[key], _b));
+            }
+        }
+    }
+    return mergeDeep.apply(void 0, __spreadArray([target], __read(sources), false));
+};
+var matchesBreakpoint = function (b1, b2) {
+    if (!b1 || b1 === 'all') {
+        return true;
+    }
+    return b1.some(function (b1) { return b2.indexOf(b1) > -1; });
+};
+export var createStateProcessor = function (platform, callback) {
+    var nodeQueue = [];
+    var optionsQueue = [];
+    var timeout;
+    var flush = function () {
+        if (process.env.NODE_ENV !== 'production') {
+            console.time('state-processor.flush');
+        }
+        var processHistory = new Map();
+        var sortedQueue = sortQueue(nodeQueue.map(function (node, i) { return [node, optionsQueue[i]]; }));
+        var processNode = function (node, options) {
+            var _a;
+            var history = processHistory.get(node) || {};
+            // todo: this doesnt take overrides into account
+            var processContext = options.context && !history.context;
+            var processProperties = options.properties && !history.properties;
+            var processLayout = options.layout && !history.layout;
+            processHistory.set(node, {
+                context: history.context || processContext,
+                properties: history.properties || processProperties,
+                layout: history.layout || processLayout,
+            });
+            if (processProperties) {
+                node.attributes.properties = {};
+            }
+            if (processLayout) {
+                node.attributes.layout = {};
+            }
+            if (processContext) {
+                node.attributes.context = mergeDeep({}, (_a = node.parent) === null || _a === void 0 ? void 0 : _a.attributes.context);
+            }
+            var propertyResolvers = [];
+            var layoutResolvers = [];
+            var contextResolvers = [];
+            node.changesets.forEach(function (changeset) {
+                var _a = __read(changeset, 2), change = _a[0], options = _a[1];
+                if (matchesBreakpoint(options.breakpoints, platform.breakpoints)) {
+                    if (processProperties) {
+                        if (typeof change.properties === 'function') {
+                            propertyResolvers.push(change.properties);
+                        }
+                        else {
+                            mergeDeep(node.attributes.properties, change.properties);
+                        }
+                    }
+                    if (processLayout) {
+                        if (typeof change.layout === 'function') {
+                            layoutResolvers.push(change.layout);
+                        }
+                        else {
+                            mergeDeep(node.attributes.layout, change.layout);
+                        }
+                    }
+                    if (processContext) {
+                        if (typeof change.context === 'function') {
+                            contextResolvers.push(change.context);
+                        }
+                        else {
+                            mergeDeep(node.attributes.context, change.context);
+                        }
+                    }
+                }
+            });
+            propertyResolvers.forEach(function (resolver) {
+                mergeDeep(node.attributes.properties, resolver(node.attributes.properties));
+            });
+            layoutResolvers.forEach(function (resolver) {
+                mergeDeep(node.attributes.layout, resolver(node.attributes.layout));
+            });
+            contextResolvers.forEach(function (resolver) {
+                mergeDeep(node.attributes.context, resolver(node.attributes.context));
+            });
+            if (processContext || options.recursive) {
+                var branch = platform.getBranch(node);
+                var childOptions_1 = options.recursive
+                    ? options
+                    : {
+                        context: !!processContext,
+                    };
+                node.getChildren(branch).forEach(function (child) {
+                    processNode(child, childOptions_1);
+                });
+            }
+        };
+        if (process.env.NODE_ENV !== 'production') {
+            console.timeEnd('state-processor.flush');
+        }
+        sortedQueue.forEach(function (_a) {
+            var _b = __read(_a, 2), node = _b[0], options = _b[1];
+            processNode(node, options);
+        });
+        nodeQueue = [];
+        optionsQueue = [];
+        callback(processHistory);
+    };
+    var schedule = function () {
+        clearTimeout(timeout);
+        timeout = setTimeout(flush, 0);
+    };
+    return function (node, options) {
+        var index = nodeQueue.indexOf(node);
+        if (index > -1) {
+            // if node already exist in queue, update its options
+            var summary = optionsQueue[index];
+            if (options.context) {
+                summary.context = true;
+            }
+            if (options.properties) {
+                summary.properties = true;
+            }
+            if (options.layout) {
+                summary.layout = true;
+            }
+            if (options.recursive) {
+                summary.recursive = true;
+            }
+            return schedule();
+        }
+        nodeQueue.push(node);
+        optionsQueue.push(options);
+        return schedule();
+    };
+};

package/lib-esm/component-resolver.d.ts

@@ -0,0 +1,14 @@
+import { Logger } from '@telia-ace/widget-utilities';
+import { Container, EventManager, EventSubscriptionCancellation } from '@webprovisions/platform';
+export declare type ReactComponent = any | null;
+export default class ComponentResolver {
+    aliases: Map<string, string>;
+    components: Map<string, any>;
+    events: EventManager;
+    logger: Logger;
+    constructor(container: Container);
+    getComponent(key: string): ReactComponent;
+    registerComponent(key: string, component: ReactComponent): EventSubscriptionCancellation;
+    registerResolver(key: string, fn: (component: ReactComponent) => void): EventSubscriptionCancellation;
+    registerAlias(alias: string, key: string): EventSubscriptionCancellation;
+}

package/lib-esm/component-resolver.js

@@ -0,0 +1,47 @@
+import { Logger } from '@telia-ace/widget-utilities';
+var ComponentResolver = /** @class */ (function () {
+    function ComponentResolver(container) {
+        this.aliases = new Map();
+        this.components = new Map();
+        this.logger = new Logger();
+        var events = container.get('$widget').events;
+        this.events = events;
+    }
+    ComponentResolver.prototype.getComponent = function (key) {
+        var alias = this.aliases.get(key);
+        var component = this.components.get(alias || key) || null;
+        if (process.env.NODE_ENV !== 'production') {
+            if (!component) {
+                this.logger.warn(alias || key, "Unable to resolve component: \"".concat(alias || key, "\". You most likely forgot to register the required plugin for: ").concat(alias || key, "."));
+            }
+        }
+        return component;
+    };
+    ComponentResolver.prototype.registerComponent = function (key, component) {
+        var _this = this;
+        this.components.set(key, component);
+        this.events.dispatch('component-resolver:resolve', key);
+        return function () {
+            _this.components.delete(key);
+        };
+    };
+    ComponentResolver.prototype.registerResolver = function (key, fn) {
+        var _this = this;
+        return this.events.subscribe('component-resolver:resolve', function (e, data) {
+            if (data === key) {
+                var component = _this.getComponent(key);
+                fn(component);
+            }
+        });
+    };
+    ComponentResolver.prototype.registerAlias = function (alias, key) {
+        var _this = this;
+        this.aliases.set(alias, key);
+        this.events.dispatch('component-resolver:resolve', alias);
+        return function () {
+            _this.aliases.delete(alias);
+        };
+    };
+    return ComponentResolver;
+}());
+export default ComponentResolver;

package/lib-esm/event-subscriber.d.ts

@@ -0,0 +1,7 @@
+import { EventListener, EventManager, EventSubscriptionCancellation } from '@webprovisions/platform';
+export declare type SubscribeDelegate = (type: string, listener: EventListener) => void;
+/**
+ * Creates s subscriber for the specified `EventManager` and provides a single cancellation
+ * function for all registered subscriptions.
+ */
+export declare const createEventSubscriber: (events: EventManager) => [SubscribeDelegate, EventSubscriptionCancellation];

package/lib-esm/event-subscriber.js

@@ -0,0 +1,18 @@
+/**
+ * Creates s subscriber for the specified `EventManager` and provides a single cancellation
+ * function for all registered subscriptions.
+ */
+export var createEventSubscriber = function (events) {
+    var subs = [];
+    var subscribe = function (type, listener) {
+        subs.push(events.subscribe(type, listener));
+    };
+    return [
+        subscribe,
+        function () {
+            subs.forEach(function (sub) {
+                sub();
+            });
+        },
+    ];
+};

package/lib-esm/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ActionResolver } from './action-resolver';
+export { ActionsController, asDescriptor, ComponentNode, ComponentNodeController, ComponentPlatform, ComponentQuery, createComponentModel, extendComponent, findComponent, findVisibleComponents, traverseComponents, } from './component-platform';
+export type { ChangesetOptions, ChangesetProvider, ComponentDescriptor, ComponentNodeAttributes, ComponentNodeContext, ComponentNodeLayout, ComponentNodeProperties, ComponentNodeSettings, ComponentQueryRule, ExtendComponentHandler, ExtendComponentOptions, Size, SwitchMap, WatchActionDelegate, } from './component-platform';
+export { default as ComponentResolver } from './component-resolver';
+export type { ReactComponent } from './component-resolver';
+export { createEventSubscriber } from './event-subscriber';
+export type { SubscribeDelegate } from './event-subscriber';
+export * from './types';

package/lib-esm/index.js

@@ -0,0 +1,5 @@
+export { default as ActionResolver } from './action-resolver';
+export { ActionsController, asDescriptor, ComponentNode, ComponentNodeController, ComponentPlatform, ComponentQuery, createComponentModel, extendComponent, findComponent, findVisibleComponents, traverseComponents, } from './component-platform';
+export { default as ComponentResolver } from './component-resolver';
+export { createEventSubscriber } from './event-subscriber';
+export * from './types';

package/lib-esm/types/configuration.d.ts

@@ -0,0 +1,86 @@
+import { ComponentNodeLayout } from '../component-platform';
+export declare type ComponentSettings = {
+    type: string;
+    context?: Context;
+    properties?: Properties;
+    layout?: ComponentNodeLayout;
+    tags?: string[];
+    children?: ComponentReference[];
+};
+declare enum HistoryMode {
+    scopedHash = "scopedHash",
+    hash = "hash",
+    browser = "browser",
+    memory = "memory"
+}
+export declare type RoutingSettings = {
+    initialPath: string;
+    mode: HistoryMode;
+    basePath?: string;
+};
+export declare type ComponentReference = string | [string, ...ComponentReferenceOverride[]];
+export declare type Properties = {
+    [key: string]: any;
+};
+export declare type Context = {
+    [key: string]: any;
+};
+export declare type ViewDefinition = {
+    path: string | string[];
+    entry: ComponentReference;
+};
+export declare type Breakpoints = 'all' | string[];
+export declare type ComponentReferenceOverride = {
+    breakpoints?: Breakpoints;
+    size?: number | 'full' | 'none';
+    indent?: number;
+    tags?: string[];
+    context?: Context;
+    properties?: Properties;
+};
+export declare type ComponentDefinitionMap = {
+    [name: string]: ComponentSettings;
+};
+export declare type WidgetSettings = {
+    data: {
+        projection: string;
+        site?: 'current' | 'referrer';
+        forceHttps?: boolean;
+    };
+    components: ComponentDefinitionMap;
+    entry: ComponentReference;
+    breakpoints: {
+        [name: string]: string;
+    };
+    routing: RoutingSettings;
+    views: {
+        [name: string]: ViewDefinition;
+    };
+    integrationResources: {
+        path: string;
+        mediaQueriesSupported: boolean;
+    }[];
+    trigger?: {
+        symbol?: Symbol;
+        label?: string;
+        action?: string;
+    };
+    activate?: boolean | null;
+    plugins?: {
+        [key: string]: any;
+    };
+};
+export declare type MinMax = {
+    min: string;
+    max: string;
+};
+declare type Symbol = {
+    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
+    content: string;
+};
+export declare enum WidgetRenderState {
+    open = "open",
+    closed = "closed",
+    hidden = "hidden"
+}
+export {};

package/lib-esm/types/configuration.js

@@ -0,0 +1,13 @@
+var HistoryMode;
+(function (HistoryMode) {
+    HistoryMode["scopedHash"] = "scopedHash";
+    HistoryMode["hash"] = "hash";
+    HistoryMode["browser"] = "browser";
+    HistoryMode["memory"] = "memory";
+})(HistoryMode || (HistoryMode = {}));
+export var WidgetRenderState;
+(function (WidgetRenderState) {
+    WidgetRenderState["open"] = "open";
+    WidgetRenderState["closed"] = "closed";
+    WidgetRenderState["hidden"] = "hidden";
+})(WidgetRenderState || (WidgetRenderState = {}));

package/lib-esm/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './configuration';
+export * from './ui';

package/lib-esm/types/index.js

@@ -0,0 +1,2 @@
+export * from './configuration';
+export * from './ui';

package/lib-esm/types/ui.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+export declare type Theme = {
+    gap: string;
+    accessibility: {
+        isTabbing: boolean;
+        border: string;
+        colors: {
+            inactiveText: string;
+            activeText: string;
+        };
+    };
+    border: string;
+    borderRadius: string;
+    boxShadow: string;
+    inputBorder: string;
+    colors: {
+        warning: string;
+        accent: string;
+        link: string;
+        primary: string;
+        text: string;
+        textLight: string;
+    };
+    fonts: {
+        type: string;
+        base: string;
+        small: string;
+        normal: string;
+        medium: string;
+        large: string;
+        huge: string;
+    };
+    sizes: {
+        cardinal: number;
+        small: string;
+        normal: string;
+        medium: string;
+        large: string;
+    };
+    typographyVariantMapping?: {
+        h1: 'h1';
+        h2: 'h2';
+        h3: 'h3';
+        h4: 'h4';
+        h5: 'h5';
+        h6: 'h6';
+        p: 'p';
+        span: 'span';
+    };
+};
+export declare type ModeWrapper = React.FC<{
+    className: string;
+    route: string;
+    isTabbing: boolean;
+}>;

package/lib-esm/types/ui.js

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

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@telia-ace/widget-core",
+    "version": "1.0.0",
+    "description": "Core framework for ACE widgets.",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Telia Company AB",
+    "keywords": [
+        "telia"
+    ],
+    "main": "lib/index.js",
+    "module": "lib-esm/index.js",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json && node scripts/print-version.js"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/bootstrapping": "^1.0.12",
+        "@webprovisions/platform": "^1.1.2"
+    },
+    "gitHead": "a45fde2bae0981a2a791a2362f2ecaf53430570b"
+}