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

package/components/base/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { PipeTransform, InjectionToken, OnDestroy, OnInit, AfterViewInit, AfterContentInit, Injector, ViewContainerRef, ElementRef, EnvironmentInjector, SecurityContext, TemplateRef } from '@angular/core';
+import { PipeTransform, InjectionToken, OnDestroy, OnInit, AfterViewInit, AfterContentInit, Injector, ViewContainerRef, ElementRef, EnvironmentInjector, SecurityContext, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
 import { DecimalPipe, DatePipe } from '@angular/common';
 import { CustomPipeManager, App, AbstractI18nService, PartialRefProvider, CustomWidgetRefProvider, Viewport, IDGenerator } from '@wm/core';
 import * as _wavemaker_focus_trap from '@wavemaker/focus-trap';
@@ -1425,6 +1425,110 @@ declare class ShowInDeviceDirective implements OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<ShowInDeviceDirective, "[wmShowInDevice]", never, { "wmShowInDevice": { "alias": "wmShowInDevice"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+declare function isSvgIconUrl(url: string | null | undefined): boolean;
+/**
+ * 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.).
+ */
+declare class SvgIconDirective implements OnChanges, OnDestroy {
+    iconUrl: string;
+    /**
+     * 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.
+     */
+    hostInnerHtml: SafeHtml | null;
+    private readonly http;
+    private readonly sanitizer;
+    private readonly imagePipe;
+    private sub?;
+    private lastResolvedUrl;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private loadSvg;
+    private applySvg;
+    private cancelInflight;
+    /**
+     * 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`
+     */
+    private normalizeSvg;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SvgIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SvgIconDirective, "[iconUrl]", ["svgIcon"], { "iconUrl": { "alias": "iconUrl"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class WmAppIconComponent {
+    /** Font-icon CSS class (e.g. `wi wi-user`). Lowest priority. */
+    iconclass: string | null | undefined;
+    /** Icon URL. `.svg` -> inline SVG, anything else -> `<img>`. Wins over `iconclass`. */
+    iconurl: string | null | undefined;
+    /** Fallback font-icon class used when both `iconclass` and `iconurl` are empty. */
+    defaultIconClass: string | null | undefined;
+    /** Extra classes appended to the rendered icon element on every branch (e.g. `'panel-icon'`). */
+    defaultClasses: string | string[] | null | undefined;
+    /** Forwarded to `ngStyle` on the rendered icon element. */
+    iconStyle: {
+        [k: string]: any;
+    } | null | undefined;
+    /** `alt` text for the `<img>` branch. */
+    alt: string | null | undefined;
+    get _isSvg(): boolean;
+    get _isImage(): boolean;
+    get _fontClass(): string;
+    private _extras;
+    get _svgClasses(): string[];
+    get _imageClasses(): string[];
+    get _fontClasses(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<WmAppIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WmAppIconComponent, "wm-app-icon", never, { "iconclass": { "alias": "iconclass"; "required": false; }; "iconurl": { "alias": "iconurl"; "required": false; }; "defaultIconClass": { "alias": "defaultIconClass"; "required": false; }; "defaultClasses": { "alias": "defaultClasses"; "required": false; }; "iconStyle": { "alias": "iconStyle"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare function AutoLayout(options?: {
     targetSelector?: string;
     bindParent?: string;
@@ -1432,5 +1536,5 @@ declare function AutoLayout(options?: {
 
 declare const AUTO_LAYOUT_PROPS: Map<string, any>;
 
-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, 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, registerFormWidget, setFocusTrap, setHeaderConfig, setHeaderConfigForTable, setItemByCompare, styler, toggleAllHeaders, transformData, transformDataWithKeys, transformFormData, unsupportedStatePersistenceTypes, updateDeviceView, widgetIdGenerator };
 export type { ChangeListener, IDialog, IRedrawableComponent, IWidgetConfig, NavNode };

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

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@wm/core'), require('@wm/components/base')) :
     typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/core', '@wm/core', '@wm/components/base'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.basic = global.wm.components.basic || {}, global.wm.components.basic.anchor = {}), global.ng.common, global.ng.core, global.wm.core, global.wm.components.base));
-})(this, (function (exports, i2, i0, i1, base) { 'use strict';
+})(this, (function (exports, common, i0, i1, base) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -21,7 +21,6 @@
         return Object.freeze(n);
     }
 
-    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
     var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
     var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
 
@@ -175,13 +174,13 @@
         static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: AnchorComponent, deps: [{ token: i0__namespace.Injector }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
         static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AnchorComponent, isStandalone: true, selector: "a[wmAnchor]", host: { properties: { "target": "this.target", "attr.accesskey": "this.shortcutkey", "attr.icon-position": "this.iconposition" } }, providers: [
                 base.provideAsWidgetRef(AnchorComponent)
-            ], exportAs: ["wmAnchor"], usesInheritance: true, ngImport: i0__namespace, template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "pipe", type: base.ImagePipe, name: "image" }] }); }
+            ], exportAs: ["wmAnchor"], usesInheritance: true, ngImport: i0__namespace, template: "\n<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"iconurl ? 'anchor-image-icon' : ''\" [iconStyle]=\"{width: iconwidth, height: iconheight, margin: iconmargin, fontSize: iconwidth}\" alt=\"Anchor icon\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n", dependencies: [{ kind: "ngmodule", type: common.CommonModule }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: base.WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
     }
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: AnchorComponent, decorators: [{
                 type: i0.Component,
-                args: [{ standalone: true, imports: [i2.CommonModule, base.ImagePipe, base.TextContentDirective], selector: 'a[wmAnchor]', providers: [
+                args: [{ standalone: true, imports: [common.CommonModule, base.TextContentDirective, base.WmAppIconComponent], selector: 'a[wmAnchor]', providers: [
                             base.provideAsWidgetRef(AnchorComponent)
-                        ], exportAs: 'wmAnchor', template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
+                        ], exportAs: 'wmAnchor', template: "\n<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"iconurl ? 'anchor-image-icon' : ''\" [iconStyle]=\"{width: iconwidth, height: iconheight, margin: iconmargin, fontSize: iconwidth}\" alt=\"Anchor icon\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
             }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                         type: i0.Inject,
                         args: ['EXPLICIT_CONTEXT']

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

@@ -1,10 +1,9 @@
-import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { HostBinding, Inject, Optional, Component } from '@angular/core';
 import * as i1 from '@wm/core';
 import { EventNotifier, App, setAttr, encodeUrl, addClass, getRouteNameFromLink, removeClass, removeAttr } from '@wm/core';
-import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, DISPLAY_TYPE, StylableComponent, styler, TextContentDirective, ImagePipe, provideAsWidgetRef } from '@wm/components/base';
+import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, DISPLAY_TYPE, StylableComponent, styler, TextContentDirective, WmAppIconComponent, provideAsWidgetRef } from '@wm/components/base';
 
 const registerProps = () => {
     register('wm-anchor', new Map([
@@ -156,13 +155,13 @@ class AnchorComponent extends StylableComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AnchorComponent, deps: [{ token: i0.Injector }, { token: i1.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AnchorComponent, isStandalone: true, selector: "a[wmAnchor]", host: { properties: { "target": "this.target", "attr.accesskey": "this.shortcutkey", "attr.icon-position": "this.iconposition" } }, providers: [
             provideAsWidgetRef(AnchorComponent)
-        ], exportAs: ["wmAnchor"], usesInheritance: true, ngImport: i0, template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "pipe", type: ImagePipe, name: "image" }] }); }
+        ], exportAs: ["wmAnchor"], usesInheritance: true, ngImport: i0, template: "\n<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"iconurl ? 'anchor-image-icon' : ''\" [iconStyle]=\"{width: iconwidth, height: iconheight, margin: iconmargin, fontSize: iconwidth}\" alt=\"Anchor icon\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AnchorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, ImagePipe, TextContentDirective], selector: 'a[wmAnchor]', providers: [
+            args: [{ standalone: true, imports: [CommonModule, TextContentDirective, WmAppIconComponent], selector: 'a[wmAnchor]', providers: [
                         provideAsWidgetRef(AnchorComponent)
-                    ], exportAs: 'wmAnchor', template: "@if (iconurl) {\n  <img data-identifier=\"img\" alt=\"Image\" class=\"anchor-image-icon\" [src]=\"iconurl | image\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"/>\n}\n@if (iconclass) {\n  <i class=\"app-icon {{iconclass}}\" aria-hidden=\"true\" [ngStyle]=\"{width:iconwidth, height:iconheight, margin:iconmargin}\"></i>\n}\n@if (iconclass) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
+                    ], exportAs: 'wmAnchor', template: "\n<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\" [defaultClasses]=\"iconurl ? 'anchor-image-icon' : ''\" [iconStyle]=\"{width: iconwidth, height: iconheight, margin: iconmargin, fontSize: iconwidth}\" alt=\"Anchor icon\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{caption}} {{appLocale.LABEL_ICON}}</span>\n}\n<span class=\"anchor-caption\" [innerHTML]=\"caption\"></span>\n<ng-content select=\".caret\"></ng-content>\n@if (badgevalue) {\n  <span class=\"badge pull-right\" [textContent]=\"badgevalue\"></span>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.App }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['EXPLICIT_CONTEXT']

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

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

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

@@ -15,6 +15,7 @@ declare class AnchorComponent extends StylableComponent implements AfterViewInit
     hyperlink: any;
     iconheight: string;
     iconwidth: string;
+    iconmargin: string;
     iconurl: string;
     iconclass: string;
     caption: any;

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

@@ -55,13 +55,13 @@
         static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: IconComponent, deps: [{ token: i0__namespace.Injector }, { 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: IconComponent, isStandalone: true, selector: "[wmIcon]", host: { properties: { "attr.icon-position": "this.iconposition", "style.fontSize": "this.iconsize" } }, providers: [
                 base.provideAsWidgetRef(IconComponent)
-            ], usesInheritance: true, ngImport: i0__namespace, template: "<i class=\"app-icon {{iconclass}}\"></i>\n@if (iconclass) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n", dependencies: [{ kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }] }); }
+            ], usesInheritance: true, ngImport: i0__namespace, template: "<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n", dependencies: [{ kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: base.WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
     }
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: IconComponent, decorators: [{
                 type: i0.Component,
-                args: [{ standalone: true, imports: [base.TextContentDirective], selector: '[wmIcon]', providers: [
+                args: [{ standalone: true, imports: [base.TextContentDirective, base.WmAppIconComponent], selector: '[wmIcon]', providers: [
                             base.provideAsWidgetRef(IconComponent)
-                        ], template: "<i class=\"app-icon {{iconclass}}\"></i>\n@if (iconclass) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n" }]
+                        ], template: "<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n" }]
             }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
                         type: i0.Inject,
                         args: ['EXPLICIT_CONTEXT']

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { HostBinding, Inject, Optional, Component } from '@angular/core';
-import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, StylableComponent, styler, TextContentDirective, provideAsWidgetRef } from '@wm/components/base';
+import { register, PROP_STRING, PROP_ANY, PROP_BOOLEAN, StylableComponent, styler, TextContentDirective, WmAppIconComponent, provideAsWidgetRef } from '@wm/components/base';
 
 const registerProps = () => {
     register('wm-icon', new Map([
@@ -34,13 +34,13 @@ class IconComponent extends StylableComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IconComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: IconComponent, isStandalone: true, selector: "[wmIcon]", host: { properties: { "attr.icon-position": "this.iconposition", "style.fontSize": "this.iconsize" } }, providers: [
             provideAsWidgetRef(IconComponent)
-        ], usesInheritance: true, ngImport: i0, template: "<i class=\"app-icon {{iconclass}}\"></i>\n@if (iconclass) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n", dependencies: [{ kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n", dependencies: [{ kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "component", type: WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [TextContentDirective], selector: '[wmIcon]', providers: [
+            args: [{ standalone: true, imports: [TextContentDirective, WmAppIconComponent], selector: '[wmIcon]', providers: [
                         provideAsWidgetRef(IconComponent)
-                    ], template: "<i class=\"app-icon {{iconclass}}\"></i>\n@if (iconclass) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n" }]
+                    ], template: "<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['EXPLICIT_CONTEXT']

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/basic/icon/src/icon.props.ts","../../../../../projects/components/widgets/basic/icon/src/icon.component.ts","../../../../../projects/components/widgets/basic/icon/src/icon.component.html","../../../../../projects/components/widgets/basic/icon/src/index.ts"],"sourcesContent":["import {PROP_ANY, PROP_BOOLEAN, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-icon',\n        new Map(\n            [\n                ['animation', PROP_STRING],\n                ['caption', PROP_STRING],\n                ['class', PROP_STRING],\n                ['conditionalclass', PROP_ANY],\n                ['conditionalstyle', PROP_ANY],\n                ['hint', PROP_STRING],\n                ['arialabel', PROP_STRING],\n                ['iconclass', {value: 'wm-sl-l sl-user', ...PROP_STRING}],\n                ['iconposition', {value: 'left', ...PROP_STRING}],\n                ['iconsize', PROP_STRING],\n                ['iconurl', PROP_STRING],\n                ['name', PROP_STRING],\n                ['show', {value: true, ...PROP_BOOLEAN}]\n            ]\n        )\n    );\n};\n","import {Component, HostBinding, Inject, Injector, Optional} from '@angular/core';\n\nimport {IWidgetConfig, provideAsWidgetRef, StylableComponent, styler, TextContentDirective} from '@wm/components/base';\nimport {registerProps} from './icon.props';\n\nconst DEFAULT_CLS = 'app-icon-wrapper';\nconst WIDGET_CONFIG: IWidgetConfig = {\n    widgetType: 'wm-icon',\n    hostClass: DEFAULT_CLS\n};\n\n@Component({\n    standalone: true,\n    imports: [TextContentDirective],\n    selector: '[wmIcon]',\n    templateUrl: './icon.component.html',\n    providers: [\n        provideAsWidgetRef(IconComponent)\n    ]\n})\nexport class IconComponent extends StylableComponent {\n    static initializeProps = registerProps();\n\n    public iconclass: any;\n    public caption: string;\n    public hint: string;\n    public arialabel: string;\n    @HostBinding('attr.icon-position') iconposition: string;\n    @HostBinding('style.fontSize') iconsize: string;\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n\n        styler(this.nativeElement, this);\n    }\n}\n","<i class=\"app-icon {{iconclass}}\"></i>\n@if (iconclass) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\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,QAAQ,CACJ,SAAS,EACT,IAAI,GAAG,CACH;QACI,CAAC,WAAW,EAAE,WAAW,CAAC;QAC1B,CAAC,SAAS,EAAE,WAAW,CAAC;QACxB,CAAC,OAAO,EAAE,WAAW,CAAC;QACtB,CAAC,kBAAkB,EAAE,QAAQ,CAAC;QAC9B,CAAC,kBAAkB,EAAE,QAAQ,CAAC;QAC9B,CAAC,MAAM,EAAE,WAAW,CAAC;QACrB,CAAC,WAAW,EAAE,WAAW,CAAC;QAC1B,CAAC,WAAW,EAAE,EAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,WAAW,EAAC,CAAC;QACzD,CAAC,cAAc,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,WAAW,EAAC,CAAC;QACjD,CAAC,UAAU,EAAE,WAAW,CAAC;QACzB,CAAC,SAAS,EAAE,WAAW,CAAC;QACxB,CAAC,MAAM,EAAE,WAAW,CAAC;QACrB,CAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,EAAE,GAAG,YAAY,EAAC;AAC1C,KAAA,CACJ,CACJ;AACL,CAAC;;AClBD,MAAM,WAAW,GAAG,kBAAkB;AACtC,MAAM,aAAa,GAAkB;AACjC,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,SAAS,EAAE;CACd;AAWK,MAAO,aAAc,SAAQ,iBAAiB,CAAA;AACzC,IAAA,SAAA,IAAA,CAAA,eAAe,GAAG,aAAa,EAAhB,CAAmB;IASzC,WAAA,CAAY,GAAa,EAA0C,eAAoB,EAAA;AACnF,QAAA,KAAK,CAAC,GAAG,EAAE,aAAa,EAAE,eAAe,CAAC;AAE1C,QAAA,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC;IACpC;AAdS,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,aAAa,0CAUa,kBAAkB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAV5C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,SAAA,EAJX;YACP,kBAAkB,CAAC,aAAa;SACnC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBL,iQAOA,4CDMc,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAOrB,aAAa,EAAA,UAAA,EAAA,CAAA;kBATzB,SAAS;AACM,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,WACP,CAAC,oBAAoB,CAAC,EAAA,QAAA,EACrB,UAAU,EAAA,SAAA,EAET;AACP,wBAAA,kBAAkB,CAAA,aAAA;AACrB,qBAAA,EAAA,QAAA,EAAA,iQAAA,EAAA;;0BAY2B,MAAM;2BAAC,kBAAkB;;0BAAG;;sBAHvD,WAAW;uBAAC,oBAAoB;;sBAChC,WAAW;uBAAC,gBAAgB;;;AE5BjC;;AAEG;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/basic/icon/src/icon.props.ts","../../../../../projects/components/widgets/basic/icon/src/icon.component.ts","../../../../../projects/components/widgets/basic/icon/src/icon.component.html","../../../../../projects/components/widgets/basic/icon/src/index.ts"],"sourcesContent":["import {PROP_ANY, PROP_BOOLEAN, PROP_STRING, register} from '@wm/components/base';\n\nexport const registerProps = () => {\n    register(\n        'wm-icon',\n        new Map(\n            [\n                ['animation', PROP_STRING],\n                ['caption', PROP_STRING],\n                ['class', PROP_STRING],\n                ['conditionalclass', PROP_ANY],\n                ['conditionalstyle', PROP_ANY],\n                ['hint', PROP_STRING],\n                ['arialabel', PROP_STRING],\n                ['iconclass', {value: 'wm-sl-l sl-user', ...PROP_STRING}],\n                ['iconposition', {value: 'left', ...PROP_STRING}],\n                ['iconsize', PROP_STRING],\n                ['iconurl', PROP_STRING],\n                ['name', PROP_STRING],\n                ['show', {value: true, ...PROP_BOOLEAN}]\n            ]\n        )\n    );\n};\n","import {Component, HostBinding, Inject, Injector, Optional} from '@angular/core';\n\nimport {IWidgetConfig, provideAsWidgetRef, StylableComponent, styler, TextContentDirective, WmAppIconComponent} from '@wm/components/base';\nimport {registerProps} from './icon.props';\n\nconst DEFAULT_CLS = 'app-icon-wrapper';\nconst WIDGET_CONFIG: IWidgetConfig = {\n    widgetType: 'wm-icon',\n    hostClass: DEFAULT_CLS\n};\n\n@Component({\n    standalone: true,\n    imports: [TextContentDirective, WmAppIconComponent],\n    selector: '[wmIcon]',\n    templateUrl: './icon.component.html',\n    providers: [\n        provideAsWidgetRef(IconComponent)\n    ]\n})\nexport class IconComponent extends StylableComponent {\n    static initializeProps = registerProps();\n\n    public iconclass: any;\n    public caption: string;\n    public hint: string;\n    public arialabel: string;\n    public iconurl: string;\n\n    @HostBinding('attr.icon-position') iconposition: string;\n    @HostBinding('style.fontSize') iconsize: string;\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n\n        styler(this.nativeElement, this);\n    }\n}\n","<wm-app-icon [iconclass]=\"iconclass\" [iconurl]=\"iconurl\"></wm-app-icon>\n@if (iconclass || iconurl) {\n  <span class=\"sr-only\">{{ arialabel || caption || appLocale.LABEL_ICON }}</span>\n}\n@if (caption) {\n  <label [textContent]=\"caption\" aria-hidden=\"true\" class=\"app-label\"></label>\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/icon/index.d.ts

@@ -8,6 +8,7 @@ declare class IconComponent extends StylableComponent {
     caption: string;
     hint: string;
     arialabel: string;
+    iconurl: string;
     iconposition: string;
     iconsize: string;
     constructor(inj: Injector, explicitContext: any);

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

@@ -114,6 +114,9 @@
         ['clearsearchiconclass', { value: 'wi wi-close', ...base.PROP_STRING }],
         ['backsearchiconclass', { value: 'wi wi-arrow-left', ...base.PROP_STRING }],
         ['searchiconclass', { value: 'wm-sl-l sl-search', ...base.PROP_STRING }],
+        ['clearsearchiconurl', base.PROP_STRING],
+        ['backsearchiconurl', base.PROP_STRING],
+        ['searchiconurl', base.PROP_STRING],
     ]);
     const registerProps = () => {
         base.register('wm-search', searchProps);
@@ -1054,15 +1057,15 @@
                 base.provideAs(SearchComponent, i3.NG_VALUE_ACCESSOR, true),
                 base.provideAs(SearchComponent, i3.NG_VALIDATORS, true),
                 base.provideAsWidgetRef(SearchComponent)
-            ], viewQueries: [{ propertyName: "typeahead", first: true, predicate: i4.TypeaheadDirective, descendants: true }, { propertyName: "ulElement", first: true, predicate: ["ulElement"], descendants: true }, { propertyName: "liElements", predicate: ["liElements"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollableHandler>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider?.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"><i class=\"app-icon {{backsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"><i class=\"app-icon {{clearsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <i class=\"app-icon {{searchiconclass}}\"></i></button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i3.FormsModule }, { kind: "directive", type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ScrollableDirective, selector: "[scrollableHandler]" }, { kind: "ngmodule", type: i4.TypeaheadModule }, { kind: "directive", type: i4__namespace.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "directive", type: base.ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: base.PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: base.PartialContainerDirective, selector: "[partialContainer]" }] }); }
+            ], viewQueries: [{ propertyName: "typeahead", first: true, predicate: i4.TypeaheadDirective, descendants: true }, { propertyName: "ulElement", first: true, predicate: ["ulElement"], descendants: true }, { propertyName: "liElements", predicate: ["liElements"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollableHandler>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider?.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\">\n    <wm-app-icon [iconclass]=\"backsearchiconclass\" [iconurl]=\"backsearchiconurl\" alt=\"Back\"></wm-app-icon>\n  </button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\">\n    <wm-app-icon [iconclass]=\"clearsearchiconclass\" [iconurl]=\"clearsearchiconurl\" alt=\"Clear\"></wm-app-icon>\n  </button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <wm-app-icon [iconclass]=\"searchiconclass\" [iconurl]=\"searchiconurl\" alt=\"Search\"></wm-app-icon>\n        </button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n", dependencies: [{ kind: "ngmodule", type: i2.CommonModule }, { kind: "directive", type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i3.FormsModule }, { kind: "directive", type: i3__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ScrollableDirective, selector: "[scrollableHandler]" }, { kind: "ngmodule", type: i4.TypeaheadModule }, { kind: "directive", type: i4__namespace.TypeaheadDirective, selector: "[typeahead]", inputs: ["typeahead", "typeaheadMinLength", "adaptivePosition", "isAnimated", "typeaheadWaitMs", "typeaheadOptionsLimit", "typeaheadOptionField", "typeaheadGroupField", "typeaheadOrderBy", "typeaheadAsync", "typeaheadLatinize", "typeaheadSingleWords", "typeaheadWordDelimiters", "typeaheadMultipleSearch", "typeaheadMultipleSearchDelimiters", "typeaheadPhraseDelimiters", "typeaheadItemTemplate", "optionsListTemplate", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadHideResultsOnBlur", "typeaheadSelectFirstItem", "typeaheadIsFirstItemActive", "container", "dropup"], outputs: ["typeaheadLoading", "typeaheadNoResults", "typeaheadOnSelect", "typeaheadOnPreview", "typeaheadOnBlur"], exportAs: ["bs-typeahead"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "directive", type: base.ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: base.PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: base.PartialContainerDirective, selector: "[partialContainer]" }, { kind: "component", type: base.WmAppIconComponent, selector: "wm-app-icon", inputs: ["iconclass", "iconurl", "defaultIconClass", "defaultClasses", "iconStyle", "alt"] }] }); }
     }
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SearchComponent, decorators: [{
                 type: i0.Component,
-                args: [{ standalone: true, imports: [i2.CommonModule, i3.FormsModule, ScrollableDirective, i4.TypeaheadModule, base.TextContentDirective, base.ItemTemplateDirective, base.PartialParamHandlerDirective, base.PartialContainerDirective], selector: '[wmSearch]', providers: [
+                args: [{ standalone: true, imports: [i2.CommonModule, i3.FormsModule, ScrollableDirective, i4.TypeaheadModule, base.TextContentDirective, base.ItemTemplateDirective, base.PartialParamHandlerDirective, base.PartialContainerDirective, base.WmAppIconComponent], selector: '[wmSearch]', providers: [
                             base.provideAs(SearchComponent, i3.NG_VALUE_ACCESSOR, true),
                             base.provideAs(SearchComponent, i3.NG_VALIDATORS, true),
                             base.provideAsWidgetRef(SearchComponent)
-                        ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollableHandler>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider?.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\"><i class=\"app-icon {{backsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\"><i class=\"app-icon {{clearsearchiconclass}}\"></i></button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <i class=\"app-icon {{searchiconclass}}\"></i></button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n" }]
+                        ], template: "<ng-template #customItemTemplate let-model=\"item\" let-index=\"index\" let-query=\"query\" let-match=\"match\">\n  <!-- Default item template -->\n  @if (!content) {\n    <a>\n      @if (model.imgSrc) {\n        <img [src]=\"model.imgSrc\" alt=\"Search\" [style.width]=\"imagewidth\">\n      }\n      <span [title]=\"model.label\" [innerHtml]=\"highlight(match, query) || model.label\"></span>\n    </a>\n  }\n  <!-- Custom partial template -->\n  @if (content) {\n    <a [ngClass]=\"{customTemplate: content}\" partialContainer [wmItemTemplate]=\"content\" [userComponentParams]=\"match.item\">\n      <div partial-container-target></div>\n    </a>\n  }\n</ng-template>\n\n<ng-template #customListTemplate let-matches=\"matches\" let-itemTemplate=\"itemTemplate\" let-query=\"query\">\n  <ul #ulElement class=\"app-search dropdown-menu\" scrollableHandler>\n    @for (match of matches; track match; let i = $index) {\n      <li #liElements [ngClass]=\"{active: typeaheadContainer && typeaheadContainer.isActive(match), 'list-group-header': match && match.isHeader()}\"\n        (mouseenter)=\"typeaheadContainer.selectActive(match);\"\n        (click)=\"match && !match.isHeader() && typeaheadContainer.selectMatch(match, $event); $typeaheadEvent = $event; notifySubscriber();\">\n        <!-- itemTemplate comes from the <input> -->\n        @if (match.isHeader()) {\n          <h4 class=\"group-title\">{{match.value}}</h4>\n        }\n        @if (!match.isHeader()) {\n          <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n            [ngTemplateOutletContext]=\"{item: match.item, index: i, match: match, query: query}\">\n          </ng-container>\n        }\n      </li>\n    }\n    <div class=\"status\" [hidden]=\"_loadingItems || !(datacompletemsg && dataProvider?.isLastPage)\">\n      <span [textContent]=\"datacompletemsg\"></span>\n    </div>\n    <div class=\"status\" [hidden]=\"!_loadingItems\">\n      <i class=\"fa fa-circle-o-notch fa-spin\"></i>\n      <span [textContent]=\"loadingdatamsg\"></span>\n    </div>\n  </ul>\n</ng-template>\n\n<!--This template is for search inside mobile navbar.-->\n@if (navsearchbar) {\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    container=\"body\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event)\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event);\"\n    (focusout)=\"onFocusOut()\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [dropup]=\"dropup\"\n    [tabindex]=\"tabindex\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\"/>\n  <i class=\"btn-close wi wi-cancel\" [hidden]=\"!showClosebtn\" (click)=\"clearSearch($event);\"></i>\n} @else {\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback back-btn\" aria-hidden=\"true\" (click)=\"closeSearch()\">\n    <wm-app-icon [iconclass]=\"backsearchiconclass\" [iconurl]=\"backsearchiconurl\" alt=\"Back\"></wm-app-icon>\n  </button>\n  <span class=\"sr-only\">Back button</span>\n  <input [title]=\"query || ''\" type=\"text\" class=\"app-textbox form-control list-of-objs app-search-input\" [placeholder]=\"placeholder || ''\"\n    focus-target\n    [container]=\"containerTarget || '.wm-app'\"\n    [disabled]=\"disabled\"\n    [attr.accesskey]=\"shortcutkey\"\n    autocomplete=\"off\"\n    [(ngModel)]=\"query\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [readonly]=\"readonly\"\n    [typeahead]=\"typeaheadDataSource\"\n    [typeaheadWaitMs]=\"debouncetime\"\n    [typeaheadItemTemplate]=\"customItemTemplate\"\n    [optionsListTemplate]=\"customListTemplate\"\n    (input)=\"onInputChange($event)\"\n    (keydown)=\"listenQuery = true\"\n    (keydown.enter)=\"$typeaheadEvent = $event;handleEnterEvent($event)\"\n    (keydown.arrowdown)=\"selectNext($event)\"\n    (blur)=\"invokeOnTouched($event); onFocusOut()\"\n    (click)=\"handleFocus($event);\"\n    (focus)=\"_unsubscribeDv = false; listenQuery = true; handleFocus($event); invokeOnFocus($event)\"\n    [typeaheadMinLength]=\"minchars\"\n    [typeaheadOptionsLimit]=\"limit\"\n    (typeaheadLoading)=\"_loadingItems\"\n    (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n    typeaheadOptionField=\"label\"\n    [typeaheadGroupField]=\"groupby ? 'groupby' : null\"\n    [typeaheadAsync]=\"true\"\n    [typeaheadScrollable]=\"true\"\n    [adaptivePosition]=\"true\"\n    [typeaheadOptionsInScrollableView]=\"optionslimitinscrollableview\"\n    [tabindex]=\"tabindex\"\n    [dropup]=\"dropup\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"arialabel || 'Search field'\">\n  <input class=\"model-holder\" ng-model=\"proxyModel\" ng-required=\"required\" tabindex=\"-1\" aria-hidden=\"true\">\n  @if (_loadingItems) {\n    <span aria-hidden=\"true\" class=\"fa fa-circle-o-notch fa-spin form-control-feedback\"></span>\n  }\n  <button type=\"button\" class=\"btn btn-icon form-control-feedback clear-btn\" [ngClass]=\"{'show-btn': isQueryEntered()}\" (click)=\"clearSearch($event, true)\">\n    <wm-app-icon [iconclass]=\"clearsearchiconclass\" [iconurl]=\"clearsearchiconurl\" alt=\"Clear\"></wm-app-icon>\n  </button>\n  <span class=\"sr-only\">Clear button</span>\n  @if (showsearchicon) {\n    <span [ngClass]=\"{'disabled': disabled}\" class=\"input-group-addon\">\n      <form>\n        <button title=\"Search\" [disabled]=\"disabled\" class=\"app-search-button btn btn-icon\" type=\"submit\"\n          (click)=\"onSearchSelect($event)\">\n          <wm-app-icon [iconclass]=\"searchiconclass\" [iconurl]=\"searchiconurl\" alt=\"Search\"></wm-app-icon>\n        </button>\n        </form>\n      </span>\n    }\n  }\n  <!--This template is for both web and fullscreen mode in mobile.-->\n" }]
             }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i1__namespace.App }, { type: undefined, decorators: [{
                         type: i0.Attribute,
                         args: ['datavalue.bind']