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

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

@@ -0,0 +1,138 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@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.picture = {}), global.ng.core, global.wm.core, global.wm.components.base));
+})(this, (function (exports, i0, core, i1) { '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);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+
+    const registerProps = () => {
+        const props = new Map([
+            ['animation', i1.PROP_STRING],
+            ['class', i1.PROP_STRING],
+            ['conditionalclass', i1.PROP_ANY],
+            ['conditionalstyle', i1.PROP_ANY],
+            ['encodeurl', i1.PROP_STRING],
+            ['hint', i1.PROP_STRING],
+            ['arialabel', i1.PROP_STRING],
+            ['name', i1.PROP_STRING],
+            ['pictureaspect', { value: 'None', ...i1.PROP_STRING }],
+            ['alttext', { value: 'Image alt text not provided', ...i1.PROP_STRING }],
+            ['pictureplaceholder', i1.PROP_STRING],
+            ['picturesource', i1.PROP_STRING],
+            ['resizemode', { value: 'fill', ...i1.PROP_STRING }],
+            ['shape', i1.PROP_STRING],
+            ['show', { value: true, ...i1.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...i1.PROP_NUMBER }]
+        ]);
+        i1.register('wm-picture', props);
+    };
+
+    const DEFAULT_CLS = 'app-picture';
+    const WIDGET_CONFIG = {
+        widgetType: 'wm-picture',
+        hostClass: DEFAULT_CLS,
+        displayType: i1.DISPLAY_TYPE.INLINE_BLOCK
+    };
+    class PictureDirective extends i1.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, imagePipe, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.imagePipe = imagePipe;
+            i1.styler(this.nativeElement, this);
+        }
+        setImgSource() {
+            this.imgSource = this.imagePipe.transform(this.picturesource, this.encodeurl, this.pictureplaceholder);
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'pictureaspect') {
+                let width = '';
+                let height = '';
+                switch (nv) {
+                    case 'None':
+                        width = this.width;
+                        height = this.height;
+                        break;
+                    case 'H':
+                        width = '100%';
+                        break;
+                    case 'V':
+                        height = '100%';
+                        break;
+                    case 'Both':
+                        width = '100%';
+                        height = '100%';
+                        break;
+                }
+                core.setCSS(this.nativeElement, 'width', width, true);
+                core.setCSS(this.nativeElement, 'height', height, true);
+            }
+            else if (key === 'encodeurl' || key === 'pictureplaceholder') {
+                this.setImgSource();
+            }
+            else if (key === 'shape') {
+                core.switchClass(this.nativeElement, `img-${nv}`, `img-${ov}`);
+            }
+            else if (key === 'resizemode') {
+                core.setCSS(this.nativeElement, 'object-fit', nv);
+            }
+            super.onPropertyChange(key, nv, ov);
+        }
+        onStyleChange(key, nv, ov) {
+            if (key === 'picturesource') {
+                this.setImgSource();
+            }
+            else {
+                super.onStyleChange(key, nv, ov);
+            }
+        }
+        ngOnInit() {
+            this.setImgSource();
+            super.ngOnInit();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PictureDirective, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.ImagePipe }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive }); }
+        static { this.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: PictureDirective, isStandalone: true, selector: "img[wmPicture]", host: { properties: { "src": "this.imgSource" } }, providers: [
+                i1.provideAsWidgetRef(PictureDirective)
+            ], exportAs: ["wmPicture"], usesInheritance: true, ngImport: i0__namespace }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: PictureDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        standalone: true,
+                        selector: 'img[wmPicture]',
+                        providers: [
+                            i1.provideAsWidgetRef(PictureDirective)
+                        ],
+                        exportAs: 'wmPicture'
+                    }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.ImagePipe }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { imgSource: [{
+                    type: i0.HostBinding,
+                    args: ['src']
+                }] } });
+
+    exports.PictureDirective = PictureDirective;
+
+}));

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

