@telia-ace/widget-core 1.0.0

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

@@ -0,0 +1,187 @@
+import { Logger, uuid } from '@telia-ace/widget-utilities';
+var ComponentNode = /** @class */ (function () {
+    function ComponentNode(events, type) {
+        this.events = events;
+        this.tags = [];
+        this.children = {};
+        this.changesets = [];
+        this.mountCount = 0;
+        this.id = uuid();
+        this.type = type;
+        this.attributes = {
+            context: {},
+            properties: {},
+            layout: {},
+            tags: [],
+        };
+        // write default attributes
+        this.writeLayout({ size: 'full', indent: 0 });
+    }
+    ComponentNode.prototype.mount = function (viewOutletContainer, element) {
+        var _this = this;
+        var mountedNodes = viewOutletContainer.get('mounted-nodes');
+        if (!mountedNodes) {
+            mountedNodes = new Map();
+            viewOutletContainer.register('mounted-nodes', mountedNodes);
+        }
+        if (mountedNodes.has(this)) {
+            if (process.env.NODE_ENV !== 'production') {
+                Logger.error('Trying to mount an already mounted component node.', this);
+            }
+            return function () { };
+        }
+        /**
+         * Dispatched when a node is mounted in a component.
+         * This happens once for every `ViewOutlet`.
+         */
+        this.events.dispatch('components:node-mounted', { node: this });
+        if (this.mountCount === 0) {
+            this.mountCount = this.mountCount + 1;
+            /**
+             * Dispatched when a node is mounted in a component the first time.
+             */
+            this.events.dispatch('components:node-enter', { node: this });
+        }
+        return function () {
+            mountedNodes.delete(_this);
+            _this.events.dispatch('components:node-unmounted', { node: _this });
+            _this.mountCount = _this.mountCount - 1;
+            if (_this.mountCount === 0) {
+                _this.events.dispatch('components:node-exit', { node: _this });
+            }
+        };
+    };
+    ComponentNode.prototype.appendChild = function (node, branch) {
+        if (branch === void 0) { branch = 'default'; }
+        if (node.parent) {
+            if (node.parent === this) {
+                return;
+            }
+            node.parent.removeChild(node);
+        }
+        node.parent = this;
+        if (!this.children[branch]) {
+            this.children[branch] = [];
+        }
+        this.children[branch].push(node);
+        this.events.dispatch('components:node-appended', { node: node });
+    };
+    ComponentNode.prototype.prependChild = function (node, branch) {
+        if (branch === void 0) { branch = 'default'; }
+        if (node.parent) {
+            if (node.parent === this) {
+                return;
+            }
+            node.parent.removeChild(node);
+        }
+        node.parent = this;
+        if (!this.children[branch]) {
+            this.children[branch] = [];
+        }
+        this.children[branch].unshift(node);
+        this.events.dispatch('components:node-appended', { node: node });
+    };
+    ComponentNode.prototype.touchProperties = function (properties, options, removable) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        var attributes = { properties: properties };
+        var changeset = [attributes, options];
+        this.changesets.push(changeset);
+        this.events.dispatch('components:set-properties', { node: this });
+        return function () {
+            if (removable) {
+                var indexToRemove = _this.changesets.indexOf(changeset);
+                if (indexToRemove > -1) {
+                    _this.changesets.splice(indexToRemove, 1);
+                    _this.events.dispatch('components:set-properties', { node: _this });
+                }
+            }
+        };
+    };
+    ComponentNode.prototype.writeProperties = function (properties, options, removable) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        var attributes = { properties: properties };
+        var changeset = [attributes, options];
+        this.changesets.push(changeset);
+        this.events.dispatch('components:set-properties', { node: this });
+        return function () {
+            if (removable) {
+                var indexToRemove = _this.changesets.indexOf(changeset);
+                if (indexToRemove > -1) {
+                    _this.changesets.splice(indexToRemove, 1);
+                    _this.events.dispatch('components:set-properties', { node: _this });
+                }
+            }
+        };
+    };
+    ComponentNode.prototype.writeLayout = function (layout, options, removable) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        var attributes = { layout: layout };
+        var changeset = [attributes, options];
+        this.changesets.push(changeset);
+        this.events.dispatch('components:set-layout', { node: this });
+        return function () {
+            if (!removable) {
+                return;
+            }
+            var indexToRemove = _this.changesets.indexOf(changeset);
+            if (indexToRemove > -1) {
+                _this.changesets.splice(indexToRemove, 1);
+                _this.events.dispatch('components:set-layout', { node: _this });
+            }
+        };
+    };
+    ComponentNode.prototype.writeContext = function (context, options, removable) {
+        var _this = this;
+        if (options === void 0) { options = {}; }
+        var attributes = { context: context };
+        var changeset = [attributes, options];
+        this.changesets.push(changeset);
+        this.events.dispatch('components:set-context', { node: this });
+        return function () {
+            if (!removable) {
+                return;
+            }
+            var indexToRemove = _this.changesets.indexOf(changeset);
+            if (indexToRemove > -1) {
+                _this.changesets.splice(indexToRemove, 1);
+                _this.events.dispatch('components:set-context', { node: _this });
+            }
+        };
+    };
+    ComponentNode.prototype.getChildren = function (branch) {
+        if (branch === void 0) { branch = 'default'; }
+        var children = this.children[branch] || [];
+        return children.reduce(function (acc, node, i) {
+            var _a = node.attributes.layout.order, index = _a === void 0 ? i : _a;
+            if (!acc[index]) {
+                acc[index] = node;
+            }
+            else {
+                acc.splice(index, 0, node);
+            }
+            return acc;
+        }, Array(children.length));
+    };
+    ComponentNode.prototype.remove = function () {
+        if (this.parent) {
+            this.parent.removeChild(this);
+        }
+    };
+    ComponentNode.prototype.removeChild = function (node) {
+        var _this = this;
+        Object.keys(this.children).forEach(function (branch) {
+            var children = _this.children[branch];
+            var indexToRemove = children.indexOf(node);
+            if (indexToRemove > -1) {
+                children.splice(indexToRemove, 1);
+                _this.events.dispatch('components:node-removed', { node: node, parentNode: _this });
+            }
+        });
+        delete node.parent;
+    };
+    return ComponentNode;
+}());
+export { ComponentNode };

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

