@telia-ace/widget-types-grid 1.0.0

package/lib/widget.d.ts

@@ -0,0 +1,54 @@
+import { WidgetRenderState, WidgetSettings } from '@telia-ace/widget-core';
+import { BootstrappingActivationData } from '@webprovisions/bootstrapping';
+import { Container, EventSubscriptionCancellation, WidgetType } from '@webprovisions/platform';
+import { ViewOutlet } from '././ui/view-outlet';
+export declare enum InitialRenderState {
+    Open = "open",
+    Closed = "closed",
+    Hidden = "hidden",
+    Storage = "storage"
+}
+export declare type RenderData = {
+    widgetDOMElement?: HTMLElement;
+    triggerDOMElement?: HTMLElement;
+    key?: string;
+    open?: boolean;
+    withRenderState?: InitialRenderState;
+};
+export declare type AttachData = {
+    widgetDOMElement?: HTMLElement;
+    triggerDOMElement?: HTMLElement;
+    key?: string;
+    withRenderState?: InitialRenderState;
+};
+export default class Widget extends WidgetType {
+    outlets: Map<string, ViewOutlet>;
+    activated: Promise<void> | undefined;
+    subs: EventSubscriptionCancellation[];
+    constructor(container: Container);
+    handleBootstrapping: (activationData: BootstrappingActivationData) => void;
+    initialize(): Promise<void>;
+    attach(attachData?: AttachData): any;
+    detach(key?: string): void;
+    private triggerStateIfApplicable;
+    private getOrCreateViewOutlet;
+    render(renderData?: RenderData): any;
+    activate(data?: any): void;
+    setSettings(fn: (settings: WidgetSettings) => Promise<Partial<WidgetSettings>>): Promise<WidgetSettings>;
+    clearSettings(): Promise<void>;
+    action({ action, value }: {
+        action: string;
+        value?: any;
+    }): Promise<void>;
+    renderState(): Promise<WidgetRenderState>;
+    hide(): Promise<void>;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    show(): Promise<void>;
+    private onAction;
+    private setRenderState;
+    private onOpen;
+    private onClose;
+    private setTriggerState;
+    deactivate(): Promise<void[]>;
+}

package/lib/widget.js

