@wavemaker/app-ng-runtime 12.0.0-next.141131 → 12.0.0-next.141138

app-ng-runtime/components/basic/default/fesm2022/index.mjs

@@ -18,6 +18,7 @@ const registerProps$8 = () => {
         ['conditionalstyle', PROP_ANY],
         ['encodeurl', PROP_BOOLEAN],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['hyperlink', { value: '', ...PROP_STRING }],
         ['iconclass', PROP_STRING],
         ['iconheight', PROP_STRING],
@@ -219,7 +220,7 @@ class AnchorComponent extends StylableComponent {
             type: HostBinding,
             args: ['attr.icon-position']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnchorComponent, { className: "AnchorComponent", filePath: "anchor/anchor.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnchorComponent, { className: "AnchorComponent", filePath: "anchor/anchor.component.ts", lineNumber: 37 }); })();
 
 const registerProps$7 = () => {
     register('wm-audio', new Map([
@@ -229,6 +230,7 @@ const registerProps$7 = () => {
         ['class', PROP_STRING],
         ['controls', PROP_BOOLEAN],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['loop', PROP_BOOLEAN],
         ['mp3format', PROP_STRING],
         ['muted', PROP_BOOLEAN],
@@ -251,10 +253,18 @@ class AudioComponent extends StylableComponent {
         super(inj, WIDGET_CONFIG$7, explicitContext);
         styler(this.nativeElement, this);
     }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'tabindex') {
+            return;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
     static { this.ɵfac = function AudioComponent_Factory(t) { return new (t || AudioComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AudioComponent, selectors: [["", "wmAudio", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(AudioComponent)
-            ]), i0.ɵɵ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.ɵɵInheritDefinitionFeature], attrs: _c0$4, decls: 5, vars: 17, consts: [["name", "wmAudio", 3, "autoplay", "controls", "loop", "muted", "preload", "src", "tabindex"], ["type", "audio/mp3", 3, "src"]], template: function AudioComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "audio", 0);
             i0.ɵɵpipe(1, "trustAs");
             i0.ɵɵelement(2, "source", 1);
@@ -262,10 +272,10 @@ class AudioComponent extends StylableComponent {
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("src", i0.ɵɵpipeBind2(1, 10, ctx.mp3format, "resource"), i0.ɵɵsanitizeUrl)("muted", ctx.muted)("autoplay", ctx.autoplay)("controls", ctx.controls)("loop", ctx.loop)("preload", ctx.audiopreload);
-            i0.ɵɵattribute("aria-label", ctx.hint || "wmAudio")("hint", ctx.hint);
+            i0.ɵɵproperty("autoplay", ctx.autoplay)("controls", ctx.controls)("loop", ctx.loop)("muted", ctx.muted)("preload", ctx.audiopreload)("src", i0.ɵɵpipeBind2(1, 11, ctx.mp3format, "resource"), i0.ɵɵsanitizeUrl)("tabindex", ctx.tabindex);
+            i0.ɵɵattribute("aria-label", ctx.arialabel || "Audio")("hint", ctx.hint);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("src", i0.ɵɵpipeBind2(3, 13, ctx.mp3format, "resource"), i0.ɵɵsanitizeUrl);
+            i0.ɵɵproperty("src", i0.ɵɵpipeBind2(3, 14, ctx.mp3format, "resource"), i0.ɵɵsanitizeUrl);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", ctx.audiosupportmessage, "\n");
         } }, dependencies: [i1$1.TrustAsPipe], encapsulation: 2 }); }
@@ -274,7 +284,7 @@ class AudioComponent extends StylableComponent {
         type: Component,
         args: [{ selector: '[wmAudio]', providers: [
                     provideAsWidgetRef(AudioComponent)
-                ], 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>" }]
+                ], template: "<audio [attr.aria-label]=\"arialabel || 'Audio'\" [attr.hint]=\"hint\" [autoplay]=\"autoplay\"\n       [controls]=\"controls\" [loop]=\"loop\" [muted]=\"muted\" [preload]=\"audiopreload\" [src]=\"mp3format | trustAs: 'resource'\"\n       name=\"wmAudio\" [tabindex]=\"tabindex\">\n    <source type=\"audio/mp3\" [src]=\"mp3format | trustAs: 'resource'\">\n    {{audiosupportmessage}}\n</audio>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -288,6 +298,7 @@ const registerProps$6 = () => {
         ['class', PROP_STRING],
         ['content', PROP_STRING],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['name', PROP_STRING],
         ['show', { value: true, ...PROP_BOOLEAN }]
     ]));
@@ -370,6 +381,7 @@ const registerProps$5 = () => {
         ['conditionalclass', PROP_ANY],
         ['conditionalstyle', PROP_ANY],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['iconclass', { value: 'wm-sl-l sl-user', ...PROP_STRING }],
         ['iconposition', { value: 'left', ...PROP_STRING }],
         ['iconsize', PROP_STRING],
@@ -387,7 +399,7 @@ function IconComponent_span_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", ctx_r0.caption, " ", ctx_r0.appLocale.LABEL_ICON, "");
+    i0.ɵɵtextInterpolate(ctx_r0.arialabel || ctx_r0.caption || ctx_r0.appLocale.LABEL_ICON);
 } }
 function IconComponent_label_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "label", 3);
@@ -412,12 +424,11 @@ class IconComponent extends StylableComponent {
             i0.ɵɵstyleProp("font-size", ctx.iconsize);
         } }, features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(IconComponent)
-            ]), i0.ɵɵ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.ɵɵInheritDefinitionFeature], attrs: _c0$3, decls: 3, vars: 5, consts: [["class", "sr-only", 4, "ngIf"], ["aria-hidden", "true", "class", "app-label", 3, "textContent", 4, "ngIf"], [1, "sr-only"], ["aria-hidden", "true", 1, "app-label", 3, "textContent"]], template: function IconComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelement(0, "i");
-            i0.ɵɵtemplate(1, IconComponent_span_1_Template, 2, 2, "span", 0)(2, IconComponent_label_2_Template, 1, 1, "label", 1);
+            i0.ɵɵtemplate(1, IconComponent_span_1_Template, 2, 1, "span", 0)(2, IconComponent_label_2_Template, 1, 1, "label", 1);
         } if (rf & 2) {
             i0.ɵɵclassMapInterpolate1("app-icon ", ctx.iconclass, "");
-            i0.ɵɵattribute("aria-label", ctx.hint || "Icon");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.iconclass);
             i0.ɵɵadvance();