@@ -0,0 +1,50 @@
+import { Container, EventManager, Widget } from '@webprovisions/platform';
+import { ActionsController, ActionsState } from './actions-controller';
+import { ChangesetProvider } from './changeset-provider';
+import { ChangesetOptions, ComponentNode, ComponentNodeSettings, RemoveChangeset } from './component-node';
+import { ComponentNodeCollection } from './component-node-collection';
+import { ComponentQuery } from './component-query';
+export declare type MergeOptions = {
+    breakpoints?: string[];
+};
+export declare type SwitchMap = {
+    [id: string]: string;
+};
+export declare type ChangesetData = {
+    key?: string;
+    target: ComponentQuery;
+    attributes: Partial<ComponentNodeSettings>;
+    options?: ChangesetOptions;
+    removable?: boolean;
+    provider?: string;
+};
+export declare class ComponentPlatform {
+    private providers;
+    events: EventManager;
+    breakpoints: string[];
+    nodes: ComponentNodeCollection;
+    actionsState: ActionsState;
+    private switches;
+    private changesets;
+    private subscriptions;
+    private processNode;
+    constructor(widget: Widget, providers?: {
+        [key: string]: ChangesetProvider;
+    });
+    static getInstance(container: Container): Promise<ComponentPlatform>;
+    addBreakpoint(name: string): void;
+    removeBreakpoint(name: string): void;
+    setSwitch(node: ComponentNode, branch: string): void;
+    getBranch(node: ComponentNode): string | undefined;
+    /**
+     * Creates a `ComponentNode` of the specified type.
+     * @param type Type of node.
+     */
+    createNode(type: string, options?: {
+        detached?: boolean;
+    }): ComponentNode;
+    components(): ComponentQuery;
+    actions(target: ComponentQuery, ns: string): ActionsController;
+    write(data: ChangesetData): RemoveChangeset;
+    dispose(): void;
+}

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

