carbon-components-angular 6.0.0-rc.1 → 6.0.0-rc.2

package/fesm2022/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';
@@ -260,6 +260,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
  */
 class Dropdown {
     static { this.dropdownCount = 0; }
+    get fluidInvalidClass() {
+        return this.invalid && this.fluid;
+    }
+    get fluidFocusClass() {
+        return this.fluid && this._isFocused && this.menuIsClosed;
+    }
     get writtenValue() {
         return this._writtenValue;
     }
@@ -370,6 +376,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).
          */
@@ -386,6 +397,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 = [];
         /**
@@ -809,6 +821,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
      */
@@ -819,7 +837,7 @@ class Dropdown {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i1$1.I18n }, { token: DropdownService }, { token: i2.ElementService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", 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,
@@ -840,7 +858,7 @@ class Dropdown {
 	<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',
@@ -854,8 +872,11 @@ class Dropdown {
 			'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"
@@ -867,7 +888,8 @@ class Dropdown {
 			[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()"
@@ -896,18 +918,6 @@ class Dropdown {
 				[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"
@@ -918,6 +928,18 @@ class Dropdown {
 				</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]="{
@@ -926,8 +948,9 @@ class Dropdown {
 			<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: "18.2.12", ngImpo
 	<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: "18.2.12", ngImpo
 			'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: "18.2.12", ngImpo
 			[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: "18.2.12", ngImpo
 				[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: "18.2.12", ngImpo
 				</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: "18.2.12", ngImpo
 			<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: "18.2.12", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.I18n }, { type: DropdownService }, { type: i2.ElementService }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ 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: "18.2.12", ngImpo
             }], 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"]]