@@ -0,0 +1,121 @@
+import * as i0 from '@angular/core';
+import { HostBinding, Inject, Optional, Directive } from '@angular/core';
+import { setCSS, switchClass } from '@wm/core';
+import * as i1 from '@wm/components/base';
+import { PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, register, DISPLAY_TYPE, StylableComponent, styler, provideAsWidgetRef } from '@wm/components/base';
+
+const registerProps = () => {
+    const props = new Map([
+        ['animation', PROP_STRING],
+        ['class', PROP_STRING],
+        ['conditionalclass', PROP_ANY],
+        ['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 }],
+        ['shape', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...PROP_NUMBER }]
+    ]);
+    register('wm-picture', props);
+};
+
+const DEFAULT_CLS = 'app-picture';
+const WIDGET_CONFIG = {
+    widgetType: 'wm-picture',
+    hostClass: DEFAULT_CLS,
+    displayType: DISPLAY_TYPE.INLINE_BLOCK
+};
+class PictureDirective extends StylableComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, imagePipe, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.imagePipe = imagePipe;
+        styler(this.nativeElement, this);
+    }
+    setImgSource() {
+        this.imgSource = this.imagePipe.transform(this.picturesource, this.encodeurl, this.pictureplaceholder);
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'pictureaspect') {
+            let width = '';
+            let height = '';
+            switch (nv) {
+                case 'None':
+                    width = this.width;
+                    height = this.height;
+                    break;
+                case 'H':
+                    width = '100%';
+                    break;
+                case 'V':
+                    height = '100%';
+                    break;
+                case 'Both':
+                    width = '100%';
+                    height = '100%';
+                    break;
+            }
+            setCSS(this.nativeElement, 'width', width, true);
+            setCSS(this.nativeElement, 'height', height, true);
+        }
+        else if (key === 'encodeurl' || key === 'pictureplaceholder') {
+            this.setImgSource();
+        }
+        else if (key === 'shape') {
+            switchClass(this.nativeElement, `img-${nv}`, `img-${ov}`);
+        }
+        else if (key === 'resizemode') {
+            setCSS(this.nativeElement, 'object-fit', nv);
+        }
+        super.onPropertyChange(key, nv, ov);
+    }
+    onStyleChange(key, nv, ov) {
+        if (key === 'picturesource') {
+            this.setImgSource();
+        }
+        else {
+            super.onStyleChange(key, nv, ov);
+        }
+    }
+    ngOnInit() {
+        this.setImgSource();
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PictureDirective, deps: [{ token: i0.Injector }, { token: i1.ImagePipe }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: PictureDirective, isStandalone: true, selector: "img[wmPicture]", host: { properties: { "src": "this.imgSource" } }, providers: [
+            provideAsWidgetRef(PictureDirective)
+        ], exportAs: ["wmPicture"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: PictureDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'img[wmPicture]',
+                    providers: [
+                        provideAsWidgetRef(PictureDirective)
+                    ],
+                    exportAs: 'wmPicture'
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.ImagePipe }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { imgSource: [{
+                type: HostBinding,
+                args: ['src']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PictureDirective };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/basic/picture/src/picture.props.ts","../../../../../projects/components/widgets/basic/picture/src/picture.directive.ts","../../../../../projects/components/widgets/basic/picture/src/index.ts"],"sourcesContent":["import {PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    const props = new Map(\n        [\n            ['animation', PROP_STRING],\n            ['class', PROP_STRING],\n            ['conditionalclass', PROP_ANY],\n            ['conditionalstyle', PROP_ANY],\n            ['encodeurl', PROP_STRING],\n            ['hint', PROP_STRING],\n            ['arialabel', PROP_STRING],\n            ['name', PROP_STRING],\n            ['pictureaspect', {value: 'None', ...PROP_STRING}],\n            ['alttext', {value: 'Image alt text not provided', ...PROP_STRING}],\n            ['pictureplaceholder', PROP_STRING],\n            ['picturesource', PROP_STRING],\n            ['resizemode', {value: 'fill', ...PROP_STRING}],\n            ['shape', PROP_STRING],\n            ['show', {value: true, ...PROP_BOOLEAN}],\n            ['tabindex', {value: 0, ...PROP_NUMBER}]\n        ]\n    );\n    register('wm-picture', props);\n};\n","import {Directive, HostBinding, Inject, Injector, OnInit, Optional} from '@angular/core';\n\nimport {setAttr, setCSS, switchClass} from '@wm/core';\nimport {\n    DISPLAY_TYPE,\n    ImagePipe,\n    IWidgetConfig,\n    provideAsWidgetRef,\n    StylableComponent,\n    styler\n} from '@wm/components/base';\n\nimport {registerProps} from './picture.props';\n\nconst DEFAULT_CLS = 'app-picture';\nconst WIDGET_CONFIG: IWidgetConfig = {\n    widgetType: 'wm-picture',\n    hostClass: DEFAULT_CLS,\n    displayType: DISPLAY_TYPE.INLINE_BLOCK\n};\n\n@Directive({\n  standalone: true,\n    selector: 'img[wmPicture]',\n    providers: [\n        provideAsWidgetRef(PictureDirective)\n    ],\n    exportAs: 'wmPicture'\n})\nexport class PictureDirective extends StylableComponent implements OnInit {\n    static initializeProps = registerProps();\n\n    encodeurl;\n    picturesource;\n    pictureplaceholder;\n    alttext;\n\n    @HostBinding('src') imgSource: string;\n\n    constructor(inj: Injector, private imagePipe: ImagePipe, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n\n        styler(this.nativeElement, this);\n    }\n\n    setImgSource() {\n        this.imgSource = this.imagePipe.transform(this.picturesource, this.encodeurl, this.pictureplaceholder);\n    }\n\n    onPropertyChange(key: string, nv: any, ov: any) {\n        if (key === 'pictureaspect') {\n            let width = '';\n            let height = '';\n            switch (nv) {\n                case 'None':\n                    width = this.width;\n                    height = this.height;\n                    break;\n                case 'H':\n                    width = '100%';\n                    break;\n                case 'V':\n                    height = '100%';\n                    break;\n                case 'Both':\n                    width = '100%';\n                    height = '100%';\n                    break;\n            }\n            setCSS(this.nativeElement, 'width', width, true);\n            setCSS(this.nativeElement, 'height', height, true);\n        } else if (key === 'encodeurl' || key === 'pictureplaceholder') {\n            this.setImgSource();\n        } else if (key === 'shape') {\n            switchClass(this.nativeElement, `img-${nv}`, `img-${ov}`);\n        }  else if (key === 'resizemode') {\n            setCSS(this.nativeElement, 'object-fit', nv);\n        }\n        super.onPropertyChange(key, nv, ov);\n    }\n\n    onStyleChange(key: string, nv: any, ov?: any) {\n        if (key === 'picturesource') {\n            this.setImgSource();\n        } else {\n            super.onStyleChange(key, nv, ov);\n        }\n    }\n\n    ngOnInit() {\n        this.setImgSource();\n        super.ngOnInit();\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;AAEO,MAAM,aAAa,GAAG,MAAK;AAC9B,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,CACjB;QACI,CAAC,WAAW,EAAE,WAAW,CAAC;QAC1B,CAAC,OAAO,EAAE,WAAW,CAAC;QACtB,CAAC,kBAAkB,EAAE,QAAQ,CAAC;QAC9B,CAAC,kBAAkB,EAAE,QAAQ,CAAC;QAC9B,CAAC,WAAW,EAAE,WAAW,CAAC;QAC1B,CAAC,MAAM,EAAE,WAAW,CAAC;QACrB,CAAC,WAAW,EAAE,WAAW,CAAC;QAC1B,CAAC,MAAM,EAAE,WAAW,CAAC;QACrB,CAAC,eAAe,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,EAAC,CAAC;QAClD,CAAC,SAAS,EAAE,EAAC,KAAK,EAAE,6BAA6B,EAAE,GAAG,WAAW,EAAC,CAAC;QACnE,CAAC,oBAAoB,EAAE,WAAW,CAAC;QACnC,CAAC,eAAe,EAAE,WAAW,CAAC;QAC9B,CAAC,YAAY,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,EAAC,CAAC;QAC/C,CAAC,OAAO,EAAE,WAAW,CAAC;QACtB,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,GAAG,YAAY,EAAC,CAAC;QACxC,CAAC,UAAU,EAAE,EAAC,KAAK,EAAE,CAAC,EAAE,GAAG,WAAW,EAAC;AAC1C,KAAA,CACJ;AACD,IAAA,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC;AACjC,CAAC;;ACVD,MAAM,WAAW,GAAG,aAAa;AACjC,MAAM,aAAa,GAAkB;AACjC,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,YAAY,CAAC;CAC7B;AAUK,MAAO,gBAAiB,SAAQ,iBAAiB,CAAA;AAC5C,IAAA,SAAA,IAAA,CAAA,eAAe,GAAG,aAAa,EAAhB,CAAmB;AASzC,IAAA,WAAA,CAAY,GAAa,EAAU,SAAoB,EAA0C,eAAoB,EAAA;AACjH,QAAA,KAAK,CAAC,GAAG,EAAE,aAAa,EAAE,eAAe,CAAC;QADX,IAAA,CAAA,SAAS,GAAT,SAAS;AAGxC,QAAA,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;IACpC;IAEA,YAAY,GAAA;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC;IAC1G;AAEA,IAAA,gBAAgB,CAAC,GAAW,EAAE,EAAO,EAAE,EAAO,EAAA;AAC1C,QAAA,IAAI,GAAG,KAAK,eAAe,EAAE;YACzB,IAAI,KAAK,GAAG,EAAE;YACd,IAAI,MAAM,GAAG,EAAE;YACf,QAAQ,EAAE;AACN,gBAAA,KAAK,MAAM;AACP,oBAAA,KAAK,GAAG,IAAI,CAAC,KAAK;AAClB,oBAAA,MAAM,GAAG,IAAI,CAAC,MAAM;oBACpB;AACJ,gBAAA,KAAK,GAAG;oBACJ,KAAK,GAAG,MAAM;oBACd;AACJ,gBAAA,KAAK,GAAG;oBACJ,MAAM,GAAG,MAAM;oBACf;AACJ,gBAAA,KAAK,MAAM;oBACP,KAAK,GAAG,MAAM;oBACd,MAAM,GAAG,MAAM;oBACf;;YAER,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC;YAChD,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC;QACtD;aAAO,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,oBAAoB,EAAE;YAC5D,IAAI,CAAC,YAAY,EAAE;QACvB;AAAO,aAAA,IAAI,GAAG,KAAK,OAAO,EAAE;AACxB,YAAA,WAAW,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA,IAAA,EAAO,EAAE,CAAA,CAAE,EAAE,CAAA,IAAA,EAAO,EAAE,CAAA,CAAE,CAAC;QAC7D;AAAQ,aAAA,IAAI,GAAG,KAAK,YAAY,EAAE;YAC9B,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,EAAE,EAAE,CAAC;QAChD;QACA,KAAK,CAAC,gBAAgB,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC;IACvC;AAEA,IAAA,aAAa,CAAC,GAAW,EAAE,EAAO,EAAE,EAAQ,EAAA;AACxC,QAAA,IAAI,GAAG,KAAK,eAAe,EAAE;YACzB,IAAI,CAAC,YAAY,EAAE;QACvB;aAAO;YACH,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC;QACpC;IACJ;IAEA,QAAQ,GAAA;QACJ,IAAI,CAAC,YAAY,EAAE;QACnB,KAAK,CAAC,QAAQ,EAAE;IACpB;AA/DS,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,mEAUwC,kBAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAV1E,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,SAAA,EALd;YACP,kBAAkB,CAAC,gBAAgB;AACtC,SAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAGQ,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AACd,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,SAAS,EAAE;AACP,wBAAA,kBAAkB,CAAA,gBAAA;AACrB,qBAAA;AACD,oBAAA,QAAQ,EAAE;AACb,iBAAA;;0BAW6D,MAAM;2BAAC,kBAAkB;;0BAAG;;sBAFrF,WAAW;uBAAC,KAAK;;;ACrCtB;;AAEG;;;;"}

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

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+import { OnInit, Injector } from '@angular/core';
+import { StylableComponent, ImagePipe } from '@wm/components/base';
+
+declare class PictureDirective extends StylableComponent implements OnInit {
+    private imagePipe;
+    static initializeProps: void;
+    encodeurl: any;
+    picturesource: any;
+    pictureplaceholder: any;
+    alttext: any;
+    imgSource: string;
+    constructor(inj: Injector, imagePipe: ImagePipe, explicitContext: any);
+    setImgSource(): void;
+    onPropertyChange(key: string, nv: any, ov: any): void;
+    onStyleChange(key: string, nv: any, ov?: any): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PictureDirective, [null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PictureDirective, "img[wmPicture]", ["wmPicture"], {}, {}, never, never, true, never>;
+}
+
+export { PictureDirective };

package/components/basic/picture/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/basic/picture",
+  "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/progress/progress-bar/.npmignore

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

package/components/basic/progress/progress-bar/bundles/index.umd.js

@@ -0,0 +1,170 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/basic/progress/progress-utils'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@wm/core', '@wm/components/base', '@wm/components/basic/progress/progress-utils', '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.wm.components.basic || {}, global.wm.components.basic.progress = global.wm.components.basic.progress || {}, global.wm.components.basic.progress.progressBar = {}), global.ng.core, global.wm.core, global.wm.components.base, global.wm.components.basic.progress.progressUtils, global._));
+})(this, (function (exports, i0, core, base, progressUtils, lodashEs) { '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-progress-bar', new Map([
+            ['captionplacement', { value: 'hidden', ...base.PROP_STRING }],
+            ['class', base.PROP_STRING],
+            ['dataset', base.PROP_ANY],
+            ['datavalue', base.PROP_STRING],
+            ['displayformat', base.PROP_STRING],
+            ['hint', base.PROP_STRING],
+            ['arialabel', base.PROP_STRING],
+            ['maxvalue', { value: 100, ...base.PROP_NUMBER }],
+            ['minvalue', { value: 0, ...base.PROP_NUMBER }],
+            ['name', base.PROP_STRING],
+            ['show', { value: true, ...base.PROP_BOOLEAN }],
+            ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+            ['type', { value: 'default', ...base.PROP_STRING }]
+        ]));
+    };
+
+    const DEFAULT_CLS = 'progress app-progress';
+    const WIDGET_CONFIG = { widgetType: 'wm-progress-bar', hostClass: DEFAULT_CLS };
+    // map of progress-bar type and classes
+    const TYPE_CLASS_MAP = {
+        'default': '',
+        'default-striped': 'progress-bar-striped',
+        'success': 'progress-bar-success',
+        'success-striped': 'progress-bar-success progress-bar-striped',
+        'info': 'progress-bar-info',
+        'info-striped': 'progress-bar-info progress-bar-striped',
+        'warning': 'progress-bar-warning',
+        'warning-striped': 'progress-bar-warning progress-bar-striped',
+        'danger': 'progress-bar-danger',
+        'danger-striped': 'progress-bar-danger progress-bar-striped'
+    };
+    class ProgressBarComponent extends base.StylableComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, dataset, boundDataset, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            // progress-bar data, ngFor in the template iterates on this
+            this.data = [{
+                    cls: TYPE_CLASS_MAP.default,
+                    progressBarWidth: '0%',
+                    displayValue: '0'
+                }];
+            // flag which determines whether dataset is provided or not
+            this.hasDataset = !!(dataset || boundDataset);
+            base.styler(this.nativeElement, this);
+            this._prepareData = lodashEs.debounce(() => this.prepareData(), 50);
+        }
+        // update the proper classes when there is a change in type
+        onTypeChange() {
+            if (!this.hasDataset) {
+                if (this.data[0]) {
+                    this.data[0].cls = TYPE_CLASS_MAP[this.type];
+                }
+            }
+        }
+        // returns the formatted display value based on the provided displayformat
+        getFormattedDisplayVal(val) {
+            const format = this.displayformat || '9';
+            val = parseFloat('' + val);
+            val = (val.toFixed(progressUtils.getDecimalCount(format)));
+            if (format.includes('%')) {
+                val = `${val}%`;
+            }
+            return val;
+        }
+        prepareData() {
+            // when the dataset is provided, iterate over the dataset to set the proper values in the data
+            if (this.dataset && lodashEs.isArray(this.dataset) && this.type && this.datavalue) {
+                this.data = this.dataset.map((datum) => {
+                    const val = core.findValueOf(datum, this.datavalue).toString();
+                    let percentVal = val;
+                    if (val && !val.includes('%')) {
+                        percentVal = `${val}%`;
+                    }
+                    return {
+                        cls: TYPE_CLASS_MAP[core.findValueOf(datum, this.type)],
+                        progressBarWidth: percentVal,
+                        displayValue: this.getFormattedDisplayVal(val)
+                    };
+                });
+            }
+            else {
+                // if the dataset is not provided, update the values in the default data
+                let width = 0;
+                let displayVal = 0;
+                if (this.datavalue) {
+                    if (progressUtils.isPercentageValue(this.datavalue)) {
+                        const val = (this.datavalue || '0%');
+                        width = displayVal = val;
+                    }
+                    else {
+                        if (core.isDefined(this.datavalue)) {
+                            const denominator = (+this.maxvalue - +this.minvalue) || 1;
+                            const val = ((+this.datavalue - +this.minvalue) * 100) / denominator + '%';
+                            width = displayVal = val;
+                        }
+                    }
+                }
+                this.data[0].displayValue = this.getFormattedDisplayVal(displayVal);
+                this.data[0].progressBarWidth = width;
+                this.data[0].cls = TYPE_CLASS_MAP[this.type];
+            }
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'type') {
+                this.onTypeChange();
+            }
+            else if (key === 'minvalue' || key === 'maxvalue' || key === 'datavalue' || key === 'dataset' || key === 'displayformat') {
+                this._prepareData();
+            }
+            else 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: ProgressBarComponent, deps: [{ token: i0__namespace.Injector }, { token: 'dataset', attribute: true }, { token: 'dataset.bind', attribute: true }, { 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: ProgressBarComponent, isStandalone: true, selector: "[wmProgressBar]", providers: [
+                base.provideAsWidgetRef(ProgressBarComponent)
+            ], usesInheritance: true, ngImport: i0__namespace, template: "@for (bar of data; track bar) {\n  <div class=\"multi-bar progress-bar {{bar.cls}}\" [style.width]=\"bar.progressBarWidth\"\n    role=\"progressbar\" [attr.aria-valuenow]=\"datavalue\" [attr.aria-valuemin]=\"minvalue\" [attr.aria-valuemax]=\"maxvalue\"\n    [attr.aria-label]=\"arialabel || 'Progress bar'\" [tabindex]=\"tabindex\">\n    <span class=\"app-progress-label\" [attr.data-caption-placement]=\"captionplacement\">{{bar.displayValue}}</span>\n  </div>\n}\n" }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: ProgressBarComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, selector: '[wmProgressBar]', providers: [
+                            base.provideAsWidgetRef(ProgressBarComponent)
+                        ], template: "@for (bar of data; track bar) {\n  <div class=\"multi-bar progress-bar {{bar.cls}}\" [style.width]=\"bar.progressBarWidth\"\n    role=\"progressbar\" [attr.aria-valuenow]=\"datavalue\" [attr.aria-valuemin]=\"minvalue\" [attr.aria-valuemax]=\"maxvalue\"\n    [attr.aria-label]=\"arialabel || 'Progress bar'\" [tabindex]=\"tabindex\">\n    <span class=\"app-progress-label\" [attr.data-caption-placement]=\"captionplacement\">{{bar.displayValue}}</span>\n  </div>\n}\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Attribute,
+                        args: ['dataset.bind']
+                    }] }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    exports.ProgressBarComponent = ProgressBarComponent;
+    exports.TYPE_CLASS_MAP = TYPE_CLASS_MAP;
+
+}));

