carbon-components-angular 5.54.1 → 5.56.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Output, Injectable, EventEmitter, TemplateRef, Component, ContentChild, ViewChild, HostBinding, HostListener, ViewChildren, NgModule } 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 * as i2 from 'carbon-components-angular/utils';
@@ -360,6 +360,11 @@ class Dropdown {
          */
         this.close = new EventEmitter();
         this.hostClass = true;
+        this.hostWrapperClass = true;
+        /**
+         * Experimental: enable fluid state
+         */
+        this.fluid = false;
         /**
          * Set to `true` if the dropdown is closed (not expanded).
          */
@@ -376,6 +381,7 @@ class Dropdown {
         this.keyboardNav = this._keyboardNav.bind(this);
         this.visibilitySubscription = new Subscription();
         this.onTouchedCallback = this._noop;
+        this._isFocused = false;
         // primarily used to capture and propagate input to `writeValue` before the content is available
         this._writtenValue = [];
         /**
@@ -383,6 +389,12 @@ class Dropdown {
          */
         this.propagateChange = (_) => { };
     }
+    get fluidInvalidClass() {
+        return this.invalid && this.fluid;
+    }
+    get fluidFocusClass() {
+        return this.fluid && this._isFocused && this.menuIsClosed;
+    }
     get writtenValue() {
         return this._writtenValue;
     }
@@ -808,6 +820,12 @@ class Dropdown {
     isTemplate(value) {
         return value instanceof TemplateRef;
     }
+    handleFocus(event) {
+        this._isFocused = event.type === "focus";
+        if (event.type === "blur") {
+            this.onBlur();
+        }
+    }
     /**
      * Controls when it's needed to apply the selection feedback
      */
@@ -820,7 +838,7 @@ class Dropdown {
 }
 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", 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" }, outputs: { selected: "selected", onClose: "onClose", close: "close" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.cds--dropdown__wrapper": "this.hostClass" } }, 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", 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--fluid": "this.fluid" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: Dropdown,
@@ -841,7 +859,7 @@ Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 	<div
 		class="cds--list-box"
 		[ngClass]="{
-			'cds--dropdown': type !== 'multi',
+			'cds--dropdown': type !== 'multi' && !(skeleton && fluid),
 			'cds--multiselect': type === 'multi',
 			'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,
 			'cds--dropdown--light': theme === 'light',
@@ -855,8 +873,11 @@ Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 			'cds--dropdown--sm cds--list-box--sm': size === 'sm',
 			'cds--dropdown--md cds--list-box--md': size === 'md',
 			'cds--dropdown--lg cds--list-box--lg': size === 'lg',
-			'cds--list-box--expanded': !menuIsClosed
-		}">
+			'cds--list-box--expanded': !menuIsClosed,
+			'cds--list-box--invalid': invalid
+		}"
+		[attr.data-invalid]="invalid ? true : null">
+		<div *ngIf="skeleton && fluid" class="cds--list-box__label"></div>
 		<button
 			#dropdownButton
 			[id]="id"
@@ -868,7 +889,8 @@ Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 			[attr.aria-readonly]="readonly"
 			aria-haspopup="listbox"
 			(click)="disabled || readonly ? $event.stopPropagation() : toggleMenu()"
-			(blur)="onBlur()"
+			(focus)="fluid ? handleFocus($event) : null"
+			(blur)="fluid ? handleFocus($event) : onBlur()"
 			[attr.disabled]="disabled ? true : null">
 			<div
 				(click)="clearSelected()"
@@ -897,18 +919,6 @@ Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 				[ngTemplateOutletContext]="getRenderTemplateContext()"
 				[ngTemplateOutlet]="displayValue">
 			</ng-template>
-			<svg
-				*ngIf="invalid"
-				class="cds--dropdown__invalid-icon"
-				cdsIcon="warning--filled"
-				size="16">
-			</svg>
-			<svg
-				*ngIf="!invalid && warn"
-				cdsIcon="warning--alt--filled"
-				size="16"
-				class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">
-			</svg>
 			<span class="cds--list-box__menu-icon">
 				<svg
 					*ngIf="!skeleton"
@@ -919,6 +929,18 @@ Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 				</svg>
 			</span>
 		</button>
+		<svg
+			*ngIf="invalid"
+			class="cds--list-box__invalid-icon"
+			cdsIcon="warning--filled"
+			size="16">
+		</svg>
+		<svg
+			*ngIf="!invalid && warn"
+			cdsIcon="warning--alt--filled"
+			size="16"
+			class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">
+		</svg>
 		<div
 			#dropdownMenu
 			[ngClass]="{
