carbon-components-angular 5.72.1 → 5.72.3

package/fesm2020/carbon-components-angular-dropdown.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { Directive, Input, Output, Injectable, EventEmitter, TemplateRef, Component, HostBinding, ContentChild, ViewChild, HostListener, ViewChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { Subscription, of, fromEvent, isObservable, Observable } from 'rxjs';
+import { isUndefined, isNull } from 'lodash-es';
 import * as i2 from 'carbon-components-angular/utils';
 import { closestAttr, hasScrollableParents, getScrollableParents, UtilsModule } from 'carbon-components-angular/utils';
 import * as i1$1 from 'carbon-components-angular/i18n';
@@ -347,6 +348,10 @@ class Dropdown {
          * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.
          */
         this.selectedLabel = this.i18n.get().DROPDOWN.SELECTED;
+        /**
+         * Set to `true` to allow null values in the dropdown ListItems.
+         */
+        this.allowNullValues = false;
         /**
          * Emits selection events.
          */
@@ -384,6 +389,7 @@ class Dropdown {
         this._isFocused = false;
         // primarily used to capture and propagate input to `writeValue` before the content is available
         this._writtenValue = [];
+        this._isUsingNgControl = false;
         /**
          * function passed in by `registerOnChange`
          */
@@ -395,6 +401,9 @@ class Dropdown {
     get fluidFocusClass() {
         return this.fluid && this._isFocused && this.menuIsClosed;
     }
+    get hasDecorator() {
+        return !!this.decorator;
+    }
     get writtenValue() {
         return this._writtenValue;
     }
@@ -404,9 +413,6 @@ class Dropdown {
         }
         this._writtenValue = val;
     }
-    get hasDecorator() {
-        return !!this.decorator;
-    }
     /**
      * Updates the `type` property in the `@ContentChild`.
      * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.
@@ -423,37 +429,34 @@ class Dropdown {
         if (!this.view) {
             return;
         }
-        if ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === "number") {
-            this.writeValue(this.writtenValue);
-        }
         this.view.type = this.type;
         this.view.size = this.size;
         // function to check if the event is organic (isUpdate === false) or programmatic
         const isUpdate = event => event && event.isUpdate;
-        this.view.select.subscribe(event => {
+        this.selectionSubscription = this.view.select.subscribe(event => {
             if (this.type === "single" && !isUpdate(event) && !Array.isArray(event)) {
                 this.closeMenu();
                 if (event.item && event.item.selected) {
                     if (this.itemValueKey) {
-                        this.propagateChange(event.item[this.itemValueKey]);
+                        this._propagateChange(event.item[this.itemValueKey]);
                     }
                     else {
-                        this.propagateChange(event.item);
+                        this._propagateChange(event.item);
                     }
                 }
                 else {
-                    this.propagateChange(null);
+                    this._propagateChange(null);
                 }
             }
             if (this.type === "multi" && !isUpdate(event)) {
                 // if we have a `value` selector and selected items map them appropriately
                 if (this.itemValueKey && this.view.getSelected()) {
                     const values = this.view.getSelected().map(item => item[this.itemValueKey]);
-                    this.propagateChange(values);
+                    this._propagateChange(values);
                     // otherwise just pass up the values from `getSelected`
                 }
                 else {
-                    this.propagateChange(this.view.getSelected());
+                    this._propagateChange(this.view.getSelected());
                 }
             }
             // only emit selected for "organic" selections
@@ -461,6 +464,9 @@ class Dropdown {
                 this.checkForReorder();
                 this.selected.emit(event);
             }
+            else if (this._isUsingNgControl) {
+                this.writeValue(this.writtenValue);
+            }
         });
     }
     ngAfterViewInit() {
@@ -484,6 +490,8 @@ class Dropdown {
         if (!this.appendInline) {
             this._appendToDropdown();
         }
+        this.visibilitySubscription?.unsubscribe();
+        this.selectionSubscription?.unsubscribe();
     }
     /**
      * Propagates the injected `value`.
@@ -492,8 +500,8 @@ class Dropdown {
         // cache the written value so we can use it in `AfterContentInit`
         this.writtenValue = value;
         this.view.onItemsReady(() => {
-            // propagate null/falsey as an array (deselect everything)
-            if (!value) {
+            // propagate null/undefined as an array (deselect everything) unless `allowNullValues` is true
+            if (isUndefined(value) || (isNull(value) && !this.allowNullValues)) {
                 this.view.propagateSelected([value]);
             }
             else if (this.type === "single") {
@@ -524,7 +532,7 @@ class Dropdown {
                 }
                 else {
                     // we can safely assume we're passing an array of `ListItem`s
-                    this.view.propagateSelected(value);
+                    this.view.propagateSelected(value || [value]);
                 }
             }
             this.checkForReorder();
@@ -534,6 +542,7 @@ class Dropdown {
         this.onTouchedCallback();
     }
     registerOnChange(fn) {
+        this._isUsingNgControl = true;
         this.propagateChange = fn;
     }
     /**
@@ -659,7 +668,7 @@ class Dropdown {
             item.selected = false;
         }
         this.selected.emit([]);
-        this.propagateChange([]);
+        this._propagateChange([]);
     }
     /**
      * Returns `true` if there is a value selected.
@@ -838,10 +847,15 @@ class Dropdown {
             this.view.reorderSelected();
         }
     }
+    // used only to update writtenValue
+    _propagateChange(value) {
+        this.writtenValue = value;
+        this.propagateChange(value);
+    }
 }
 Dropdown.dropdownCount = 0;
 Dropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i1$1.I18n }, { token: DropdownService }, { token: i2.ElementService }], target: i0.ɵɵFactoryTarget.Component });
-Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: { id: "id", label: "label", hideLabel: "hideLabel", helperText: "helperText", decorator: "decorator", placeholder: "placeholder", displayValue: "displayValue", clearText: "clearText", size: "size", type: "type", theme: "theme", disabled: "disabled", readonly: "readonly", skeleton: "skeleton", inline: "inline", disableArrowKeys: "disableArrowKeys", invalid: "invalid", invalidText: "invalidText", warn: "warn", warnText: "warnText", appendInline: "appendInline", scrollableContainer: "scrollableContainer", itemValueKey: "itemValueKey", selectionFeedback: "selectionFeedback", menuButtonLabel: "menuButtonLabel", selectedLabel: "selectedLabel", dropUp: "dropUp", fluid: "fluid" }, outputs: { selected: "selected", onClose: "onClose", close: "close" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.cds--list-box__wrapper--fluid--invalid": "this.fluidInvalidClass", "class.cds--list-box__wrapper--fluid--focus": "this.fluidFocusClass", "class.cds--dropdown__wrapper": "this.hostClass", "class.cds--list-box__wrapper": "this.hostWrapperClass", "class.cds--list-box__wrapper--decorator": "this.hasDecorator", "class.cds--list-box__wrapper--fluid": "this.fluid" } }, providers: [
+Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: { id: "id", label: "label", hideLabel: "hideLabel", helperText: "helperText", decorator: "decorator", placeholder: "placeholder", displayValue: "displayValue", clearText: "clearText", size: "size", type: "type", theme: "theme", disabled: "disabled", readonly: "readonly", skeleton: "skeleton", inline: "inline", disableArrowKeys: "disableArrowKeys", invalid: "invalid", invalidText: "invalidText", warn: "warn", warnText: "warnText", appendInline: "appendInline", scrollableContainer: "scrollableContainer", itemValueKey: "itemValueKey", selectionFeedback: "selectionFeedback", menuButtonLabel: "menuButtonLabel", selectedLabel: "selectedLabel", dropUp: "dropUp", allowNullValues: "allowNullValues", fluid: "fluid" }, outputs: { selected: "selected", onClose: "onClose", close: "close" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.cds--list-box__wrapper--fluid--invalid": "this.fluidInvalidClass", "class.cds--list-box__wrapper--fluid--focus": "this.fluidFocusClass", "class.cds--list-box__wrapper--decorator": "this.hasDecorator", "class.cds--dropdown__wrapper": "this.hostClass", "class.cds--list-box__wrapper": "this.hostWrapperClass", "class.cds--list-box__wrapper--fluid": "this.fluid" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: Dropdown,
@@ -1121,6 +1135,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], fluidFocusClass: [{
                 type: HostBinding,
                 args: ["class.cds--list-box__wrapper--fluid--focus"]
+            }], hasDecorator: [{
+                type: HostBinding,
+                args: ["class.cds--list-box__wrapper--decorator"]
             }], id: [{
                 type: Input
             }], label: [{
@@ -1175,6 +1192,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], dropUp: [{
                 type: Input
+            }], allowNullValues: [{
+                type: Input
             }], selected: [{
                 type: Output
             }], onClose: [{
@@ -1196,9 +1215,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], hostWrapperClass: [{
                 type: HostBinding,
                 args: ["class.cds--list-box__wrapper"]
-            }], hasDecorator: [{
-                type: HostBinding,
-                args: ["class.cds--list-box__wrapper--decorator"]
             }], fluid: [{
                 type: HostBinding,
                 args: ["class.cds--list-box__wrapper--fluid"]