@telia-ace/widget-types-grid 1.0.0

package/lib-esm/widget.js

@@ -0,0 +1,551 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { WidgetRenderState, } from '@telia-ace/widget-core';
+import { onWidgetUrl } from '@telia-ace/widget-routing';
+import { createStorageWriter, readStorage, StorageCategory, StorageMedium, StorageScope, } from '@telia-ace/widget-services';
+import { removeNullAndUndefinedValues, uuid } from '@telia-ace/widget-utilities';
+import { supportBootstrapping } from '@webprovisions/bootstrapping';
+import { WidgetType } from '@webprovisions/platform';
+import { ViewOutlet } from '././ui/view-outlet';
+import { createActionResolver, createComponentPlatform, createComponentResolver, createRoutingService, createServiceClient, createStorageService, } from './services';
+import { setActive, setInactive } from './ui/html-element-handlers';
+import { determineTriggerType, prepareDOMElements, TriggerType } from './ui/prepare-dom';
+var SETTINGS_STORAGE_KEY = '$settings';
+var OPEN_STORAGE_KEY = 'open';
+var STICKY_WIDGET_STORAGE_KEY = 'activeStickyWidget';
+export var InitialRenderState;
+(function (InitialRenderState) {
+    InitialRenderState["Open"] = "open";
+    InitialRenderState["Closed"] = "closed";
+    InitialRenderState["Hidden"] = "hidden";
+    InitialRenderState["Storage"] = "storage";
+})(InitialRenderState || (InitialRenderState = {}));
+var Widget = /** @class */ (function (_super) {
+    __extends(Widget, _super);
+    function Widget(container) {
+        var _this = _super.call(this, container) || this;
+        _this.outlets = new Map();
+        _this.activated = undefined;
+        _this.subs = [];
+        _this.handleBootstrapping = function (activationData) {
+            var options = {
+                triggerDOMElement: activationData.sourceDOMElement,
+                withRenderState: InitialRenderState.Storage,
+            };
+            _this.container.get('settings').then(function (settings) {
+                var activate = settings.activate;
+                var shouldActivate = typeof activate === 'undefined' || activate === null || activate === true;
+                if (shouldActivate) {
+                    _this.activated = (_this.activated || _this.widget.activate()).then(function () {
+                        return _this.attach(options);
+                    });
+                }
+            });
+        };
+        _this.container.registerAsync('storage', function () { return createStorageService(_this.container); });
+        _this.container.registerFactory('settings', function () {
+            return readStorage(_this.container, SETTINGS_STORAGE_KEY, StorageMedium.Local).then(function (settings) {
+                if (settings === void 0) { settings = {}; }
+                return __assign(__assign({}, _this.container.get('$settings')), settings);
+            });
+        });
+        supportBootstrapping(_this, 'load', _this.handleBootstrapping);
+        _this.container.registerAsync('componentResolver', function () {
+            return createComponentResolver(_this.container);
+        });
+        _this.container.registerAsync('matchingClient', function () { return createServiceClient(_this.container); });
+        _this.container.registerAsync('router', function () { return createRoutingService(_this.container); });
+        _this.container.registerAsync('actionResolver', function () { return createActionResolver(_this.container); });
+        _this.container.register('matchMedia', window.matchMedia);
+        _this.container.registerAsync('components', function () { return createComponentPlatform(_this.container); });
+        return _this;
+    }
+    Widget.prototype.initialize = function () {
+        var _this = this;
+        var promises = this.container.getManyAsync('actionResolver', 'router', 'components');
+        return Promise.all([promises, this.container.get('settings')]).then(function (_a) {
+            var _b;
+            var _c = __read(_a, 2), _d = _c[0], actionResolver = _d.actionResolver, router = _d.router, components = _d.components, settings = _c[1];
+            actionResolver.subscribe(_this.widget.name, function (origin, action, value) {
+                return _this.onAction(action, value);
+            });
+            var switchViewNodes = function (routeName) {
+                components.nodes.query({ type: 'view' }).forEach(function (viewNode) {
+                    components.setSwitch(viewNode, routeName);
+                });
+            };
+            var initialRoute = ((_b = router.getInitialRoute()) === null || _b === void 0 ? void 0 : _b.name) || 'index';
+            switchViewNodes(initialRoute);
+            _this.events.subscribe('widget:data-loaded', function (e, _a) {
+                var element = _a.element;
+                if (_this.widget.container.get('seoConfiguration')) {
+                    _this.events.dispatch('widget:preloaded-replaced', {
+                        element: element,
+                    });
+                }
+            });
+            _this.events.subscribe('router:change', function (e, _a) {
+                var _b = _a.previous, previous = _b === void 0 ? { routeData: {} } : _b, _c = _a.next, next = _c === void 0 ? { routeData: {} } : _c;
+                var prevData = previous.routeData;
+                var nextData = next.routeData;
+                var notFoundView = Object.keys(settings.views).reduce(function (acc, key) {
+                    var view = settings.views[key];
+                    if (typeof view.path === 'undefined') {
+                        return key;
+                    }
+                    return acc;
+                }, '');
+                // route not found
+                if (!nextData.name && notFoundView) {
+                    switchViewNodes(notFoundView);
+                }
+                else {
+                    switchViewNodes(nextData.name);
+                }
+                removeNullAndUndefinedValues(prevData && prevData.params);
+                removeNullAndUndefinedValues(nextData && nextData.params);
+                _this.container
+                    .getAsync('actionResolver')
+                    .then(function (actionResolver) {
+                    actionResolver.action(_this.widget.name, 'routeChange', {
+                        next: nextData,
+                        previous: prevData,
+                    });
+                });
+            });
+            return router.initialize();
+        });
+    };
+    Widget.prototype.attach = function (attachData) {
+        var _this = this;
+        if (attachData === void 0) { attachData = {}; }
+        return this.container.get('settings').then(function (_a) {
+            var _b, _c;
+            var trigger = _a.trigger;
+            var widgetDOMElement = attachData.widgetDOMElement, _d = attachData.key, key = _d === void 0 ? uuid() : _d, triggerDOMElement = attachData.triggerDOMElement, withRenderState = attachData.withRenderState;
+            var triggerType = determineTriggerType(trigger);
+            // This could probably be defined already when bootstrapping occurs,
+            // Webprovisions knows when a widget is prerendered,
+            // see "queryPrerenderedTargets in @webprovisions/bootstrapping"
+            var waitWithReplace = triggerType === TriggerType.Inline &&
+                ((triggerDOMElement === null || triggerDOMElement === void 0 ? void 0 : triggerDOMElement.childElementCount) || 0) > 0;
+            var outletOptions = prepareDOMElements(_this.widget.name, widgetDOMElement, triggerDOMElement, trigger, waitWithReplace);
+            if (_this.outlets.size < 1 && !withRenderState) {
+                _this.setRenderState('unset');
+            }
+            var swap = function () {
+                var isReady = function () {
+                    return widgetDOMElement.querySelectorAll('[data-loading=true]').length === 0;
+                };
+                var _a = __read(_this.widget.container.get('widgetDOMElements'), 1), widgetDOMElement = _a[0];
+                var watcher = function (mutations, observer) {
+                    if (isReady()) {
+                        if (outletOptions.callback) {
+                            outletOptions.callback();
+                        }
+                        observer.disconnect();
+                    }
+                };
+                var options = {
+                    attributes: true,
+                    subtree: true,
+                };
+                if (isReady()) {
+                    outletOptions.callback && outletOptions.callback();
+                }
+                var observer = new MutationObserver(watcher);
+                observer.observe(widgetDOMElement, options);
+            };
+            if (waitWithReplace) {
+                _this.widget.container.getAsync('dataClient').then(function (_a) {
+                    var events = _a.events;
+                    events.subscribe('data-client:fetched', function (event, data) {
+                        if (data.unresolvedQueries === 0) {
+                            swap();
+                        }
+                    });
+                });
+            }
+            var outlet = _this.getOrCreateViewOutlet(key, outletOptions);
+            _this.outlets.set(key, outlet);
+            _this.widget.events.dispatch('widget:attached', {}, { bubbles: true });
+            if (outletOptions.triggerType === TriggerType.Badge && trigger) {
+                (_b = outletOptions.triggerDOMElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+                outlet === null || outlet === void 0 ? void 0 : outlet.renderBadge(trigger);
+            }
+            if (outletOptions.triggerType !== TriggerType.Inline) {
+                (_c = outletOptions.triggerDOMElement) === null || _c === void 0 ? void 0 : _c.addEventListener('click', function (event) {
+                    event.preventDefault();
+                    _this.container
+                        .get('settings')
+                        .then(function (_a) {
+                        var updatedTrigger = _a.trigger;
+                        outlet
+                            .render()
+                            .then(function () { return _this.renderState(); })
+                            .then(function (renderState) {
+                            if (updatedTrigger &&
+                                updatedTrigger.action &&
+                                updatedTrigger.action === 'hide') {
+                                return renderState === WidgetRenderState.open
+                                    ? _this.hide()
+                                    : _this.open();
+                            }
+                            return renderState === WidgetRenderState.open
+                                ? _this.close()
+                                : _this.open();
+                        });
+                    });
+                });
+            }
+            if (_this.outlets.size > 1) {
+                return _this.renderState().then(function (state) {
+                    // new outlets should have the same state as existing ones
+                    _this.triggerStateIfApplicable(state);
+                });
+            }
+            if (withRenderState) {
+                if (withRenderState === InitialRenderState.Storage) {
+                    return _this.renderState().then(function (state) {
+                        if (outletOptions.triggerType === TriggerType.Inline) {
+                            _this.triggerStateIfApplicable('open');
+                            return;
+                        }
+                        _this.triggerStateIfApplicable(state);
+                    });
+                }
+                return _this.triggerStateIfApplicable(withRenderState);
+            }
+        });
+    };
+    Widget.prototype.detach = function (key) {
+        if (key) {
+            if (this.outlets.has(key)) {
+                var outlet = this.outlets.get(key);
+                outlet === null || outlet === void 0 ? void 0 : outlet.dispose();
+                this.outlets.delete(key);
+                return;
+            }
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn("detach(): Could not find View Outlet with key ".concat(key));
+            }
+            return;
+        }
+        this.outlets.forEach(function (outlet) {
+            outlet.dispose();
+        });
+        this.outlets.clear();
+    };
+    Widget.prototype.triggerStateIfApplicable = function (input) {
+        var _this = this;
+        return this.container.getAsync('router').then(function (router) {
+            switch (input) {
+                case 'closed':
+                    _this.close();
+                    break;
+                case 'open':
+                    _this.open();
+                    break;
+                case 'hidden':
+                    _this.hide();
+                    router.start();
+                    break;
+                default:
+                    return;
+            }
+        });
+    };
+    Widget.prototype.getOrCreateViewOutlet = function (key, options) {
+        return (this.outlets.has(key) ? this.outlets.get(key) : new ViewOutlet(this.container, options));
+    };
+    Widget.prototype.render = function (renderData) {
+        if (renderData === void 0) { renderData = {}; }
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('widget.render() is deprecated. Use widget.attach() instead.');
+        }
+        if (renderData.open) {
+            var options = __assign(__assign({}, renderData), { withRenderState: InitialRenderState.Open });
+            return this.attach(options);
+        }
+        return this.attach(renderData);
+    };
+    Widget.prototype.activate = function (data) {
+        if (data === null || data === void 0 ? void 0 : data.override) {
+            this.setSettings(function () { return data.override; });
+        }
+        // TODO: this is considered a hack, remove apiNotificationPriorityBy
+        // when there is a better way to get notifications from backend
+        if (data === null || data === void 0 ? void 0 : data.apiNotificationPriorityBy) {
+            this.container.register('apiNotificationPriorityBy', data.apiNotificationPriorityBy);
+        }
+    };
+    Widget.prototype.setSettings = function (fn) {
+        var _this = this;
+        return Promise.all([
+            this.container.get('settings'),
+            createStorageWriter(this.container, SETTINGS_STORAGE_KEY, StorageCategory.Necessary, {
+                medium: StorageMedium.Local,
+            }),
+        ]).then(function (_a) {
+            var _b = __read(_a, 2), settings = _b[0], write = _b[1];
+            return Promise.resolve(fn(settings)).then(function (override) {
+                return write(override).then(function () {
+                    var updated = __assign(__assign({}, settings), override);
+                    _this.widget.events.dispatch('widget:settings-updated', updated);
+                    return updated;
+                });
+            });
+        });
+    };
+    Widget.prototype.clearSettings = function () {
+        var _this = this;
+        return createStorageWriter(this.container, SETTINGS_STORAGE_KEY, StorageCategory.Necessary, { medium: StorageMedium.Local })
+            .then(function (write) { return write(); })
+            .then(function () { return _this.container.get('settings'); })
+            .then(function (settings) {
+            _this.widget.events.dispatch('widget:settings-updated', settings);
+        });
+    };
+    Widget.prototype.action = function (_a) {
+        var _this = this;
+        var action = _a.action, value = _a.value;
+        return this.container.getAsync('actionResolver').then(function (actionResolver) {
+            actionResolver.action(_this.widget.name, action, value);
+        });
+    };
+    Widget.prototype.renderState = function () {
+        var _this = this;
+        if (onWidgetUrl(this.container)) {
+            return Promise.resolve(WidgetRenderState.open);
+        }
+        var readSessionOpen = function () {
+            return readStorage(_this.container, OPEN_STORAGE_KEY, StorageMedium.Session).then(function (value) {
+                if (value === void 0) { value = WidgetRenderState.closed; }
+                return value;
+            });
+        };
+        var readLocalOpen = function () {
+            return readStorage(_this.container, OPEN_STORAGE_KEY, StorageMedium.Session).then(function (value) {
+                if (value === void 0) { value = WidgetRenderState.closed; }
+                return value;
+            });
+        };
+        return this.container.getAsync('router').then(function (routing) {
+            if (routing.isSticky()) {
+                return readLocalOpen().then(function (localOpen) {
+                    return localOpen === WidgetRenderState.open ? localOpen : readSessionOpen();
+                });
+            }
+            return readSessionOpen();
+        });
+    };
+    Widget.prototype.hide = function () {
+        var _this = this;
+        if (this.outlets.size < 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('hide(): No-op as no view outlets are registered. Invoke the attach() command first.');
+            }
+            return Promise.resolve();
+        }
+        this.outlets.forEach(function (outlet) { return outlet.render(); });
+        return this.action({ action: 'hide' }).then(function () {
+            _this.setTriggerState(false);
+        });
+    };
+    Widget.prototype.open = function () {
+        var _this = this;
+        if (this.outlets.size < 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('open(): No-op as no view outlets are registered. Invoke the attach() command first.');
+            }
+            return Promise.resolve();
+        }
+        this.outlets.forEach(function (outlet) { return outlet.render(); });
+        return this.action({ action: 'open' }).then(function () {
+            _this.widget.events.dispatch('tracking:widget-rendered', {});
+            return _this.onOpen();
+        });
+    };
+    Widget.prototype.close = function () {
+        var _this = this;
+        if (this.outlets.size < 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('close(): No-op as no view outlets are registered. Invoke the attach() command first.');
+            }
+            return Promise.resolve();
+        }
+        return this.action({ action: 'close' }).then(function () { return _this.onClose(); });
+    };
+    Widget.prototype.show = function () {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn('show(): Command is deprecated and will be removed in the future. Use open() instead.');
+        }
+        return this.open();
+    };
+    Widget.prototype.onAction = function (action, value) {
+        var _this = this;
+        switch (action) {
+            case 'close':
+            case 'open':
+            case 'hide':
+                var newState_1 = action === 'open'
+                    ? WidgetRenderState.open
+                    : action === 'close'
+                        ? WidgetRenderState.closed
+                        : WidgetRenderState.hidden;
+                return this.setRenderState(newState_1).then(function () {
+                    _this.setTriggerState(newState_1 === WidgetRenderState.open);
+                    if (newState_1 !== WidgetRenderState.hidden) {
+                        newState_1 === WidgetRenderState.open ? _this.onOpen() : _this.onClose();
+                    }
+                    else {
+                        _this.outlets.forEach(function (outlet) { var _a; return (_a = outlet.options.triggerDOMElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false'); });
+                    }
+                });
+        }
+    };
+    Widget.prototype.setRenderState = function (newState) {
+        var _a = this.container.get('$widget'), invoke = _a.invoke, events = _a.events;
+        return Promise.all([
+            createStorageWriter(this.container, OPEN_STORAGE_KEY, StorageCategory.Necessary, {
+                medium: StorageMedium.Session,
+            }),
+            createStorageWriter(this.container, OPEN_STORAGE_KEY, StorageCategory.Necessary, {
+                medium: StorageMedium.Local,
+                duration: { minutes: 5 },
+            }),
+            this.container.getAsync('router'),
+            invoke('renderState'),
+        ]).then(function (_a) {
+            var _b = __read(_a, 4), writeSessionOpen = _b[0], writeLocalOpen = _b[1], routing = _b[2], previousRenderState = _b[3];
+            if (newState === 'unset' || !newState) {
+                writeLocalOpen();
+                writeSessionOpen();
+            }
+            else {
+                if (routing.isSticky()) {
+                    writeLocalOpen(newState);
+                }
+                writeSessionOpen(newState);
+            }
+            events.dispatch('widget:render-state-changed', {
+                previous: previousRenderState,
+                next: newState,
+            });
+        });
+    };
+    Widget.prototype.onOpen = function () {
+        var _this = this;
+        return this.container.getAsync('router').then(function (router) {
+            _this.outlets.forEach(function (outlet) { var _a; return (_a = outlet.options.triggerDOMElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true'); });
+            return router.start();
+        });
+    };
+    Widget.prototype.onClose = function () {
+        var _this = this;
+        var services = this.container.getManyAsync('router', 'components');
+        var resetActivateProp = function () {
+            return _this.container.get('settings').then(function (widgetSettings) {
+                var activate = _this.container.get('$settings').activate;
+                if (widgetSettings.activate !== activate) {
+                    return _this.setSettings(function () { return Promise.resolve({ activate: activate }); });
+                }
+                return Promise.resolve();
+            });
+        };
+        return resetActivateProp()
+            .then(function () {
+            return services;
+        })
+            .then(function (_a) {
+            var router = _a.router, components = _a.components;
+            var visibleNodes = components.nodes.visible;
+            _this.outlets.forEach(function (outlet) { var _a; return (_a = outlet.options.triggerDOMElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false'); });
+            if (visibleNodes.filter(function (c) {
+                return c.attributes.properties.animation &&
+                    c.attributes.properties.animation !== 'none';
+            }).length) {
+                return new Promise(function (resolve) {
+                    setTimeout(function () {
+                        resolve(router);
+                    }, 200);
+                });
+            }
+            return Promise.resolve(router);
+        })
+            .then(function (router) { return router.stop(); });
+    };
+    Widget.prototype.setTriggerState = function (open) {
+        this.outlets.forEach(function (outlet) {
+            var _a = outlet.options, triggerDOMElement = _a.triggerDOMElement, triggerOptions = _a.triggerOptions;
+            var _b = triggerOptions || {}, openTooltip = _b.openTooltip, closedTooltip = _b.closedTooltip;
+            if (triggerDOMElement) {
+                open
+                    ? setActive(triggerDOMElement, openTooltip)
+                    : setInactive(triggerDOMElement, closedTooltip);
+            }
+        });
+    };
+    Widget.prototype.deactivate = function () {
+        var _this = this;
+        this.subs.forEach(function (s) { return s(); });
+        var promises = [];
+        this.outlets.forEach(function (outlet) { return promises.push(outlet.dispose()); });
+        return readStorage(this.container, STICKY_WIDGET_STORAGE_KEY, StorageMedium.Local).then(function (value) {
+            /**
+             * Remove stored sticky widget from implementation's localStorage if applicable
+             */
+            if (value === _this.widget.name) {
+                return createStorageWriter(_this.container, STICKY_WIDGET_STORAGE_KEY, StorageCategory.Necessary, {
+                    medium: StorageMedium.Local,
+                    scope: StorageScope.Implementation,
+                })
+                    .then(function (write) { return write(); })
+                    .then(function () { return Promise.all(promises); });
+            }
+            return Promise.all(promises);
+        });
+    };
+    return Widget;
+}(WidgetType));
+export default Widget;

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@telia-ace/widget-types-grid",
+    "version": "1.0.0",
+    "description": "Type definition for Grid widget.",
+    "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"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/knowledge-serviceclient": "^1.0.0",
+        "@telia-ace/widget-core": "^1.0.0",
+        "@telia-ace/widget-forms": "^1.0.0",
+        "@telia-ace/widget-routing": "^1.0.0",
+        "@telia-ace/widget-services": "^1.0.0",
+        "@telia-ace/widget-ui": "^1.0.0",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/bootstrapping": "^1.0.12",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-router": "^5.0.0",
+        "react-router-dom": "^5.0.0",
+        "react-transition-group": "^4.2.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/react-router-dom": "^5.1.0",
+        "@types/react-transition-group": "^4.4.4",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "a45fde2bae0981a2a791a2362f2ecaf53430570b"
+}