@@ -927,8 +949,9 @@ Dropdown.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 			<ng-content *ngIf="!menuIsClosed"></ng-content>
 		</div>
 	</div>
+	<hr *ngIf="fluid" class="cds--list-box__divider" />
 	<div
-		*ngIf="helperText && !invalid && !warn && !skeleton"
+		*ngIf="helperText && !invalid && !warn && !skeleton && !fluid"
 		class="cds--form__helper-text"
 		[ngClass]="{
 			'cds--form__helper-text--disabled': disabled
@@ -964,7 +987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 	<div
 		class="cds--list-box"
 		[ngClass]="{
-			'cds--dropdown': type !== 'multi',
+			'cds--dropdown': type !== 'multi' && !(skeleton && fluid),
 			'cds--multiselect': type === 'multi',
 			'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,
 			'cds--dropdown--light': theme === 'light',
@@ -978,8 +1001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 			'cds--dropdown--sm cds--list-box--sm': size === 'sm',
 			'cds--dropdown--md cds--list-box--md': size === 'md',
 			'cds--dropdown--lg cds--list-box--lg': size === 'lg',
-			'cds--list-box--expanded': !menuIsClosed
-		}">
+			'cds--list-box--expanded': !menuIsClosed,
+			'cds--list-box--invalid': invalid
+		}"
+		[attr.data-invalid]="invalid ? true : null">
+		<div *ngIf="skeleton && fluid" class="cds--list-box__label"></div>
 		<button
 			#dropdownButton
 			[id]="id"
@@ -991,7 +1017,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 			[attr.aria-readonly]="readonly"
 			aria-haspopup="listbox"
 			(click)="disabled || readonly ? $event.stopPropagation() : toggleMenu()"
-			(blur)="onBlur()"
+			(focus)="fluid ? handleFocus($event) : null"
+			(blur)="fluid ? handleFocus($event) : onBlur()"
 			[attr.disabled]="disabled ? true : null">
 			<div
 				(click)="clearSelected()"
@@ -1020,18 +1047,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 				[ngTemplateOutletContext]="getRenderTemplateContext()"
 				[ngTemplateOutlet]="displayValue">
 			</ng-template>
-			<svg
-				*ngIf="invalid"
-				class="cds--dropdown__invalid-icon"
-				cdsIcon="warning--filled"
-				size="16">
-			</svg>
-			<svg
-				*ngIf="!invalid && warn"
-				cdsIcon="warning--alt--filled"
-				size="16"
-				class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">
-			</svg>
 			<span class="cds--list-box__menu-icon">
 				<svg
 					*ngIf="!skeleton"
@@ -1042,6 +1057,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 				</svg>
 			</span>
 		</button>
+		<svg
+			*ngIf="invalid"
+			class="cds--list-box__invalid-icon"
+			cdsIcon="warning--filled"
+			size="16">
+		</svg>
+		<svg
+			*ngIf="!invalid && warn"
+			cdsIcon="warning--alt--filled"
+			size="16"
+			class="cds--list-box__invalid-icon cds--list-box__invalid-icon--warning">
+		</svg>
 		<div
 			#dropdownMenu
 			[ngClass]="{
@@ -1050,8 +1077,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 			<ng-content *ngIf="!menuIsClosed"></ng-content>
 		</div>
 	</div>
+	<hr *ngIf="fluid" class="cds--list-box__divider" />
 	<div
-		*ngIf="helperText && !invalid && !warn && !skeleton"
+		*ngIf="helperText && !invalid && !warn && !skeleton && !fluid"
 		class="cds--form__helper-text"
 		[ngClass]="{
 			'cds--form__helper-text--disabled': disabled
@@ -1076,7 +1104,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.I18n }, { type: DropdownService }, { type: i2.ElementService }]; }, propDecorators: { id: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.I18n }, { type: DropdownService }, { type: i2.ElementService }]; }, propDecorators: { fluidInvalidClass: [{
+                type: HostBinding,
+                args: ["class.cds--list-box__wrapper--fluid--invalid"]
+            }], fluidFocusClass: [{
+                type: HostBinding,
+                args: ["class.cds--list-box__wrapper--fluid--focus"]
+            }], id: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1146,6 +1180,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], hostClass: [{
                 type: HostBinding,
                 args: ["class.cds--dropdown__wrapper"]
+            }], hostWrapperClass: [{
+                type: HostBinding,
+                args: ["class.cds--list-box__wrapper"]
+            }], fluid: [{
+                type: HostBinding,
+                args: ["class.cds--list-box__wrapper--fluid"]
+            }, {
+                type: Input
             }], onKeyDown: [{
                 type: HostListener,
                 args: ["keydown", ["$event"]]