@@ -428,7 +439,7 @@ class IconComponent extends StylableComponent {
         type: Component,
         args: [{ selector: '[wmIcon]', providers: [
                     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" }]
+                ], template: "<i class=\"app-icon {{iconclass}}\"></i>\n<span *ngIf=\"iconclass\" class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n<label *ngIf=\"caption\" [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n" }]
     }], () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -441,7 +452,7 @@ class IconComponent extends StylableComponent {
             type: HostBinding,
             args: ['style.fontSize']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IconComponent, { className: "IconComponent", filePath: "icon/icon.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IconComponent, { className: "IconComponent", filePath: "icon/icon.component.ts", lineNumber: 19 }); })();
 
 const registerProps$4 = () => {
     register('wm-iframe', new Map([
@@ -452,7 +463,8 @@ const registerProps$4 = () => {
         ['name', PROP_STRING],
         ['show', { value: true, ...PROP_BOOLEAN }],
         ['width', { value: '300px', ...PROP_STRING }],
-        ['hint', PROP_STRING]
+        ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING]
     ]));
 };
 
@@ -515,7 +527,7 @@ class IframeComponent extends StylableComponent {
             i0.ɵɵtemplate(1, IframeComponent_div_1_Template, 2, 2, "div", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("name", ctx.name);
-            i0.ɵɵattribute("src", ctx._iframesrc, i0.ɵɵsanitizeResourceUrl)("aria-label", ctx.hint || "iframe");
+            i0.ɵɵattribute("src", ctx._iframesrc, i0.ɵɵsanitizeResourceUrl)("aria-label", ctx.arialabel || "iframe");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showContentLoadError);
         } }, dependencies: [i2.NgIf, i1$1.TextContentDirective], encapsulation: 2 }); }