package/components/basic/progress/progress-bar/fesm2022/index.mjs

@@ -0,0 +1,154 @@
+import * as i0 from '@angular/core';
+import { Attribute, Inject, Optional, Component } from '@angular/core';
+import { findValueOf, isDefined } from '@wm/core';
+import { register, PROP_STRING, PROP_ANY, PROP_NUMBER, PROP_BOOLEAN, StylableComponent, styler, provideAsWidgetRef } from '@wm/components/base';
+import { getDecimalCount, isPercentageValue } from '@wm/components/basic/progress/progress-utils';
+import { debounce, isArray } from 'lodash-es';
+
+const registerProps = () => {
+    register('wm-progress-bar', new Map([
+        ['captionplacement', { value: 'hidden', ...PROP_STRING }],
+        ['class', PROP_STRING],
+        ['dataset', PROP_ANY],
+        ['datavalue', PROP_STRING],
+        ['displayformat', PROP_STRING],
+        ['hint', PROP_STRING],
+        ['arialabel', PROP_STRING],
+        ['maxvalue', { value: 100, ...PROP_NUMBER }],
+        ['minvalue', { value: 0, ...PROP_NUMBER }],
+        ['name', PROP_STRING],
+        ['show', { value: true, ...PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...PROP_NUMBER }],
+        ['type', { value: 'default', ...PROP_STRING }]
+    ]));
+};
+
+const DEFAULT_CLS = 'progress app-progress';
+const WIDGET_CONFIG = { widgetType: 'wm-progress-bar', hostClass: DEFAULT_CLS };
+// map of progress-bar type and classes
+const TYPE_CLASS_MAP = {
+    'default': '',
+    'default-striped': 'progress-bar-striped',
+    'success': 'progress-bar-success',
+    'success-striped': 'progress-bar-success progress-bar-striped',
+    'info': 'progress-bar-info',
+    'info-striped': 'progress-bar-info progress-bar-striped',
+    'warning': 'progress-bar-warning',
+    'warning-striped': 'progress-bar-warning progress-bar-striped',
+    'danger': 'progress-bar-danger',
+    'danger-striped': 'progress-bar-danger progress-bar-striped'
+};
+class ProgressBarComponent extends StylableComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, dataset, boundDataset, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        // progress-bar data, ngFor in the template iterates on this
+        this.data = [{
+                cls: TYPE_CLASS_MAP.default,
+                progressBarWidth: '0%',
+                displayValue: '0'
+            }];
+        // flag which determines whether dataset is provided or not
+        this.hasDataset = !!(dataset || boundDataset);
+        styler(this.nativeElement, this);
+        this._prepareData = debounce(() => this.prepareData(), 50);
+    }
+    // update the proper classes when there is a change in type
+    onTypeChange() {
+        if (!this.hasDataset) {
+            if (this.data[0]) {
+                this.data[0].cls = TYPE_CLASS_MAP[this.type];
+            }
+        }
+    }
+    // returns the formatted display value based on the provided displayformat
+    getFormattedDisplayVal(val) {
+        const format = this.displayformat || '9';
+        val = parseFloat('' + val);
+        val = (val.toFixed(getDecimalCount(format)));
+        if (format && format.includes('%')) {
+            val = `${val}%`;
+        }
+        return val;
+    }
+    prepareData() {
+        // when the dataset is provided, iterate over the dataset to set the proper values in the data
+        if (this.dataset && isArray(this.dataset) && this.type && this.datavalue) {
+            this.data = this.dataset.map((datum) => {
+                const val = findValueOf(datum, this.datavalue).toString();
+                let percentVal = val;
+                if (val && !val.includes('%')) {
+                    percentVal = `${val}%`;
+                }
+                return {
+                    cls: TYPE_CLASS_MAP[findValueOf(datum, this.type)],
+                    progressBarWidth: percentVal,
+                    displayValue: this.getFormattedDisplayVal(val)
+                };
+            });
+        }
+        else {
+            // if the dataset is not provided, update the values in the default data
+            let width = 0;
+            let displayVal = 0;
+            if (this.datavalue) {
+                if (isPercentageValue(this.datavalue)) {
+                    const val = (this.datavalue || '0%');
+                    width = displayVal = val;
+                }
+                else {
+                    if (isDefined(this.datavalue)) {
+                        const denominator = (+this.maxvalue - +this.minvalue) || 1;
+                        const val = ((+this.datavalue - +this.minvalue) * 100) / denominator + '%';
+                        width = displayVal = val;
+                    }
+                }
+            }
+            this.data[0].displayValue = this.getFormattedDisplayVal(displayVal);
+            this.data[0].progressBarWidth = width;
+            this.data[0].cls = TYPE_CLASS_MAP[this.type];
+        }
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'type') {
+            this.onTypeChange();
+        }
+        else if (key === 'minvalue' || key === 'maxvalue' || key === 'datavalue' || key === 'dataset' || key === 'displayformat') {
+            this._prepareData();
+        }
+        else if (key === 'tabindex') {
+            return;
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.Injector }, { token: 'dataset', attribute: true }, { token: 'dataset.bind', attribute: true }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ProgressBarComponent, isStandalone: true, selector: "[wmProgressBar]", providers: [
+            provideAsWidgetRef(ProgressBarComponent)
+        ], usesInheritance: true, ngImport: i0, template: "@for (bar of data; track bar) {\n  <div class=\"multi-bar progress-bar {{bar.cls}}\" [style.width]=\"bar.progressBarWidth\"\n    role=\"progressbar\" [attr.aria-valuenow]=\"datavalue\" [attr.aria-valuemin]=\"minvalue\" [attr.aria-valuemax]=\"maxvalue\"\n    [attr.aria-label]=\"arialabel || 'Progress bar'\" [tabindex]=\"tabindex\">\n    <span class=\"app-progress-label\" [attr.data-caption-placement]=\"captionplacement\">{{bar.displayValue}}</span>\n  </div>\n}\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: '[wmProgressBar]', providers: [
+                        provideAsWidgetRef(ProgressBarComponent)
+                    ], template: "@for (bar of data; track bar) {\n  <div class=\"multi-bar progress-bar {{bar.cls}}\" [style.width]=\"bar.progressBarWidth\"\n    role=\"progressbar\" [attr.aria-valuenow]=\"datavalue\" [attr.aria-valuemin]=\"minvalue\" [attr.aria-valuemax]=\"maxvalue\"\n    [attr.aria-label]=\"arialabel || 'Progress bar'\" [tabindex]=\"tabindex\">\n    <span class=\"app-progress-label\" [attr.data-caption-placement]=\"captionplacement\">{{bar.displayValue}}</span>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['dataset']
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['dataset.bind']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ProgressBarComponent, TYPE_CLASS_MAP };
+//# sourceMappingURL=index.mjs.map