@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/base/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@wm/components/base",
+  "sideEffects": false,
+  "version": "0.0.1",
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "^18.2.13",
+    "@angular/core": "^18.2.13"
+  },
+  "module": "fesm2022/index.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/index.mjs"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "node --eval \"console.error('ERROR: Trying to publish a package that has been compiled in full compilation mode. This is not allowed.\\nPlease delete and rebuild the package with partial compilation mode, before attempting to publish.\\n')\" && exit 1"
+  }
+}

package/components/basic/anchor/.npmignore

@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json

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

@@ -0,0 +1,204 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@wm/core'), require('@wm/components/base')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/core', '@wm/core', '@wm/components/base'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.anchor = {}), global.ng.common, global.ng.core, global.wm.core, global.wm.components.base));
+})(this, (function (exports, i2, i0, i1, base) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const registerProps = () => {
+        base.register('wm-anchor', new Map([
+            ['animation', base.PROP_STRING],
+            ['badgevalue', base.PROP_STRING],
+            ['caption', { value: 'Link', ...base.PROP_STRING }],
+            ['class', base.PROP_STRING],
+            ['conditionalclass', base.PROP_ANY],
+            ['conditionalstyle', base.PROP_ANY],
+            ['encodeurl', base.PROP_BOOLEAN],
+            ['hint', base.PROP_STRING],
+            ['arialabel', base.PROP_STRING],
+            ['hyperlink', { value: '', ...base.PROP_STRING }],
+            ['iconclass', base.PROP_STRING],
+            ['iconheight', base.PROP_STRING],
+            ['iconmargin', base.PROP_STRING],
+            ['iconposition', base.PROP_STRING],
+            ['iconurl', base.PROP_STRING],
+            ['iconwidth', base.PROP_STRING],
+            ['name', base.PROP_STRING],
+            ['shortcutkey', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+            ['target', { value: '_self', ...base.PROP_STRING }]
+        ]));
+    };
+
+    const DEFAULT_CLS = 'app-anchor';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-anchor',
+        hostClass: DEFAULT_CLS,
+        displayType: base.DISPLAY_TYPE.INLINE_BLOCK
+    };
+    const regex = /Actions.goToPage_(\w+)\.invoke\(\)/g;
+    const disableContextMenu = ($event) => {
+        $event.preventDefault();
+    };
+    class AnchorComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, app, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.app = app;
+            this._eventNotifier = new i1.EventNotifier();
+            base.styler(this.nativeElement, this);
+        }
+        processEventAttr(eventName, expr, meta) {
+            super.processEventAttr(eventName, expr, meta);
+            if (!this.hasNavigationToCurrentPageExpr) {
+                const app = this.inj.get(i1.App);
+                const fns = expr.split(';').map(Function.prototype.call, String.prototype.trim);
+                if (fns.some(fn => {
+                    regex.lastIndex = 0;
+                    const matches = regex.exec(fn);
+                    const hasGoToPageExpr = matches && (matches.length > 0);
+                    if (hasGoToPageExpr && !this.hasGoToPageExpr) {
+                        this.hasGoToPageExpr = true;
+                        this.goToPageName = matches[1];
+                    }
+                    return hasGoToPageExpr && matches[1] === app.activePageName;
+                })) {
+                    this.hasNavigationToCurrentPageExpr = true;
+                }
+            }
+        }
+        onActive(callback) {
+            this._eventNotifier.subscribe('on-active', callback);
+        }
+        handleEvent(node, eventName, eventCallback, locals, meta) {
+            super.handleEvent(node, eventName, e => {
+                if (this.hasGoToPageExpr && locals.$event) {
+                    locals.$event.preventDefault();
+                }
+                eventCallback();
+            }, locals, meta);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'hyperlink') {
+                if (!nv) {
+                    i1.setAttr(this.nativeElement, 'href', 'javascript:void(0)');
+                    this.nativeElement.addEventListener('contextmenu', disableContextMenu);
+                    return;
+                }
+                if (this.encodeurl) {
+                    nv = i1.encodeUrl(nv);
+                }
+                // if hyperlink starts with 'www.' append '//' in the beginning
+                if (nv.startsWith('www.')) {
+                    nv = `//${nv}`;
+                }
+                i1.setAttr(this.nativeElement, 'href', nv);
+                this.nativeElement.removeEventListener('contextmenu', disableContextMenu);
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        init() {
+            if (this.hasNavigationToCurrentPageExpr) {
+                i1.addClass(this.nativeElement, 'active');
+                i1.setAttr(this.nativeElement, 'aria-current', 'page');
+            }
+            if (this.hyperlink && i1.getRouteNameFromLink(this.hyperlink) === `/${this.app.activePageName}`
+                || this.hasNavigationToCurrentPageExpr) {
+                this._eventNotifier.notify("on-active", {});
+            }
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            this.init();
+            if (this.hasGoToPageExpr) {
+                // Clean up any existing subscription before creating a new one
+                if (this.cancelSubscription) {
+                    this.cancelSubscription();
+                    this.cancelSubscription = null;
+                }
+                // In SPA, it highlights active page link when we navigate within the same layout
+                this.cancelSubscription = this.app.subscribe("highlightActiveLink", (data) => {
+                    if (this.hasNavigationToCurrentPageExpr && this.goToPageName !== this.app.activePageName) {
+                        this.hasNavigationToCurrentPageExpr = false;
+                        i1.removeClass(this.nativeElement, 'active');
+                        i1.removeAttr(this.nativeElement, 'aria-current');
+                    }
+                    if (this.goToPageName === data.pageName) {
+                        this.hasNavigationToCurrentPageExpr = true;
+                        i1.addClass(this.nativeElement, 'active');
+                        i1.setAttr(this.nativeElement, 'aria-current', 'page');
+                    }
+                });
+            }
+        }
+        ngOnAttach() {
+            this.init();
+            super.ngOnAttach();
+        }
+        ngOnDestroy() {
+            // Unsubscribe from app event first to prevent any callbacks during destruction
+            if (this.cancelSubscription) {
+                this.cancelSubscription();
+                this.cancelSubscription = null;
+            }
+            // Destroy local event notifier
+            this._eventNotifier.destroy();
+            // Remove event listener if it exists
+            if (this.nativeElement) {
+                this.nativeElement.removeEventListener('contextmenu', disableContextMenu);
+            }
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: AnchorComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AnchorComponent, isStandalone: true, selector: "a[wmAnchor]", host: { properties: { "target": "this.target", "attr.accesskey": "this.shortcutkey", "attr.icon-position": "this.iconposition" } }, providers: [
+                base.provideAsWidgetRef(AnchorComponent)
+            ], exportAs: ["wmAnchor"], usesInheritance: true, ngImport: i0__namespace, template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "pipe", type: base.ImagePipe, name: "image" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: AnchorComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.CommonModule, base.ImagePipe, base.TextContentDirective], selector: 'a[wmAnchor]', providers: [
+                            base.provideAsWidgetRef(AnchorComponent)
+                        ], exportAs: 'wmAnchor', template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { target: [{
+                    type: i0.HostBinding,
+                    args: ['target']
+                }], shortcutkey: [{
+                    type: i0.HostBinding,
+                    args: ['attr.accesskey']
+                }], iconposition: [{
+                    type: i0.HostBinding,
+                    args: ['attr.icon-position']
+                }] } });
+
+    exports.AnchorComponent = AnchorComponent;
+    exports.disableContextMenu = disableContextMenu;
+
+}));

