@wavemaker/app-ng-runtime 11.13.0-rc.6255 → 11.14.0-rc.232

package/components/basic/picture/.npmignore

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

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: "18.2.13", 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: "18.2.13", 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: "18.2.13", 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/{default → picture}/esm2022/index.mjs

@@ -2,4 +2,4 @@
  * Generated bundle index. Do not edit.
  */
 export * from './public_api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvYmFzaWMvZGVmYXVsdC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvYmFzaWMvcGljdHVyZS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWNfYXBpJztcbiJdfQ==

package/components/basic/picture/esm2022/picture.directive.mjs

@@ -0,0 +1,93 @@
+import { Directive, HostBinding, Inject, Injector, Optional } from '@angular/core';
+import { setCSS, switchClass } from '@wm/core';
+import { DISPLAY_TYPE, ImagePipe, provideAsWidgetRef, StylableComponent, styler } from '@wm/components/base';
+import { registerProps } from './picture.props';
+import * as i0 from "@angular/core";
+import * as i1 from "@wm/components/base";
+const DEFAULT_CLS = 'app-picture';
+const WIDGET_CONFIG = {
+    widgetType: 'wm-picture',
+    hostClass: DEFAULT_CLS,
+    displayType: DISPLAY_TYPE.INLINE_BLOCK
+};
+export 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: "18.2.13", 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: "18.2.13", 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: "18.2.13", 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']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGljdHVyZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvYmFzaWMvcGljdHVyZS9zcmMvcGljdHVyZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBVSxRQUFRLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFFekYsT0FBTyxFQUFVLE1BQU0sRUFBRSxXQUFXLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDdEQsT0FBTyxFQUNILFlBQVksRUFDWixTQUFTLEVBRVQsa0JBQWtCLEVBQ2xCLGlCQUFpQixFQUNqQixNQUFNLEVBQ1QsTUFBTSxxQkFBcUIsQ0FBQztBQUU3QixPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0saUJBQWlCLENBQUM7OztBQUU5QyxNQUFNLFdBQVcsR0FBRyxhQUFhLENBQUM7QUFDbEMsTUFBTSxhQUFhLEdBQWtCO0lBQ2pDLFVBQVUsRUFBRSxZQUFZO0lBQ3hCLFNBQVMsRUFBRSxXQUFXO0lBQ3RCLFdBQVcsRUFBRSxZQUFZLENBQUMsWUFBWTtDQUN6QyxDQUFDO0FBVUYsTUFBTSxPQUFPLGdCQUFpQixTQUFRLGlCQUFpQjthQUM1QyxvQkFBZSxHQUFHLGFBQWEsRUFBRSxBQUFsQixDQUFtQjtJQVN6QyxZQUFZLEdBQWEsRUFBVSxTQUFvQixFQUEwQyxlQUFvQjtRQUNqSCxLQUFLLENBQUMsR0FBRyxFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUMsQ0FBQztRQURaLGNBQVMsR0FBVCxTQUFTLENBQVc7UUFHbkQsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELFlBQVk7UUFDUixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQztJQUMzRyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsR0FBVyxFQUFFLEVBQU8sRUFBRSxFQUFPO1FBQzFDLElBQUksR0FBRyxLQUFLLGVBQWUsRUFBRSxDQUFDO1lBQzFCLElBQUksS0FBSyxHQUFHLEVBQUUsQ0FBQztZQUNmLElBQUksTUFBTSxHQUFHLEVBQUUsQ0FBQztZQUNoQixRQUFRLEVBQUUsRUFBRSxDQUFDO2dCQUNULEtBQUssTUFBTTtvQkFDUCxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztvQkFDbkIsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7b0JBQ3JCLE1BQU07Z0JBQ1YsS0FBSyxHQUFHO29CQUNKLEtBQUssR0FBRyxNQUFNLENBQUM7b0JBQ2YsTUFBTTtnQkFDVixLQUFLLEdBQUc7b0JBQ0osTUFBTSxHQUFHLE1BQU0sQ0FBQztvQkFDaEIsTUFBTTtnQkFDVixLQUFLLE1BQU07b0JBQ1AsS0FBSyxHQUFHLE1BQU0sQ0FBQztvQkFDZixNQUFNLEdBQUcsTUFBTSxDQUFDO29CQUNoQixNQUFNO1lBQ2QsQ0FBQztZQUNELE1BQU0sQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7WUFDakQsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsQ0FBQztRQUN2RCxDQUFDO2FBQU0sSUFBSSxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxvQkFBb0IsRUFBRSxDQUFDO1lBQzdELElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN4QixDQUFDO2FBQU0sSUFBSSxHQUFHLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDekIsV0FBVyxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUM7UUFDOUQsQ0FBQzthQUFPLElBQUksR0FBRyxLQUFLLFlBQVksRUFBRSxDQUFDO1lBQy9CLE1BQU0sQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxFQUFFLENBQUMsQ0FBQztRQUNqRCxDQUFDO1FBQ0QsS0FBSyxDQUFDLGdCQUFnQixDQUFDLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELGFBQWEsQ0FBQyxHQUFXLEVBQUUsRUFBTyxFQUFFLEVBQVE7UUFDeEMsSUFBSSxHQUFHLEtBQUssZUFBZSxFQUFFLENBQUM7WUFDMUIsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3hCLENBQUM7YUFBTSxDQUFDO1lBQ0osS0FBSyxDQUFDLGFBQWEsQ0FBQyxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBQ3JDLENBQUM7SUFDTCxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUNwQixLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDckIsQ0FBQzsrR0EvRFEsZ0JBQWdCLG1FQVV3QyxrQkFBa0I7bUdBVjFFLGdCQUFnQixnSEFMZDtZQUNQLGtCQUFrQixDQUFDLGdCQUFnQixDQUFDO1NBQ3ZDOzs0RkFHUSxnQkFBZ0I7a0JBUjVCLFNBQVM7bUJBQUM7b0JBQ1QsVUFBVSxFQUFFLElBQUk7b0JBQ2QsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsU0FBUyxFQUFFO3dCQUNQLGtCQUFrQixrQkFBa0I7cUJBQ3ZDO29CQUNELFFBQVEsRUFBRSxXQUFXO2lCQUN4Qjs7MEJBVzZELE1BQU07MkJBQUMsa0JBQWtCOzswQkFBRyxRQUFRO3lDQUYxRSxTQUFTO3NCQUE1QixXQUFXO3VCQUFDLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0RpcmVjdGl2ZSwgSG9zdEJpbmRpbmcsIEluamVjdCwgSW5qZWN0b3IsIE9uSW5pdCwgT3B0aW9uYWx9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQge3NldEF0dHIsIHNldENTUywgc3dpdGNoQ2xhc3N9IGZyb20gJ0B3bS9jb3JlJztcbmltcG9ydCB7XG4gICAgRElTUExBWV9UWVBFLFxuICAgIEltYWdlUGlwZSxcbiAgICBJV2lkZ2V0Q29uZmlnLFxuICAgIHByb3ZpZGVBc1dpZGdldFJlZixcbiAgICBTdHlsYWJsZUNvbXBvbmVudCxcbiAgICBzdHlsZXJcbn0gZnJvbSAnQHdtL2NvbXBvbmVudHMvYmFzZSc7XG5cbmltcG9ydCB7cmVnaXN0ZXJQcm9wc30gZnJvbSAnLi9waWN0dXJlLnByb3BzJztcblxuY29uc3QgREVGQVVMVF9DTFMgPSAnYXBwLXBpY3R1cmUnO1xuY29uc3QgV0lER0VUX0NPTkZJRzogSVdpZGdldENvbmZpZyA9IHtcbiAgICB3aWRnZXRUeXBlOiAnd20tcGljdHVyZScsXG4gICAgaG9zdENsYXNzOiBERUZBVUxUX0NMUyxcbiAgICBkaXNwbGF5VHlwZTogRElTUExBWV9UWVBFLklOTElORV9CTE9DS1xufTtcblxuQERpcmVjdGl2ZSh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdpbWdbd21QaWN0dXJlXScsXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHByb3ZpZGVBc1dpZGdldFJlZihQaWN0dXJlRGlyZWN0aXZlKVxuICAgIF0sXG4gICAgZXhwb3J0QXM6ICd3bVBpY3R1cmUnXG59KVxuZXhwb3J0IGNsYXNzIFBpY3R1cmVEaXJlY3RpdmUgZXh0ZW5kcyBTdHlsYWJsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gICAgc3RhdGljIGluaXRpYWxpemVQcm9wcyA9IHJlZ2lzdGVyUHJvcHMoKTtcblxuICAgIGVuY29kZXVybDtcbiAgICBwaWN0dXJlc291cmNlO1xuICAgIHBpY3R1cmVwbGFjZWhvbGRlcjtcbiAgICBhbHR0ZXh0O1xuXG4gICAgQEhvc3RCaW5kaW5nKCdzcmMnKSBpbWdTb3VyY2U6IHN0cmluZztcblxuICAgIGNvbnN0cnVjdG9yKGluajogSW5qZWN0b3IsIHByaXZhdGUgaW1hZ2VQaXBlOiBJbWFnZVBpcGUsIEBJbmplY3QoJ0VYUExJQ0lUX0NPTlRFWFQnKSBAT3B0aW9uYWwoKSBleHBsaWNpdENvbnRleHQ6IGFueSkge1xuICAgICAgICBzdXBlcihpbmosIFdJREdFVF9DT05GSUcsIGV4cGxpY2l0Q29udGV4dCk7XG5cbiAgICAgICAgc3R5bGVyKHRoaXMubmF0aXZlRWxlbWVudCwgdGhpcyk7XG4gICAgfVxuXG4gICAgc2V0SW1nU291cmNlKCkge1xuICAgICAgICB0aGlzLmltZ1NvdXJjZSA9IHRoaXMuaW1hZ2VQaXBlLnRyYW5zZm9ybSh0aGlzLnBpY3R1cmVzb3VyY2UsIHRoaXMuZW5jb2RldXJsLCB0aGlzLnBpY3R1cmVwbGFjZWhvbGRlcik7XG4gICAgfVxuXG4gICAgb25Qcm9wZXJ0eUNoYW5nZShrZXk6IHN0cmluZywgbnY6IGFueSwgb3Y6IGFueSkge1xuICAgICAgICBpZiAoa2V5ID09PSAncGljdHVyZWFzcGVjdCcpIHtcbiAgICAgICAgICAgIGxldCB3aWR0aCA9ICcnO1xuICAgICAgICAgICAgbGV0IGhlaWdodCA9ICcnO1xuICAgICAgICAgICAgc3dpdGNoIChudikge1xuICAgICAgICAgICAgICAgIGNhc2UgJ05vbmUnOlxuICAgICAgICAgICAgICAgICAgICB3aWR0aCA9IHRoaXMud2lkdGg7XG4gICAgICAgICAgICAgICAgICAgIGhlaWdodCA9IHRoaXMuaGVpZ2h0O1xuICAgICAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgICAgICBjYXNlICdIJzpcbiAgICAgICAgICAgICAgICAgICAgd2lkdGggPSAnMTAwJSc7XG4gICAgICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgICAgIGNhc2UgJ1YnOlxuICAgICAgICAgICAgICAgICAgICBoZWlnaHQgPSAnMTAwJSc7XG4gICAgICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgICAgIGNhc2UgJ0JvdGgnOlxuICAgICAgICAgICAgICAgICAgICB3aWR0aCA9ICcxMDAlJztcbiAgICAgICAgICAgICAgICAgICAgaGVpZ2h0ID0gJzEwMCUnO1xuICAgICAgICAgICAgICAgICAgICBicmVhaztcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHNldENTUyh0aGlzLm5hdGl2ZUVsZW1lbnQsICd3aWR0aCcsIHdpZHRoLCB0cnVlKTtcbiAgICAgICAgICAgIHNldENTUyh0aGlzLm5hdGl2ZUVsZW1lbnQsICdoZWlnaHQnLCBoZWlnaHQsIHRydWUpO1xuICAgICAgICB9IGVsc2UgaWYgKGtleSA9PT0gJ2VuY29kZXVybCcgfHwga2V5ID09PSAncGljdHVyZXBsYWNlaG9sZGVyJykge1xuICAgICAgICAgICAgdGhpcy5zZXRJbWdTb3VyY2UoKTtcbiAgICAgICAgfSBlbHNlIGlmIChrZXkgPT09ICdzaGFwZScpIHtcbiAgICAgICAgICAgIHN3aXRjaENsYXNzKHRoaXMubmF0aXZlRWxlbWVudCwgYGltZy0ke252fWAsIGBpbWctJHtvdn1gKTtcbiAgICAgICAgfSAgZWxzZSBpZiAoa2V5ID09PSAncmVzaXplbW9kZScpIHtcbiAgICAgICAgICAgIHNldENTUyh0aGlzLm5hdGl2ZUVsZW1lbnQsICdvYmplY3QtZml0JywgbnYpO1xuICAgICAgICB9XG4gICAgICAgIHN1cGVyLm9uUHJvcGVydHlDaGFuZ2Uoa2V5LCBudiwgb3YpO1xuICAgIH1cblxuICAgIG9uU3R5bGVDaGFuZ2Uoa2V5OiBzdHJpbmcsIG52OiBhbnksIG92PzogYW55KSB7XG4gICAgICAgIGlmIChrZXkgPT09ICdwaWN0dXJlc291cmNlJykge1xuICAgICAgICAgICAgdGhpcy5zZXRJbWdTb3VyY2UoKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHN1cGVyLm9uU3R5bGVDaGFuZ2Uoa2V5LCBudiwgb3YpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMuc2V0SW1nU291cmNlKCk7XG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgfVxufVxuIl19

