@wavemaker/app-ng-runtime 11.8.0-next.141670 → 11.8.0-next.141671

package/components/basic/default/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/core', '@wm/components/base', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = {}), global.ng.core, global.wm.core, global.wm.components.base, global.ng.common));
-})(this, (function (exports, i0, i1, i1$1, i2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('@angular/common'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/core', '@wm/components/base', '@angular/common', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = {}), global.ng.core, global.wm.core, global.wm.components.base, global.ng.common, global._));
+})(this, (function (exports, i0, i1, i1$1, i2, lodashEs) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -52,38 +52,38 @@
     };
 
     const _c0$5 = ["wmAnchor", ""];
-    const _c1$1 = function (a0, a1, a2) { return { width: a0, height: a1, margin: a2 }; };
+    const _c1$1 = [[["", 8, "caret"]]];
+    const _c2$1 = [".caret"];
+    const _c3 = (a0, a1, a2) => ({ width: a0, height: a1, margin: a2 });
     function AnchorComponent_img_0_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "img", 5);
         i0__namespace.ɵɵpipe(1, "image");
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c1$1, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
+        i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind1(1, 2, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
     } }
     function AnchorComponent_i_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i", 6);
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r1.iconclass, "");
-        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c1$1, ctx_r1.iconwidth, ctx_r1.iconheight, ctx_r1.iconmargin));
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx_r0.iconclass, "");
+        i0__namespace.ɵɵproperty("ngStyle", i0__namespace.ɵɵpureFunction3(4, _c3, ctx_r0.iconwidth, ctx_r0.iconheight, ctx_r0.iconmargin));
     } }
     function AnchorComponent_span_2_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "span", 7);
         i0__namespace.ɵɵtext(1);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵtextInterpolate2("", ctx_r2.caption, " ", ctx_r2.appLocale.LABEL_ICON, "");
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
     } }
     function AnchorComponent_span_5_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span", 8);
     } if (rf & 2) {
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("textContent", ctx_r3.badgevalue);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("textContent", ctx_r0.badgevalue);
     } }
-    const _c2$1 = [[["", 8, "caret"]]];
-    const _c3 = [".caret"];
     const DEFAULT_CLS$8 = 'app-anchor';
     const WIDGET_CONFIG$8 = {
         widgetType: 'wm-anchor',
@@ -96,8 +96,8 @@
     };
     class AnchorComponent extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$8(); }
-        constructor(inj, app) {
-            super(inj, WIDGET_CONFIG$8);
+        constructor(inj, app, explicitContext) {
+            super(inj, WIDGET_CONFIG$8, explicitContext);
             this.app = app;
             this._eventNotifier = new i1.EventNotifier();
             i1$1.styler(this.nativeElement, this);
@@ -193,38 +193,41 @@
             }
             super.ngOnDestroy();
         }