@@ -0,0 +1,206 @@
+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;
+};
+import { uuid } from '@telia-ace/widget-utilities';
+import { ActionsController } from './actions-controller';
+import { ComponentNode, } from './component-node';
+import { ComponentNodeCollection } from './component-node-collection';
+import { ComponentQuery } from './component-query';
+import { createStateProcessor } from './state-processor';
+var ComponentPlatform = /** @class */ (function () {
+    function ComponentPlatform(widget, providers) {
+        if (providers === void 0) { providers = {}; }
+        var _this = this;
+        this.providers = providers;
+        this.breakpoints = [];
+        // internal
+        this.actionsState = { handlers: [], watchers: [] };
+        this.switches = {};
+        this.changesets = [];
+        this.subscriptions = [];
+        this.events = widget.events.createChild(this);
+        var root = new ComponentNode(this.events, 'root');
+        root.name = "root-".concat(widget.name);
+        this.nodes = new ComponentNodeCollection(root, this.switches, this.events);
+        var processNode = (this.processNode = createStateProcessor(this, function (report) {
+            var nodes = Array.from(report.keys());
+            if (process.env.NODE_ENV !== 'production') {
+                console.info("STATE PROCESSOR: ".concat(nodes.length, " node(s) processed:\n").concat(nodes.map(function (node) { return "".concat(node.name || '<no name>', " (").concat(node.id, ")\n"); })));
+            }
+            nodes.forEach(function (node) {
+                var options = report.get(node);
+                if (node.parent && node.parent.type === 'root') {
+                    _this.events.dispatch('components:root-children-changed', { node: node });
+                }
+                if (options === null || options === void 0 ? void 0 : options.context) {
+                    _this.events.dispatch('components:context-changed', { node: node });
+                }
+                if (options === null || options === void 0 ? void 0 : options.properties) {
+                    _this.events.dispatch('components:properties-changed', { node: node });
+                }
+                if (options === null || options === void 0 ? void 0 : options.layout) {
+                    _this.events.dispatch('components:layout-changed', { node: node });
+                }
+            });
+            _this.events.dispatch('components:component-model-initialized', {}, { bubbles: true });
+        }));
+        Promise.all(Object.keys(providers).map(function (key) {
+            var provider = providers[key];
+            return provider.load(_this);
+        }));
+        this.subscriptions.push(this.events.subscribe('components:node-appended', function (event, data) {
+            var node = data.node;
+            _this.changesets.forEach(function (record) {
+                var changeset = record.changeset, target = record.target, removes = record.removes;
+                var _a = __read(changeset, 2), change = _a[0], options = _a[1];
+                if (target.match(data.node)) {
+                    if (change.properties) {
+                        removes.push(node.writeProperties(change.properties, options));
+                    }
+                    if (change.context) {
+                        removes.push(node.writeContext(change.context, options));
+                    }
+                    if (change.layout) {
+                        removes.push(node.writeLayout(change.layout, options));
+                    }
+                }
+            });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:node-appended', function (event, data) {
+            processNode(data.node, { properties: true, context: true });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:set-properties', function (event, data) {
+            processNode(data.node, { properties: true });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:set-context', function (event, data) {
+            processNode(data.node, { properties: true, context: true });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:set-indent', function (event, data) {
+            processNode(data.node, { layout: true });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:set-layout', function (event, data) {
+            processNode(data.node, { layout: true });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:node-switched', function (event, _a) {
+            var node = _a.node, branch = _a.branch;
+            processNode(node, {
+                layout: true,
+                recursive: true,
+                properties: true,
+                context: true,
+            });
+        }));
+        this.subscriptions.push(this.events.subscribe('components:node-removed', function (event, _a) {
+            var parentNode = _a.parentNode;
+            processNode(parentNode, { properties: true });
+        }));
+    }
+    ComponentPlatform.getInstance = function (container) {
+        return container.getAsync('components');
+    };
+    ComponentPlatform.prototype.addBreakpoint = function (name) {
+        if (this.breakpoints.indexOf(name) === -1) {
+            this.breakpoints.push(name);
+            this.processNode(this.nodes.root, {
+                context: true,
+                properties: true,
+                layout: true,
+                recursive: true,
+            });
+        }
+    };
+    ComponentPlatform.prototype.removeBreakpoint = function (name) {
+        var indexToRemove = this.breakpoints.indexOf(name);
+        if (indexToRemove > -1) {
+            this.breakpoints.splice(indexToRemove, 1);
+            this.processNode(this.nodes.root, {
+                context: true,
+                properties: true,
+                layout: true,
+                recursive: true,
+            });
+        }
+    };
+    ComponentPlatform.prototype.setSwitch = function (node, branch) {
+        this.switches[node.id] = branch;
+        this.events.dispatch('components:node-switched', { node: node, branch: branch });
+    };
+    ComponentPlatform.prototype.getBranch = function (node) {
+        return this.switches[node.id];
+    };
+    /**
+     * Creates a `ComponentNode` of the specified type.
+     * @param type Type of node.
+     */
+    ComponentPlatform.prototype.createNode = function (type, options) {
+        if (options === void 0) { options = {}; }
+        var node = new ComponentNode(this.events, type);
+        if (options.detached) {
+            this.nodes.detached.push(node);
+        }
+        return node;
+    };
+    ComponentPlatform.prototype.components = function () {
+        return new ComponentQuery(this);
+    };
+    ComponentPlatform.prototype.actions = function (target, ns) {
+        return new ActionsController(this, target, ns);
+    };
+    ComponentPlatform.prototype.write = function (data) {
+        var _this = this;
+        var providerName = data.provider, target = data.target, attributes = data.attributes, _a = data.options, options = _a === void 0 ? {} : _a, removable = data.removable;
+        var key = data.key || uuid();
+        var changeset = [attributes, options];
+        var record = { changeset: changeset, target: target, removes: [] };
+        if (providerName) {
+            var provider_1 = this.providers[providerName];
+            provider_1.write(key, target, attributes, options);
+            record.removes.push(function () {
+                provider_1.remove(key);
+            });
+        }
+        this.changesets.push(record);
+        this.nodes.all.forEach(function (node) {
+            if (target.match(node)) {
+                var remove = function () { };
+                if (attributes.properties) {
+                    remove = node.writeProperties(attributes.properties, options, removable);
+                }
+                if (attributes.context) {
+                    remove = node.writeContext(attributes.context, options, removable);
+                }
+                if (attributes.layout) {
+                    remove = node.writeContext(attributes.layout, options, removable);
+                }
+                record.removes.push(remove);
+            }
+        });
+        return function () {
+            if (removable) {
+                record.removes.forEach(function (remove) { return remove(); });
+                var indexToRemove = _this.changesets.indexOf(record);
+                if (indexToRemove > -1) {
+                    _this.changesets.splice(indexToRemove, 1);
+                }
+            }
+        };
+    };
+    ComponentPlatform.prototype.dispose = function () {
+        this.subscriptions.forEach(function (sub) { return sub(); });
+    };
+    return ComponentPlatform;
+}());
+export { ComponentPlatform };

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

