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

package/components/base/fesm2022/index.mjs

@@ -1,20 +1,22 @@
 import * as i1 from '@wm/core';
 import { FormWidgetType, checkIsCustomPipeExpression, $parseExpr, isValidWebURL, _WM_APP_PROJECT, isValidImageUrl, encodeUrl, stringStartsWith, prettifyLabel, deHyphenate, initCaps, getClonedObject, DataSource, debounce, processFilterExpBindNode, isDefined, MatchMode, $parseEvent, isEqualWithFields, getFormattedDate, isAndroid, isNumberType, DataType, setCSS, IDGenerator, toBoolean, isChangeFromWatch, $unwatch, resetChangeFromWatch, isObject as isObject$1, toDimension, $appDigest, removeClass, addClass, setCSSFromObj, App, findParent, setAttr, switchClass, removeAttr, $invokeWatchers, $watch, findValueOf, validateAccessRoles, ComponentType, noop as noop$1, VALIDATOR, isIos, isMobile, hasOffsetStr, AbstractI18nService, CURRENCY_INFO, replace as replace$1, transformFileURI, isLargeTabletLandscape, isLargeTabletPortrait } from '@wm/core';
 import * as i0 from '@angular/core';
-import { InjectionToken, forwardRef, ElementRef, inject, ViewContainerRef, Injector, Injectable, Inject, Optional, Directive, Self, ContentChildren, Attribute, Input, Component, Pipe, SecurityContext } from '@angular/core';
+import { InjectionToken, forwardRef, ElementRef, inject, ViewContainerRef, Injector, Injectable, Inject, Optional, Directive, Self, ContentChildren, Attribute, Input, Component, Pipe, SecurityContext, HostBinding, ViewEncapsulation } from '@angular/core';
 import { createFocusTrap } from '@wavemaker/focus-trap';
 import { isNull, get, forEach, join, union, isArray, isObject, includes, split, isString, assignWith, isEmpty, replace, head, keys, isFunction, each, intersection, isUndefined, filter, cloneDeep, orderBy, trim, uniqWith, isEqual, uniqBy, sortBy, groupBy, toLower, values, startsWith, last, extend, camelCase, map, pickBy, first, debounce as debounce$1, omitBy, toUpper, find, concat, assign, isDate } from 'lodash-es';
 import * as momentLib from 'moment';
 import * as i1$2 from '@angular/platform-browser';
-import { EventManager } from '@angular/platform-browser';
+import { EventManager, DomSanitizer } from '@angular/platform-browser';
 import { ReplaySubject, Subject } from 'rxjs';
 import { SecurityService } from '@wm/security';
-import { filter as filter$1, debounceTime } from 'rxjs/operators';
+import { filter as filter$1, debounceTime, tap, shareReplay } from 'rxjs/operators';
 import { Validators } from '@angular/forms';
 import { SwipeAnimation } from '@swipey';
 import * as i1$1 from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import * as momentLib$1 from 'moment-timezone/moment-timezone';
 import { __decorate, __metadata } from 'tslib';