-        static { this.ɵfac = function AnchorComponent_Factory(t) { return new (t || AnchorComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App)); }; }
+        static { this.ɵfac = function AnchorComponent_Factory(t) { return new (t || AnchorComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1__namespace.App), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: AnchorComponent, selectors: [["a", "wmAnchor", ""]], hostVars: 3, hostBindings: function AnchorComponent_HostBindings(rf, ctx) { if (rf & 2) {
                 i0__namespace.ɵɵhostProperty("target", ctx.target);
                 i0__namespace.ɵɵattribute("accesskey", ctx.shortcutkey)("icon-position", ctx.iconposition);
             } }, exportAs: ["wmAnchor"], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(AnchorComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$5, ngContentSelectors: _c3, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "Image", "class", "anchor-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "anchor-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "Image", 1, "anchor-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function AnchorComponent_Template(rf, ctx) { if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef(_c2$1);
-                i0__namespace.ɵɵtemplate(0, AnchorComponent_img_0_Template, 2, 8, "img", 0);
-                i0__namespace.ɵɵtemplate(1, AnchorComponent_i_1_Template, 1, 8, "i", 1);
-                i0__namespace.ɵɵtemplate(2, AnchorComponent_span_2_Template, 2, 2, "span", 2);
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$5, ngContentSelectors: _c2$1, decls: 6, vars: 5, consts: [["data-identifier", "img", "alt", "Image", "class", "anchor-image-icon", 3, "src", "ngStyle", 4, "ngIf"], ["aria-hidden", "true", 3, "class", "ngStyle", 4, "ngIf"], ["class", "sr-only", 4, "ngIf"], [1, "anchor-caption", 3, "innerHTML"], ["class", "badge pull-right", 3, "textContent", 4, "ngIf"], ["data-identifier", "img", "alt", "Image", 1, "anchor-image-icon", 3, "src", "ngStyle"], ["aria-hidden", "true", 3, "ngStyle"], [1, "sr-only"], [1, "badge", "pull-right", 3, "textContent"]], template: function AnchorComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵprojectionDef(_c1$1);
+                i0__namespace.ɵɵtemplate(0, AnchorComponent_img_0_Template, 2, 8, "img", 0)(1, AnchorComponent_i_1_Template, 1, 8, "i", 1)(2, AnchorComponent_span_2_Template, 2, 2, "span", 2);
                 i0__namespace.ɵɵelement(3, "span", 3);
                 i0__namespace.ɵɵprojection(4);
                 i0__namespace.ɵɵtemplate(5, AnchorComponent_span_5_Template, 1, 1, "span", 4);
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("ngIf", ctx.iconurl);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("innerHTML", ctx.caption, i0__namespace.ɵɵsanitizeHtml);
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx.badgevalue);
             } }, dependencies: [i2__namespace.NgIf, i2__namespace.NgStyle, i1$1__namespace.TextContentDirective, i1$1__namespace.ImagePipe], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AnchorComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AnchorComponent, [{
             type: i0.Component,
             args: [{ selector: 'a[wmAnchor]', providers: [
                         i1$1.provideAsWidgetRef(AnchorComponent)
                     ], exportAs: 'wmAnchor', template: "<img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" *ngIf=\"iconurl\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n<i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\" *ngIf=\"iconclass\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n<span *ngIf=\"badgevalue\" class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1__namespace.App }]; }, { target: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { target: [{
                 type: i0.HostBinding,
                 args: ['target']
             }], shortcutkey: [{
@@ -234,6 +237,7 @@
                 type: i0.HostBinding,
                 args: ['attr.icon-position']
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(AnchorComponent, { className: "AnchorComponent", filePath: "anchor/anchor.component.ts", lineNumber: 28 }); })();
 
     const registerProps$7 = () => {
         i1$1.register('wm-audio', new Map([
@@ -261,14 +265,14 @@
     };
     class AudioComponent extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$7(); }
-        constructor(inj) {
-            super(inj, WIDGET_CONFIG$7);
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG$7, explicitContext);
             i1$1.styler(this.nativeElement, this);
         }
-        static { this.ɵfac = function AudioComponent_Factory(t) { return new (t || AudioComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵfac = function AudioComponent_Factory(t) { return new (t || AudioComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: AudioComponent, selectors: [["", "wmAudio", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(AudioComponent)
-                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$4, decls: 5, vars: 14, consts: [["role", "application", "aria-describedby", "recorded audio", 3, "src", "muted", "autoplay", "controls", "loop", "preload"], ["type", "audio/mp3", 3, "src"]], template: function AudioComponent_Template(rf, ctx) { if (rf & 1) {
+                ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$4, decls: 5, vars: 16, consts: [["name", "wmAudio", "tabindex", "1", "role", "application", "aria-describedby", "recorded audio", 3, "src", "muted", "autoplay", "controls", "loop", "preload"], ["type", "audio/mp3", 3, "src"]], template: function AudioComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "audio", 0);
                 i0__namespace.ɵɵpipe(1, "trustAs");
                 i0__namespace.ɵɵelement(2, "source", 1);
@@ -276,19 +280,26 @@
                 i0__namespace.ɵɵtext(4);
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
-                i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(1, 8, ctx.mp3format, "resource"), i0__namespace.ɵɵsanitizeUrl)("muted", ctx.muted)("autoplay", ctx.autoplay)("controls", ctx.controls)("loop", ctx.loop)("preload", ctx.audiopreload);
+                i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(1, 10, ctx.mp3format, "resource"), i0__namespace.ɵɵsanitizeUrl)("muted", ctx.muted)("autoplay", ctx.autoplay)("controls", ctx.controls)("loop", ctx.loop)("preload", ctx.audiopreload);
+                i0__namespace.ɵɵattribute("aria-label", ctx.hint || "wmAudio")("hint", ctx.hint);
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(3, 11, ctx.mp3format, "resource"), i0__namespace.ɵɵsanitizeUrl);
+                i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(3, 13, ctx.mp3format, "resource"), i0__namespace.ɵɵsanitizeUrl);
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵtextInterpolate1(" ", ctx.audiosupportmessage, "\n");
             } }, dependencies: [i1$1__namespace.TrustAsPipe], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AudioComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(AudioComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmAudio]', providers: [
                         i1$1.provideAsWidgetRef(AudioComponent)
-                    ], template: "<audio [src]=\"mp3format | trustAs: 'resource'\" [muted]=\"muted\" [autoplay]=\"autoplay\" [controls]=\"controls\" [loop]=\"loop\" [preload]=\"audiopreload\" role=\"application\" aria-describedby=\"recorded audio\">\n    <source type=\"audio/mp3\" [src]=\"mp3format | trustAs: 'resource'\">\n    {{audiosupportmessage}}\n</audio>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, null); })();
+                    ], template: "<audio [attr.aria-label]=\"hint || 'wmAudio'\" [attr.hint]=\"hint\" [src]=\"mp3format | trustAs: 'resource'\"\n    [muted]=\"muted\" name=\"wmAudio\" tabindex=\"1\" [autoplay]=\"autoplay\" [controls]=\"controls\" [loop]=\"loop\"\n    [preload]=\"audiopreload\" role=\"application\" aria-describedby=\"recorded audio\">\n    <source type=\"audio/mp3\" [src]=\"mp3format | trustAs: 'resource'\">\n    {{audiosupportmessage}}\n</audio>" }]
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(AudioComponent, { className: "AudioComponent", filePath: "audio/audio.component.ts", lineNumber: 20 }); })();
 
     const registerProps$6 = () => {
         i1$1.register('wm-html', new Map([
@@ -307,8 +318,8 @@
     };
     class HtmlDirective extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$6(); }
-        constructor(inj, height, boundContent, sanitizePipe) {
-            super(inj, WIDGET_CONFIG$6);
+        constructor(inj, height, boundContent, sanitizePipe, explicitContext) {
+            super(inj, WIDGET_CONFIG$6, explicitContext);
             this.boundContent = boundContent;
             this.sanitizePipe = sanitizePipe;
             // if the height is provided set the overflow to auto
@@ -342,12 +353,12 @@
                 super.onPropertyChange(key, nv, ov);
             }
         }
-        static { this.ɵfac = function HtmlDirective_Factory(t) { return new (t || HtmlDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('height'), i0__namespace.ɵɵinjectAttribute('content.bind'), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.SanitizePipe)); }; }
+        static { this.ɵfac = function HtmlDirective_Factory(t) { return new (t || HtmlDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵinjectAttribute('height'), i0__namespace.ɵɵinjectAttribute('content.bind'), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.SanitizePipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: HtmlDirective, selectors: [["", "wmHtml", ""]], exportAs: ["wmHtml"], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(HtmlDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(HtmlDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(HtmlDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmHtml]',
@@ -356,13 +367,18 @@
                     ],
                     exportAs: 'wmHtml'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['height']
                 }] }, { type: undefined, decorators: [{
                     type: i0.Attribute,
                     args: ['content.bind']
-                }] }, { type: i1$1__namespace.SanitizePipe }]; }, null); })();
+                }] }, { type: i1$1__namespace.SanitizePipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     const registerProps$5 = () => {
         i1$1.register('wm-icon', new Map([
@@ -388,14 +404,14 @@
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
     } }
     function IconComponent_label_2_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "label", 3);
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("textContent", ctx_r1.caption);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("textContent", ctx_r0.caption);
     } }
     const DEFAULT_CLS$5 = 'app-icon-wrapper';
     const WIDGET_CONFIG$5 = {
@@ -404,11 +420,11 @@
     };
     class IconComponent extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$5(); }