package/components/basic/anchor/fesm2022/index.mjs

@@ -0,0 +1,187 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { HostBinding, Inject, Optional, Component } from '@angular/core';
+import * as i1 from '@wm/core';
+import { EventNotifier, App, setAttr, encodeUrl, addClass, getRouteNameFromLink, removeClass, removeAttr } from '@wm/core';
+import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, DISPLAY_TYPE, StylableComponent, styler, TextContentDirective, ImagePipe, provideAsWidgetRef } from '@wm/components/base';
+
+const registerProps = () => {
+    register('wm-anchor', new Map([
+        ['animation', PROP_STRING],
+        ['badgevalue', PROP_STRING],
+        ['caption', { value: 'Link', ...PROP_STRING }],
+        ['class', PROP_STRING],
+        ['conditionalclass', PROP_ANY],
+        ['conditionalstyle', PROP_ANY],
+        ['encodeurl', PROP_BOOLEAN],
+        ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
+        ['hyperlink', { value: '', ...PROP_STRING }],
+        ['iconclass', PROP_STRING],
+        ['iconheight', PROP_STRING],
+        ['iconmargin', PROP_STRING],
+        ['iconposition', PROP_STRING],
+        ['iconurl', PROP_STRING],
+        ['iconwidth', PROP_STRING],
+        ['name', PROP_STRING],
+        ['shortcutkey', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...PROP_NUMBER }],
+        ['target', { value: '_self', ...PROP_STRING }]
+    ]));
+};
+
+const DEFAULT_CLS = 'app-anchor';
+const WIDGET_CONFIG = {
+    widgetType: 'wm-anchor',
+    hostClass: DEFAULT_CLS,
+    displayType: DISPLAY_TYPE.INLINE_BLOCK
+};
+const regex = /Actions.goToPage_(\w+)\.invoke\(\)/g;
+const disableContextMenu = ($event) => {
+    $event.preventDefault();
+};
+class AnchorComponent extends StylableComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, app, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.app = app;
+        this._eventNotifier = new EventNotifier();
+        styler(this.nativeElement, this);
+    }
+    processEventAttr(eventName, expr, meta) {
+        super.processEventAttr(eventName, expr, meta);
+        if (!this.hasNavigationToCurrentPageExpr) {
+            const app = this.inj.get(App);
+            const fns = expr.split(';').map(Function.prototype.call, String.prototype.trim);
+            if (fns.some(fn => {
+                regex.lastIndex = 0;
+                const matches = regex.exec(fn);
+                const hasGoToPageExpr = matches && (matches.length > 0);
+                if (hasGoToPageExpr && !this.hasGoToPageExpr) {
+                    this.hasGoToPageExpr = true;
+                    this.goToPageName = matches[1];
+                }
+                return hasGoToPageExpr && matches[1] === app.activePageName;
+            })) {
+                this.hasNavigationToCurrentPageExpr = true;
+            }
+        }
+    }
+    onActive(callback) {
+        this._eventNotifier.subscribe('on-active', callback);
+    }
+    handleEvent(node, eventName, eventCallback, locals, meta) {
+        super.handleEvent(node, eventName, e => {
+            if (this.hasGoToPageExpr && locals.$event) {
+                locals.$event.preventDefault();
+            }
+            eventCallback();
+        }, locals, meta);
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'hyperlink') {
+            if (!nv) {
+                setAttr(this.nativeElement, 'href', 'javascript:void(0)');
+                this.nativeElement.addEventListener('contextmenu', disableContextMenu);
+                return;
+            }
+            if (this.encodeurl) {
+                nv = encodeUrl(nv);
+            }
+            // if hyperlink starts with 'www.' append '//' in the beginning
+            if (nv.startsWith('www.')) {
+                nv = `//${nv}`;
+            }
+            setAttr(this.nativeElement, 'href', nv);
+            this.nativeElement.removeEventListener('contextmenu', disableContextMenu);
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    init() {
+        if (this.hasNavigationToCurrentPageExpr) {
+            addClass(this.nativeElement, 'active');
+            setAttr(this.nativeElement, 'aria-current', 'page');
+        }
+        if (this.hyperlink && getRouteNameFromLink(this.hyperlink) === `/${this.app.activePageName}`
+            || this.hasNavigationToCurrentPageExpr) {
+            this._eventNotifier.notify("on-active", {});
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.init();
+        if (this.hasGoToPageExpr) {
+            // Clean up any existing subscription before creating a new one
+            if (this.cancelSubscription) {
+                this.cancelSubscription();
+                this.cancelSubscription = null;
+            }
+            // In SPA, it highlights active page link when we navigate within the same layout
+            this.cancelSubscription = this.app.subscribe("highlightActiveLink", (data) => {
+                if (this.hasNavigationToCurrentPageExpr && this.goToPageName !== this.app.activePageName) {
+                    this.hasNavigationToCurrentPageExpr = false;
+                    removeClass(this.nativeElement, 'active');
+                    removeAttr(this.nativeElement, 'aria-current');
+                }
+                if (this.goToPageName === data.pageName) {
+                    this.hasNavigationToCurrentPageExpr = true;
+                    addClass(this.nativeElement, 'active');
+                    setAttr(this.nativeElement, 'aria-current', 'page');
+                }
+            });
+        }
+    }
+    ngOnAttach() {
+        this.init();
+        super.ngOnAttach();
+    }
+    ngOnDestroy() {
+        // Unsubscribe from app event first to prevent any callbacks during destruction
+        if (this.cancelSubscription) {
+            this.cancelSubscription();
+            this.cancelSubscription = null;
+        }
+        // Destroy local event notifier
+        this._eventNotifier.destroy();
+        // Remove event listener if it exists
+        if (this.nativeElement) {
+            this.nativeElement.removeEventListener('contextmenu', disableContextMenu);
+        }
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AnchorComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AnchorComponent, isStandalone: true, selector: "a[wmAnchor]", host: { properties: { "target": "this.target", "attr.accesskey": "this.shortcutkey", "attr.icon-position": "this.iconposition" } }, providers: [
+            provideAsWidgetRef(AnchorComponent)
+        ], exportAs: ["wmAnchor"], usesInheritance: true, ngImport: i0, template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "pipe", type: ImagePipe, name: "image" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AnchorComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, ImagePipe, TextContentDirective], selector: 'a[wmAnchor]', providers: [
+                        provideAsWidgetRef(AnchorComponent)
+                    ], exportAs: 'wmAnchor', template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { target: [{
+                type: HostBinding,
+                args: ['target']
+            }], shortcutkey: [{
+                type: HostBinding,
+                args: ['attr.accesskey']
+            }], iconposition: [{
+                type: HostBinding,
+                args: ['attr.icon-position']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AnchorComponent, disableContextMenu };
+//# sourceMappingURL=index.mjs.map

package/components/basic/anchor/fesm2022/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/basic/anchor/src/anchor.props.ts","../../../../../projects/components/widgets/basic/anchor/src/anchor.component.ts","../../../../../projects/components/widgets/basic/anchor/src/anchor.component.html","../../../../../projects/components/widgets/basic/anchor/src/index.ts"],"sourcesContent":["import {PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-anchor',\n        new Map(\n            [\n                ['animation', PROP_STRING],\n                ['badgevalue', PROP_STRING],\n                ['caption', {value: 'Link', ...PROP_STRING}],\n                ['class', PROP_STRING],\n                ['conditionalclass', PROP_ANY],\n                ['conditionalstyle', PROP_ANY],\n                ['encodeurl', PROP_BOOLEAN],\n                ['hint', PROP_STRING],\n                ['arialabel', PROP_STRING],\n                ['hyperlink', {value: '', ...PROP_STRING}],\n                ['iconclass', PROP_STRING],\n                ['iconheight', PROP_STRING],\n                ['iconmargin', PROP_STRING],\n                ['iconposition', PROP_STRING],\n                ['iconurl', PROP_STRING],\n                ['iconwidth', PROP_STRING],\n                ['name', PROP_STRING],\n                ['shortcutkey', PROP_STRING],\n                ['show', {value: true, ...PROP_BOOLEAN}],\n                ['tabindex', {value: 0, ...PROP_NUMBER}],\n                ['target', {value: '_self', ...PROP_STRING}]\n            ]\n        )\n    );\n};\n","import { CommonModule } from '@angular/common';\nimport {AfterViewInit, Component, HostBinding, Inject, Injector, OnDestroy, Optional} from '@angular/core';\n\nimport {\n    addClass,\n    App,\n    encodeUrl,\n    EventNotifier,\n    getRouteNameFromLink,\n    removeAttr,\n    removeClass,\n    setAttr\n} from '@wm/core';\nimport {DISPLAY_TYPE, ImagePipe, IWidgetConfig, provideAsWidgetRef, StylableComponent, styler, TextContentDirective} from '@wm/components/base';\n\nimport {registerProps} from './anchor.props'; \n\nconst DEFAULT_CLS = 'app-anchor';\nconst WIDGET_CONFIG: IWidgetConfig = {\n    widgetType: 'wm-anchor',\n    hostClass: DEFAULT_CLS,\n    displayType: DISPLAY_TYPE.INLINE_BLOCK\n};\n\nconst regex = /Actions.goToPage_(\\w+)\\.invoke\\(\\)/g;\nexport const disableContextMenu = ($event: Event) => {\n    $event.preventDefault();\n};\n\n@Component({\n    standalone: true,\n    imports: [CommonModule, ImagePipe, TextContentDirective],\n    selector: 'a[wmAnchor]',\n    templateUrl: './anchor.component.html',\n    providers: [\n        provideAsWidgetRef(AnchorComponent)\n    ],\n    exportAs: 'wmAnchor'\n})\nexport class AnchorComponent extends StylableComponent implements AfterViewInit, OnDestroy {\n    static initializeProps = registerProps();\n\n    private hasNavigationToCurrentPageExpr: boolean;\n    private hasGoToPageExpr: boolean;\n    private goToPageName: string;\n    private cancelSubscription: any;\n\n    public encodeurl;\n    public hyperlink;\n    public iconheight: string;\n    public iconwidth: string;\n    public iconurl: string;\n    public iconclass: string;\n    public caption: any;\n    public badgevalue: string;\n    public arialabel: string;\n\n    @HostBinding('target') target: string;\n    @HostBinding('attr.accesskey') shortcutkey: string;\n    @HostBinding('attr.icon-position') iconposition: string;\n    private _eventNotifier = new EventNotifier();\n\n    constructor(\n        inj: Injector,\n        private app: App,\n        @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any\n    ) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this);\n    }\n\n    protected processEventAttr(eventName: string, expr: string, meta?: string) {\n\n        super.processEventAttr(eventName, expr, meta);\n\n        if (!this.hasNavigationToCurrentPageExpr) {\n            const app = this.inj.get(App);\n            const fns = expr.split(';').map(Function.prototype.call, String.prototype.trim);\n            if (fns.some(fn => {\n                regex.lastIndex = 0;\n                const matches = regex.exec(fn);\n\n                const hasGoToPageExpr = matches && (matches.length > 0);\n                if(hasGoToPageExpr && !this.hasGoToPageExpr) {\n                    this.hasGoToPageExpr = true;\n                    this.goToPageName = matches[1];\n                }\n\n                return hasGoToPageExpr && matches[1] === app.activePageName;\n            })) {\n                this.hasNavigationToCurrentPageExpr = true;\n            }\n        }\n    }\n\n    public onActive(callback: (data: any) =>void) {\n        this._eventNotifier.subscribe('on-active', callback);\n    }\n\n    protected handleEvent(node: HTMLElement, eventName: string, eventCallback: Function, locals: any, meta?: string) {\n        super.handleEvent(\n            node,\n            eventName,\n            e => {\n                if (this.hasGoToPageExpr && locals.$event) {\n                    locals.$event.preventDefault();\n                }\n                eventCallback();\n            },\n            locals,\n            meta\n        );\n    }\n\n    onPropertyChange(key: string, nv: any, ov?: any) {\n        if (key === 'hyperlink') {\n            if (!nv) {\n                setAttr(this.nativeElement, 'href', 'javascript:void(0)');\n                this.nativeElement.addEventListener('contextmenu', disableContextMenu);\n                return;\n            }\n            if (this.encodeurl) {\n                nv = encodeUrl(nv);\n            }\n            // if hyperlink starts with 'www.' append '//' in the beginning\n            if (nv.startsWith('www.')) {\n                nv = `//${nv}`;\n            }\n            setAttr(this.nativeElement, 'href', nv);\n            this.nativeElement.removeEventListener('contextmenu', disableContextMenu);\n        } else {\n            super.onPropertyChange(key, nv, ov);\n        }\n    }\n\n    init() {\n        if (this.hasNavigationToCurrentPageExpr) {\n            addClass(this.nativeElement, 'active');\n            setAttr(this.nativeElement, 'aria-current', 'page');\n        }\n        if (this.hyperlink && getRouteNameFromLink(this.hyperlink) === `/${this.app.activePageName}`\n            || this.hasNavigationToCurrentPageExpr) {\n            this._eventNotifier.notify(\"on-active\", {});\n        }\n    }\n\n    ngAfterViewInit() {\n        super.ngAfterViewInit();\n        this.init();\n        if(this.hasGoToPageExpr) {\n            // Clean up any existing subscription before creating a new one\n            if (this.cancelSubscription) {\n                this.cancelSubscription();\n                this.cancelSubscription = null;\n            }\n            \n            // In SPA, it highlights active page link when we navigate within the same layout\n            this.cancelSubscription = this.app.subscribe(\"highlightActiveLink\", (data) => {\n                if(this.hasNavigationToCurrentPageExpr && this.goToPageName !== this.app.activePageName) {\n                    this.hasNavigationToCurrentPageExpr = false;\n                    removeClass(this.nativeElement, 'active');\n                    removeAttr(this.nativeElement, 'aria-current');\n                }\n                if (this.goToPageName === data.pageName) {\n                    this.hasNavigationToCurrentPageExpr = true;\n                    addClass(this.nativeElement, 'active');\n                    setAttr(this.nativeElement, 'aria-current', 'page');\n                }\n            });\n        }\n    }\n\n    ngOnAttach() {\n        this.init();\n        super.ngOnAttach();\n    }\n\n    public ngOnDestroy() {\n        // Unsubscribe from app event first to prevent any callbacks during destruction\n        if(this.cancelSubscription) {\n            this.cancelSubscription();\n            this.cancelSubscription = null;\n        }\n        \n        // Destroy local event notifier\n        this._eventNotifier.destroy();\n        \n        // Remove event listener if it exists\n        if (this.nativeElement) {\n            this.nativeElement.removeEventListener('contextmenu', disableContextMenu);\n        }\n        super.ngOnDestroy();\n    }\n}\n","@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/components/basic/anchor/index.d.ts

@@ -0,0 +1,40 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, Injector } from '@angular/core';
+import { App } from '@wm/core';
+import { StylableComponent } from '@wm/components/base';
+
+declare const disableContextMenu: ($event: Event) => void;
+declare class AnchorComponent extends StylableComponent implements AfterViewInit, OnDestroy {
+    private app;
+    static initializeProps: void;
+    private hasNavigationToCurrentPageExpr;
+    private hasGoToPageExpr;
+    private goToPageName;
+    private cancelSubscription;
+    encodeurl: any;
+    hyperlink: any;
+    iconheight: string;
+    iconwidth: string;
+    iconurl: string;
+    iconclass: string;
+    caption: any;
+    badgevalue: string;
+    arialabel: string;
+    target: string;
+    shortcutkey: string;
+    iconposition: string;
+    private _eventNotifier;
+    constructor(inj: Injector, app: App, explicitContext: any);
+    protected processEventAttr(eventName: string, expr: string, meta?: string): void;
+    onActive(callback: (data: any) => void): void;
+    protected handleEvent(node: HTMLElement, eventName: string, eventCallback: Function, locals: any, meta?: string): void;
+    onPropertyChange(key: string, nv: any, ov?: any): void;
+    init(): void;
+    ngAfterViewInit(): void;
+    ngOnAttach(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnchorComponent, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnchorComponent, "a[wmAnchor]", ["wmAnchor"], {}, {}, never, [".caret"], true, never>;
+}
+
+export { AnchorComponent, disableContextMenu };

package/components/basic/anchor/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/basic/anchor",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "module": "fesm2022/index.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/index.mjs"
+    }
+  }
+}

package/components/basic/audio/.npmignore

@@ -0,0 +1,2 @@
+# Nested package.json's are only needed for development.
+**/package.json

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

@@ -0,0 +1,83 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/components/base')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/components/base'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.audio = {}), global.ng.core, global.wm.components.base));
+})(this, (function (exports, i0, base) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+
+    const registerProps = () => {
+        base.register('wm-audio', new Map([
+            ['audiopreload', { value: 'none', ...base.PROP_STRING }],
+            ['audiosupportmessage', { value: 'Your browser does not support the audio tag.', ...base.PROP_STRING }],
+            ['autoplay', base.PROP_BOOLEAN],
+            ['class', base.PROP_STRING],
+            ['controls', base.PROP_BOOLEAN],
+            ['hint', base.PROP_STRING],
+            ['arialabel', base.PROP_STRING],
+            ['loop', base.PROP_BOOLEAN],
+            ['mp3format', base.PROP_STRING],
+            ['muted', base.PROP_BOOLEAN],
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }]
+        ]));
+    };
+
+    const DEFAULT_CLS = 'app-audio';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-audio',
+        hostClass: DEFAULT_CLS,
+        displayType: base.DISPLAY_TYPE.INLINE_BLOCK
+    };
+    class AudioComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            base.styler(this.nativeElement, this);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'tabindex') {
+                return;
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: AudioComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: AudioComponent, isStandalone: true, selector: "[wmAudio]", providers: [
+                base.provideAsWidgetRef(AudioComponent)
+            ], usesInheritance: true, ngImport: i0__namespace, 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", dependencies: [{ kind: "pipe", type: base.TrustAsPipe, name: "trustAs" }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: AudioComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [base.TrustAsPipe], selector: '[wmAudio]', providers: [
+                            base.provideAsWidgetRef(AudioComponent)
+                        ], 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" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    exports.AudioComponent = AudioComponent;
+
+}));