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

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

@@ -0,0 +1,189 @@
+import { PROP_STRING, PROP_BOOLEAN, PROP_NUMBER, PROP_ANY, register, registerFormWidget, styler, convertDataToObject, TextContentDirective, provideAs, provideAsWidgetRef } from '@wm/components/base';
+import * as i2 from '@angular/forms';
+import { FormsModule, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { ViewChild, Inject, Optional, Component } from '@angular/core';
+import { BaseFormCustomComponent } from '@wm/components/input/base-form-custom';
+import * as i1 from '@wm/core';
+import { FormWidgetType, switchClass } from '@wm/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+const sliderProps = new Map([
+    ['class', PROP_STRING],
+    ['datavalue', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['maxvalue', PROP_NUMBER],
+    ['minvalue', PROP_NUMBER],
+    ['name', PROP_STRING],
+    ['readonly', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['step', PROP_NUMBER],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['showmarkers', { value: false, ...PROP_BOOLEAN }],
+    ['markerlabeltext', PROP_ANY],
+    ['showicons', PROP_BOOLEAN],
+    ['starticon', { value: 'wi wi-minus', ...PROP_STRING }],
+    ['endicon', { value: 'wi wi-plus', ...PROP_STRING }],
+    ['rangelabelposition', { value: 'bottom', ...PROP_STRING }],
+]);
+const registerProps = () => {
+    register('wm-slider', sliderProps);
+    registerFormWidget(FormWidgetType.SLIDER, new Map(sliderProps));
+};
+
+const DEFAULT_CLS = 'app-slider slider';
+const WIDGET_CONFIG = {
+    widgetType: 'wm-slider',
+    hostClass: DEFAULT_CLS
+};
+const RANGE_LABEL_POSITION = {
+    top: 'range-label-top',
+    side: 'range-label-side',
+    bottom: 'range-label-bottom',
+};
+class SliderComponent extends BaseFormCustomComponent {
+    static { this.initializeProps = registerProps(); }
+    constructor(inj, explicitContext, app) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.app = app;
+        this.isPrism = false;
+        styler(this.nativeElement, this);
+        this.isPrism = this.app.isPrism;
+    }
+    // change and blur events are added from the template
+    handleEvent(node, eventName, callback, locals) {
+        if (eventName !== 'change' && eventName !== 'blur') {
+            super.handleEvent(node, eventName, callback, locals);
+        }
+    }
+    handleChange(newVal) {
+        this.updateSliderValue();
+        this.invokeOnChange(this.datavalue, { type: 'change' }, this.ngModel.valid);
+    }
+    updateSliderValue() {
+        const sliderValue = 100 - ((((Number(this.datavalue) || 0) - (this.minvalue || 0)) / ((this.maxvalue || 100) - (this.minvalue || 0))) * 100);
+        const slider = this.nativeElement.querySelector('.slider-control');
+        if (slider) {
+            const safePercent = Math.min(100, Math.max(0, sliderValue));
+            slider.style.setProperty('--end', `${safePercent}%`);
+        }
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'tabindex') {
+            return;
+        }
+        else if (key === 'showmarkers' || key === 'markerlabeltext' || key === 'minvalue' || key === 'maxvalue' || key === 'step') {
+            if (this.showmarkers) {
+                this.renderMarkers();
+            }
+        }
+        else if (key === 'rangelabelposition') {
+            switchClass(this.nativeElement, RANGE_LABEL_POSITION[nv], RANGE_LABEL_POSITION[ov]);
+        }
+        else if (key === 'datavalue') {
+            this.datavalue = (nv === "" || nv === null) ? (this.datavalue ?? 50) : nv;
+            this.updateSliderValue();
+        }
+        super.onPropertyChange(key, nv, ov);
+    }
+    renderMarkers() {
+        const sliderTrack = this.nativeElement.querySelector('.range-input');
+        const trackWidth = sliderTrack?.offsetWidth - 9 || 0;
+        const tickCount = this.step > 0 ? Math.floor((this.maxvalue || 100 - this.minvalue || 0) / this.step) + 1 : 0;
+        const labels = convertDataToObject(this.markerlabeltext);
+        this.markerItems = [];
+        for (let i = 0; i < tickCount; i++) {
+            const left = ((trackWidth / (tickCount - 1)) * i);
+            const label = labels?.[i]?.dataValue ?? (Array.isArray(labels) ? (typeof labels[i] === 'object' && labels[i]?.title ? labels[i].title : labels[i]) : `${i}`);
+            const position = Array.isArray(labels) && typeof labels[i] === 'object' && labels[i]?.position ? labels[i].position : 'up';
+            this.markerItems.push({ label, position, left });
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this.showmarkers) {
+            setTimeout(() => { this.renderMarkers(); }, 40);
+        }
+        if (this.datavalue) {
+            setTimeout(() => { this.updateSliderValue(); });
+        }
+    }
+    decrementButtonClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        const step = Number(this.step) || 1;
+        const min = Number(this.minvalue) || 0;
+        let value = Number(this.datavalue ?? 50);
+        value = value - step;
+        if (value <= min) {
+            return;
+        }
+        if (!isNaN(min)) {
+            value = Math.max(value, min);
+        }
+        this.datavalue = value;
+        this.handleChange();
+    }
+    incrementButtonClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        const step = Number(this.step) || 1;
+        const max = Number(this.maxvalue) || 100;
+        let value = Number(this.datavalue ?? 50);
+        value = value + step;
+        if (value >= max)
+            return;
+        if (!isNaN(max)) {
+            value = Math.min(value, max);
+        }
+        this.datavalue = value;
+        this.handleChange();
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild reference
+        this.ngModel = null;
+        // MEMORY LEAK FIX: Clear marker items array
+        if (this.markerItems) {
+            this.markerItems = [];
+        }
+        // Call parent ngOnDestroy
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SliderComponent, deps: [{ token: i0.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }, { token: i1.App }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SliderComponent, isStandalone: true, selector: "[wmSlider]", providers: [
+            provideAs(SliderComponent, NG_VALUE_ACCESSOR, true),
+            provideAsWidgetRef(SliderComponent)
+        ], viewQueries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (isPrism) {\n<div class=\"slider-container\">\n  @if (showicons) {\n  <button class=\"btn-icon\" type=\"button\" name=\"decrementButton\" (click)=\"decrementButtonClick($event)\">\n    <i aria-hidden=\"true\" [ngClass]=\"starticon\"></i></button>\n  }\n  <div class=\"slider-control\">\n    @if(!showmarkers){\n    <span [textContent]=\"minvalue||0\" class=\"app-slider-value pull-left\"></span>\n    <span [textContent]=\"maxvalue||100\" class=\"app-slider-value pull-right\"></span>\n    }\n    <input class=\"range-input\" type=\"range\" aria-orientation=\"horizontal\" focus-target [title]=\"datavalue\"\n      [attr.min]=\"minvalue\" [attr.max]=\"maxvalue\" [attr.step]=\"step\" [(ngModel)]=\"datavalue\"\n      [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"disabled||readonly\" [attr.accesskey]=\"shortcutkey\"\n      [attr.aria-label]=\"arialabel\" (blur)=\"invokeOnTouched($event)\" (ngModelChange)=\"handleChange($event)\"\n      [attr.name]=\"name\" [tabindex]=\"tabindex\" />\n    <p class=\"active-slider\"></p>\n  </div>\n  @if (showicons) {\n  <button class=\"btn-icon\" type=\"button\" name=\"incrementButton\" (click)=\"incrementButtonClick($event)\">\n    <i aria-hidden=\"true\" [ngClass]=\"endicon\"></i>\n  </button>\n  }\n</div>\n\n} @else {\n  @if(!showmarkers){\n  <span [textContent]=\"minvalue||0\" class=\"app-slider-value pull-left\"></span>\n  <span [textContent]=\"maxvalue||100\" class=\"app-slider-value pull-right\"></span>\n}\n<input class=\"range-input\" aria-orientation=\"horizontal\"\n  focus-target\n  type=\"range\" [title]=\"datavalue\"\n  [attr.min]=\"minvalue\"\n  [attr.max]=\"maxvalue\"\n  [attr.step]=\"step\"\n  [(ngModel)]=\"datavalue\"\n  [ngModelOptions]=\"{standalone: true}\"\n  [disabled]=\"disabled||readonly\"\n  [attr.accesskey]=\"shortcutkey\"\n  [attr.aria-label]=\"arialabel\"\n  (blur)=\"invokeOnTouched($event)\"\n  (ngModelChange)=\"handleChange($event)\"\n  [attr.name]=\"name\"\n  [tabindex]=\"tabindex\"/>\n}\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n@if(showmarkers){\n    <div class=\"marker-container\">\n@for (marker of markerItems; track marker) {\n        <div class=\"marker-wrapper\"\n             [ngStyle]=\"{ left: marker.left + 'px' }\"\n             [attr.title]=\"marker.label\">\n            <div class=\"marker-label\" [ngClass]=\"marker.position\" [attr.title]=\"marker.label\">\n                {{ marker.label }}\n            </div>\n            <div class=\"marker-dot\" [attr.title]=\"marker.label\"></div>\n        </div>\n      }\n    </div>\n\n}\n", dependencies: [{ kind: "directive", type: TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SliderComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [TextContentDirective, FormsModule, CommonModule], selector: '[wmSlider]', providers: [
+                        provideAs(SliderComponent, NG_VALUE_ACCESSOR, true),
+                        provideAsWidgetRef(SliderComponent)
+                    ], template: "@if (isPrism) {\n<div class=\"slider-container\">\n  @if (showicons) {\n  <button class=\"btn-icon\" type=\"button\" name=\"decrementButton\" (click)=\"decrementButtonClick($event)\">\n    <i aria-hidden=\"true\" [ngClass]=\"starticon\"></i></button>\n  }\n  <div class=\"slider-control\">\n    @if(!showmarkers){\n    <span [textContent]=\"minvalue||0\" class=\"app-slider-value pull-left\"></span>\n    <span [textContent]=\"maxvalue||100\" class=\"app-slider-value pull-right\"></span>\n    }\n    <input class=\"range-input\" type=\"range\" aria-orientation=\"horizontal\" focus-target [title]=\"datavalue\"\n      [attr.min]=\"minvalue\" [attr.max]=\"maxvalue\" [attr.step]=\"step\" [(ngModel)]=\"datavalue\"\n      [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"disabled||readonly\" [attr.accesskey]=\"shortcutkey\"\n      [attr.aria-label]=\"arialabel\" (blur)=\"invokeOnTouched($event)\" (ngModelChange)=\"handleChange($event)\"\n      [attr.name]=\"name\" [tabindex]=\"tabindex\" />\n    <p class=\"active-slider\"></p>\n  </div>\n  @if (showicons) {\n  <button class=\"btn-icon\" type=\"button\" name=\"incrementButton\" (click)=\"incrementButtonClick($event)\">\n    <i aria-hidden=\"true\" [ngClass]=\"endicon\"></i>\n  </button>\n  }\n</div>\n\n} @else {\n  @if(!showmarkers){\n  <span [textContent]=\"minvalue||0\" class=\"app-slider-value pull-left\"></span>\n  <span [textContent]=\"maxvalue||100\" class=\"app-slider-value pull-right\"></span>\n}\n<input class=\"range-input\" aria-orientation=\"horizontal\"\n  focus-target\n  type=\"range\" [title]=\"datavalue\"\n  [attr.min]=\"minvalue\"\n  [attr.max]=\"maxvalue\"\n  [attr.step]=\"step\"\n  [(ngModel)]=\"datavalue\"\n  [ngModelOptions]=\"{standalone: true}\"\n  [disabled]=\"disabled||readonly\"\n  [attr.accesskey]=\"shortcutkey\"\n  [attr.aria-label]=\"arialabel\"\n  (blur)=\"invokeOnTouched($event)\"\n  (ngModelChange)=\"handleChange($event)\"\n  [attr.name]=\"name\"\n  [tabindex]=\"tabindex\"/>\n}\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n@if(showmarkers){\n    <div class=\"marker-container\">\n@for (marker of markerItems; track marker) {\n        <div class=\"marker-wrapper\"\n             [ngStyle]=\"{ left: marker.left + 'px' }\"\n             [attr.title]=\"marker.label\">\n            <div class=\"marker-label\" [ngClass]=\"marker.position\" [attr.title]=\"marker.label\">\n                {{ marker.label }}\n            </div>\n            <div class=\"marker-dot\" [attr.title]=\"marker.label\"></div>\n        </div>\n      }\n    </div>\n\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }, { type: i1.App }], propDecorators: { ngModel: [{
+                type: ViewChild,
+                args: [NgModel]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SliderComponent };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/input/slider/src/slider.props.ts","../../../../../projects/components/widgets/input/slider/src/slider.component.ts","../../../../../projects/components/widgets/input/slider/src/slider.component.html","../../../../../projects/components/widgets/input/slider/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 sliderProps = new Map(\n    [\n        ['class', PROP_STRING],\n        ['datavalue', PROP_STRING],\n        ['disabled', PROP_BOOLEAN],\n        ['hint', PROP_STRING],\n        ['arialabel', PROP_STRING],\n        ['maxvalue', PROP_NUMBER],\n        ['minvalue', PROP_NUMBER],\n        ['name', PROP_STRING],\n        ['readonly', PROP_BOOLEAN],\n        ['shortcutkey', PROP_STRING],\n        ['show', {value: true, ...PROP_BOOLEAN}],\n        ['step', PROP_NUMBER],\n        ['tabindex', {value: 0, ...PROP_NUMBER}],\n        ['showmarkers',{value: false, ...PROP_BOOLEAN}],\n        ['markerlabeltext',PROP_ANY],\n        ['showicons', PROP_BOOLEAN],\n        ['starticon',{value : 'wi wi-minus', ...PROP_STRING}],\n        ['endicon',{value : 'wi wi-plus', ...PROP_STRING}],\n        ['rangelabelposition',{value : 'bottom', ...PROP_STRING}],\n    ]\n);\n\nexport const registerProps = () => {\n    register(\n        'wm-slider',\n        sliderProps\n    );\n    registerFormWidget(\n        FormWidgetType.SLIDER,\n        new Map(sliderProps)\n    );\n};\n","import {\n    convertDataToObject,\n    IWidgetConfig,\n    provideAs,\n    provideAsWidgetRef,\n    styler,\n    TextContentDirective\n} from \"@wm/components/base\";\nimport {FormsModule, NG_VALUE_ACCESSOR, NgModel} from '@angular/forms';\nimport {Component, Inject, Injector, OnDestroy, Optional, ViewChild} from '@angular/core';\nimport {BaseFormCustomComponent} from '@wm/components/input/base-form-custom';\n\nimport {registerProps} from './slider.props';\nimport {App, isDefined, switchClass} from \"@wm/core\";\nimport { CommonModule } from \"@angular/common\";\n\n\nconst DEFAULT_CLS = 'app-slider slider';\nconst WIDGET_CONFIG: IWidgetConfig = {\n    widgetType: 'wm-slider',\n    hostClass: DEFAULT_CLS\n};\nconst RANGE_LABEL_POSITION: {[key: string]: string} = {\n  top: 'range-label-top',\n  side: 'range-label-side',\n  bottom: 'range-label-bottom',\n};\n@Component({\n    standalone: true,\n    imports: [TextContentDirective, FormsModule, CommonModule],\n    selector: '[wmSlider]',\n    templateUrl: './slider.component.html',\n    providers: [\n        provideAs(SliderComponent, NG_VALUE_ACCESSOR, true),\n        provideAsWidgetRef(SliderComponent)\n    ]\n})\nexport class SliderComponent extends BaseFormCustomComponent implements OnDestroy {\n    static initializeProps = registerProps();\n\n    public minvalue: number;\n    public maxvalue: number;\n    public disabled: boolean;\n    public step: number;\n    public shortcutkey: string;\n    public tabindex: any;\n    public name: string;\n    public readonly: boolean;\n    public hint: string;\n    public arialabel: string;\n    public markerlabeltext: string\n    public showmarkers: boolean;\n    public showicons: boolean;\n    public starticon: string;\n    public endicon:string;\n    public isPrism: boolean = false;\n\n    @ViewChild(NgModel) ngModel: NgModel;\n    public markerItems: any[];\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any, public app?: App) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        styler(this.nativeElement, this);\n        this.isPrism = this.app.isPrism;\n    }\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 !== 'change' && eventName !== 'blur') {\n            super.handleEvent(node, eventName, callback, locals);\n        }\n    }\n\n    public handleChange(newVal?: boolean) {\n        this.updateSliderValue();\n        this.invokeOnChange(this.datavalue, {type: 'change'}, this.ngModel.valid);\n    }\n\n    updateSliderValue() {\n        const sliderValue = 100 - ((((Number(this.datavalue) || 0) - (this.minvalue || 0)) / ((this.maxvalue || 100) - (this.minvalue || 0))) * 100);\n        const slider = this.nativeElement.querySelector('.slider-control') as HTMLElement;\n        if (slider) {\n            const safePercent = Math.min(100, Math.max(0, sliderValue));\n            slider.style.setProperty('--end', `${safePercent}%`);\n        }\n    }\n\n    onPropertyChange(key: string, nv: any, ov?: any) {\n        if (key === 'tabindex') {\n            return;\n        }\n        else if(key === 'showmarkers'||key === 'markerlabeltext' || key === 'minvalue'||key === 'maxvalue'||key === 'step') {\n            if(this.showmarkers) {\n                this.renderMarkers();\n            }\n        } else if(key === 'rangelabelposition'){\n             switchClass(this.nativeElement, RANGE_LABEL_POSITION[nv], RANGE_LABEL_POSITION[ov]);\n        }else if(key === 'datavalue'){\n             this.datavalue = (nv === \"\" || nv === null) ? (this.datavalue ?? 50) : nv\n             this.updateSliderValue()\n        }\n        super.onPropertyChange(key, nv, ov);\n    }\n    private renderMarkers() {\n        const sliderTrack = this.nativeElement.querySelector('.range-input') as HTMLElement;\n        const trackWidth = sliderTrack?.offsetWidth-9|| 0;\n        const tickCount = this.step > 0 ? Math.floor((this.maxvalue||100 - this.minvalue||0) / this.step) + 1 : 0;\n        const labels = convertDataToObject(this.markerlabeltext);\n        this.markerItems = [];\n        for (let i = 0; i < tickCount; i++) {\n            const left = ((trackWidth / (tickCount - 1)) * i);\n            const label = labels?.[i]?.dataValue ?? (Array.isArray(labels) ? (typeof labels[i] === 'object' && labels[i]?.title ? labels[i].title : labels[i]) : `${i}`);\n            const position = Array.isArray(labels) && typeof labels[i] === 'object' && labels[i]?.position ? labels[i].position : 'up';\n            this.markerItems.push({ label, position, left });\n        }\n    }\n\n    ngAfterViewInit() {\n        super.ngAfterViewInit();\n        if(this.showmarkers) {\n            setTimeout(() => {this.renderMarkers();}, 40);\n        }\n        if(this.datavalue){\n          setTimeout(() => {this.updateSliderValue();});\n        }\n    }\n\n    decrementButtonClick(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this.disabled) {\n            return;\n        }\n\n        const step = Number(this.step) || 1;\n        const min = Number(this.minvalue) || 0;\n\n        let value = Number(this.datavalue ?? 50);\n        value = value - step;\n        if (value <= min) {\n            return;\n        }\n        if (!isNaN(min)) {\n            value = Math.max(value, min);\n        }\n\n        this.datavalue = value;\n        this.handleChange()\n    }\n\n\n    incrementButtonClick(event: Event) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this.disabled) {\n            return;\n        }\n\n        const step = Number(this.step) || 1;\n        const max = Number(this.maxvalue) || 100;\n\n        let value = Number(this.datavalue ?? 50);\n        value = value + step;\n        if (value >= max)  return;\n\n        if (!isNaN(max)) {\n            value = Math.min(value, max);\n        }\n\n        this.datavalue = value;\n        this.handleChange()\n    }\n\n\n    ngOnDestroy() {\n        // MEMORY LEAK FIX: Clear ViewChild reference\n        this.ngModel = null;\n\n        // MEMORY LEAK FIX: Clear marker items array\n        if (this.markerItems) {\n            this.markerItems = [];\n        }\n\n        // Call parent ngOnDestroy\n        super.ngOnDestroy();\n    }\n}\n","@if (isPrism) {\n<div class=\"slider-container\">\n  @if (showicons) {\n  <button class=\"btn-icon\" type=\"button\" name=\"decrementButton\" (click)=\"decrementButtonClick($event)\">\n    <i aria-hidden=\"true\" [ngClass]=\"starticon\"></i></button>\n  }\n  <div class=\"slider-control\">\n    @if(!showmarkers){\n    <span [textContent]=\"minvalue||0\" class=\"app-slider-value pull-left\"></span>\n    <span [textContent]=\"maxvalue||100\" class=\"app-slider-value pull-right\"></span>\n    }\n    <input class=\"range-input\" type=\"range\" aria-orientation=\"horizontal\" focus-target [title]=\"datavalue\"\n      [attr.min]=\"minvalue\" [attr.max]=\"maxvalue\" [attr.step]=\"step\" [(ngModel)]=\"datavalue\"\n      [ngModelOptions]=\"{ standalone: true }\" [disabled]=\"disabled||readonly\" [attr.accesskey]=\"shortcutkey\"\n      [attr.aria-label]=\"arialabel\" (blur)=\"invokeOnTouched($event)\" (ngModelChange)=\"handleChange($event)\"\n      [attr.name]=\"name\" [tabindex]=\"tabindex\" />\n    <p class=\"active-slider\"></p>\n  </div>\n  @if (showicons) {\n  <button class=\"btn-icon\" type=\"button\" name=\"incrementButton\" (click)=\"incrementButtonClick($event)\">\n    <i aria-hidden=\"true\" [ngClass]=\"endicon\"></i>\n  </button>\n  }\n</div>\n\n} @else {\n  @if(!showmarkers){\n  <span [textContent]=\"minvalue||0\" class=\"app-slider-value pull-left\"></span>\n  <span [textContent]=\"maxvalue||100\" class=\"app-slider-value pull-right\"></span>\n}\n<input class=\"range-input\" aria-orientation=\"horizontal\"\n  focus-target\n  type=\"range\" [title]=\"datavalue\"\n  [attr.min]=\"minvalue\"\n  [attr.max]=\"maxvalue\"\n  [attr.step]=\"step\"\n  [(ngModel)]=\"datavalue\"\n  [ngModelOptions]=\"{standalone: true}\"\n  [disabled]=\"disabled||readonly\"\n  [attr.accesskey]=\"shortcutkey\"\n  [attr.aria-label]=\"arialabel\"\n  (blur)=\"invokeOnTouched($event)\"\n  (ngModelChange)=\"handleChange($event)\"\n  [attr.name]=\"name\"\n  [tabindex]=\"tabindex\"/>\n}\n@if (readonly || disabled) {\n  <div aria-readonly=\"true\" class=\"readonly-wrapper\"></div>\n}\n@if(showmarkers){\n    <div class=\"marker-container\">\n@for (marker of markerItems; track marker) {\n        <div class=\"marker-wrapper\"\n             [ngStyle]=\"{ left: marker.left + 'px' }\"\n             [attr.title]=\"marker.label\">\n            <div class=\"marker-label\" [ngClass]=\"marker.position\" [attr.title]=\"marker.label\">\n                {{ marker.label }}\n            </div>\n            <div class=\"marker-dot\" [attr.title]=\"marker.label\"></div>\n        </div>\n      }\n    </div>\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import { NgModel } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { OnDestroy, Injector } from '@angular/core';
+import { BaseFormCustomComponent } from '@wm/components/input/base-form-custom';
+import { App } from '@wm/core';
+
+declare class SliderComponent extends BaseFormCustomComponent implements OnDestroy {
+    app?: App;
+    static initializeProps: void;
+    minvalue: number;
+    maxvalue: number;
+    disabled: boolean;
+    step: number;
+    shortcutkey: string;
+    tabindex: any;
+    name: string;
+    readonly: boolean;
+    hint: string;
+    arialabel: string;
+    markerlabeltext: string;
+    showmarkers: boolean;
+    showicons: boolean;
+    starticon: string;
+    endicon: string;
+    isPrism: boolean;
+    ngModel: NgModel;
+    markerItems: any[];
+    constructor(inj: Injector, explicitContext: any, app?: App);
+    protected handleEvent(node: HTMLElement, eventName: string, callback: Function, locals: any): void;
+    handleChange(newVal?: boolean): void;
+    updateSliderValue(): void;
+    onPropertyChange(key: string, nv: any, ov?: any): void;
+    private renderMarkers;
+    ngAfterViewInit(): void;
+    decrementButtonClick(event: Event): void;
+    incrementButtonClick(event: Event): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "[wmSlider]", never, {}, {}, never, never, true, never>;
+}
+
+export { SliderComponent };

package/components/input/slider/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wm/components/input/slider",
+  "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/switch/.npmignore

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

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

@@ -0,0 +1,224 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), 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/core', '@angular/forms', '@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.switch = {}), global.ng.common, global.ng.core, global.ng.forms, global.wm.core, global.wm.components.base, global.wm.components.input.datasetawareform, global._));
+})(this, (function (exports, i1, i0, forms, 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 i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+
+    const switchProps = new Map([
+        ['class', base.PROP_STRING],
+        ['compareby', base.PROP_STRING],
+        ['datafield', base.PROP_STRING],
+        ['dataset', { value: 'yes, no, maybe', ...base.PROP_ANY }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['displayexpression', base.PROP_STRING],
+        ['displayfield', base.PROP_STRING],
+        ['hint', base.PROP_ANY],
+        ['arialabel', base.PROP_STRING],
+        ['iconclass', base.PROP_STRING],
+        ['checkediconclass', { value: '', ...base.PROP_STRING }],
+        ['name', base.PROP_STRING],
+        ['orderby', base.PROP_STRING],
+        ['required', base.PROP_BOOLEAN],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }]
+    ]);
+    const registerProps = () => {
+        base.register('wm-switch', switchProps);
+        base.registerFormWidget(core.FormWidgetType.SWITCH, new Map(switchProps));
+        base.registerFormWidget(core.FormWidgetType.TOGGLE, new Map(switchProps));
+    };
+
+    const DEFAULT_CLS = 'app-switch';
+    const WIDGET_CONFIG = { widgetType: 'wm-switch', hostClass: DEFAULT_CLS };
+    class SwitchComponent extends datasetAwareForm.DatasetAwareFormComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.options = [];
+            this._debounceSetSelectedValue = null;
+            this.multiple = this.getAttr("multiple") === "true";
+            this.checkediconclass = this.getAttr("checkediconclass");
+            this._debounceSetSelectedValue = core.debounce((val) => {
+                this.setSelectedValue();
+                this.updateHighlighter(val);
+                // only for default value trigger app digest to apply the selectedItem
+                if (val) {
+                    core.$appDigest();
+                }
+            }, 200);
+            const datasetSubscription = this.dataset$.subscribe(() => this.updateSwitchOptions());
+            this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+            const datavalueSubscription = this.datavalue$.subscribe(() => {
+                if (this._debounceSetSelectedValue) {
+                    this._debounceSetSelectedValue(true);
+                }
+            });
+            this.registerDestroyListener(() => datavalueSubscription.unsubscribe());
+        }
+        ngAfterViewInit() {
+            super.ngAfterViewInit();
+            base.styler(this.nativeElement, this);
+        }
+        onStyleChange(key, nv, ov) {
+            if (key === 'height') {
+                core.setCSS(this.nativeElement, 'overflow', nv ? 'auto' : '');
+            }
+            else {
+                super.onStyleChange(key, nv, ov);
+            }
+        }
+        // This function sets the selectedItem by either using compareby fields or selected flag on datasetItems.
+        setSelectedValue() {
+            if (core.isDefined(this.datavalue) || core.isDefined(this.toBeProcessedDatavalue)) {
+                this.selectedItem = lodashEs.find(this.datasetItems, { selected: true });
+                return;
+            }
+            // If no value is provided, set first value as default if options are available else set -1 ie no selection
+            // this.selectOptAtIndex(0);
+        }
+        // set the css for switch overlay element.
+        // set the selected index from the datasetItems and highlight the datavalue on switch.
+        updateSwitchOptions() {
+            if (this.datasetItems.length && !this.multiple) {
+                this.btnwidth = (100 / this.datasetItems.length);
+                core.setCSS(this.nativeElement.querySelector('.app-switch-overlay'), 'width', this.btnwidth + '%');
+            }
+            if (this._debounceSetSelectedValue) {
+                this._debounceSetSelectedValue(true);
+            }
+        }
+        // This function animates the highlighted span on to the selected value.
+        updateHighlighter(skipAnimation) {
+            const handler = $(this.nativeElement).find('span.app-switch-overlay');
+            this.setSelectedValue();
+            let left, index = this.selectedItem ? lodashEs.findIndex(this.datasetItems, { key: this.selectedItem.key }) : -1;
+            if (index === undefined || index === null) {
+                index = -1;
+            }
+            left = index * this.btnwidth;
+            if (skipAnimation) {
+                handler.css('left', left + '%');
+            }
+            else {
+                handler.animate({
+                    left: left + '%'
+                }, 300);
+            }
+        }
+        selectOptAtIndex($index) {
+            if (!this.datasetItems.length) {
+                return;
+            }
+            const opt = this.datasetItems[$index];
+            this._modelByValue = opt.value;
+        }
+        // Triggered on selected the option from the switch.
+        // set the index and highlight the default value. Invoke onchange event handler.
+        selectOpt($event, $index, option) {
+            $event.preventDefault();
+            if (this.disabled) {
+                return;
+            }
+            if (this.multiple) {
+                const keys = [];
+                this.datasetItems[$index].selected = !this.datasetItems[$index].selected;
+                lodashEs.forEach(this.datasetItems, (item) => {
+                    if (item.selected)
+                        keys.push(item.key);
+                });
+                this.modelByKey = keys;
+                this.selectedItem = lodashEs.find(this.datasetItems, { selected: true });
+            }
+            else {
+                this.modelByKey = option.key;
+                if (!this.multiple && this.selectedItem && $index === lodashEs.findIndex(this.datasetItems, { key: this.selectedItem.key })) {
+                    if (this.datasetItems.length === 2) {
+                        $index = $index === 1 ? 0 : 1;
+                    }
+                    else {
+                        return;
+                    }
+                }
+                this.selectedItem = this.datasetItems[$index];
+                this.updateHighlighter();
+            }
+            this.invokeOnTouched();
+            // invoke on datavalue change.
+            this.invokeOnChange(this.datavalue, $event || {}, true);
+            core.$appDigest();
+        }
+        onPropertyChange(key, nv, ov) {
+            if (key === 'disabled' && !core.toBoolean(nv)) {
+                this.nativeElement.removeAttribute(key);
+            }
+            else {
+                if (key === 'hint') {
+                    if (lodashEs.isUndefined(nv) || lodashEs.isNull(nv) || lodashEs.trim(nv) === '') {
+                        this.hint = [];
+                    }
+                    else if (!lodashEs.isArray(nv)) {
+                        this.hint = [nv];
+                    }
+                }
+                super.onPropertyChange(key, nv, ov);
+            }
+        }
+        ngOnDestroy() {
+            // MEMORY LEAK FIX: Nullify debounced function closure
+            // This closure captures 'this' and prevents garbage collection
+            this._debounceSetSelectedValue = null;
+            // MEMORY LEAK FIX: Clear options array
+            this.options = [];
+            // MEMORY LEAK FIX: Clear selected item reference
+            this.selectedItem = null;
+            // MEMORY LEAK FIX: Clear hint array
+            if (this.hint) {
+                this.hint = [];
+            }
+            // Call parent ngOnDestroy
+            super.ngOnDestroy();
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SwitchComponent, 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: SwitchComponent, isStandalone: true, selector: "[wmSwitch]", providers: [
+                base.provideAs(SwitchComponent, forms.NG_VALUE_ACCESSOR, true),
+                base.provideAsWidgetRef(SwitchComponent)
+            ], exportAs: ["wmSwitch"], usesInheritance: true, ngImport: i0__namespace, template: "<div role=\"group\" class=\"btn-group btn-group-justified\" [ngClass]=\"{'multi-select': multiple}\">\n  @for (opt of datasetItems; track opt) {\n    <a\n      focus-target\n      href=\"javascript:void(0);\"\n      class=\"btn btn-default\"\n      [title]=\"hint?hint:opt.key\"\n      [name]=\"'wm-switch-' + opt.key\"\n      role=\"button\"\n      [title]=\"hint?.[opt.index-1]?hint[opt.index-1]:(hint?.[0]?hint[0]:(opt[displayfield]||opt.label))\"\n      [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n      [attr.aria-pressed]=\"opt.selected ? true : false\"\n      (click)=\"selectOpt($event, $index, opt)\"\n      >\n      @if (opt.dataObject && opt.dataObject[iconclass] && (!opt.selected ||!checkediconclass)) {\n        <i aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n      }\n      @if (opt.selected && checkediconclass) {\n        <i aria-hidden=\"true\" [ngClass]=\"[checkediconclass]\"></i>\n      }\n      <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n  }\n</div>\n@if (!multiple) {\n  <span [title]=\"selectedItem ? selectedItem.label : modelByKey\" aria-hidden=\"true\"\n    class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i [ngClass]=\"[checkediconclass]\"></i>\n    <span class=\"caption\">{{selectedItem ? selectedItem.label : modelByKey}}</span>\n  </span>\n}\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n", dependencies: [{ kind: "ngmodule", type: i1.CommonModule }, { kind: "directive", type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: base.TextContentDirective, selector: "[textContent]", inputs: ["textContent"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SwitchComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i1.CommonModule, base.TextContentDirective], selector: '[wmSwitch]', providers: [
+                            base.provideAs(SwitchComponent, forms.NG_VALUE_ACCESSOR, true),
+                            base.provideAsWidgetRef(SwitchComponent)
+                        ], exportAs: 'wmSwitch', template: "<div role=\"group\" class=\"btn-group btn-group-justified\" [ngClass]=\"{'multi-select': multiple}\">\n  @for (opt of datasetItems; track opt) {\n    <a\n      focus-target\n      href=\"javascript:void(0);\"\n      class=\"btn btn-default\"\n      [title]=\"hint?hint:opt.key\"\n      [name]=\"'wm-switch-' + opt.key\"\n      role=\"button\"\n      [title]=\"hint?.[opt.index-1]?hint[opt.index-1]:(hint?.[0]?hint[0]:(opt[displayfield]||opt.label))\"\n      [ngClass]=\"{'selected': opt.selected, 'disabled': disabled}\"\n      [attr.aria-pressed]=\"opt.selected ? true : false\"\n      (click)=\"selectOpt($event, $index, opt)\"\n      >\n      @if (opt.dataObject && opt.dataObject[iconclass] && (!opt.selected ||!checkediconclass)) {\n        <i aria-hidden=\"true\" [ngClass]=\"['app-icon', opt.dataObject[iconclass] || opt['icon']]\"></i>\n      }\n      @if (opt.selected && checkediconclass) {\n        <i aria-hidden=\"true\" [ngClass]=\"[checkediconclass]\"></i>\n      }\n      <span class=\"caption\" [textContent]=\"opt[displayfield] || opt.label\"></span>\n    </a>\n  }\n</div>\n@if (!multiple) {\n  <span [title]=\"selectedItem ? selectedItem.label : modelByKey\" aria-hidden=\"true\"\n    class=\"btn btn-primary app-switch-overlay switch-handle\">\n    <i [ngClass]=\"[checkediconclass]\"></i>\n    <span class=\"caption\">{{selectedItem ? selectedItem.label : modelByKey}}</span>\n  </span>\n}\n<input [name]=\"name\" class=\"model-holder ng-hide\" [disabled]=\"disabled\" [value]=\"modelByKey\" [required]=\"required\" aria-hidden=\"true\">\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    exports.SwitchComponent = SwitchComponent;
+
+}));