-        constructor(inj) {
-            super(inj, WIDGET_CONFIG$5);
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG$5, explicitContext);
             i1$1.styler(this.nativeElement, this);
         }
-        static { this.ɵfac = function IconComponent_Factory(t) { return new (t || IconComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector)); }; }
+        static { this.ɵfac = function IconComponent_Factory(t) { return new (t || IconComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: IconComponent, selectors: [["", "wmIcon", ""]], hostVars: 3, hostBindings: function IconComponent_HostBindings(rf, ctx) { if (rf & 2) {
                 i0__namespace.ɵɵattribute("icon-position", ctx.iconposition);
                 i0__namespace.ɵɵstyleProp("font-size", ctx.iconsize);
@@ -416,29 +432,34 @@
                     i1$1.provideAsWidgetRef(IconComponent)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$3, decls: 3, vars: 6, consts: [["class", "sr-only", 4, "ngIf"], ["class", "app-label", 3, "textContent", 4, "ngIf"], [1, "sr-only"], [1, "app-label", 3, "textContent"]], template: function IconComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelement(0, "i");
-                i0__namespace.ɵɵtemplate(1, IconComponent_span_1_Template, 2, 2, "span", 0);
-                i0__namespace.ɵɵtemplate(2, IconComponent_label_2_Template, 1, 1, "label", 1);
+                i0__namespace.ɵɵtemplate(1, IconComponent_span_1_Template, 2, 2, "span", 0)(2, IconComponent_label_2_Template, 1, 1, "label", 1);
             } if (rf & 2) {
                 i0__namespace.ɵɵclassMapInterpolate1("app-icon ", ctx.iconclass, "");
                 i0__namespace.ɵɵattribute("aria-label", ctx.hint || "Icon");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.iconclass);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.caption);
             } }, dependencies: [i2__namespace.NgIf, i1$1__namespace.TextContentDirective], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(IconComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(IconComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmIcon]', providers: [
                         i1$1.provideAsWidgetRef(IconComponent)
                     ], template: "<i class=\"app-icon {{iconclass}}\" [attr.aria-label]=\"hint || 'Icon'\"></i>\n<span class=\"sr-only\" *ngIf=\"iconclass\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n<label class=\"app-label\" [textContent]=\"caption\" *ngIf=\"caption\"></label>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }]; }, { iconposition: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { iconposition: [{
                 type: i0.HostBinding,
                 args: ['attr.icon-position']
             }], iconsize: [{
                 type: i0.HostBinding,
                 args: ['style.fontSize']
             }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(IconComponent, { className: "IconComponent", filePath: "icon/icon.component.ts", lineNumber: 18 }); })();
 
     const registerProps$4 = () => {
         i1$1.register('wm-iframe', new Map([
@@ -460,7 +481,7 @@
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
+        i0__namespace.ɵɵadvance();
         i0__namespace.ɵɵproperty("title", ctx_r0.hintMsg)("textContent", ctx_r0.errMsg);
     } }
     const DEFAULT_CLS$4 = 'embed-responsive app-iframe';
@@ -470,8 +491,8 @@
     };
     class IframeComponent extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$4(); }
-        constructor(inj, trustAsPipe) {
-            super(inj, WIDGET_CONFIG$4);
+        constructor(inj, trustAsPipe, explicitContext) {
+            super(inj, WIDGET_CONFIG$4, explicitContext);
             this.trustAsPipe = trustAsPipe;
             /**
              * this property member is set to true when the content request url doesn't match windows protocol
@@ -504,7 +525,7 @@
                 super.onPropertyChange(key, nv, ov);
             }
         }
-        static { this.ɵfac = function IframeComponent_Factory(t) { return new (t || IframeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.TrustAsPipe)); }; }
+        static { this.ɵfac = function IframeComponent_Factory(t) { return new (t || IframeComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.TrustAsPipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: IframeComponent, selectors: [["", "wmIframe", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(IframeComponent)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$2, decls: 2, vars: 4, consts: [["role", "document", "scrolling", "auto", "marginheight", "0", "marginwidth", "0", "frameborder", "0", "seamless", "seamless", 1, "embed-responsive-item", "iframe-content", 3, "name"], ["class", "wm-content-info readonly-wrapper", 4, "ngIf"], [1, "wm-content-info", "readonly-wrapper"], [1, "wm-message", 3, "title", "textContent"]], template: function IframeComponent_Template(rf, ctx) { if (rf & 1) {
@@ -513,16 +534,22 @@
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("name", ctx.name);
                 i0__namespace.ɵɵattribute("src", ctx._iframesrc, i0__namespace.ɵɵsanitizeResourceUrl)("aria-label", ctx.hint || "iframe");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.showContentLoadError);
             } }, dependencies: [i2__namespace.NgIf, i1$1__namespace.TextContentDirective], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(IframeComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(IframeComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmIframe]', providers: [
                         i1$1.provideAsWidgetRef(IframeComponent)
                     ], template: "<iframe  class=\"embed-responsive-item iframe-content\" role=\"document\"\n        scrolling=\"auto\"\n        marginheight=\"0\"\n        marginwidth=\"0\"\n        frameborder=\"0\"\n        [name]=\"name\"\n        [attr.src]=\"_iframesrc\"\n        [attr.aria-label]=\"hint || 'iframe'\"\n        seamless=\"seamless\">\n</iframe>\n<div class=\"wm-content-info readonly-wrapper\" *ngIf=\"showContentLoadError\">\n    <p class=\"wm-message\" [title]=\"hintMsg\" [textContent]=\"errMsg\"></p>\n</div>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.TrustAsPipe }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.TrustAsPipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(IframeComponent, { className: "IframeComponent", filePath: "iframe/iframe.component.ts", lineNumber: 22 }); })();
 
     const registerProps$3 = () => {
         i1$1.register('wm-label', new Map([
@@ -548,8 +575,8 @@
     };
     class LabelDirective extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$3(); }
-        constructor(inj, sanitizePipe) {
-            super(inj, WIDGET_CONFIG$3);
+        constructor(inj, sanitizePipe, explicitContext) {
+            super(inj, WIDGET_CONFIG$3, explicitContext);
             this.sanitizePipe = sanitizePipe;
             i1$1.styler(this.nativeElement, this);
         }
@@ -558,10 +585,10 @@
                 // Check for trustPipe safe values
                 let bindContent = this.nativeElement.getAttribute('caption.bind');
                 let safeValue = bindContent ? nv && bindContent.includes('trustAs:') : false;
-                if (_.isObject(nv) && !safeValue) {
+                if (lodashEs.isObject(nv) && !safeValue) {
                     i1.setProperty(this.nativeElement, 'textContent', JSON.stringify(nv));
                 }
-                else if (_.isObject(nv) && safeValue) {
+                else if (lodashEs.isObject(nv) && safeValue) {
                     i1.setProperty(this.nativeElement, 'innerHTML', nv[Object.keys(nv)[0]]);
                 }
                 else {
@@ -575,12 +602,12 @@
                 super.onPropertyChange(key, nv, ov);
             }
         }
-        static { this.ɵfac = function LabelDirective_Factory(t) { return new (t || LabelDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.SanitizePipe)); }; }
+        static { this.ɵfac = function LabelDirective_Factory(t) { return new (t || LabelDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.SanitizePipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: LabelDirective, selectors: [["", "wmLabel", ""]], exportAs: ["wmLabel"], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(LabelDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LabelDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LabelDirective, [{
             type: i0.Directive,
             args: [{
                     selector: '[wmLabel]',
@@ -589,7 +616,12 @@
                     ],
                     exportAs: 'wmLabel'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.SanitizePipe }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.SanitizePipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
 
     const registerProps$2 = () => {
         const props = new Map([
@@ -622,8 +654,8 @@
     };
     class PictureDirective extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps$2(); }
-        constructor(inj, imagePipe) {
-            super(inj, WIDGET_CONFIG$2);
+        constructor(inj, imagePipe, explicitContext) {
+            super(inj, WIDGET_CONFIG$2, explicitContext);
             this.imagePipe = imagePipe;
             i1$1.styler(this.nativeElement, this);
         }
@@ -679,14 +711,14 @@
             this.setImgSource();
             super.ngOnInit();
         }
-        static { this.ɵfac = function PictureDirective_Factory(t) { return new (t || PictureDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.ImagePipe)); }; }
+        static { this.ɵfac = function PictureDirective_Factory(t) { return new (t || PictureDirective)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.ImagePipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: PictureDirective, selectors: [["img", "wmPicture", ""]], hostVars: 1, hostBindings: function PictureDirective_HostBindings(rf, ctx) { if (rf & 2) {
                 i0__namespace.ɵɵhostProperty("src", ctx.imgSource, i0__namespace.ɵɵsanitizeUrl);
             } }, exportAs: ["wmPicture"], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(PictureDirective)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PictureDirective, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PictureDirective, [{
             type: i0.Directive,
             args: [{
                     selector: 'img[wmPicture]',
@@ -695,7 +727,12 @@
                     ],
                     exportAs: 'wmPicture'
                 }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.ImagePipe }]; }, { imgSource: [{
+        }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.ImagePipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], { imgSource: [{
                 type: i0.HostBinding,
                 args: ['src']
             }] }); })();
@@ -719,41 +756,41 @@
     };
 
     const _c0$1 = ["wmSpinner", ""];
-    const _c1 = function (a0, a1, a2, a3) { return { width: a0, height: a1, backgroundImage: a2, backgroundSize: a3 }; };
+    const _c1 = (a0, a1, a2, a3) => ({ width: a0, height: a1, backgroundImage: a2, backgroundSize: a3 });
+    const _c2 = (a0, a1) => [a0, a1];
     function SpinnerComponent_span_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span", 5);
     } if (rf & 2) {
         const ctx_r0 = i0__namespace.ɵɵnextContext();
         i0__namespace.ɵɵproperty("ngClass", ctx_r0.animation)("ngStyle", i0__namespace.ɵɵpureFunction4(2, _c1, ctx_r0.imagewidth, ctx_r0.imageheight, "url(" + ctx_r0.picture + ")", ctx_r0.imagewidth));
     } }
-    const _c2 = function (a0, a1) { return [a0, a1]; };
     function SpinnerComponent_i_2_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "i", 6);
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵstyleProp("fon-size", ctx_r1.iconsize);
-        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(3, _c2, ctx_r1.iconclass, ctx_r1.animation));
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵstyleProp("fon-size", ctx_r0.iconsize);
+        i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(3, _c2, ctx_r0.iconclass, ctx_r0.animation));
     } }
     function SpinnerComponent_span_3_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "span", 7);
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("innerHTML", ctx_r2.caption, i0__namespace.ɵɵsanitizeHtml);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("innerHTML", ctx_r0.caption, i0__namespace.ɵɵsanitizeHtml);
     } }
     function SpinnerComponent_div_4_p_1_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "p", 10);
     } if (rf & 2) {
-        const value_r5 = ctx.$implicit;
-        i0__namespace.ɵɵproperty("textContent", value_r5);
+        const value_r2 = ctx.$implicit;
+        i0__namespace.ɵɵproperty("textContent", value_r2);
     } }
     function SpinnerComponent_div_4_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelementStart(0, "div", 8);
         i0__namespace.ɵɵtemplate(1, SpinnerComponent_div_4_p_1_Template, 1, 1, "p", 9);
         i0__namespace.ɵɵelementEnd();
     } if (rf & 2) {
-        const ctx_r3 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵadvance(1);
-        i0__namespace.ɵɵproperty("ngForOf", ctx_r3.spinnerMessages);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵadvance();
+        i0__namespace.ɵɵproperty("ngForOf", ctx_r0.spinnerMessages);
     } }
     const DEFAULT_CLS$1 = 'app-spinner';
     const WIDGET_CONFIG$1 = { widgetType: 'wm-spinner', hostClass: DEFAULT_CLS$1 };
@@ -763,20 +800,20 @@
             return this._spinnerMessages;
         }
         set spinnerMessages(newVal) {
-            this.showCaption = _.isEmpty(newVal);
+            this.showCaption = lodashEs.isEmpty(newVal);
             this._spinnerMessages = newVal;
         }
         listenOnDataSource() {
-            const variables = _.split(this.servicevariabletotrack, ',');
+            const variables = lodashEs.split(this.servicevariabletotrack, ',');
             this.getAppInstance().subscribe('toggle-variable-state', data => {
                 const name = data.variable.execute(i1.DataSource.Operation.GET_NAME);
-                if (_.includes(variables, name) && i1.validateDataSourceCtx(data.variable, this.getViewParent())) {
+                if (lodashEs.includes(variables, name) && i1.validateDataSourceCtx(data.variable, this.getViewParent())) {
                     this.widget.show = data.active;
                 }
             });
         }
-        constructor(inj, imagePipe) {
-            super(inj, WIDGET_CONFIG$1);
+        constructor(inj, imagePipe, explicitContext) {
+            super(inj, WIDGET_CONFIG$1, explicitContext);
             this.imagePipe = imagePipe;
             this.iconclass = '';
             this.animation = '';
@@ -807,33 +844,36 @@
                 this.listenOnDataSource();
             }
         }
-        static { this.ɵfac = function SpinnerComponent_Factory(t) { return new (t || SpinnerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.ImagePipe)); }; }
+        static { this.ɵfac = function SpinnerComponent_Factory(t) { return new (t || SpinnerComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.ImagePipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: SpinnerComponent, selectors: [["", "wmSpinner", ""]], exportAs: ["wmSpinner"], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(SpinnerComponent)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0$1, decls: 5, vars: 4, consts: [[1, "spinner-message"], ["class", "spinner-image animated infinite", "aria-hidden", "true", 3, "ngClass", "ngStyle", 4, "ngIf"], ["class", "spinner-image animated infinite", "aria-hidden", "true", 3, "ngClass", "fonSize", 4, "ngIf"], ["class", "spinner-text", 3, "innerHTML", 4, "ngIf"], ["class", "spinner-messages", 4, "ngIf"], ["aria-hidden", "true", 1, "spinner-image", "animated", "infinite", 3, "ngClass", "ngStyle"], ["aria-hidden", "true", 1, "spinner-image", "animated", "infinite", 3, "ngClass"], [1, "spinner-text", 3, "innerHTML"], [1, "spinner-messages"], [3, "textContent", 4, "ngFor", "ngForOf"], [3, "textContent"]], template: function SpinnerComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div", 0);
-                i0__namespace.ɵɵtemplate(1, SpinnerComponent_span_1_Template, 1, 7, "span", 1);
-                i0__namespace.ɵɵtemplate(2, SpinnerComponent_i_2_Template, 1, 6, "i", 2);
-                i0__namespace.ɵɵtemplate(3, SpinnerComponent_span_3_Template, 1, 1, "span", 3);
-                i0__namespace.ɵɵtemplate(4, SpinnerComponent_div_4_Template, 2, 1, "div", 4);
+                i0__namespace.ɵɵtemplate(1, SpinnerComponent_span_1_Template, 1, 7, "span", 1)(2, SpinnerComponent_i_2_Template, 1, 6, "i", 2)(3, SpinnerComponent_span_3_Template, 1, 1, "span", 3)(4, SpinnerComponent_div_4_Template, 2, 1, "div", 4);
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.type === "image");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.type === "icon");
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.showCaption);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", !ctx.showCaption && ctx.spinnerMessages);
             } }, dependencies: [i2__namespace.NgClass, i2__namespace.NgForOf, i2__namespace.NgIf, i2__namespace.NgStyle, i1$1__namespace.TextContentDirective], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SpinnerComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SpinnerComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmSpinner]', providers: [
                         i1$1.provideAsWidgetRef(SpinnerComponent)
                     ], exportAs: 'wmSpinner', template: "<div class=\"spinner-message\">\n    <span class=\"spinner-image animated infinite\" [ngClass]=\"animation\" aria-hidden=\"true\"\n        [ngStyle]=\"{width: imagewidth, height: imageheight, backgroundImage: 'url(' + picture + ')', backgroundSize: imagewidth}\"\n        *ngIf=\"type === 'image'\"></span>\n    <i class=\"spinner-image animated infinite\" aria-hidden=\"true\" [ngClass]=\"[iconclass, animation]\" [style.fonSize]=\"iconsize\" *ngIf=\"type === 'icon'\"></i>\n    <span class=\"spinner-text\" [innerHTML]=\"caption\" *ngIf=\"showCaption\"></span>\n    <div class=\"spinner-messages\" *ngIf=\"!showCaption && spinnerMessages\">\n        <p *ngFor=\"let value of spinnerMessages\" [textContent]=\"value\"></p>\n    </div>\n</div>\n" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.ImagePipe }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.ImagePipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(SpinnerComponent, { className: "SpinnerComponent", filePath: "spinner/spinner.component.ts", lineNumber: 20 }); })();
 
     const registerProps = () => {
         i1$1.register('wm-video', new Map([
@@ -869,15 +909,15 @@
         i0__namespace.ɵɵelement(0, "source", 5);
         i0__namespace.ɵɵpipe(1, "trustAs");
     } if (rf & 2) {
-        const ctx_r1 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(1, 1, ctx_r1.webmformat, "resource"), i0__namespace.ɵɵsanitizeUrl);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(1, 1, ctx_r0.webmformat, "resource"), i0__namespace.ɵɵsanitizeUrl);
     } }
     function VideoComponent_source_5_Template(rf, ctx) { if (rf & 1) {
         i0__namespace.ɵɵelement(0, "source", 6);
         i0__namespace.ɵɵpipe(1, "trustAs");
     } if (rf & 2) {
-        const ctx_r2 = i0__namespace.ɵɵnextContext();
-        i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(1, 1, ctx_r2.oggformat, "resource"), i0__namespace.ɵɵsanitizeUrl);
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("src", i0__namespace.ɵɵpipeBind2(1, 1, ctx_r0.oggformat, "resource"), i0__namespace.ɵɵsanitizeUrl);
     } }
     const DEFAULT_CLS = 'app-video';
     const WIDGET_CONFIG = {
@@ -887,8 +927,8 @@
     };
     class VideoComponent extends i1$1.StylableComponent {
         static { this.initializeProps = registerProps(); }
-        constructor(inj, trustAsPipe) {
-            super(inj, WIDGET_CONFIG);
+        constructor(inj, trustAsPipe, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
             this.trustAsPipe = trustAsPipe;
             /**
              * subtitle language property eg: en
@@ -923,36 +963,40 @@
             }
             super.onPropertyChange(key, nv, ov);
         }
-        static { this.ɵfac = function VideoComponent_Factory(t) { return new (t || VideoComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.TrustAsPipe)); }; }
+        static { this.ɵfac = function VideoComponent_Factory(t) { return new (t || VideoComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.Injector), i0__namespace.ɵɵdirectiveInject(i1$1__namespace.TrustAsPipe), i0__namespace.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
         static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: VideoComponent, selectors: [["", "wmVideo", ""]], features: [i0__namespace.ɵɵProvidersFeature([
                     i1$1.provideAsWidgetRef(VideoComponent)
                 ]), i0__namespace.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 16, consts: [["role", "application", 3, "preload", "src", "muted", "poster", "controls", "loop", "autoplay"], ["type", "video/mp4", 3, "src", 4, "ngIf"], ["type", "video/webm", 3, "src", 4, "ngIf"], ["type", "video/ogg", 3, "src", 4, "ngIf"], ["type", "video/mp4", 3, "src"], ["type", "video/webm", 3, "src"], ["type", "video/ogg", 3, "src"]], template: function VideoComponent_Template(rf, ctx) { if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "video", 0);
                 i0__namespace.ɵɵpipe(1, "trustAs");
                 i0__namespace.ɵɵpipe(2, "image");
-                i0__namespace.ɵɵtemplate(3, VideoComponent_source_3_Template, 2, 4, "source", 1);
-                i0__namespace.ɵɵtemplate(4, VideoComponent_source_4_Template, 2, 4, "source", 2);
-                i0__namespace.ɵɵtemplate(5, VideoComponent_source_5_Template, 2, 4, "source", 3);
+                i0__namespace.ɵɵtemplate(3, VideoComponent_source_3_Template, 2, 4, "source", 1)(4, VideoComponent_source_4_Template, 2, 4, "source", 2)(5, VideoComponent_source_5_Template, 2, 4, "source", 3);
                 i0__namespace.ɵɵtext(6);
                 i0__namespace.ɵɵelementEnd();
             } if (rf & 2) {
                 i0__namespace.ɵɵproperty("preload", ctx.videopreload)("src", i0__namespace.ɵɵpipeBind2(1, 11, ctx.mp4format, "resource"), i0__namespace.ɵɵsanitizeUrl)("muted", ctx.muted)("poster", i0__namespace.ɵɵpipeBind1(2, 14, ctx.videoposter), i0__namespace.ɵɵsanitizeUrl)("controls", ctx.controls)("loop", ctx.loop)("autoplay", ctx.autoplay);
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("ngIf", ctx.mp4format);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.webmformat);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵproperty("ngIf", ctx.oggformat);
-                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵadvance();
                 i0__namespace.ɵɵtextInterpolate1(" ", ctx.videosupportmessage, "\n");
             } }, dependencies: [i2__namespace.NgIf, i1$1__namespace.TrustAsPipe, i1$1__namespace.ImagePipe], encapsulation: 2 }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(VideoComponent, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(VideoComponent, [{
             type: i0.Component,
             args: [{ selector: '[wmVideo]', providers: [
                         i1$1.provideAsWidgetRef(VideoComponent)
                     ], template: "<video [preload]=\"videopreload\" role=\"application\"\n       [src]=\"mp4format | trustAs: 'resource'\"\n       [muted]=\"muted\"\n       [poster]=\"videoposter | image\"\n       [controls]=\"controls\"\n       [loop]=\"loop\"\n       [autoplay]=\"autoplay\">\n    <source type=\"video/mp4\" [src]=\"mp4format | trustAs: 'resource'\" *ngIf=\"mp4format\">\n    <source type=\"video/webm\" [src]=\"webmformat | trustAs: 'resource'\" *ngIf=\"webmformat\">\n    <source type=\"video/ogg\" [src]=\"oggformat | trustAs: 'resource'\" *ngIf=\"oggformat\">\n    {{videosupportmessage}}\n</video>" }]
-        }], function () { return [{ type: i0__namespace.Injector }, { type: i1$1__namespace.TrustAsPipe }]; }, null); })();
+        }], () => [{ type: i0__namespace.Injector }, { type: i1$1__namespace.TrustAsPipe }, { type: undefined, decorators: [{
+                    type: i0.Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: i0.Optional
+                }] }], null); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(VideoComponent, { className: "VideoComponent", filePath: "video/video.component.ts", lineNumber: 22 }); })();
 
     const components = [
         AnchorComponent,
@@ -971,7 +1015,7 @@
         static { this.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [i2.CommonModule,
                 i1$1.WmComponentsModule] }); }
     }
-    (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BasicModule, [{
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(BasicModule, [{
             type: i0.NgModule,
             args: [{
                     imports: [