@@ -524,7 +536,7 @@ class IframeComponent extends StylableComponent {
         type: Component,
         args: [{ selector: '[wmIframe]', providers: [
                     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" }]
+                ], 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]=\"arialabel || '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" }]
     }], () => [{ type: i0.Injector }, { type: i1$1.TrustAsPipe }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']
@@ -613,8 +625,10 @@ const registerProps$2 = () => {
         ['conditionalstyle', PROP_ANY],
         ['encodeurl', PROP_STRING],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['name', PROP_STRING],
         ['pictureaspect', { value: 'None', ...PROP_STRING }],
+        ['alttext', { value: 'Image alt text not provided', ...PROP_STRING }],
         ['pictureplaceholder', PROP_STRING],
         ['picturesource', PROP_STRING],
         ['resizemode', { value: 'fill', ...PROP_STRING }],
@@ -733,7 +747,8 @@ const registerProps$1 = () => {
         ['show', { value: true, ...PROP_BOOLEAN }],
         ['type', { value: 'icon', ...PROP_STRING }],
         ['servicevariabletotrack', PROP_STRING],
-        ['hint', PROP_STRING]
+        ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING]
     ]));
 };
 
@@ -863,6 +878,7 @@ const registerProps = () => {
         ['class', PROP_STRING],
         ['controls', PROP_BOOLEAN],
         ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
         ['loop', PROP_BOOLEAN],
         ['mp4format', PROP_STRING],
         ['muted', PROP_BOOLEAN],
@@ -943,12 +959,15 @@ class VideoComponent extends StylableComponent {
         else if (key === 'oggformat') {
             this.oggformat = transformFileURI(nv);
         }
+        else if (key === 'tabindex') {
+            return;
+        }
         super.onPropertyChange(key, nv, ov);
     }
     static { this.ɵfac = function VideoComponent_Factory(t) { return new (t || VideoComponent)(i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i1$1.TrustAsPipe), i0.ɵɵdirectiveInject('EXPLICIT_CONTEXT', 8)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VideoComponent, selectors: [["", "wmVideo", ""]], features: [i0.ɵɵProvidersFeature([
                 provideAsWidgetRef(VideoComponent)
-            ]), i0.ɵɵ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.ɵɵInheritDefinitionFeature], attrs: _c0, decls: 7, vars: 18, consts: [[3, "preload", "src", "muted", "poster", "controls", "loop", "autoplay", "tabindex"], ["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.ɵɵelementStart(0, "video", 0);
             i0.ɵɵpipe(1, "trustAs");
             i0.ɵɵpipe(2, "image");
@@ -956,7 +975,8 @@ class VideoComponent extends StylableComponent {
             i0.ɵɵtext(6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("preload", ctx.videopreload)("src", i0.ɵɵpipeBind2(1, 11, ctx.mp4format, "resource"), i0.ɵɵsanitizeUrl)("muted", ctx.muted)("poster", i0.ɵɵpipeBind1(2, 14, ctx.videoposter), i0.ɵɵsanitizeUrl)("controls", ctx.controls)("loop", ctx.loop)("autoplay", ctx.autoplay);
+            i0.ɵɵproperty("preload", ctx.videopreload)("src", i0.ɵɵpipeBind2(1, 13, ctx.mp4format, "resource"), i0.ɵɵsanitizeUrl)("muted", ctx.muted)("poster", i0.ɵɵpipeBind1(2, 16, ctx.videoposter), i0.ɵɵsanitizeUrl)("controls", ctx.controls)("loop", ctx.loop)("autoplay", ctx.autoplay)("tabindex", ctx.tabindex);
+            i0.ɵɵattribute("aria-label", ctx.arialabel || "video");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.mp4format);
             i0.ɵɵadvance();
@@ -971,7 +991,7 @@ class VideoComponent extends StylableComponent {
         type: Component,
         args: [{ selector: '[wmVideo]', providers: [
                     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>" }]
+                ], template: "<video [attr.aria-label]=\"arialabel || 'video'\" [preload]=\"videopreload\"\n       [src]=\"mp4format | trustAs: 'resource'\"\n       [muted]=\"muted\"\n       [poster]=\"videoposter | image\"\n       [controls]=\"controls\"\n       [loop]=\"loop\"\n       [autoplay]=\"autoplay\" [tabindex]=\"tabindex\">\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>\n" }]
     }], () => [{ type: i0.Injector }, { type: i1$1.TrustAsPipe }, { type: undefined, decorators: [{
                 type: Inject,
                 args: ['EXPLICIT_CONTEXT']