@wavemaker-ai/app-ng-runtime 1.0.0-rc.317 → 1.0.0-rc.319

package/components/base/bundles/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/core'), require('@angular/core'), require('@wavemaker/focus-trap'), require('lodash-es'), require('moment'), require('@angular/platform-browser'), require('rxjs'), require('@wm/security'), require('rxjs/operators'), require('@angular/forms'), require('@swipey'), require('@angular/common'), require('moment-timezone/moment-timezone'), require('tslib')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@wm/core', '@angular/core', '@wavemaker/focus-trap', 'lodash-es', 'moment', '@angular/platform-browser', 'rxjs', '@wm/security', 'rxjs/operators', '@angular/forms', '@swipey', '@angular/common', 'moment-timezone/moment-timezone', 'tslib'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.base = {}), global.wm.core, global.ng.core, global.focusTrap, global._, global.momentLib, global.ng.platformBrowser, global.rxjs, global.wm.security, global.rxjs.operators, global.ng.forms, global.swipey, global.ng.common, global.momentLib$1, global.tslib));
-})(this, (function (exports, i1, i0, focusTrap, lodashEs, momentLib, i1$2, rxjs, security, operators, forms, _swipey, i1$1, momentLib$1, tslib) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/core'), require('@angular/core'), require('@wavemaker/focus-trap'), require('lodash-es'), require('moment'), require('@angular/platform-browser'), require('rxjs'), require('@wm/security'), require('rxjs/operators'), require('@angular/forms'), require('@swipey'), require('@angular/common'), require('moment-timezone/moment-timezone'), require('tslib'), require('@angular/common/http')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@wm/core', '@angular/core', '@wavemaker/focus-trap', 'lodash-es', 'moment', '@angular/platform-browser', 'rxjs', '@wm/security', 'rxjs/operators', '@angular/forms', '@swipey', '@angular/common', 'moment-timezone/moment-timezone', 'tslib', '@angular/common/http'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.base = {}), global.wm.core, global.ng.core, global.focusTrap, global._, global.momentLib, global.ng.platformBrowser, global.rxjs, global.wm.security, global.rxjs.operators, global.ng.forms, global.swipey, global.ng.common, global.momentLib$1, global.tslib, global.ng.common.http));
+})(this, (function (exports, i1, i0, focusTrap, lodashEs, momentLib, i1$2, rxjs, security, operators, forms, _swipey, i1$1, momentLib$1, tslib, http) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -5910,6 +5910,300 @@
                 type: i0.Input
             }] }); })();
 
