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

package/components/input/radioset/fesm2022/index.mjs

@@ -0,0 +1,151 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Inject, Optional, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { FormWidgetType, setListClass } from '@wm/core';
+import { PROP_STRING, PROP_BOOLEAN, PROP_ANY, PROP_NUMBER, register, registerFormWidget, styler, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective, provideAs, provideAsWidgetRef } from '@wm/components/base';
+import { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';
+import { includes } from 'lodash-es';
+
+const radiosetProps = new Map([
+    ['class', PROP_STRING],
+    ['collapsible', PROP_BOOLEAN],
+    ['compareby', PROP_STRING],
+    ['datafield', PROP_STRING],
+    ['dataset', { value: 'Option 1, Option 2, Option 3', ...PROP_ANY }],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_ANY],
+    ['dateformat', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['displayexpression', PROP_STRING],
+    ['displayfield', PROP_STRING],
+    ['displayValue', PROP_STRING],
+    ['groupby', PROP_STRING],
+    ['itemclass', { value: '', ...PROP_STRING }],
+    ['itemsperrow', { value: 'xs-1 sm-1 md-1 lg-1', ...PROP_STRING }],
+    ['listclass', { value: '', ...PROP_STRING }],
+    ['match', PROP_STRING],
+    ['name', PROP_STRING],
+    ['orderby', PROP_STRING],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['showcount', PROP_BOOLEAN],
+    ['showindevice', { displayType: 'inline-block', value: 'all', ...PROP_STRING }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['usekeys', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['layout', PROP_STRING]
+]);
+const registerProps = () => {
+    register('wm-radioset', radiosetProps);
+    registerFormWidget(FormWidgetType.RADIOSET, new Map(radiosetProps));
+};
+
+const DEFAULT_CLS = 'app-radioset list-group inline';
+const WIDGET_CONFIG = { widgetType: 'wm-radioset', hostClass: DEFAULT_CLS };
+class RadiosetComponent extends DatasetAwareFormComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.layout = '';
+        this.eventListeners = new Map();
+        styler(this.nativeElement, this);
+        this.multiple = false;
+    }
+    triggerInvokeOnChange(key, $event) {
+        this.modelByKey = key;
+        if (this.viewParent.containerWidget && this.viewParent.containerWidget.updateDataValue)
+            this.viewParent.containerWidget.updateDataValue(this.datavalue);
+        this.invokeOnTouched();
+        // invoke on datavalue change.
+        this.invokeOnChange(this.datavalue, $event || {}, true);
+    }
+    /**
+     * On click of the option, update the datavalue
+     */
+    onRadioLabelClick($event, key) {
+        if (!$($event.target).is('input')) {
+            return;
+        }
+        this.triggerInvokeOnChange(key, $event);
+    }
+    // change and blur events are added from the template
+    handleEvent(node, eventName, callback, locals) {
+        if (eventName === 'click') {
+            const handler = (e) => {
+                if (!$(e.target).is('input')) {
+                    return;
+                }
+                locals.$event = e;
+                return callback();
+            };
+            const deregister = this.eventManager.addEventListener(node, eventName, handler);
+            this.eventListeners.set(node, deregister);
+        }
+        else if (!includes(['change'], eventName)) {
+            super.handleEvent(node, eventName, callback, locals);
+        }
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'tabindex') {
+            return;
+        }
+        else if (key === 'layout') {
+            this.handleLayout(nv);
+        }
+        if (key === 'itemsperrow') {
+            setListClass(this);
+        }
+        else {
+            super.onPropertyChange(key, nv, ov);
+        }
+    }
+    handleLayout(layout) {
+        const direction = layout === 'vertical' ? 'column' : 'row';
+        this.$element.css({
+            display: 'flex',
+            flexDirection: direction
+        });
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Remove all event listeners
+        if (this.eventListeners && this.eventListeners.size > 0) {
+            this.eventListeners.forEach((deregister) => {
+                if (deregister && typeof deregister === 'function') {
+                    deregister();
+                }
+            });
+            this.eventListeners.clear();
+            this.eventListeners = null;
+        }
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadiosetComponent, 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: RadiosetComponent, isStandalone: true, selector: "[wmRadioset]", providers: [
+            provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(RadiosetComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(RadiosetComponent)
+        ], exportAs: ["wmRadioset"], usesInheritance: true, ngImport: i0, template: "@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label class=\"app-radioset-label\"\n          [ngClass]=\"{'disabled':disabled || readonly}\">\n          <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n            [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n            type=\"radio\"/>\n          <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label class=\"app-radioset-label\"\n          [ngClass]=\"{'disabled':disabled || readonly}\">\n          <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n            [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n            type=\"radio\"/>\n          <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li class=\"app-list-item-group\" role=\"presentation\" >\n      <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n        <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n          <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n            <div class=\"header-action\">\n              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\n            [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n            [class.active]=\"item.selected\"\n            [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n            (click)=\"onRadioLabelClick($event, item)\">\n            <!-- Default item template -->\n            @if (!content) {\n              <label class=\"app-radioset-label\"\n                [ngClass]=\"{'disabled':disabled || readonly}\">\n                <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                  [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" [textContent]=\"item.label\"></span>\n              </label>\n            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label class=\"app-radioset-label\"\n                [ngClass]=\"{'disabled':disabled || readonly}\">\n                <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                  [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption customTemplate\" partial-container-target></span>\n              </label>\n            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "directive", type: ItemTemplateDirective, selector: "[wmItemTemplate]", inputs: ["userComponentParams", "wmItemTemplate"], exportAs: ["itemTemplateRef"] }, { kind: "directive", type: PartialParamHandlerDirective, selector: "[partialContainer]" }, { kind: "directive", type: PartialContainerDirective, selector: "[partialContainer]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RadiosetComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective], selector: '[wmRadioset]', exportAs: 'wmRadioset', providers: [
+                        provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(RadiosetComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(RadiosetComponent)
+                    ], template: "@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label class=\"app-radioset-label\"\n          [ngClass]=\"{'disabled':disabled || readonly}\">\n          <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n            [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n            type=\"radio\"/>\n          <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label class=\"app-radioset-label\"\n          [ngClass]=\"{'disabled':disabled || readonly}\">\n          <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n            [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n            type=\"radio\"/>\n          <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li class=\"app-list-item-group\" role=\"presentation\" >\n      <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n        <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n          <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n            <div class=\"header-action\">\n              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\n            [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n            [class.active]=\"item.selected\"\n            [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n            (click)=\"onRadioLabelClick($event, item)\">\n            <!-- Default item template -->\n            @if (!content) {\n              <label class=\"app-radioset-label\"\n                [ngClass]=\"{'disabled':disabled || readonly}\">\n                <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                  [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" [textContent]=\"item.label\"></span>\n              </label>\n            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label class=\"app-radioset-label\"\n                [ngClass]=\"{'disabled':disabled || readonly}\">\n                <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                  [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption customTemplate\" partial-container-target></span>\n              </label>\n            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadiosetComponent };
+//# sourceMappingURL=index.mjs.map

package/components/input/radioset/fesm2022/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/input/radioset/src/radioset.props.ts","../../../../../projects/components/widgets/input/radioset/src/radioset.component.ts","../../../../../projects/components/widgets/input/radioset/src/radioset.component.html","../../../../../projects/components/widgets/input/radioset/src/index.ts"],"sourcesContent":["import { PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register, registerFormWidget } from '@wm/components/base';\nimport { FormWidgetType } from '@wm/core';\n\nexport const radiosetProps = new Map(\n    [\n        ['class', PROP_STRING],\n        ['collapsible', PROP_BOOLEAN],\n        ['compareby', PROP_STRING],\n        ['datafield', PROP_STRING],\n        ['dataset', {value: 'Option 1, Option 2, Option 3', ...PROP_ANY}],\n        ['datavaluesource', PROP_ANY],\n        ['datavalue', PROP_ANY],\n        ['dateformat', PROP_STRING],\n        ['disabled', PROP_BOOLEAN],\n        ['displayexpression', PROP_STRING],\n        ['displayfield', PROP_STRING],\n        ['displayValue', PROP_STRING],\n        ['groupby', PROP_STRING],\n        ['itemclass', {value: '', ...PROP_STRING}],\n        ['itemsperrow', {value: 'xs-1 sm-1 md-1 lg-1', ...PROP_STRING}],\n        ['listclass', {value: '', ...PROP_STRING}],\n        ['match', PROP_STRING],\n        ['name', PROP_STRING],\n        ['orderby', PROP_STRING],\n        ['readonly', PROP_BOOLEAN],\n        ['required', PROP_BOOLEAN],\n        ['show', {value: true, ...PROP_BOOLEAN}],\n        ['showcount', PROP_BOOLEAN],\n        ['showindevice', {displayType: 'inline-block', value: 'all', ...PROP_STRING}],\n        ['tabindex', {value: 0, ...PROP_NUMBER}],\n        ['usekeys', PROP_BOOLEAN],\n        ['hint', PROP_STRING],\n        ['layout', PROP_STRING]\n    ]\n);\n\nexport const registerProps = () => {\n    register(\n        'wm-radioset',\n        radiosetProps\n    );\n    registerFormWidget(\n        FormWidgetType.RADIOSET,\n        new Map(radiosetProps)\n    );\n};\n","import { CommonModule } from '@angular/common';\nimport {Component, Inject, Injector, OnDestroy, Optional} from '@angular/core';\nimport { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';\n\nimport {setListClass} from '@wm/core';\n\nimport { provideAsWidgetRef, styler, provideAs, TextContentDirective, ItemTemplateDirective, PartialContainerDirective, PartialParamHandlerDirective } from '@wm/components/base';\nimport { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';\nimport { registerProps } from './radioset.props';\nimport { includes} from \"lodash-es\";\n\ndeclare const $;\n\nconst DEFAULT_CLS = 'app-radioset list-group inline';\nconst WIDGET_CONFIG = {widgetType: 'wm-radioset', hostClass: DEFAULT_CLS};\n\n@Component({\n  standalone: true,\n  imports: [CommonModule, TextContentDirective, ItemTemplateDirective, PartialParamHandlerDirective, PartialContainerDirective],\n    selector: '[wmRadioset]',\n    exportAs: 'wmRadioset',\n    templateUrl: './radioset.component.html',\n    providers: [\n        provideAs(RadiosetComponent, NG_VALUE_ACCESSOR, true),\n        provideAs(RadiosetComponent, NG_VALIDATORS, true),\n        provideAsWidgetRef(RadiosetComponent)\n    ]\n})\nexport class RadiosetComponent extends DatasetAwareFormComponent implements OnDestroy {\n    static initializeProps = registerProps();\n\n    public layout = '';\n    public disabled: boolean;\n    public itemsperrow: string;\n    private itemsPerRowClass: string;\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this);\n        this.multiple = false;\n    }\n\n    triggerInvokeOnChange(key, $event) {\n        this.modelByKey = key;\n\n        if(this.viewParent.containerWidget && this.viewParent.containerWidget.updateDataValue)\n            this.viewParent.containerWidget.updateDataValue(this.datavalue);\n\n        this.invokeOnTouched();\n        // invoke on datavalue change.\n        this.invokeOnChange(this.datavalue, $event || {}, true);\n    }\n\n    /**\n     * On click of the option, update the datavalue\n     */\n    onRadioLabelClick($event, key) {\n        if (!$($event.target).is('input')) {\n            return;\n        }\n\n        this.triggerInvokeOnChange(key, $event);\n    }\n\n    private eventListeners: Map<HTMLElement, Function> = new Map();\n\n    // change and blur events are added from the template\n    protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any) {\n        if (eventName === 'click') {\n            const handler = (e) => {\n                if (!$(e.target).is('input')) {\n                    return;\n                }\n                locals.$event = e;\n                return callback();\n            };\n            \n            const deregister = this.eventManager.addEventListener(node, eventName, handler);\n            this.eventListeners.set(node, deregister);\n        } else if (!includes(['change'], eventName)) {\n            super.handleEvent(node, eventName, callback, locals);\n        }\n    }\n\n    onPropertyChange(key, nv, ov?) {\n        if (key === 'tabindex') {\n            return;\n        }else if(key === 'layout'){\n            this.handleLayout(nv)\n        }\n        if (key === 'itemsperrow') {\n            setListClass(this);\n        } else {\n            super.onPropertyChange(key, nv, ov);\n        }\n    }\n\n    handleLayout(layout: string) {\n        const direction = layout === 'vertical' ? 'column' : 'row';\n        this.$element.css({\n            display: 'flex',\n            flexDirection: direction\n        });\n    }\n\n    ngOnDestroy() {\n        // MEMORY LEAK FIX: Remove all event listeners\n        if (this.eventListeners && this.eventListeners.size > 0) {\n            this.eventListeners.forEach((deregister) => {\n                if (deregister && typeof deregister === 'function') {\n                    deregister();\n                }\n            });\n            this.eventListeners.clear();\n            this.eventListeners = null;\n        }\n\n        super.ngOnDestroy();\n    }\n}\n","@if (!groupby) {\n  @for (item of datasetItems; track item; let i = $index) {\n    <li [ngClass]=\"['radio', 'app-radio', itemclass, itemsPerRowClass]\"\n      [class.active]=\"item.selected\"\n      [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n      (click)=\"onRadioLabelClick($event, item.key)\" role=\"presentation\">\n      <!-- Default item template -->\n      @if (!content) {\n        <label class=\"app-radioset-label\"\n          [ngClass]=\"{'disabled':disabled || readonly}\">\n          <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n            [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n            type=\"radio\"/>\n          <span class=\"caption\" [textContent]=\"item.label\"></span>\n        </label>\n      }\n      <!-- Custom partial template -->\n      @if (content) {\n        <label class=\"app-radioset-label\"\n          [ngClass]=\"{'disabled':disabled || readonly}\">\n          <input [attr.data-attr-index]=\"i\" [checked]=\"item.selected\" [disabled]=\"disabled || readonly\"\n            [name]=\"'radioset_' + widgetId\" [tabindex]=\"tabindex\" [value]=\"item.key\"\n            type=\"radio\"/>\n          <span class=\"caption customTemplate\" partial-container-target></span>\n        </label>\n      }\n    </li>\n  }\n} @else {\n  @for (groupObj of groupedData; track groupObj; let groupindex = $index) {\n    <li class=\"app-list-item-group\" role=\"presentation\" >\n      <ul class=\"item-group\" [attr.aria-labelledby]=\"'group_' + widgetId + '_' + groupindex\">\n        <li [id]=\"'group_' + widgetId + '_' + groupindex\" aria-hidden=\"true\" class=\"list-group-header\" (click)=\"handleHeaderClick($event)\" [title]=\"groupObj.key\" [ngClass]=\"{'collapsible-content': collapsible}\">\n          <h4 class=\"group-title\" [attr.aria-label]=\"'Group '+groupObj.key\">{{groupObj.key}}\n            <div class=\"header-action\">\n              @if (collapsible) {\n                <i class=\"app-icon wi action wi-chevron-up\" title=\"{{appLocale.LABEL_COLLAPSE}}/{{appLocale.LABEL_EXPAND}}\"></i>\n              }\n              @if (showcount) {\n                <span class=\"label label-default\" [textContent]=\"groupObj.data.length\"></span>\n              }\n            </div>\n          </h4>\n        </li>\n        @for (item of groupObj.data; track item; let i = $index) {\n          <li\n            [ngClass]=\"['radio', 'app-radio', 'group-list-item', itemclass, itemsPerRowClass]\"\n            [class.active]=\"item.selected\"\n            [wmItemTemplate]=\"content\" [userComponentParams]=\"item\" partialContainer\n            (click)=\"onRadioLabelClick($event, item)\">\n            <!-- Default item template -->\n            @if (!content) {\n              <label class=\"app-radioset-label\"\n                [ngClass]=\"{'disabled':disabled || readonly}\">\n                <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                  [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption\" [textContent]=\"item.label\"></span>\n              </label>\n            }\n            <!-- Custom partial template -->\n            @if (content) {\n              <label class=\"app-radioset-label\"\n                [ngClass]=\"{'disabled':disabled || readonly}\">\n                <input [attr.data-attr-index]=\"i\" [name]=\"'radioset_' + widgetId\" type=\"radio\"\n                  [value]=\"item.key\" [disabled]=\"disabled || readonly\" [tabindex]=\"tabindex\" [checked]=\"item.selected\"/>\n                <span class=\"caption customTemplate\" partial-container-target></span>\n              </label>\n            }\n          </li>\n        }\n      </ul>\n    </li>\n  }\n}\n\n<input [disabled]=\"disabled || readonly\" hidden class=\"model-holder\">\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n\n<!-- This template will be displayed when groupby is specified. -->\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/components/input/radioset/index.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, Injector } from '@angular/core';
+import { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';
+
+declare class RadiosetComponent extends DatasetAwareFormComponent implements OnDestroy {
+    static initializeProps: void;
+    layout: string;
+    disabled: boolean;
+    itemsperrow: string;
+    private itemsPerRowClass;
+    constructor(inj: Injector, explicitContext: any);
+    triggerInvokeOnChange(key: any, $event: any): void;
+    /**
+     * On click of the option, update the datavalue
+     */
+    onRadioLabelClick($event: any, key: any): void;
+    private eventListeners;
+    protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any): void;
+    onPropertyChange(key: any, nv: any, ov?: any): void;
+    handleLayout(layout: string): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadiosetComponent, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadiosetComponent, "[wmRadioset]", ["wmRadioset"], {}, {}, never, never, true, never>;
+}
+
+export { RadiosetComponent };

package/components/input/radioset/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/input/radioset",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "module": "fesm2022/index.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/index.mjs"
+    }
+  }
+}

package/components/input/rating/.npmignore

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

package/components/input/rating/bundles/index.umd.js

@@ -0,0 +1,270 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/forms'), require('@angular/core'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/dataset-aware-form'), require('lodash-es')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/common', '@angular/forms', '@angular/core', '@wm/core', '@wm/components/base', '@wm/components/input/dataset-aware-form', 'lodash-es'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.rating = {}), global.ng.common, global.ng.forms, global.ng.core, global.wm.core, global.wm.components.base, global.wm.components.input.datasetawareform, global._));
+})(this, (function (exports, i1, i2, i0, core, base, datasetAwareForm, lodashEs) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+
+    const ratingProps = new Map([
+        ['caption', base.PROP_STRING],
+        ['class', base.PROP_STRING],
+        ['datafield', base.PROP_STRING],
+        ['dataset', base.PROP_ANY],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['displayexpression', base.PROP_STRING],
+        ['displayfield', base.PROP_STRING],
+        ['iconcolor', base.PROP_STRING],
+        ['activeiconclass', { value: 'wi wi-star', ...base.PROP_STRING }],
+        ['inactiveiconclass', { value: 'wi wi-star-border', ...base.PROP_STRING }],
+        ['iconsize', base.PROP_STRING],
+        ['maxvalue', { value: 5, ...base.PROP_NUMBER }],
+        ['name', base.PROP_STRING],
+        ['orderby', base.PROP_STRING],
+        ['readonly', base.PROP_BOOLEAN],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showcaptions', { value: true, ...base.PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['usekeys', base.PROP_BOOLEAN]
+    ]);
+    const registerProps = () => {
+        base.register('wm-rating', ratingProps);
+        base.registerFormWidget(core.FormWidgetType.RATING, new Map(ratingProps));
+    };
+
+    const DEFAULT_CLS = 'app-ratings';
+    const WIDGET_CONFIG = { widgetType: 'wm-rating', hostClass: DEFAULT_CLS };
+    const MAX_RATING = 10;
+    const DEFAULT_RATING = 5;
+    class RatingComponent extends datasetAwareForm.DatasetAwareFormComponent {
+        static { this.initializeProps = registerProps(); }
+        get selectedRatingValue() {
+            return this._selectedRatingValue;
+        }
+        set selectedRatingValue(val) {
+            this._selectedRatingValue = val;
+            this.calculateRatingsWidth();
+        }
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.isDecimal = false;
+            this.activeiconclass = '';
+            this.inactiveiconclass = '';
+            this._id = core.generateGUId();
+            base.styler(this.nativeElement, this);
+            // prepare the rating options on dataset ready.
+            const datasetSubscription = this.dataset$.subscribe(() => {
+                this.prepareRatingDataset();
+            });
+            this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+            // listen to changes in datavalue.
+            const datavalueSubscription = this.datavalue$.subscribe(() => this.onDatavalueChange(this.datavalue));
+            this.registerDestroyListener(() => datavalueSubscription.unsubscribe());
+        }
+        // Change event is registered from the template, Prevent the framework from registering one more event
+        handleEvent(node, eventName, eventCallback, locals) {
+            if (eventName !== 'change' && eventName !== 'blur') {
+                super.handleEvent(this.ratingEl.nativeElement, eventName, eventCallback, locals);
+            }
+        }
+        // This function returns the rating widget dataset containing the index, value and label
+        prepareRatingDataset() {
+            if (!this.datasetItems.length) {
+                this.ratingItems = [];
+                this.caption = '';
+            }
+            let ratingItems = [];
+            let data = this.datasetItems;
+            const maxvalue = parseInt(this.maxvalue || this.datasetItems.length, 10);
+            const maxValue = (maxvalue > MAX_RATING ? MAX_RATING : maxvalue) || DEFAULT_RATING;
+            /**
+             * 1. If datasetItems.length is more than maxValue (i.e. 10 ratings) then just extract maxValue of items from datasetItems.
+             * 2. If datasetItems are not available then prepare ratings value depending on maxvalue. eg: 1,2,3 .. upto maxvalue
+             * 3. If maxvalue / i value is more than datasetItems length, prepare default rating items for i values more than datasetItems.length
+             */
+            if (data.length && data.length > maxValue) {
+                data = lodashEs.slice(data, 0, maxValue);
+            }
+            for (let i = maxValue; i > 0; i--) {
+                if (!data.length) {
+                    ratingItems.push({ key: i, value: i, index: i, label: i });
+                }
+                else {
+                    if (i > data.length) {
+                        ratingItems.push({ key: i, value: i, index: i, label: i });
+                    }
+                    else {
+                        data = base.getOrderedDataset(data, 'index:desc');
+                        ratingItems = ratingItems.concat(data);
+                        break;
+                    }
+                }
+            }
+            this.ratingItems = ratingItems;
+            if (!data.length) { // constructs default datasetItems when there is no dataset binding.
+                this.datasetItems = ratingItems;
+            }
+            this.onDatavalueChange(this.datavalue);
+        }
+        onRatingClick($event, rate) {
+            this.modelByKey = rate.key;
+            this.selectedRatingValue = rate.index;
+            // support if the caption is binded in the old projects for backward compatibility
+            if (!this.showcaptions) {
+                this.caption = rate.label;
+            }
+            this.invokeOnTouched();
+            // invoke on datavalue change.
+            this.invokeOnChange(this.datavalue, $event || {}, true);
+        }
+        // Update the selected flag on datasetItems and assign the ratingValue.
+        /**
+         * On datavalue change, update the caption, selectedRatingValue.
+         * 1. if datasetItems contain the selected item (check the selected flag on item), find the index of selected item.
+         * 2. if not, just check if the datavalue is provided as the index on the item.
+         *
+         * @param dataVal datavalue
+         */
+        onDatavalueChange(dataVal) {
+            if (!lodashEs.isEmpty(this.datasetItems)) {
+                let selectedItem = lodashEs.find(this.datasetItems, { 'selected': true });
+                if (!selectedItem && !lodashEs.isUndefined(dataVal)) {
+                    selectedItem = lodashEs.find(this.datasetItems, function (item) {
+                        return lodashEs.toString(item.index) === dataVal;
+                    });
+                    if (selectedItem) {
+                        selectedItem.selected = true;
+                    }
+                }
+                if (!selectedItem) {
+                    // reset the  model if there is no item found.
+                    this.modelByKey = undefined;
+                    this.caption = '';
+                }
+                this.selectedRatingValue = selectedItem ? selectedItem.index : 0;
+                if (selectedItem) {
+                    this.caption = selectedItem.label;
+                }
+            }
+            else {
+                this.selectedRatingValue = 0;
+            }
+            if (this.readonly) {
+                // when dataset is not given but datavalue is provided which is integer
+                if (!this.selectedRatingValue && !isNaN(dataVal)) {
+                    this.selectedRatingValue = (parseFloat(dataVal) <= this.maxvalue) ? dataVal : this.maxvalue;
+                }
+                this.ratingsWidth = this.calculateRatingsWidth(dataVal);
+            }
+            if (this.readonly && !isNaN(dataVal) && !Number.isInteger(parseFloat(dataVal))) {
+                this._modelByKey = dataVal;
+                this._modelByValue = dataVal;
+                this.isDecimal = true;
+                this.ratingsWidth = this.calculateRatingsWidth(this.getPrevDataValue());
+                this.caption = this.selectedRatingValue;
+            }
+        }
+        calculateRatingsWidth(dataVal) {
+            const selectedRating = parseFloat(this.selectedRatingValue), maxValue = parseInt(this.maxvalue || this.datasetItems.length, 10) || DEFAULT_RATING;
+            dataVal = dataVal || this.datavalue;
+            if ((dataVal === undefined || dataVal === '' || dataVal === null) || selectedRating <= 0) {
+                this.caption = '';
+                return '0%';
+            }
+            const safeRating = Math.min(selectedRating, maxValue);
+            return ((safeRating / maxValue) * 100) + '%';
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'readonly') {
+                this.isDecimal = false;
+                if (nv) {
+                    this.ratingsWidth = this.calculateRatingsWidth();
+                    this.onDatavalueChange(this.getPrevDataValue());
+                }
+            }
+            else if (key === 'maxvalue') {
+                /** Storing the datavalue in temp variable and assiging back to datavalue
+                 * after default datalist is prepared to trigger Dataset Aware class select cycle
+                 * as the datavalue property change is triggering first rather than maxvalue
+                 * in the rating widget is used inside a datatable
+                 */
+                this.starsArray = Array(this.maxvalue);
+                let tempDataValue = this.datavalue;
+                this.prepareRatingDataset();
+                // reset all the items.
+                this.resetDatasetItems();
+                if (!lodashEs.isUndefined(tempDataValue)) {
+                    this.datavalue = tempDataValue;
+                }
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        /* Detect touch enabled devices & update hover styles*/
+        onTouchStart($event) {
+            this.touchEnabled = true;
+            this.onTouchStart = core.noop;
+        }
+        onMouseleave() {
+            this.caption = this.displayValue;
+        }
+        onMouseOver($event, rate) {
+            this.caption = rate.label;
+            !this.touchEnabled && !$event.target.classList.contains('rating-label-hover') && $event.target.classList.add('rating-label-hover');
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Clear ViewChild reference
+            this.ratingEl = null;
+            // MEMORY LEAK FIX: Clear rating items array
+            if (this.ratingItems) {
+                this.ratingItems = [];
+            }
+            // Call parent ngOnDestroy (DatasetAwareFormComponent has cleanup)
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: RatingComponent, 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: RatingComponent, isStandalone: true, selector: "[wmRating]", providers: [
+                base.provideAs(RatingComponent, i2.NG_VALUE_ACCESSOR, true),
+                base.provideAsWidgetRef(RatingComponent)
+            ], viewQueries: [{ propertyName: "ratingEl", first: true, predicate: ["ratingInput"], descendants: true, read: i0.ElementRef }], usesInheritance: true, ngImport: i0__namespace, template: "<div (focus)=\"onFocus($event)\" [(ngModel)]=\"modelByKey\" [ngModelOptions]=\"{standalone: true}\"\n  class=\"ratings-wrapper\" ngDefaultControl>\n  <div [class.hidden]=\"readonly && isDecimal\" [class.disabled]=\"readonly\" class=\"rating-style\">\n    @for (rate of ratingItems; track rate) {\n      <label\n        [ngClass]=\"{active : rate.index <= selectedRatingValue}\"\n        [ngStyle]=\"{'font-size' :iconsize, color: rate.index <= selectedRatingValue && iconcolor}\"\n        [title]=\"rate.label || rate.index\"\n        (touchstart)=\"onTouchStart($event)\"\n        (mouseleave)=\"onMouseleave($event, rate)\"\n        (mouseover)=\"onMouseOver($event, rate)\"\n        [for]=\"_id + '-' + rate.index\">\n        <i class=\"app-icon {{rate.index <= selectedRatingValue ? activeiconclass : inactiveiconclass}}\" aria-hidden=\"true\"></i>\n        <input #ratingInput type=\"radio\" role=\"radio\" [attr.aria-label]=\"(rate.label || rate.index) + ' out of ' + ratingItems.length + ' ratings'\" [attr.aria-checked]=\"rate.label === datavalue ? 'true' : 'false'\"\n          [id]=\"_id + '-' + rate.index\" (click)=\"onRatingClick($event, rate)\" name=\"ratings-id\" [value]=\"rate.key || rate.index\"/>\n      </label>\n    }\n  </div>\n    <div class=\"ratings-container readonly\" [class.hidden]=\"!isDecimal\" [ngStyle]=\"{ 'font-size': iconsize }\">\n        <div class=\"ratings-base\">\n            <i class=\"app-icon {{inactiveiconclass}}\" *ngFor=\"let s of starsArray\"></i>\n        </div>\n        <div class=\"ratings active\" [ngStyle]=\"{ width: ratingsWidth, color: iconcolor }\">\n            <i class=\"app-icon {{activeiconclass}}\" *ngFor=\"let s of starsArray\"></i>\n        </div>\n    </div>\n    @if (showcaptions) {\n    <label class=\"caption\" [textContent]=\"caption\"></label>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__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: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: RatingComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i1.CommonModule, base.TextContentDirective, i2.FormsModule], selector: '[wmRating]', providers: [
+                            base.provideAs(RatingComponent, i2.NG_VALUE_ACCESSOR, true),
+                            base.provideAsWidgetRef(RatingComponent)
+                        ], template: "<div (focus)=\"onFocus($event)\" [(ngModel)]=\"modelByKey\" [ngModelOptions]=\"{standalone: true}\"\n  class=\"ratings-wrapper\" ngDefaultControl>\n  <div [class.hidden]=\"readonly && isDecimal\" [class.disabled]=\"readonly\" class=\"rating-style\">\n    @for (rate of ratingItems; track rate) {\n      <label\n        [ngClass]=\"{active : rate.index <= selectedRatingValue}\"\n        [ngStyle]=\"{'font-size' :iconsize, color: rate.index <= selectedRatingValue && iconcolor}\"\n        [title]=\"rate.label || rate.index\"\n        (touchstart)=\"onTouchStart($event)\"\n        (mouseleave)=\"onMouseleave($event, rate)\"\n        (mouseover)=\"onMouseOver($event, rate)\"\n        [for]=\"_id + '-' + rate.index\">\n        <i class=\"app-icon {{rate.index <= selectedRatingValue ? activeiconclass : inactiveiconclass}}\" aria-hidden=\"true\"></i>\n        <input #ratingInput type=\"radio\" role=\"radio\" [attr.aria-label]=\"(rate.label || rate.index) + ' out of ' + ratingItems.length + ' ratings'\" [attr.aria-checked]=\"rate.label === datavalue ? 'true' : 'false'\"\n          [id]=\"_id + '-' + rate.index\" (click)=\"onRatingClick($event, rate)\" name=\"ratings-id\" [value]=\"rate.key || rate.index\"/>\n      </label>\n    }\n  </div>\n    <div class=\"ratings-container readonly\" [class.hidden]=\"!isDecimal\" [ngStyle]=\"{ 'font-size': iconsize }\">\n        <div class=\"ratings-base\">\n            <i class=\"app-icon {{inactiveiconclass}}\" *ngFor=\"let s of starsArray\"></i>\n        </div>\n        <div class=\"ratings active\" [ngStyle]=\"{ width: ratingsWidth, color: iconcolor }\">\n            <i class=\"app-icon {{activeiconclass}}\" *ngFor=\"let s of starsArray\"></i>\n        </div>\n    </div>\n    @if (showcaptions) {\n    <label class=\"caption\" [textContent]=\"caption\"></label>\n  }\n</div>\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }], propDecorators: { ratingEl: [{
+                    type: i0.ViewChild,
+                    args: ['ratingInput', /* TODO: add static flag */ { read: i0.ElementRef }]
+                }] } });
+
+    exports.RatingComponent = RatingComponent;
+
+}));