@baloise/ds-core 16.5.0 → 16.5.1

package/dist/collection/collection-manifest.json

@@ -248,20 +248,20 @@
     },
     {
       "components": [
-        "bal-heading",
-        "bal-text"
+        "bal-segment",
+        "bal-segment-item"
       ]
     },
     {
       "components": [
-        "bal-carousel",
-        "bal-carousel-item"
+        "bal-heading",
+        "bal-text"
       ]
     },
     {
       "components": [
-        "bal-popover",
-        "bal-popover-content"
+        "bal-carousel",
+        "bal-carousel-item"
       ]
     },
     {
@@ -306,13 +306,6 @@
         "bal-option-list"
       ]
     },
-    {
-      "components": [
-        "bal-hint",
-        "bal-hint-text",
-        "bal-hint-title"
-      ]
-    },
     {
       "components": [
         "bal-modal",
@@ -352,6 +345,15 @@
         "bal-navbar-menu-start"
       ]
     },
+    {
+      "components": [
+        "bal-hint",
+        "bal-hint-text",
+        "bal-hint-title",
+        "bal-popover",
+        "bal-popover-content"
+      ]
+    },
     {
       "components": [
         "bal-field",

package/dist/collection/components/bal-field/bal-field.js

@@ -22,6 +22,7 @@ export class Field {
             'bal-input-slider',
             'bal-file-upload',
             'bal-dropdown',
+            'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -111,6 +112,8 @@ export class Field {
             'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
+            'bal-field-control bal-segment-item',
+            'bal-field-control bal-segment',
             'bal-field-control bal-checkbox-group',
             'bal-field-control bal-radio-group',
             'bal-field-control bal-number-input',

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.js

@@ -1,13 +1,15 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { inheritAttributes } from "../../../utils/attributes";
 import { addEventListener, raf, removeEventListener } from "../../../utils/helpers";
-let ids = 0;
+import { defaultBalAriaForm } from "../../../utils/form";
+let SegmentItemIds = 0;
 export class SegmentItem {
     constructor() {
         this.segmentEl = null;
         this.inheritedAttributes = {};
-        this.id = ids++;
+        this.internalId = SegmentItemIds++;
+        this.inputId = `bal-si-${this.internalId}`;
         this.updateVertical = (ev) => {
             this.isVertical = ev.detail;
         };
@@ -15,7 +17,7 @@ export class SegmentItem {
             const { segmentEl } = this;
             if (segmentEl) {
                 if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
-                    const items = this.items;
+                    const items = this.allAvailableOptions;
                     if (items.length > 0) {
                         const first = items[0];
                         this.isFocusable = first === this.el;
@@ -28,6 +30,9 @@ export class SegmentItem {
                 if (segmentEl.disabled) {
                     this.disabled = true;
                 }
+                this.isLast = segmentEl.lastElementChild === this.el;
+                this.isFirst = segmentEl.firstElementChild === this.el;
+                this.calculateEmptyValue();
             }
         };
         this.onSlottedItemsChange = () => {
@@ -41,23 +46,35 @@ export class SegmentItem {
         this.hasSlotContent = false;
         this.isFocusable = false;
         this.isVertical = false;
+        this.isLast = false;
+        this.isFirst = false;
+        this.hasEmptyValue = true;
+        this.ariaForm = defaultBalAriaForm;
         this.disabled = false;
         this.invalid = false;
         this.focused = false;
         this.checked = false;
         this.label = '';
-        this.value = 'bal-si-' + this.id;
+        this.value = 'bal-si-' + this.internalId;
     }
-    valueChanged() {
-        this.updateState();
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.updateState();
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
     }
-    connectedCallback() {
+    componentDidLoad() {
         const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
         if (segmentEl) {
-            this.updateState();
             addEventListener(segmentEl, 'balSelect', this.updateState);
             addEventListener(segmentEl, 'balVertical', this.updateVertical);
         }
+        raf(() => {
+            this.checkSlotContent();
+            this.updateState();
+        });
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -67,11 +84,14 @@ export class SegmentItem {
             this.segmentEl = null;
         }
     }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
-    }
-    componentDidLoad() {
-        raf(() => this.checkSlotContent());
+    calculateEmptyValue() {
+        if (this.segmentEl) {
+            const segments = Array.from(this.segmentEl.querySelectorAll('bal-segment-item'));
+            this.hasEmptyValue = !segments.some(item => item.value === this.segmentEl.value);
+        }
+        else {
+            this.hasEmptyValue = false;
+        }
     }
     /**
      * @internal
@@ -84,54 +104,47 @@ export class SegmentItem {
             nativeEl.focus();
         }
     }
-    get items() {
-        return this.allItems.filter(item => !item.disabled);
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    get allAvailableOptions() {
+        return this.allOptions.filter(item => !item.disabled);
     }
-    get allItems() {
+    get allOptions() {
         const { segmentEl } = this;
         if (segmentEl) {
             return Array.from(segmentEl.querySelectorAll('bal-segment-item'));
         }
         return [];
     }
-    isFirst() {
-        const { segmentEl } = this;
-        let items = this.items;
-        if (segmentEl && segmentEl.disabled) {
-            items = this.allItems;
-        }
-        if (items.length > 0) {
-            const first = items[0];
-            return first === this.el;
-        }
-        return false;
-    }
-    isLast() {
-        const { segmentEl } = this;
-        let items = this.items;
-        if (segmentEl && segmentEl.disabled) {
-            items = this.allItems;
-        }
-        if (items.length > 0) {
-            const last = items[items.length - 1];
-            return last === this.el;
-        }
-        return false;
-    }
     checkSlotContent() {
         const slot = this.el.querySelector('[part="slot"]');
         const children = slot ? slot.innerHTML.trim() : '';
         this.hasSlotContent = children.length > 0;
     }
     render() {
-        const { checked, focused, segmentEl, label, isFocusable } = this;
+        const { checked, focused, segmentEl, label, isFocusable, isFirst, hasEmptyValue } = this;
         const block = BEM.block('segment-item');
         const buttonBem = block.element('button');
         const indicatorBem = block.element('indicator');
         const invalid = this.invalid || (segmentEl && segmentEl.invalid);
         const disabled = this.disabled || (segmentEl && segmentEl.disabled);
         const vertical = this.isVertical;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('line').class(!this.isFirst() && !checked)), block.modifier('last').class(this.isLast() && !checked)) }, h("button", Object.assign({ role: "radio", "aria-checked": checked ? 'true' : 'false', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), "aria-labelledby": `bal-si-${this.id}-label`, type: 'button', tabIndex: isFocusable ? 0 : -1, part: "native", onBlur: ev => this.balBlur.emit(ev), disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { space: "x-small", layout: 'horizontal' }, h("bal-content", { space: "none" }, h("bal-label", { htmlId: `bal-si-${this.id}-label` }, label), h("span", { part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { onSlotchange: this.onSlottedItemsChange }))))), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+        const hasTabindex = (hasEmptyValue && isFirst) || (isFocusable && !disabled);
+        const id = (hasTabindex && this.ariaForm.controlId) || this.inputId;
+        let buttonAttributes = {};
+        if (hasTabindex) {
+            let labelId = this.ariaForm.labelId || null;
+            labelId = `${labelId || ''} ${id}-lbl`.trim();
+            buttonAttributes = {
+                'aria-labelledby': labelId,
+                'aria-describedby': this.ariaForm.messageId,
+            };
+        }
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { space: "x-small", layout: 'horizontal' }, h("bal-content", { space: "none" }, h("bal-label", { htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { onSlotchange: this.onSlottedItemsChange }))))), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
     }
     static get is() { return "bal-segment-item"; }
     static get originalStyleUrls() {
@@ -244,7 +257,7 @@ export class SegmentItem {
             },
             "value": {
                 "type": "any",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "SegmentValue",
                     "resolved": "number | string",
@@ -264,7 +277,7 @@ export class SegmentItem {
                 },
                 "attribute": "value",
                 "reflect": false,
-                "defaultValue": "'bal-si-' + this.id"
+                "defaultValue": "'bal-si-' + this.internalId"
             }
         };
     }
@@ -272,32 +285,13 @@ export class SegmentItem {
         return {
             "hasSlotContent": {},
             "isFocusable": {},
-            "isVertical": {}
+            "isVertical": {},
+            "isLast": {},
+            "isFirst": {},
+            "hasEmptyValue": {},
+            "ariaForm": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "balBlur",
-                "name": "balBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the component was touched"
-                },
-                "complexType": {
-                    "original": "BalEvents.BalSegmentBlurDetail",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "BalEvents": {
-                            "location": "global",
-                            "id": "global::BalEvents"
-                        }
-                    }
-                }
-            }];
-    }
     static get methods() {
         return {
             "setFocus": {
@@ -319,6 +313,35 @@ export class SegmentItem {
                             "text": "Focuses the native <button> element\ninside of ion-segment-button."
                         }]
                 }
+            },
+            "setAriaForm": {
+                "complexType": {
+                    "signature": "(ariaForm: BalAriaForm) => Promise<void>",
+                    "parameters": [{
+                            "name": "ariaForm",
+                            "type": "BalAriaForm",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalAriaForm": {
+                            "location": "import",
+                            "path": "../../../utils/form",
+                            "id": "src/utils/form.ts::BalAriaForm"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }

package/dist/collection/components/bal-segment/bal-segment.js

@@ -8,11 +8,18 @@ import { FOCUS_KEYS } from "../../utils/focus-visible";
 import { ListenToWindowResize } from "../../utils/resize";
 import { raf } from "../../utils/helpers";
 import { ListenToBreakpoints } from "../../utils/breakpoints";
+import { ListenToFocus } from "../../utils/focus";
+import { defaultBalAriaForm } from "../../utils/form";
 export class Segment {
     constructor() {
+        /**
+         * LISTENERS
+         * ------------------------------------------------------
+         */
+        this.hasFocus = false;
         this.getSegmentItem = (selector) => {
             var _a, _b;
-            const items = this.items.filter(item => !item.disabled);
+            const items = this.allItems.filter(item => !item.disabled);
             const currIndex = items.findIndex(item => item === document.activeElement.closest('bal-segment-item'));
             switch (selector) {
                 case 'current':
@@ -77,6 +84,7 @@ export class Segment {
         this.isVertical = false;
         this.isMobile = false;
         this.maxWidth = 0;
+        this.ariaForm = defaultBalAriaForm;
         this.invalid = false;
         this.disabled = false;
         this.vertical = false;
@@ -87,6 +95,9 @@ export class Segment {
     createLogger(log) {
         this.log = log;
     }
+    disabledChanged() {
+        this.allItems.map(item => (item.disabled = this.disabled));
+    }
     valueChanged(value) {
         /**
          * `balSelect` is emitted every time the value changes (internal or external changes).
@@ -101,6 +112,7 @@ export class Segment {
     connectedCallback() {
         this.el.addEventListener('touchstart', this.onPointerDown);
         this.el.addEventListener('mousedown', this.onPointerDown);
+        this.disabledChanged();
     }
     disconnectedCallback() {
         this.el.removeEventListener('touchstart', this.onPointerDown);
@@ -110,10 +122,12 @@ export class Segment {
         this.setCheckedClasses();
         this.defineWidth();
     }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
+    focusInListener(ev) {
+        this.balFocus.emit(ev);
+    }
+    focusOutListener(ev) {
+        this.balBlur.emit(ev);
+    }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
     }
@@ -135,9 +149,8 @@ export class Segment {
             this.emitVerticalChange(true);
         }
     }
-    listenOnBalBlur(ev) {
-        stopEventBubbling(ev);
-        this.balBlur.emit(ev.detail);
+    listenOnKeyDownOutside() {
+        this.keyboardMode = true;
     }
     listenOnKeyDown(ev) {
         this.keyboardMode = FOCUS_KEYS.includes(ev.key);
@@ -145,6 +158,7 @@ export class Segment {
         if (isSpaceKey(ev)) {
             stopEventBubbling(ev);
             current = this.getSegmentItem('current');
+            this.value = current.value;
         }
         else if (isArrowUpKey(ev) || isArrowLeftKey(ev)) {
             stopEventBubbling(ev);
@@ -174,15 +188,25 @@ export class Segment {
             current.setFocus();
         }
     }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
      */
-    get items() {
+    get allItems() {
         return Array.from(this.el.querySelectorAll('bal-segment-item'));
     }
     get checked() {
-        return this.items.find(item => item.value === this.value);
+        return this.allItems.find(item => item.value === this.value);
     }
     /**
      * PRIVATE METHODS
@@ -207,8 +231,11 @@ export class Segment {
         });
     }
     getIndicator(item) {
-        const root = item.shadowRoot || item;
-        return root.querySelector('.bal-segment-item__indicator');
+        if (item) {
+            const root = item.shadowRoot || item;
+            return root.querySelector('.bal-segment-item__indicator');
+        }
+        return null;
     }
     checkButton(previous, current) {
         const previousIndicator = this.getIndicator(previous);
@@ -245,7 +272,7 @@ export class Segment {
         this.setCheckedClasses();
     }
     setCheckedClasses() {
-        const items = this.items;
+        const items = this.allItems;
         const index = items.findIndex(item => item.value === this.value);
         const next = index + 1;
         const previous = index - 1;
@@ -265,9 +292,9 @@ export class Segment {
      * ------------------------------------------------------
      */
     render() {
-        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile } = this;
+        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { role: "radiogroup", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {
@@ -402,11 +429,32 @@ export class Segment {
             "keyboardMode": {},
             "isVertical": {},
             "isMobile": {},
-            "maxWidth": {}
+            "maxWidth": {},
+            "ariaForm": {}
         };
     }
     static get events() {
         return [{
+                "method": "balFocus",
+                "name": "balFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle has focus."
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }, {
                 "method": "balBlur",
                 "name": "balBlur",
                 "bubbles": true,
@@ -494,18 +542,54 @@ export class Segment {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setAriaForm": {
+                "complexType": {
+                    "signature": "(ariaForm: BalAriaForm) => Promise<void>",
+                    "parameters": [{
+                            "name": "ariaForm",
+                            "type": "BalAriaForm",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalAriaForm": {
+                            "location": "import",
+                            "path": "../../utils/form",
+                            "id": "src/utils/form.ts::BalAriaForm"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];
     }
     static get listeners() {
         return [{
-                "name": "balBlur",
-                "method": "listenOnBalBlur",
-                "target": undefined,
+                "name": "keydown",
+                "method": "listenOnKeyDownOutside",
+                "target": "document",
                 "capture": false,
                 "passive": false
             }, {
@@ -523,6 +607,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "createLogger", null);
+__decorate([
+    ListenToFocus(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [FocusEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "focusInListener", null);
+__decorate([
+    ListenToFocus(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [FocusEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "focusOutListener", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.5.0';
+export const VERSION = '16.5.1';

package/dist/collection/utils/form-input.js

@@ -72,3 +72,16 @@ export const inputHandleChange = (component) => {
         component.balChange.emit(component.value);
     }
 };
+export const isEmptyValue = (value) => {
+    return (value === '' ||
+        value === undefined ||
+        value === null ||
+        (Array.isArray(value) && !value.length) ||
+        (typeof value === 'number' && isNaN(value)));
+};
+export const parseValue = (value) => {
+    return isEmptyValue(value) ? undefined : value;
+};
+export const hasValueChanged = (oldValue, newValue) => {
+    return parseValue(oldValue) !== parseValue(newValue);
+};

package/dist/collection/utils/form-input.spec.js

@@ -0,0 +1,30 @@
+import { isEmptyValue, parseValue, hasValueChanged } from "./form-input";
+describe('form input', () => {
+    describe('isEmptyValue', () => {
+        test('should check if value is empty', () => {
+            expect(isEmptyValue('')).toBeTruthy;
+            expect(isEmptyValue(undefined)).toBeTruthy;
+            expect(isEmptyValue(null)).toBeTruthy;
+            expect(isEmptyValue([])).toBeTruthy;
+            expect(isEmptyValue('01')).toBeFalsy;
+        });
+    });
+    describe('parseValue', () => {
+        test('should return undefined if value is considered as empty', () => {
+            expect(parseValue('')).toBe(undefined);
+            expect(parseValue(undefined)).toBe(undefined);
+            expect(parseValue(null)).toBe(undefined);
+            expect(parseValue([])).toBe(undefined);
+            expect(parseValue('01')).toBe('01');
+        });
+    });
+    describe('hasValueChanged', () => {
+        test('should return true if values are not equal', () => {
+            expect(hasValueChanged('', undefined)).toBeFalsy();
+            expect(hasValueChanged(null, undefined)).toBeFalsy();
+            expect(hasValueChanged(undefined, undefined)).toBeFalsy();
+            expect(hasValueChanged([], undefined)).toBeFalsy();
+            expect(hasValueChanged('01', undefined)).toBeTruthy();
+        });
+    });
+});

package/dist/collection/utils/mask/context/mask-context.js

@@ -1,4 +1,5 @@
 import { MaskPosition } from "./mask-position";
+import { hasValueChanged } from "../../form-input";
 export class MaskContext {
     constructor(_options) {
         this._options = _options;
@@ -49,8 +50,7 @@ export class MaskContext {
                     this._options.component.balInput.emit(this.value);
                 }
                 if ((eventType === 'change' || eventType === 'blur') && parsedValue !== undefined) {
-                    const valueChanged = this._options.component.value !== parsedValue;
-                    if (valueChanged) {
+                    if (hasValueChanged(this._options.component.value, parsedValue)) {
                         this._options.component.value = parsedValue;
                         this._options.component.balChange.emit(parsedValue);
                     }