+    // check if the url is a svg icon url
+    function isSvgIconUrl(url) {
+        if (!url) {
+            return false;
+        }
+        const path = url.split(/[?#]/)[0];
+        return /\.svg$/i.test(path);
+    }
+    /**
+     * Module-level cache for already-normalized SVG markup, keyed by the
+     * pipe-transformed URL. Shared across every directive instance so repeated
+     * usage of the same icon resolves synchronously without another network hit.
+     */
+    const svgCache = new Map();
+    /**
+     * In-flight request cache. Multiple directives mounted at the same time and
+     * pointing at the same URL share a single HTTP request.
+     */
+    const inFlightRequests = new Map();
+    /**
+     * Renders the SVG fetched from `iconUrl` inline on the host element so the
+     * markup behaves like a font icon - it can be sized via `font-size`, supports
+     * `:hover` / transitions on the host, and (for SVGs authored with
+     * `currentColor`) inherits `color` from CSS.
+     *
+     * Usage:
+     *   <i class="wm-icon" [iconUrl]="url"></i>
+     *
+     * The incoming URL is first run through `ImagePipe` (so relative project
+     * paths, CDN rewrites, etc. work the same way as `<img [src]>`), then fetched
+     * as text via `HttpClient`. The fetched markup is normalized so the root
+     * `<svg>` gets `width="1em"` / `height="1em"` if not already specified (so
+     * the icon scales with the host's `font-size`) and a root `fill="currentColor"`
+     * fallback when no `fill` attribute is declared.
+     *
+     * Original `fill` / `stroke` values inside the SVG are preserved verbatim so
+     * a multi-color SVG renders with its source colors. To make an SVG themeable
+     * via the host's CSS `color`, author the source with `fill="currentColor"`
+     * (the convention used by Material Icons, Heroicons, Font Awesome, etc.).
+     */
+    class SvgIconDirective {
+        constructor() {
+            /**
+             * Bound to the host's `innerHTML`. Set to a `SafeHtml` value produced by
+             * `DomSanitizer.bypassSecurityTrustHtml` so Angular's renderer skips
+             * re-sanitization and inlines the SVG as-is.
+             */
+            this.hostInnerHtml = null;
+            this.http = i0.inject(http.HttpClient);
+            this.sanitizer = i0.inject(i1$2.DomSanitizer);
+            this.imagePipe = i0.inject(ImagePipe);
+            this.lastResolvedUrl = null;
+        }
+        ngOnChanges(changes) {
+            if (changes['iconUrl']) {
+                this.loadSvg(this.iconUrl);
+            }
+        }
+        ngOnDestroy() {
+            this.cancelInflight();
+        }
+        loadSvg(rawUrl) {
+            this.cancelInflight();
+            if (!rawUrl) {
+                this.hostInnerHtml = null;
+                this.lastResolvedUrl = null;
+                return;
+            }
+            const url = this.imagePipe.transform(rawUrl);
+            if (!url) {
+                this.hostInnerHtml = null;
+                this.lastResolvedUrl = null;
+                return;
+            }
+            if (this.lastResolvedUrl === url && this.hostInnerHtml) {
+                return;
+            }
+            const cached = svgCache.get(url);
+            if (cached !== undefined) {
+                this.applySvg(url, cached);
+                return;
+            }
+            let request$ = inFlightRequests.get(url);
+            if (!request$) {
+                request$ = this.http.get(url, { responseType: 'text' }).pipe(operators.tap(svg => {
+                    svgCache.set(url, this.normalizeSvg(svg));
+                    inFlightRequests.delete(url);
+                }), operators.shareReplay(1));
+                inFlightRequests.set(url, request$);
+            }
+            this.sub = request$.subscribe({
+                next: () => {
+                    const normalized = svgCache.get(url);
+                    if (normalized !== undefined) {
+                        this.applySvg(url, normalized);
+                    }
+                },
+                error: () => {
+                    inFlightRequests.delete(url);
+                    this.hostInnerHtml = null;
+                    this.lastResolvedUrl = null;
+                }
+            });
+        }
+        applySvg(url, svg) {
+            this.lastResolvedUrl = url;
+            this.hostInnerHtml = this.sanitizer.bypassSecurityTrustHtml(svg);
+        }
+        cancelInflight() {
+            if (this.sub) {
+                this.sub.unsubscribe();
+                this.sub = undefined;
+            }
+        }
+        /**
+         * Make the fetched SVG behave like a font icon:
+         *  - replace any non-"none" fill/stroke attributes (single- or
+         *    double-quoted) with currentColor so CSS `color` controls the icon
+         *  - replace any non-"none" inline `fill:` / `stroke:` style values with
+         *    currentColor
+         *  - on the root <svg> tag, add `width="1em"`, `height="1em"`, and a
+         *    default `fill="currentColor"` if missing so the icon scales with
+         *    the host element's `font-size`
+         */
+        normalizeSvg(svg) {
+            if (!svg)
+                return '';
+            let out = svg;
+            // ── Color ────────────────────────────────────────────────────────
+            out = out
+                .replace(/fill\s*=\s*"(?!\s*none\s*")[^"]*"/gi, 'fill="currentColor"')
+                .replace(/fill\s*=\s*'(?!\s*none\s*')[^']*'/gi, "fill='currentColor'")
+                .replace(/stroke\s*=\s*"(?!\s*none\s*")[^"]*"/gi, 'stroke="currentColor"')
+                .replace(/stroke\s*=\s*'(?!\s*none\s*')[^']*'/gi, "stroke='currentColor'")
+                .replace(/(fill|stroke)\s*:\s*(?!\s*none\b)[^;"']+/gi, '$1: currentColor');
+            out = out.replace(/<svg\b([^>]*)>/i, (_match, attrs) => {
+                let updated = attrs;
+                updated = updated.replace(/\swidth\s*=\s*("[^"]*"|'[^']*')/gi, '')
+                    .replace(/\s+$/, '') + ' width="1em"';
+                updated = updated.replace(/\sheight\s*=\s*("[^"]*"|'[^']*')/gi, '')
+                    .replace(/\s+$/, '') + ' height="1em"';
+                updated += ' fill="currentColor"';
+                return `<svg${updated}>`;
+            });
+            return out;
+        }
+        static { this.ɵfac = function SvgIconDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SvgIconDirective)(); }; }
+        static { this.ɵdir = /*@__PURE__*/ i0__namespace.ɵɵdefineDirective({ type: SvgIconDirective, selectors: [["", "iconUrl", ""]], hostVars: 1, hostBindings: function SvgIconDirective_HostBindings(rf, ctx) { if (rf & 2) {
+                i0__namespace.ɵɵdomProperty("innerHTML", ctx.hostInnerHtml, i0__namespace.ɵɵsanitizeHtml);
+            } }, inputs: { iconUrl: "iconUrl" }, exportAs: ["svgIcon"], features: [i0__namespace.ɵɵNgOnChangesFeature] }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SvgIconDirective, [{
+            type: i0.Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[iconUrl]',
+                    exportAs: 'svgIcon'
+                }]
+        }], null, { iconUrl: [{
+                type: i0.Input
+            }], hostInnerHtml: [{
+                type: i0.HostBinding,
+                args: ['innerHTML']
+            }] }); })();
+
+    function WmAppIconComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "i", 0);
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0._svgClasses)("ngStyle", ctx_r0.iconStyle)("iconUrl", ctx_r0.iconurl);
+    } }
+    function WmAppIconComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "img", 1);
+        i0__namespace.ɵɵpipe(1, "image");
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0._imageClasses)("src", i0__namespace.ɵɵpipeBind1(1, 4, ctx_r0.iconurl), i0__namespace.ɵɵsanitizeUrl)("ngStyle", ctx_r0.iconStyle);
+        i0__namespace.ɵɵattribute("alt", ctx_r0.alt || "");
+    } }
+    function WmAppIconComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+        i0__namespace.ɵɵelement(0, "i", 2);
+    } if (rf & 2) {
+        const ctx_r0 = i0__namespace.ɵɵnextContext();
+        i0__namespace.ɵɵproperty("ngClass", ctx_r0._fontClasses)("ngStyle", ctx_r0.iconStyle);
+    } }
+    /**
+     * Single, reusable renderer for the SVG / image / font 3-way icon branch
+     * that used to be duplicated across every widget that accepts an
+     * `iconclass` + `iconurl` pair (anchor, button, panel header, card,
+     * dialog-header, form, list, table, chart, accordion, file-upload,
+     * rating, switch, menu, navbar, search, tabs, ...).
+     *
+     * Decision order:
+     *   1. `iconurl` ending in `.svg`   -> inline SVG via `[iconUrl]` directive
+     *   2. `iconurl` (anything else)    -> `<img [src]="url | image">`
+     *   3. `iconclass`                  -> `<i class="app-icon {{iconclass}}">`
+     *   4. `defaultIconClass` (if set)  -> same as #3 with the fallback class
+     *   5. otherwise                    -> nothing
+     *
+     * Notes:
+     * - `iconurl` wins over `iconclass` when both are set: a widget owner that
+     *   bothered to configure a URL almost certainly wants it visible. Where the
+     *   old behavior was "render both" (anchor, button), use TWO `<wm-app-icon>`
+     *   elements - one with only `iconurl`, one with only `iconclass`.
+     * - The host is `display: contents` so existing CSS selectors targeting
+     *   `.app-icon` directly inside the parent (e.g. `.btn .app-icon`) keep
+     *   working - the wrapper element is layout-transparent.
+     */
+    class WmAppIconComponent {
+        get _isSvg() {
+            return isSvgIconUrl(this.iconurl);
+        }
+        get _isImage() {
+            return !!this.iconurl && !this._isSvg;
+        }
+        get _fontClass() {
+            return [this.defaultIconClass, this.iconclass]
+                .filter(Boolean)
+                .join(' ');
+        }
+        _extras() {
+            const extras = this.defaultClasses;
+            if (!extras) {
+                return [];
+            }
+            if (Array.isArray(extras)) {
+                return extras;
+            }
+            return extras.split(/\s+/).filter(Boolean);
+        }
+        get _svgClasses() {
+            return ['app-icon app-icon-svg', ...this._extras()];
+        }
+        get _imageClasses() {
+            return ['app-icon', ...this._extras()];
+        }
+        get _fontClasses() {
+            return ['app-icon', ...this._extras(), ...this._fontClass.split(/\s+/).filter(Boolean)];
+        }
+        static { this.ɵfac = function WmAppIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WmAppIconComponent)(); }; }
+        static { this.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: WmAppIconComponent, selectors: [["wm-app-icon"]], hostVars: 2, hostBindings: function WmAppIconComponent_HostBindings(rf, ctx) { if (rf & 2) {
+                i0__namespace.ɵɵstyleProp("display", "contents");
+            } }, inputs: { iconclass: "iconclass", iconurl: "iconurl", defaultIconClass: "defaultIconClass", defaultClasses: "defaultClasses", iconStyle: "iconStyle", alt: "alt" }, decls: 3, vars: 1, consts: [["role", "img", "aria-hidden", "true", "data-identifier", "svg", 3, "ngClass", "ngStyle", "iconUrl"], ["data-identifier", "img", 3, "ngClass", "src", "ngStyle"], ["aria-hidden", "true", 3, "ngClass", "ngStyle"]], template: function WmAppIconComponent_Template(rf, ctx) { if (rf & 1) {
+                i0__namespace.ɵɵconditionalCreate(0, WmAppIconComponent_Conditional_0_Template, 1, 3, "i", 0)(1, WmAppIconComponent_Conditional_1_Template, 2, 6, "img", 1)(2, WmAppIconComponent_Conditional_2_Template, 1, 2, "i", 2);
+            } if (rf & 2) {
+                i0__namespace.ɵɵconditional(ctx._isSvg ? 0 : ctx._isImage ? 1 : ctx._fontClass ? 2 : -1);
+            } }, dependencies: [i1$1.NgClass, i1$1.NgStyle, SvgIconDirective, ImagePipe], encapsulation: 2 }); }
+    }
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WmAppIconComponent, [{
+            type: i0.Component,
+            args: [{
+                    standalone: true,
+                    selector: 'wm-app-icon',
+                    imports: [i1$1.NgClass, i1$1.NgStyle, SvgIconDirective, ImagePipe],
+                    encapsulation: i0.ViewEncapsulation.None,
+                    host: {
+                        '[style.display]': '"contents"'
+                    },
+                    template: `
+        @if (_isSvg) {
+            <i [ngClass]="_svgClasses"
+               role="img"
+               aria-hidden="true"
+               data-identifier="svg"
+               [ngStyle]="iconStyle"
+               [iconUrl]="iconurl"></i>
+        } @else if (_isImage) {
+            <img [ngClass]="_imageClasses"
+                 data-identifier="img"
+                 [attr.alt]="alt || ''"
+                 [src]="iconurl | image"
+                 [ngStyle]="iconStyle"/>
+        } @else if (_fontClass) {
+            <i [ngClass]="_fontClasses"
+               aria-hidden="true"
+               [ngStyle]="iconStyle"></i>
+        }
+    `
+                }]
+        }], null, { iconclass: [{
+                type: i0.Input
+            }], iconurl: [{
+                type: i0.Input
+            }], defaultIconClass: [{
+                type: i0.Input
+            }], defaultClasses: [{
+                type: i0.Input
+            }], iconStyle: [{
+                type: i0.Input
+            }], alt: [{
+                type: i0.Input
+            }] }); })();
+    (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassDebugInfo(WmAppIconComponent, { className: "WmAppIconComponent", filePath: "widgets/common/base/app-icon-component.ts", lineNumber: 58 }); })();
+
     exports.ALLFIELDS = ALLFIELDS;
     exports.AUTOCLOSE_TYPE = AUTOCLOSE_TYPE;
     exports.AUTO_LAYOUT_PROPS = AUTO_LAYOUT_PROPS;