@@ -0,0 +1,16 @@
+import { AbstractComponentController } from './component-controller';
+import { ComponentNode } from './component-node';
+import { ComponentPlatform } from './component-platform';
+export declare type ComponentQueryRule = {
+    id?: string;
+    type?: string;
+};
+export declare class ComponentQuery {
+    private platform;
+    rules: ComponentQueryRule[];
+    constructor(platform: ComponentPlatform, rules?: ComponentQueryRule[]);
+    match(node: ComponentNode): boolean;
+    ofType(type: string): ComponentQuery;
+    withId(id: string): ComponentQuery;
+    select(): AbstractComponentController;
+}

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

@@ -0,0 +1,32 @@
+import { AbstractComponentController } from './component-controller';
+var ComponentQuery = /** @class */ (function () {
+    function ComponentQuery(platform, rules) {
+        if (rules === void 0) { rules = []; }
+        this.platform = platform;
+        this.rules = rules;
+    }
+    ComponentQuery.prototype.match = function (node) {
+        return this.rules.every(function (rule) {
+            if (rule.id && rule.id !== node.id) {
+                return false;
+            }
+            if (rule.type && rule.type !== node.type) {
+                return false;
+            }
+            return true;
+        });
+    };
+    ComponentQuery.prototype.ofType = function (type) {
+        this.rules.push({ type: type });
+        return this;
+    };
+    ComponentQuery.prototype.withId = function (id) {
+        this.rules.push({ id: id });
+        return this;
+    };
+    ComponentQuery.prototype.select = function () {
+        return new AbstractComponentController(this.platform, this);
+    };
+    return ComponentQuery;
+}());
+export { ComponentQuery };

package/lib-esm/component-platform/create-component-model.d.ts

@@ -0,0 +1,19 @@
+import { EventSubscriptionCancellation } from '@webprovisions/platform';
+import { Breakpoints, WidgetSettings } from '../types';
+import { ComponentNodeContext, ComponentNodeLayout, ComponentNodeProperties } from './component-node';
+import { ComponentPlatform } from './component-platform';
+declare type ComponentReference = string | [string, ...ComponentReferenceOverride[]];
+declare type ComponentReferenceOverride = {
+    breakpoints?: Breakpoints;
+    tags?: string[];
+    context?: ComponentNodeContext;
+    properties?: ComponentNodeProperties;
+    layout?: ComponentNodeLayout;
+};
+declare type NormalizedComponentReference = {
+    definitionId: string;
+    overrides: ComponentReferenceOverride[];
+};
+export declare const normalizeReference: (reference: ComponentReference) => NormalizedComponentReference;
+export declare const createComponentModel: (platform: ComponentPlatform, settings: WidgetSettings) => EventSubscriptionCancellation;
+export {};

package/lib-esm/component-platform/create-component-model.js

@@ -0,0 +1,121 @@
+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;
+};
+import { Logger } from '@telia-ace/widget-utilities';
+export var normalizeReference = function (reference) {
+    if (Array.isArray(reference)) {
+        var _a = __read(reference), definitionId = _a[0], overrides = _a.slice(1);
+        return {
+            definitionId: definitionId,
+            overrides: overrides,
+        };
+    }
+    return {
+        definitionId: reference,
+        overrides: [],
+    };
+};
+var createChildren = function (platform, node, references, definitions, views, branch) {
+    references.forEach(function (ref) {
+        var childRef = normalizeReference(ref);
+        if (childRef.definitionId === 'view') {
+            var viewNode_1 = platform.createNode('view');
+            viewNode_1.name = 'view';
+            Object.keys(views).forEach(function (key) {
+                var viewDef = views[key];
+                createChildren(platform, viewNode_1, [viewDef.entry], definitions, views, key);
+            });
+            node.appendChild(viewNode_1);
+            childRef.overrides.forEach(function (override) {
+                if (override.properties) {
+                    viewNode_1.writeProperties(override.properties, {
+                        breakpoints: override.breakpoints,
+                    });
+                }
+                if (override.context) {
+                    viewNode_1.writeContext(override.context, { breakpoints: override.breakpoints });
+                }
+                if (override.layout) {
+                    viewNode_1.writeLayout(override.layout, { breakpoints: override.breakpoints });
+                }
+            });
+        }
+        else {
+            var childDef = definitions[childRef.definitionId];
+            if (process.env.NODE_ENV !== 'production') {
+                if (!childDef) {
+                    Logger.error("No definition found for component type '".concat(childRef.definitionId, "'."));
+                    return;
+                }
+            }
+            var childNode_1 = platform.createNode(childDef.type);
+            childNode_1.name = childRef.definitionId;
+            childNode_1.tags = childDef.tags || [];
+            if (childDef.properties) {
+                childNode_1.writeProperties(childDef.properties);
+            }
+            if (childDef.context) {
+                childNode_1.writeContext(childDef.context);
+            }
+            if (childDef.layout) {
+                childNode_1.writeLayout(childDef.layout);
+            }
+            node.appendChild(childNode_1, branch);
+            childRef.overrides.forEach(function (override) {
+                var options = { breakpoints: override.breakpoints };
+                if (override.properties) {
+                    childNode_1.writeProperties(override.properties, options);
+                }
+                if (override.context) {
+                    childNode_1.writeContext(override.context, options);
+                }
+                if (override.layout) {
+                    childNode_1.writeLayout(override.layout, options);
+                }
+            });
+            if (childDef.children) {
+                createChildren(platform, childNode_1, childDef.children, definitions, views);
+            }
+        }
+    });
+};
+export var createComponentModel = function (platform, settings) {
+    var entry = settings.entry, components = settings.components, breakpoints = settings.breakpoints, views = settings.views;
+    var subscriptions = [];
+    Object.keys(breakpoints).forEach(function (name) {
+        var query = breakpoints[name];
+        var list = window.matchMedia(query);
+        if (list.matches) {
+            platform.breakpoints.push(name);
+        }
+        var listener = function (event) {
+            if (event.matches) {
+                platform.addBreakpoint(name);
+            }
+            else {
+                platform.removeBreakpoint(name);
+            }
+        };
+        list.addListener(listener);
+        subscriptions.push(function () { return list.removeListener(listener); });
+    });
+    createChildren(platform, platform.nodes.root, [entry], components, views);
+    return function () {
+        return subscriptions.forEach(function (sub) {
+            sub();
+        });
+    };
+};

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

@@ -0,0 +1,8 @@
+import { ComponentNode } from './component-node';
+export declare type ComponentDescriptor = {
+    id: string;
+    type?: string;
+    name?: string;
+    branch: string;
+};
+export declare const asDescriptor: (node: ComponentNode, branch?: string | undefined) => ComponentDescriptor;

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

@@ -0,0 +1,8 @@
+export var asDescriptor = function (node, branch) {
+    return {
+        id: node.id,
+        type: node.type,
+        name: node.name,
+        branch: branch || 'default',
+    };
+};

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

@@ -0,0 +1,8 @@
+import { Container } from '@webprovisions/platform';
+import { ComponentNodeController } from './component-controller';
+import { ComponentQuery } from './component-query';
+export declare type ExtendComponentHandler = (controller: ComponentNodeController) => any;
+export declare type ExtendComponentOptions = {
+    reuseController?: boolean;
+};
+export declare const extendComponent: (container: Container, typeOrQuery: string | ComponentQuery, handler: ExtendComponentHandler, ns?: string, options?: ExtendComponentOptions) => Promise<void>;