+import { HttpClient } from '@angular/common/http';
 
 const WidgetConfig = new InjectionToken('WidgetConfig');
 class WidgetRef {
@@ -5909,9 +5911,303 @@ class ShowInDeviceDirective {
             type: 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 = inject(HttpClient);
+        this.sanitizer = inject(DomSanitizer);
+        this.imagePipe = 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(tap(svg => {
+                svgCache.set(url, this.normalizeSvg(svg));
+                inFlightRequests.delete(url);
+            }), 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.ɵɵdefineDirective({ type: SvgIconDirective, selectors: [["", "iconUrl", ""]], hostVars: 1, hostBindings: function SvgIconDirective_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵdomProperty("innerHTML", ctx.hostInnerHtml, i0.ɵɵsanitizeHtml);
+        } }, inputs: { iconUrl: "iconUrl" }, exportAs: ["svgIcon"], features: [i0.ɵɵNgOnChangesFeature] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SvgIconDirective, [{
+        type: Directive,
+        args: [{
+                standalone: true,
+                selector: '[iconUrl]',
+                exportAs: 'svgIcon'
+            }]
+    }], null, { iconUrl: [{
+            type: Input
+        }], hostInnerHtml: [{
+            type: HostBinding,
+            args: ['innerHTML']
+        }] }); })();
+
+function WmAppIconComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0._svgClasses)("ngStyle", ctx_r0.iconStyle)("iconUrl", ctx_r0.iconurl);
+} }
+function WmAppIconComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 1);
+    i0.ɵɵpipe(1, "image");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0._imageClasses)("src", i0.ɵɵpipeBind1(1, 4, ctx_r0.iconurl), i0.ɵɵsanitizeUrl)("ngStyle", ctx_r0.iconStyle);
+    i0.ɵɵattribute("alt", ctx_r0.alt || "");
+} }
+function WmAppIconComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵ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.ɵɵdefineComponent({ type: WmAppIconComponent, selectors: [["wm-app-icon"]], hostVars: 2, hostBindings: function WmAppIconComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵ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.ɵɵ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.ɵɵconditional(ctx._isSvg ? 0 : ctx._isImage ? 1 : ctx._fontClass ? 2 : -1);
+        } }, dependencies: [NgClass, NgStyle, SvgIconDirective, ImagePipe], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WmAppIconComponent, [{
+        type: Component,
+        args: [{
+                standalone: true,
+                selector: 'wm-app-icon',
+                imports: [NgClass, NgStyle, SvgIconDirective, ImagePipe],
+                encapsulation: 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: Input
+        }], iconurl: [{
+            type: Input
+        }], defaultIconClass: [{
+            type: Input
+        }], defaultClasses: [{
+            type: Input
+        }], iconStyle: [{
+            type: Input
+        }], alt: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WmAppIconComponent, { className: "WmAppIconComponent", filePath: "widgets/common/base/app-icon-component.ts", lineNumber: 58 }); })();
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ALLFIELDS, APPLY_STYLES_TYPE, AUTOCLOSE_TYPE, AUTO_LAYOUT_PROPS, AutoLayout, BaseComponent, BaseContainerComponent, BaseFieldValidations, ContainerDirective, Context, CustomPipe, CustomWidgetContainerDirective, DEBOUNCE_TIMES, DISPLAY_TYPE, DataSetItem, DatasetAwareNavComponent, DialogRef, DialogServiceImpl, EDIT_MODE, EVENTS_MAP, FileExtensionFromMimePipe, FileIconClassPipe, FileSizePipe, FilterPipe, INPUTMODE, ImagePipe, ItemTemplateDirective, LIVE_CONSTANTS, LazyLoadDirective, Live_Operations, MessageComponent, NAVIGATION_TYPE, NumberToStringPipe, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, PROP_TYPE, PartialContainerDirective, PartialDirective, PartialParamDirective, PartialParamHandlerDirective, PrefixPipe, PullToRefresh, RedrawableDirective, RepeatTemplateDirective, SanitizePipe, ShowInDeviceDirective, StateClassPipe, StringToNumberPipe, StylableComponent, SuffixPipe, TemplateReplacePipe, TextContentDirective, TimeFromNowPipe, ToCurrencyPipe, ToDatePipe, ToNumberPipe, TrailingZeroDecimalPipe, TrustAsPipe, WidgetConfig, WidgetRef, applyFilterOnField, configureDnD, convertDataToObject, createArrayFrom, extractDataAsArray, extractDataSourceName, fetchDistinctValues, fetchRelatedFieldData, filterDate, getBackGroundImageUrl, getConditionalClasses, getContainerTargetClass, getCurrentWidgets, getDataTableFilterWidget, getDefaultValue, getDefaultViewModeWidget, getDistinctFieldProperties, getDistinctValues, getDistinctValuesForField, getEditModeWidget, getEmptyMatchMode, getEnableEmptyFilter, getEvaluatedData, getFieldLayoutConfig, getFieldTypeWidgetTypesMap, getImageUrl, getKeyboardFocusableElements, getMatchModeMsgs, getMatchModeTypesMap, getObjValueByKey, getOrderByExpr, getOrderedDataset, getRangeFieldValue, getRangeMatchMode, getRowOperationsColumn, getUniqObjsByDataField, getWatchIdentifier, getWidgetPropsByType, groupData, handleHeaderClick, hasLinkToCurrentPage, interpolateBindExpressions, isActiveNavItem, isBooleanAttr, isDataSetWidget, isDimensionProp, isStyle, parseValueByType, performDataOperation, prepareFieldDefs, propNameCSSKeyMap, provideAs, provideAsDialogRef, provideAsWidgetRef, refreshDataSource, register$1 as register, registerFormWidget, setFocusTrap, setHeaderConfig, setHeaderConfigForTable, setItemByCompare, styler, toggleAllHeaders, transformData, transformDataWithKeys, transformFormData, unsupportedStatePersistenceTypes, updateDeviceView, widgetIdGenerator };
+export { ALLFIELDS, APPLY_STYLES_TYPE, AUTOCLOSE_TYPE, AUTO_LAYOUT_PROPS, AutoLayout, BaseComponent, BaseContainerComponent, BaseFieldValidations, ContainerDirective, Context, CustomPipe, CustomWidgetContainerDirective, DEBOUNCE_TIMES, DISPLAY_TYPE, DataSetItem, DatasetAwareNavComponent, DialogRef, DialogServiceImpl, EDIT_MODE, EVENTS_MAP, FileExtensionFromMimePipe, FileIconClassPipe, FileSizePipe, FilterPipe, INPUTMODE, ImagePipe, ItemTemplateDirective, LIVE_CONSTANTS, LazyLoadDirective, Live_Operations, MessageComponent, NAVIGATION_TYPE, NumberToStringPipe, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, PROP_TYPE, PartialContainerDirective, PartialDirective, PartialParamDirective, PartialParamHandlerDirective, PrefixPipe, PullToRefresh, RedrawableDirective, RepeatTemplateDirective, SanitizePipe, ShowInDeviceDirective, StateClassPipe, StringToNumberPipe, StylableComponent, SuffixPipe, SvgIconDirective, TemplateReplacePipe, TextContentDirective, TimeFromNowPipe, ToCurrencyPipe, ToDatePipe, ToNumberPipe, TrailingZeroDecimalPipe, TrustAsPipe, WidgetConfig, WidgetRef, WmAppIconComponent, applyFilterOnField, configureDnD, convertDataToObject, createArrayFrom, extractDataAsArray, extractDataSourceName, fetchDistinctValues, fetchRelatedFieldData, filterDate, getBackGroundImageUrl, getConditionalClasses, getContainerTargetClass, getCurrentWidgets, getDataTableFilterWidget, getDefaultValue, getDefaultViewModeWidget, getDistinctFieldProperties, getDistinctValues, getDistinctValuesForField, getEditModeWidget, getEmptyMatchMode, getEnableEmptyFilter, getEvaluatedData, getFieldLayoutConfig, getFieldTypeWidgetTypesMap, getImageUrl, getKeyboardFocusableElements, getMatchModeMsgs, getMatchModeTypesMap, getObjValueByKey, getOrderByExpr, getOrderedDataset, getRangeFieldValue, getRangeMatchMode, getRowOperationsColumn, getUniqObjsByDataField, getWatchIdentifier, getWidgetPropsByType, groupData, handleHeaderClick, hasLinkToCurrentPage, interpolateBindExpressions, isActiveNavItem, isBooleanAttr, isDataSetWidget, isDimensionProp, isStyle, isSvgIconUrl, parseValueByType, performDataOperation, prepareFieldDefs, propNameCSSKeyMap, provideAs, provideAsDialogRef, provideAsWidgetRef, refreshDataSource, register$1 as register, registerFormWidget, setFocusTrap, setHeaderConfig, setHeaderConfigForTable, setItemByCompare, styler, toggleAllHeaders, transformData, transformDataWithKeys, transformFormData, unsupportedStatePersistenceTypes, updateDeviceView, widgetIdGenerator };
 //# sourceMappingURL=index.mjs.map