@@ -5958,6 +6252,7 @@
     exports.StringToNumberPipe = StringToNumberPipe;
     exports.StylableComponent = StylableComponent;
     exports.SuffixPipe = SuffixPipe;
+    exports.SvgIconDirective = SvgIconDirective;
     exports.TemplateReplacePipe = TemplateReplacePipe;
     exports.TextContentDirective = TextContentDirective;
     exports.TimeFromNowPipe = TimeFromNowPipe;
@@ -5968,6 +6263,7 @@
     exports.TrustAsPipe = TrustAsPipe;
     exports.WidgetConfig = WidgetConfig;
     exports.WidgetRef = WidgetRef;
+    exports.WmAppIconComponent = WmAppIconComponent;
     exports.applyFilterOnField = applyFilterOnField;
     exports.configureDnD = configureDnD;
     exports.convertDataToObject = convertDataToObject;
@@ -6015,6 +6311,7 @@
     exports.isDataSetWidget = isDataSetWidget;
     exports.isDimensionProp = isDimensionProp;
     exports.isStyle = isStyle;
+    exports.isSvgIconUrl = isSvgIconUrl;
     exports.parseValueByType = parseValueByType;
     exports.performDataOperation = performDataOperation;
     exports.prepareFieldDefs = prepareFieldDefs;