package/components/basic/picture/esm2022/picture.props.mjs

@@ -0,0 +1,23 @@
+import { PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register } from '@wm/components/base';
+export 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);
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGljdHVyZS5wcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvd2lkZ2V0cy9iYXNpYy9waWN0dXJlL3NyYy9waWN0dXJlLnByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxRQUFRLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFFL0YsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLEdBQUcsRUFBRTtJQUM5QixNQUFNLEtBQUssR0FBRyxJQUFJLEdBQUcsQ0FDakI7UUFDSSxDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUM7UUFDMUIsQ0FBQyxPQUFPLEVBQUUsV0FBVyxDQUFDO1FBQ3RCLENBQUMsa0JBQWtCLEVBQUUsUUFBUSxDQUFDO1FBQzlCLENBQUMsa0JBQWtCLEVBQUUsUUFBUSxDQUFDO1FBQzlCLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQztRQUMxQixDQUFDLE1BQU0sRUFBRSxXQUFXLENBQUM7UUFDckIsQ0FBQyxXQUFXLEVBQUUsV0FBVyxDQUFDO1FBQzFCLENBQUMsTUFBTSxFQUFFLFdBQVcsQ0FBQztRQUNyQixDQUFDLGVBQWUsRUFBRSxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUNsRCxDQUFDLFNBQVMsRUFBRSxFQUFDLEtBQUssRUFBRSw2QkFBNkIsRUFBRSxHQUFHLFdBQVcsRUFBQyxDQUFDO1FBQ25FLENBQUMsb0JBQW9CLEVBQUUsV0FBVyxDQUFDO1FBQ25DLENBQUMsZUFBZSxFQUFFLFdBQVcsQ0FBQztRQUM5QixDQUFDLFlBQVksRUFBRSxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsR0FBRyxXQUFXLEVBQUMsQ0FBQztRQUMvQyxDQUFDLE9BQU8sRUFBRSxXQUFXLENBQUM7UUFDdEIsQ0FBQyxNQUFNLEVBQUUsRUFBQyxLQUFLLEVBQUUsSUFBSSxFQUFFLEdBQUcsWUFBWSxFQUFDLENBQUM7UUFDeEMsQ0FBQyxVQUFVLEVBQUUsRUFBQyxLQUFLLEVBQUUsQ0FBQyxFQUFFLEdBQUcsV0FBVyxFQUFDLENBQUM7S0FDM0MsQ0FDSixDQUFDO0lBQ0YsUUFBUSxDQUFDLFlBQVksRUFBRSxLQUFLLENBQUMsQ0FBQztBQUNsQyxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1BST1BfQU5ZLCBQUk9QX0JPT0xFQU4sIFBST1BfTlVNQkVSLCBQUk9QX1NUUklORywgcmVnaXN0ZXJ9IGZyb20gJ0B3bS9jb21wb25lbnRzL2Jhc2UnO1xuXG5leHBvcnQgY29uc3QgcmVnaXN0ZXJQcm9wcyA9ICgpID0+IHtcbiAgICBjb25zdCBwcm9wcyA9IG5ldyBNYXAoXG4gICAgICAgIFtcbiAgICAgICAgICAgIFsnYW5pbWF0aW9uJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgWydjbGFzcycsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsnY29uZGl0aW9uYWxjbGFzcycsIFBST1BfQU5ZXSxcbiAgICAgICAgICAgIFsnY29uZGl0aW9uYWxzdHlsZScsIFBST1BfQU5ZXSxcbiAgICAgICAgICAgIFsnZW5jb2RldXJsJywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgWydoaW50JywgUFJPUF9TVFJJTkddLFxuICAgICAgICAgICAgWydhcmlhbGFiZWwnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICBbJ25hbWUnLCBQUk9QX1NUUklOR10sXG4gICAgICAgICAgICBbJ3BpY3R1cmVhc3BlY3QnLCB7dmFsdWU6ICdOb25lJywgLi4uUFJPUF9TVFJJTkd9XSxcbiAgICAgICAgICAgIFsnYWx0dGV4dCcsIHt2YWx1ZTogJ0ltYWdlIGFsdCB0ZXh0IG5vdCBwcm92aWRlZCcsIC4uLlBST1BfU1RSSU5HfV0sXG4gICAgICAgICAgICBbJ3BpY3R1cmVwbGFjZWhvbGRlcicsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsncGljdHVyZXNvdXJjZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsncmVzaXplbW9kZScsIHt2YWx1ZTogJ2ZpbGwnLCAuLi5QUk9QX1NUUklOR31dLFxuICAgICAgICAgICAgWydzaGFwZScsIFBST1BfU1RSSU5HXSxcbiAgICAgICAgICAgIFsnc2hvdycsIHt2YWx1ZTogdHJ1ZSwgLi4uUFJPUF9CT09MRUFOfV0sXG4gICAgICAgICAgICBbJ3RhYmluZGV4Jywge3ZhbHVlOiAwLCAuLi5QUk9QX05VTUJFUn1dXG4gICAgICAgIF1cbiAgICApO1xuICAgIHJlZ2lzdGVyKCd3bS1waWN0dXJlJywgcHJvcHMpO1xufTtcbiJdfQ==

package/components/basic/picture/esm2022/public_api.mjs

@@ -0,0 +1,2 @@
+export * from './picture.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvd2lkZ2V0cy9iYXNpYy9waWN0dXJlL3NyYy9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMscUJBQXFCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3BpY3R1cmUuZGlyZWN0aXZlJztcbiJdfQ==

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: "18.2.13", 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: "18.2.13", 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: "18.2.13", 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":"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"}

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

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@wm/components/basic/picture" />
+export * from './public_api';

package/components/basic/picture/package.json

@@ -0,0 +1,20 @@
+{
+  "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",
+      "esm2022": "./esm2022/index.mjs",
+      "esm": "./esm2022/index.mjs",
+      "default": "./fesm2022/index.mjs"
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './picture.directive';

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: "18.2.13", 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: "18.2.13", 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: "18.2.13", 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/esm2022/index.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3dpZGdldHMvYmFzaWMvcHJvZ3Jlc3MvcHJvZ3Jlc3MtYmFyL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuIl19