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

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

@@ -0,0 +1,211 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { ElementRef, ViewChild, Inject, Optional, Component } from '@angular/core';
+import { FormWidgetType, DataSource, isIos, isSafari, setAttr, removeAttr } from '@wm/core';
+import { PROP_BOOLEAN, PROP_STRING, PROP_ANY, PROP_NUMBER, register, registerFormWidget, styler, TextContentDirective, provideAs, provideAsWidgetRef } from '@wm/components/base';
+import { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';
+
+const selectProps = new Map([
+    ['autofocus', PROP_BOOLEAN],
+    ['class', { value: '', ...PROP_STRING }],
+    ['compareby', PROP_STRING],
+    ['datafield', PROP_STRING],
+    ['dataset', PROP_ANY],
+    ['datavaluesource', PROP_ANY],
+    ['datavalue', PROP_STRING],
+    ['dateformat', PROP_STRING],
+    ['disabled', PROP_BOOLEAN],
+    ['displayexpression', PROP_STRING],
+    ['displayfield', PROP_STRING],
+    ['displayValue', PROP_STRING],
+    ['groupby', PROP_STRING],
+    ['hint', PROP_STRING],
+    ['arialabel', PROP_STRING],
+    ['match', PROP_STRING],
+    ['multiple', { value: false, ...PROP_BOOLEAN }],
+    ['name', PROP_STRING],
+    ['orderby', PROP_STRING],
+    ['placeholder', PROP_STRING],
+    ['readonly', PROP_BOOLEAN],
+    ['required', PROP_BOOLEAN],
+    ['shortcutkey', PROP_STRING],
+    ['show', { value: true, ...PROP_BOOLEAN }],
+    ['tabindex', { value: 0, ...PROP_NUMBER }],
+    ['usekeys', PROP_BOOLEAN]
+]);
+const registerProps = () => {
+    register('wm-select', selectProps);
+    registerFormWidget(FormWidgetType.SELECT, new Map(selectProps));
+    registerFormWidget(FormWidgetType.TYPEAHEAD, new Map(selectProps));
+};
+
+const WIDGET_CONFIG = { widgetType: 'wm-select', hostClass: 'app-select-wrapper' };
+class SelectComponent extends DatasetAwareFormComponent {
+    static { this.initializeProps = registerProps(); }
+    set datasource(ds) {
+        if (ds && ds.execute && ds.execute(DataSource.Operation.IS_BOUND_TO_LOCALE)) {
+            this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);
+        }
+    }
+    constructor(inj, explicitContext) {
+        super(inj, WIDGET_CONFIG, explicitContext);
+        this.acceptsArray = true;
+        /*
+        * When the dataset for a select element is updated and no longer includes the previously selected value:
+        * The select element becomes empty, and the ngModel value is updated to reflect this change.
+        * However, the change event is not triggered, preventing the form control from recognizing the update and applying necessary validations.
+        * As this widget implements ControlValueAccessor, manually updating the ngModel (or modelByKey) is necessary to ensure correct form behavior.
+        * */
+        const datasetSubscription = this.dataset$.subscribe(() => {
+            if (isIos() || isSafari()) {
+                if (this.datavalue) {
+                    const selectedItem = this.datasetItems.find(item => item.selected);
+                    if (!selectedItem) {
+                        setTimeout(() => {
+                            if (!this.placeholder) {
+                                this.selectEl.nativeElement.value = '';
+                            }
+                            this.modelByKey = undefined;
+                        }, 100);
+                    }
+                }
+                else {
+                    setTimeout(() => {
+                        if (!this.placeholder) {
+                            this.selectEl.nativeElement.value = '';
+                        }
+                    }, 100);
+                }
+            }
+        });
+        this.registerDestroyListener(() => datasetSubscription.unsubscribe());
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        styler(this.selectEl.nativeElement, this);
+    }
+    // Change event is registered from the template, Prevent the framework from registering one more event
+    handleEvent(node, eventName, eventCallback, locals) {
+        if (!['blur', 'change'].includes(eventName)) {
+            super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);
+        }
+    }
+    onSelectValueChange($event) {
+        if (this.readonly) {
+            if (this.placeholder) {
+                this.selectEl.nativeElement.value = this.placeholder;
+            }
+            else {
+                this.selectEl.nativeElement.value = '';
+            }
+            this.datavalue = this.prevDatavalue;
+            return;
+        }
+        this.invokeOnTouched();
+        // invoke on datavalue change.
+        this.invokeOnChange(this.datavalue, $event || {}, true);
+    }
+    onPropertyChange(key, nv, ov) {
+        if (key === 'required') {
+            this._onChange(this.datavalue);
+            return;
+        }
+        if (key === 'class' || key === 'tabindex') {
+            if (key === 'class') {
+                // After NG15 upgrade ng-invalid class is added even the field is valid, so we are removing the ng-invalid manually
+                const isNgUntouchedValid = this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid');
+                if (isNgUntouchedValid && nv.includes('ng-untouched') && nv.includes('ng-invalid')) {
+                    setTimeout(() => {
+                        if (this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid') && this.selectEl.nativeElement.classList.contains('ng-invalid')) {
+                            this.selectEl.nativeElement.classList.remove('ng-invalid');
+                        }
+                    });
+                }
+            }
+            return;
+        }
+        else if (key === 'readonly') {
+            (nv === true) ? setAttr(this.selectEl.nativeElement, 'readonly', 'readonly') : removeAttr(this.selectEl.nativeElement, 'readonly');
+        }
+        super.onPropertyChange(key, nv, ov);
+    }
+    /**
+     * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
+     * When focused add the placeholder to the option which is selected
+     * On blur, remove the placeholder and do not animate the label
+     * @param $event event received will be either a blur or focus event
+     */
+    checkForFloatingLabel($event) {
+        const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');
+        if (!this.placeholder && (isIos() || isSafari())) {
+            this.removePlaceholderOption();
+        }
+        if (captionEl.length > 0) {
+            const placeholderOption = this.selectEl.nativeElement.querySelector('#placeholderOption');
+            if ($event.type === 'mousedown' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {
+                if (this.placeholder) {
+                    placeholderOption.textContent = this.placeholder;
+                }
+            }
+            else if (!this.datavalue) {
+                if (this.placeholder) {
+                    placeholderOption.textContent = '';
+                }
+                captionEl.removeClass('float-active');
+            }
+        }
+    }
+    /*
+    * Removing the placeholder option if no placeholder is provided.
+    * In html we are hiding the placeholder option using css but in Apple devices and safari option is showing.
+    * Styles are not allowed on option tag in ios safari
+    * After removing the option, if no datavalue is present and native select element sets value to the first option by default, so we are setting it to empty
+    * */
+    removePlaceholderOption() {
+        const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');
+        if (hiddenEle.length) {
+            hiddenEle.remove();
+            if (!this.datavalue) {
+                this.selectEl.nativeElement.value = '';
+            }
+        }
+    }
+    ngOnDestroy() {
+        // MEMORY LEAK FIX: Clear ViewChild reference
+        this.selectEl = null;
+        // Call parent ngOnDestroy (DatasetAwareFormComponent has cleanup)
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, 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: SelectComponent, isStandalone: true, selector: "wm-select", providers: [
+            provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
+            provideAs(SelectComponent, NG_VALIDATORS, true),
+            provideAsWidgetRef(SelectComponent)
+        ], viewQueries: [{ propertyName: "selectEl", first: true, predicate: ["select"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #select\n  focus-target\n  [ngClass]=\"['app-select form-control', class]\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  [tabindex]=\"tabindex\"\n  [attr.accesskey]=\"shortcutkey\"\n  [(ngModel)]=\"modelByKey\"\n  [ngModelOptions]=\"{standalone: true}\"\n  [multiple]=\"multiple\"\n  (change)=\"onSelectValueChange($event)\"\n  (mousedown)=\"checkForFloatingLabel($event)\"\n  (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n  [attr.name]=\"name\"\n  [attr.aria-label]=\"arialabel\"\n  [autofocus]=\"autofocus\">\n\n  <option selected\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    id=\"placeholderOption\"\n  [hidden]=\"!placeholder\"></option>\n\n  @if (groupby) {\n    @for (groupObj of groupedData; track groupObj) {\n      <optgroup\n        [label]=\"groupObj.key\">\n        @for (item of groupObj.data; track item) {\n          <option\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n          ></option>\n        }\n      </optgroup>\n    }\n  }\n\n  @if (!groupby) {\n    @for (item of datasetItems; track item) {\n      <option\n        [value]=\"item.key\"\n        [selected]=\"item.selected\"\n        [textContent]=\"item.label\"\n      ></option>\n    }\n  }\n</select>\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, TextContentDirective, FormsModule], selector: 'wm-select', providers: [
+                        provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),
+                        provideAs(SelectComponent, NG_VALIDATORS, true),
+                        provideAsWidgetRef(SelectComponent)
+                    ], template: "<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #select\n  focus-target\n  [ngClass]=\"['app-select form-control', class]\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  [tabindex]=\"tabindex\"\n  [attr.accesskey]=\"shortcutkey\"\n  [(ngModel)]=\"modelByKey\"\n  [ngModelOptions]=\"{standalone: true}\"\n  [multiple]=\"multiple\"\n  (change)=\"onSelectValueChange($event)\"\n  (mousedown)=\"checkForFloatingLabel($event)\"\n  (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n  [attr.name]=\"name\"\n  [attr.aria-label]=\"arialabel\"\n  [autofocus]=\"autofocus\">\n\n  <option selected\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    id=\"placeholderOption\"\n  [hidden]=\"!placeholder\"></option>\n\n  @if (groupby) {\n    @for (groupObj of groupedData; track groupObj) {\n      <optgroup\n        [label]=\"groupObj.key\">\n        @for (item of groupObj.data; track item) {\n          <option\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n          ></option>\n        }\n      </optgroup>\n    }\n  }\n\n  @if (!groupby) {\n    @for (item of datasetItems; track item) {\n      <option\n        [value]=\"item.key\"\n        [selected]=\"item.selected\"\n        [textContent]=\"item.label\"\n      ></option>\n    }\n  }\n</select>\n" }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['EXPLICIT_CONTEXT']
+                }, {
+                    type: Optional
+                }] }], propDecorators: { selectEl: [{
+                type: ViewChild,
+                args: ['select', { static: true, read: ElementRef }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SelectComponent };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../projects/components/widgets/input/select/src/select.props.ts","../../../../../projects/components/widgets/input/select/src/select.component.ts","../../../../../projects/components/widgets/input/select/src/select.component.html","../../../../../projects/components/widgets/input/select/src/index.ts"],"sourcesContent":["import {FormWidgetType} from '@wm/core';\nimport {PROP_ANY, PROP_BOOLEAN, PROP_NUMBER, PROP_STRING, register, registerFormWidget} from '@wm/components/base';\n\nexport const selectProps = new Map(\n    [\n        ['autofocus', PROP_BOOLEAN],\n        ['class', {value: '', ...PROP_STRING}],\n        ['compareby', PROP_STRING],\n        ['datafield', PROP_STRING],\n        ['dataset', PROP_ANY],\n        ['datavaluesource', PROP_ANY],\n        ['datavalue', PROP_STRING],\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        ['hint', PROP_STRING],\n        ['arialabel', PROP_STRING],\n        ['match', PROP_STRING],\n        ['multiple', {value: false, ...PROP_BOOLEAN}],\n        ['name', PROP_STRING],\n        ['orderby', PROP_STRING],\n        ['placeholder', PROP_STRING],\n        ['readonly', PROP_BOOLEAN],\n        ['required', PROP_BOOLEAN],\n        ['shortcutkey', PROP_STRING],\n        ['show', {value: true, ...PROP_BOOLEAN}],\n        ['tabindex', {value: 0, ...PROP_NUMBER}],\n        ['usekeys', PROP_BOOLEAN]\n    ]\n);\n\nexport const registerProps = () => {\n    register(\n        'wm-select',\n        selectProps\n    );\n    registerFormWidget(\n        FormWidgetType.SELECT,\n        new Map(selectProps)\n    );\n    registerFormWidget(\n        FormWidgetType.TYPEAHEAD,\n        new Map(selectProps)\n    );\n};\n","import { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport {AfterViewInit, Component, ElementRef, Inject, Injector, OnDestroy, Optional, ViewChild} from '@angular/core';\nimport {NG_VALIDATORS, NG_VALUE_ACCESSOR} from '@angular/forms';\nimport {DataSource, isIos, removeAttr, setAttr, isSafari} from '@wm/core';\nimport {provideAs, provideAsWidgetRef, styler, TextContentDirective} from '@wm/components/base';\nimport {DatasetAwareFormComponent} from '@wm/components/input/dataset-aware-form';\n\nimport {registerProps} from './select.props';\n\nconst WIDGET_CONFIG = {widgetType: 'wm-select', hostClass: 'app-select-wrapper'};\n\n@Component({\n  standalone: true,\n  imports: [CommonModule, TextContentDirective, FormsModule],\n    selector: 'wm-select',\n    templateUrl: './select.component.html',\n    providers: [\n        provideAs(SelectComponent, NG_VALUE_ACCESSOR, true),\n        provideAs(SelectComponent, NG_VALIDATORS, true),\n        provideAsWidgetRef(SelectComponent)\n    ]\n})\nexport class SelectComponent extends DatasetAwareFormComponent implements AfterViewInit, OnDestroy {\n    static initializeProps = registerProps();\n\n    public readonly: boolean;\n    public placeholder: string;\n    public navsearchbar: any;\n    public class: any;\n    public required: boolean;\n    public disabled: boolean;\n    public tabindex: any;\n    public name: string;\n    public autofocus: boolean;\n    public hint: string;\n    public arialabel: string;\n    public shortcutkey: string;\n\n    @ViewChild('select', { static: true, read: ElementRef }) selectEl: ElementRef;\n\n    set datasource(ds) {\n        if (ds && ds.execute && ds.execute(DataSource.Operation.IS_BOUND_TO_LOCALE)) {\n            this.datavalue = ds.execute(DataSource.Operation.GET_DEFAULT_LOCALE);\n        }\n    }\n\n    constructor(inj: Injector, @Inject('EXPLICIT_CONTEXT') @Optional() explicitContext: any) {\n        super(inj, WIDGET_CONFIG, explicitContext);\n        this.acceptsArray = true;\n\n        /*\n        * When the dataset for a select element is updated and no longer includes the previously selected value:\n        * The select element becomes empty, and the ngModel value is updated to reflect this change.\n        * However, the change event is not triggered, preventing the form control from recognizing the update and applying necessary validations.\n        * As this widget implements ControlValueAccessor, manually updating the ngModel (or modelByKey) is necessary to ensure correct form behavior.\n        * */\n        const datasetSubscription = this.dataset$.subscribe(() => {\n            if(isIos() || isSafari()) {\n                if (this.datavalue) {\n                    const selectedItem = this.datasetItems.find(item => item.selected);\n                    if (!selectedItem) {\n                        setTimeout(() => {\n                            if(!this.placeholder) {\n                                this.selectEl.nativeElement.value = '';\n                            }\n                            this.modelByKey = undefined;\n                        }, 100);\n                    }\n                } else {\n                    setTimeout(() => {\n                        if(!this.placeholder) {\n                            this.selectEl.nativeElement.value = '';\n                        }\n\n                    }, 100);\n                }\n            }\n        });\n        this.registerDestroyListener(() => datasetSubscription.unsubscribe());\n    }\n\n    ngAfterViewInit() {\n        super.ngAfterViewInit();\n        styler(this.selectEl.nativeElement as HTMLElement, this);\n    }\n\n    // Change event is registered from the template, Prevent the framework from registering one more event\n    protected handleEvent(node: HTMLElement, eventName: string, eventCallback: Function, locals: any) {\n        if (!['blur', 'change'].includes(eventName)) {\n            super.handleEvent(this.selectEl.nativeElement, eventName, eventCallback, locals);\n        }\n    }\n\n    onSelectValueChange($event) {\n        if (this.readonly) {\n            if (this.placeholder) {\n                this.selectEl.nativeElement.value = this.placeholder;\n            } else {\n                this.selectEl.nativeElement.value = '';\n            }\n            this.datavalue = (this as any).prevDatavalue;\n            return;\n        }\n        this.invokeOnTouched();\n        // invoke on datavalue change.\n        this.invokeOnChange(this.datavalue, $event || {}, true);\n    }\n\n    onPropertyChange(key: string, nv: any, ov?: any) {\n        if (key === 'required')  {\n            this._onChange(this.datavalue);\n            return;\n        }\n        if (key === 'class' ||  key === 'tabindex') {\n            if(key === 'class') {\n                // After NG15 upgrade ng-invalid class is added even the field is valid, so we are removing the ng-invalid manually\n                const isNgUntouchedValid = this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid')\n                if(isNgUntouchedValid && nv.includes('ng-untouched') && nv.includes('ng-invalid')) {\n                    setTimeout(()=> {\n                        if(this.selectEl.nativeElement.classList.contains('ng-untouched') && this.selectEl.nativeElement.classList.contains('ng-valid') && this.selectEl.nativeElement.classList.contains('ng-invalid')) {\n                            this.selectEl.nativeElement.classList.remove('ng-invalid');\n                        }\n                    });\n                }\n            }\n            return;\n        } else if (key === 'readonly') {\n             (nv === true) ? setAttr(this.selectEl.nativeElement, 'readonly', 'readonly') : removeAttr(this.selectEl.nativeElement, 'readonly') ;\n        }\n        super.onPropertyChange(key, nv, ov);\n    }\n\n    /**\n     * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field\n     * When focused add the placeholder to the option which is selected\n     * On blur, remove the placeholder and do not animate the label\n     * @param $event event received will be either a blur or focus event\n     */\n    checkForFloatingLabel($event) {\n        const captionEl = $(this.selectEl.nativeElement).closest('.app-composite-widget.caption-floating');\n        if(!this.placeholder && (isIos() || isSafari())) {\n            this.removePlaceholderOption();\n        }\n        if (captionEl.length > 0) {\n            const placeholderOption = this.selectEl.nativeElement.querySelector('#placeholderOption');\n            if ($event.type === 'mousedown' && (!this.datavalue || (this.datavalue && $(this.selectEl).find('select option:selected').text() === '' && this.placeholder))) {\n                if(this.placeholder) {\n                    placeholderOption.textContent = this.placeholder;\n                }\n            } else if (!this.datavalue) {\n                if(this.placeholder) {\n                    placeholderOption.textContent = '';\n                }\n                captionEl.removeClass('float-active');\n            }\n        }\n    }\n\n    /*\n    * Removing the placeholder option if no placeholder is provided.\n    * In html we are hiding the placeholder option using css but in Apple devices and safari option is showing.\n    * Styles are not allowed on option tag in ios safari\n    * After removing the option, if no datavalue is present and native select element sets value to the first option by default, so we are setting it to empty\n    * */\n    private removePlaceholderOption() {\n        const hiddenEle = $(this.selectEl.nativeElement).find('#placeholderOption');\n        if (hiddenEle.length) {\n            hiddenEle.remove();\n            if(!this.datavalue) {\n                this.selectEl.nativeElement.value = '';\n            }\n        }\n    }\n\n    ngOnDestroy() {\n        // MEMORY LEAK FIX: Clear ViewChild reference\n        this.selectEl = null;\n\n        // Call parent ngOnDestroy (DatasetAwareFormComponent has cleanup)\n        super.ngOnDestroy();\n    }\n}\n","<!--Updated focus with mousedown event. IOS devices not allow update of option value after opening dropdown-->\n<select #select\n  focus-target\n  [ngClass]=\"['app-select form-control', class]\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  [tabindex]=\"tabindex\"\n  [attr.accesskey]=\"shortcutkey\"\n  [(ngModel)]=\"modelByKey\"\n  [ngModelOptions]=\"{standalone: true}\"\n  [multiple]=\"multiple\"\n  (change)=\"onSelectValueChange($event)\"\n  (mousedown)=\"checkForFloatingLabel($event)\"\n  (blur)=\"invokeOnTouched($event); checkForFloatingLabel($event)\"\n  [attr.name]=\"name\"\n  [attr.aria-label]=\"arialabel\"\n  [autofocus]=\"autofocus\">\n\n  <option selected\n    value=\"undefined\"\n    [textContent]=\"placeholder\"\n    id=\"placeholderOption\"\n  [hidden]=\"!placeholder\"></option>\n\n  @if (groupby) {\n    @for (groupObj of groupedData; track groupObj) {\n      <optgroup\n        [label]=\"groupObj.key\">\n        @for (item of groupObj.data; track item) {\n          <option\n            [value]=\"item.key\"\n            [selected]=\"item.selected\"\n            [textContent]=\"item.label\"\n          ></option>\n        }\n      </optgroup>\n    }\n  }\n\n  @if (!groupby) {\n    @for (item of datasetItems; track item) {\n      <option\n        [value]=\"item.key\"\n        [selected]=\"item.selected\"\n        [textContent]=\"item.label\"\n      ></option>\n    }\n  }\n</select>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, ElementRef, Injector } from '@angular/core';
+import { DatasetAwareFormComponent } from '@wm/components/input/dataset-aware-form';
+
+declare class SelectComponent extends DatasetAwareFormComponent implements AfterViewInit, OnDestroy {
+    static initializeProps: void;
+    readonly: boolean;
+    placeholder: string;
+    navsearchbar: any;
+    class: any;
+    required: boolean;
+    disabled: boolean;
+    tabindex: any;
+    name: string;
+    autofocus: boolean;
+    hint: string;
+    arialabel: string;
+    shortcutkey: string;
+    selectEl: ElementRef;
+    set datasource(ds: any);
+    constructor(inj: Injector, explicitContext: any);
+    ngAfterViewInit(): void;
+    protected handleEvent(node: HTMLElement, eventName: string, eventCallback: Function, locals: any): void;
+    onSelectValueChange($event: any): void;
+    onPropertyChange(key: string, nv: any, ov?: any): void;
+    /**
+     * When caption floating is enabled and placeholder is given, do not show placeholder until user focuses on the field
+     * When focused add the placeholder to the option which is selected
+     * On blur, remove the placeholder and do not animate the label
+     * @param $event event received will be either a blur or focus event
+     */
+    checkForFloatingLabel($event: any): void;
+    private removePlaceholderOption;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, [null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "wm-select", never, {}, {}, never, never, true, never>;
+}
+
+export { SelectComponent };

package/components/input/select/package.json

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

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

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

@@ -0,0 +1,203 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@wm/components/base'), require('@angular/forms'), require('@angular/core'), require('@wm/components/input/base-form-custom'), require('@wm/core'), require('@angular/common')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@wm/components/base', '@angular/forms', '@angular/core', '@wm/components/input/base-form-custom', '@wm/core', '@angular/common'], 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.slider = {}), global.wm.components.base, global.ng.forms, global.ng.core, global.wm.components.input.baseFormCustom, global.wm.core, global.ng.common));
+})(this, (function (exports, base, i2, i0, baseFormCustom, i1, i3) { '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 i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+
+    const sliderProps = new Map([
+        ['class', base.PROP_STRING],
+        ['datavalue', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['hint', base.PROP_STRING],
+        ['arialabel', base.PROP_STRING],
+        ['maxvalue', base.PROP_NUMBER],
+        ['minvalue', base.PROP_NUMBER],
+        ['name', base.PROP_STRING],
+        ['readonly', base.PROP_BOOLEAN],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['step', base.PROP_NUMBER],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['showmarkers', { value: false, ...base.PROP_BOOLEAN }],
+        ['markerlabeltext', base.PROP_ANY],
+        ['showicons', base.PROP_BOOLEAN],
+        ['starticon', { value: 'wi wi-minus', ...base.PROP_STRING }],
+        ['endicon', { value: 'wi wi-plus', ...base.PROP_STRING }],
+        ['rangelabelposition', { value: 'bottom', ...base.PROP_STRING }],
+    ]);
+    const registerProps = () => {
+        base.register('wm-slider', sliderProps);
+        base.registerFormWidget(i1.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 baseFormCustom.BaseFormCustomComponent {
+        static { this.initializeProps = registerProps(); }
+        constructor(inj, explicitContext, app) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.app = app;
+            this.isPrism = false;
+            base.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') {
+                i1.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 = base.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SliderComponent, deps: [{ token: i0__namespace.Injector }, { token: 'EXPLICIT_CONTEXT', optional: true }, { token: i1__namespace.App }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SliderComponent, isStandalone: true, selector: "[wmSlider]", providers: [
+                base.provideAs(SliderComponent, i2.NG_VALUE_ACCESSOR, true),
+                base.provideAsWidgetRef(SliderComponent)
+            ], viewQueries: [{ propertyName: "ngModel", first: true, predicate: i2.NgModel, descendants: true }], usesInheritance: true, ngImport: i0__namespace, 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: 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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"] }, { kind: "ngmodule", type: i3.CommonModule }, { kind: "directive", type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: SliderComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [base.TextContentDirective, i2.FormsModule, i3.CommonModule], selector: '[wmSlider]', providers: [
+                            base.provideAs(SliderComponent, i2.NG_VALUE_ACCESSOR, true),
+                            base.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__namespace.Injector }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }, { type: i1__namespace.App }], propDecorators: { ngModel: [{
+                    type: i0.ViewChild,
+                    args: [i2.NgModel]
+                }] } });
+
+    exports.SliderComponent = SliderComponent;
+
+}));