@@ -0,0 +1,554 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialRenderState = void 0;
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_routing_1 = require("@telia-ace/widget-routing");
+var widget_services_1 = require("@telia-ace/widget-services");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var bootstrapping_1 = require("@webprovisions/bootstrapping");
+var platform_1 = require("@webprovisions/platform");
+var view_outlet_1 = require("././ui/view-outlet");
+var services_1 = require("./services");
+var html_element_handlers_1 = require("./ui/html-element-handlers");
+var prepare_dom_1 = require("./ui/prepare-dom");
+var SETTINGS_STORAGE_KEY = '$settings';
+var OPEN_STORAGE_KEY = 'open';
+var STICKY_WIDGET_STORAGE_KEY = 'activeStickyWidget';
+var InitialRenderState;
+(function (InitialRenderState) {
+    InitialRenderState["Open"] = "open";
+    InitialRenderState["Closed"] = "closed";
+    InitialRenderState["Hidden"] = "hidden";
+    InitialRenderState["Storage"] = "storage";
+})(InitialRenderState = exports.InitialRenderState || (exports.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 (0, services_1.createStorageService)(_this.container); });
+        _this.container.registerFactory('settings', function () {
+            return (0, widget_services_1.readStorage)(_this.container, SETTINGS_STORAGE_KEY, widget_services_1.StorageMedium.Local).then(function (settings) {
+                if (settings === void 0) { settings = {}; }
+                return __assign(__assign({}, _this.container.get('$settings')), settings);
+            });
+        });
+        (0, bootstrapping_1.supportBootstrapping)(_this, 'load', _this.handleBootstrapping);
+        _this.container.registerAsync('componentResolver', function () {
+            return (0, services_1.createComponentResolver)(_this.container);
+        });
+        _this.container.registerAsync('matchingClient', function () { return (0, services_1.createServiceClient)(_this.container); });
+        _this.container.registerAsync('router', function () { return (0, services_1.createRoutingService)(_this.container); });
+        _this.container.registerAsync('actionResolver', function () { return (0, services_1.createActionResolver)(_this.container); });
+        _this.container.register('matchMedia', window.matchMedia);
+        _this.container.registerAsync('components', function () { return (0, services_1.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);
+                }
+                (0, widget_utilities_1.removeNullAndUndefinedValues)(prevData && prevData.params);
+                (0, widget_utilities_1.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 ? (0, widget_utilities_1.uuid)() : _d, triggerDOMElement = attachData.triggerDOMElement, withRenderState = attachData.withRenderState;
+            var triggerType = (0, prepare_dom_1.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 === prepare_dom_1.TriggerType.Inline &&
+                ((triggerDOMElement === null || triggerDOMElement === void 0 ? void 0 : triggerDOMElement.childElementCount) || 0) > 0;
+            var outletOptions = (0, prepare_dom_1.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 === prepare_dom_1.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 !== prepare_dom_1.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 === widget_core_1.WidgetRenderState.open
+                                    ? _this.hide()
+                                    : _this.open();
+                            }
+                            return renderState === widget_core_1.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 === prepare_dom_1.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 view_outlet_1.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'),
+            (0, widget_services_1.createStorageWriter)(this.container, SETTINGS_STORAGE_KEY, widget_services_1.StorageCategory.Necessary, {
+                medium: widget_services_1.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 (0, widget_services_1.createStorageWriter)(this.container, SETTINGS_STORAGE_KEY, widget_services_1.StorageCategory.Necessary, { medium: widget_services_1.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 ((0, widget_routing_1.onWidgetUrl)(this.container)) {
+            return Promise.resolve(widget_core_1.WidgetRenderState.open);
+        }
+        var readSessionOpen = function () {
+            return (0, widget_services_1.readStorage)(_this.container, OPEN_STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (value) {
+                if (value === void 0) { value = widget_core_1.WidgetRenderState.closed; }
+                return value;
+            });
+        };
+        var readLocalOpen = function () {
+            return (0, widget_services_1.readStorage)(_this.container, OPEN_STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (value) {
+                if (value === void 0) { value = widget_core_1.WidgetRenderState.closed; }
+                return value;
+            });
+        };
+        return this.container.getAsync('router').then(function (routing) {
+            if (routing.isSticky()) {
+                return readLocalOpen().then(function (localOpen) {
+                    return localOpen === widget_core_1.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'
+                    ? widget_core_1.WidgetRenderState.open
+                    : action === 'close'
+                        ? widget_core_1.WidgetRenderState.closed
+                        : widget_core_1.WidgetRenderState.hidden;
+                return this.setRenderState(newState_1).then(function () {
+                    _this.setTriggerState(newState_1 === widget_core_1.WidgetRenderState.open);
+                    if (newState_1 !== widget_core_1.WidgetRenderState.hidden) {
+                        newState_1 === widget_core_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([
+            (0, widget_services_1.createStorageWriter)(this.container, OPEN_STORAGE_KEY, widget_services_1.StorageCategory.Necessary, {
+                medium: widget_services_1.StorageMedium.Session,
+            }),
+            (0, widget_services_1.createStorageWriter)(this.container, OPEN_STORAGE_KEY, widget_services_1.StorageCategory.Necessary, {
+                medium: widget_services_1.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
+                    ? (0, html_element_handlers_1.setActive)(triggerDOMElement, openTooltip)
+                    : (0, html_element_handlers_1.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 (0, widget_services_1.readStorage)(this.container, STICKY_WIDGET_STORAGE_KEY, widget_services_1.StorageMedium.Local).then(function (value) {
+            /**
+             * Remove stored sticky widget from implementation's localStorage if applicable
+             */
+            if (value === _this.widget.name) {
+                return (0, widget_services_1.createStorageWriter)(_this.container, STICKY_WIDGET_STORAGE_KEY, widget_services_1.StorageCategory.Necessary, {
+                    medium: widget_services_1.StorageMedium.Local,
+                    scope: widget_services_1.StorageScope.Implementation,
+                })
+                    .then(function (write) { return write(); })
+                    .then(function () { return Promise.all(promises); });
+            }
+            return Promise.all(promises);
+        });
+    };
+    return Widget;
+}(platform_1.WidgetType));
+exports.default = Widget;

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

@@ -0,0 +1,13 @@
+import { ChangesetOptions, ChangesetProvider, ComponentNodeSettings, ComponentPlatform, ComponentQuery } from '@telia-ace/widget-core';
+import { StorageWriter } from '@telia-ace/widget-services';
+import { Container, Widget } from '@webprovisions/platform';
+export declare class LocalStorageChangesetProvider implements ChangesetProvider {
+    private container;
+    private storageWriter;
+    constructor(container: Container, storageWriter: StorageWriter);
+    static create(container: Container): Promise<LocalStorageChangesetProvider>;
+    write(key: string, target: ComponentQuery, attributes: Partial<ComponentNodeSettings>, options: ChangesetOptions): Promise<any>;
+    remove(key: string): Promise<any>;
+    load(platform: ComponentPlatform): Promise<any>;
+}
+export declare const createPlatform: (widget: Widget) => Promise<ComponentPlatform>;