carbon-components-angular 5.49.0 → 5.51.0

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

@@ -61,9 +61,12 @@ class TextInput {
     get isLightTheme() {
         return this.theme === "light";
     }
+    get getInvalidAttribute() {
+        return this.invalid ? true : undefined;
+    }
 }
 TextInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextInput, selector: "[cdsText], [ibmText]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme" } }, ngImport: i0 });
+TextInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextInput, selector: "[cdsText], [ibmText]", inputs: { theme: "theme", size: "size", invalid: "invalid", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-input": "this.inputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "class.cds--text-input--light": "this.isLightTheme", "attr.data-invalid": "this.getInvalidAttribute" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, decorators: [{
             type: Directive,
             args: [{
@@ -101,7 +104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], warn: [{
                 type: HostBinding,
-                args: ["class.cds--text-input__field-wrapper--warning"]
+                args: ["class.cds--text-input--warning"]
             }, {
                 type: Input
             }], skeleton: [{
@@ -112,6 +115,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], isLightTheme: [{
                 type: HostBinding,
                 args: ["class.cds--text-input--light"]
+            }], getInvalidAttribute: [{
+                type: HostBinding,
+                args: ["attr.data-invalid"]
             }] } });
 
 /**
@@ -226,12 +232,15 @@ class PasswordInput {
     get isLightTheme() {
         return this.theme === "light";
     }
+    get getInvalidAttribute() {
+        return this.invalid ? true : undefined;
+    }
     ngAfterViewInit() {
         this.renderer.setAttribute(this.elementRef.nativeElement, "type", this._type);
     }
 }
 PasswordInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-PasswordInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PasswordInput, selector: "[cdsPassword], [ibmPassword]", inputs: { type: "type", invalid: "invalid", warn: "warn", skeleton: "skeleton", theme: "theme", size: "size" }, host: { properties: { "class.cds--password-input": "this.passwordInputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--light": "this.isLightTheme", "class.cds--text-input": "this.inputClass", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input__field-wrapper--warning": "this.warn", "class.cds--skeleton": "this.skeleton" } }, ngImport: i0 });
+PasswordInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PasswordInput, selector: "[cdsPassword], [ibmPassword]", inputs: { type: "type", invalid: "invalid", warn: "warn", skeleton: "skeleton", theme: "theme", size: "size" }, host: { properties: { "class.cds--password-input": "this.passwordInputClass", "class.cds--text-input--sm": "this.isSizeSm", "class.cds--text-input--md": "this.isSizeMd", "class.cds--text-input--lg": "this.isSizelg", "class.cds--layout--size-sm": "this.sizeSm", "class.cds--layout--size-md": "this.sizeMd", "class.cds--layout--size-lg": "this.sizelg", "class.cds--text-input--light": "this.isLightTheme", "class.cds--text-input": "this.inputClass", "class.cds--text-input--invalid": "this.invalid", "class.cds--text-input--warning": "this.warn", "class.cds--skeleton": "this.skeleton", "attr.data-invalid": "this.getInvalidAttribute" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInput, decorators: [{
             type: Directive,
             args: [{
@@ -273,7 +282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], warn: [{
                 type: HostBinding,
-                args: ["class.cds--text-input__field-wrapper--warning"]
+                args: ["class.cds--text-input--warning"]
             }, {
                 type: Input
             }], skeleton: [{
@@ -285,6 +294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], size: [{
                 type: Input
+            }], getInvalidAttribute: [{
+                type: HostBinding,
+                args: ["attr.data-invalid"]
             }] } });
 
 /**
@@ -642,11 +654,22 @@ class TextInputLabelComponent {
           * Set to `true` to show a warning (contents set by warningText)
           */
         this.warn = false;
+        /**
+         * Experimental: enable fluid state
+         */
+        this.fluid = false;
         this.labelClass = true;
+        this.textInputWrapper = true;
     }
     get isReadonly() {
         return this.wrapper?.nativeElement.querySelector("input")?.readOnly ?? false;
     }
+    get fluidClass() {
+        return this.fluid && !this.skeleton;
+    }
+    get fluidSkeletonClass() {
+        return this.fluid && this.skeleton;
+    }
     /**
      * Sets the id on the input item associated with the `Label`.
      */
@@ -682,58 +705,78 @@ class TextInputLabelComponent {
  */
 TextInputLabelComponent.labelCounter = 0;
 TextInputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInputLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TextInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", textInputTemplate: "textInputTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--text-input-wrapper--readonly": "this.isReadonly" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
+TextInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", textInputTemplate: "textInputTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel", fluid: "fluid" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--text-input-wrapper": "this.textInputWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly", "class.cds--text-input--fluid": "this.fluidClass", "class.cds--text-input--fluid__skeleton": "this.fluidSkeletonClass" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
+		<ng-container *ngIf="skeleton">
+			<span class="cds--label cds--skeleton"></span>
+			<div class="cds--text-input cds--skeleton"></div>
+		</ng-container>
 		<label
+			*ngIf="!skeleton"
 			[for]="labelInputID"
 			[attr.aria-label]="ariaLabel"
 			class="cds--label"
 			[ngClass]="{
-				'cds--label--disabled': disabled,
-				'cds--skeleton': skeleton
+				'cds--label--disabled': disabled
 			}">
 			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
 			<ng-template #labelContent>
 				<ng-content></ng-content>
 			</ng-template>
 		</label>
-		<div
-			class="cds--text-input__field-wrapper"
-			[ngClass]="{
-				'cds--text-input__field-wrapper--warning': warn
-			}"
-			[attr.data-invalid]="(invalid ? true : null)"
-			#wrapper>
-			<svg
-				*ngIf="invalid"
-				cdsIcon="warning--filled"
-				size="16"
-				class="cds--text-input__invalid-icon">
-			</svg>
-			<svg
-				*ngIf="!invalid && warn"
-				cdsIcon="warning--alt--filled"
-				size="16"
-				class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
-			</svg>
-			<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
-			<ng-template #textInputContent>
-				<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
-			</ng-template>
-		</div>
-		<div
-			*ngIf="!skeleton && helperText && !invalid && !warn"
-			class="cds--form__helper-text"
-			[ngClass]="{'cds--form__helper-text--disabled': disabled}">
-			<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
-			<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
-		</div>
-		<div *ngIf="invalid" class="cds--form-requirement">
-			<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
-			<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
-		</div>
-		<div *ngIf="!invalid && warn" class="cds--form-requirement">
-			<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
-			<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+		<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
+			<div
+				class="cds--text-input__field-wrapper"
+				[ngClass]="{
+					'cds--text-input__field-wrapper--warning': warn
+				}"
+				[attr.data-invalid]="(invalid ? true : null)"
+				#wrapper>
+				<svg
+					*ngIf="invalid && !warn"
+					cdsIcon="warning--filled"
+					size="16"
+					class="cds--text-input__invalid-icon">
+				</svg>
+				<svg
+					*ngIf="!invalid && warn"
+					cdsIcon="warning--alt--filled"
+					size="16"
+					class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
+				</svg>
+				<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
+				<ng-template #textInputContent>
+					<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
+				</ng-template>
+
+				<ng-container *ngIf="fluid">
+					<hr class="cds--text-input__divider" />
+					<div *ngIf="invalid" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+					<div *ngIf="!invalid && warn" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
+			</div>
+			<ng-container *ngIf="!fluid">
+				<div
+					*ngIf="helperText && !invalid && !warn"
+					class="cds--form__helper-text"
+					[ngClass]="{'cds--form__helper-text--disabled': disabled}">
+					<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+				</div>
+				<div *ngIf="invalid" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				</div>
+				<div *ngIf="!invalid && warn" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+					<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+				</div>
+			</ng-container>
 		</div>
 	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInputLabelComponent, decorators: [{
@@ -741,57 +784,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{
                     selector: "cds-text-label, ibm-text-label",
                     template: `
+		<ng-container *ngIf="skeleton">
+			<span class="cds--label cds--skeleton"></span>
+			<div class="cds--text-input cds--skeleton"></div>
+		</ng-container>
 		<label
+			*ngIf="!skeleton"
 			[for]="labelInputID"
 			[attr.aria-label]="ariaLabel"
 			class="cds--label"
 			[ngClass]="{
-				'cds--label--disabled': disabled,
-				'cds--skeleton': skeleton
+				'cds--label--disabled': disabled
 			}">
 			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
 			<ng-template #labelContent>
 				<ng-content></ng-content>
 			</ng-template>
 		</label>
-		<div
-			class="cds--text-input__field-wrapper"
-			[ngClass]="{
-				'cds--text-input__field-wrapper--warning': warn
-			}"
-			[attr.data-invalid]="(invalid ? true : null)"
-			#wrapper>
-			<svg
-				*ngIf="invalid"
-				cdsIcon="warning--filled"
-				size="16"
-				class="cds--text-input__invalid-icon">
-			</svg>
-			<svg
-				*ngIf="!invalid && warn"
-				cdsIcon="warning--alt--filled"
-				size="16"
-				class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
-			</svg>
-			<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
-			<ng-template #textInputContent>
-				<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
-			</ng-template>
-		</div>
-		<div
-			*ngIf="!skeleton && helperText && !invalid && !warn"
-			class="cds--form__helper-text"
-			[ngClass]="{'cds--form__helper-text--disabled': disabled}">
-			<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
-			<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
-		</div>
-		<div *ngIf="invalid" class="cds--form-requirement">
-			<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
-			<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
-		</div>
-		<div *ngIf="!invalid && warn" class="cds--form-requirement">
-			<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
-			<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+		<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
+			<div
+				class="cds--text-input__field-wrapper"
+				[ngClass]="{
+					'cds--text-input__field-wrapper--warning': warn
+				}"
+				[attr.data-invalid]="(invalid ? true : null)"
+				#wrapper>
+				<svg
+					*ngIf="invalid && !warn"
+					cdsIcon="warning--filled"
+					size="16"
+					class="cds--text-input__invalid-icon">
+				</svg>
+				<svg
+					*ngIf="!invalid && warn"
+					cdsIcon="warning--alt--filled"
+					size="16"
+					class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
+				</svg>
+				<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
+				<ng-template #textInputContent>
+					<ng-content select="[cdsText],[ibmText],input[type=text],div"></ng-content>
+				</ng-template>
+
+				<ng-container *ngIf="fluid">
+					<hr class="cds--text-input__divider" />
+					<div *ngIf="invalid" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+					<div *ngIf="!invalid && warn" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
+			</div>
+			<ng-container *ngIf="!fluid">
+				<div
+					*ngIf="helperText && !invalid && !warn"
+					class="cds--form__helper-text"
+					[ngClass]="{'cds--form__helper-text--disabled': disabled}">
+					<ng-container *ngIf="!isTemplate(helperText)">{{helperText}}</ng-container>
+					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+				</div>
+				<div *ngIf="invalid" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(invalidText)">{{invalidText}}</ng-container>
+					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				</div>
+				<div *ngIf="!invalid && warn" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(warnText)">{{warnText}}</ng-container>
+					<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+				</div>
+			</ng-container>
 		</div>
 	`
                 }]
@@ -817,15 +880,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], ariaLabel: [{
                 type: Input
+            }], fluid: [{
+                type: Input
             }], wrapper: [{
                 type: ViewChild,
                 args: ["wrapper", { static: false }]
             }], labelClass: [{
                 type: HostBinding,
                 args: ["class.cds--form-item"]
+            }], textInputWrapper: [{
+                type: HostBinding,
+                args: ["class.cds--text-input-wrapper"]
             }], isReadonly: [{
                 type: HostBinding,
                 args: ["class.cds--text-input-wrapper--readonly"]
+            }], fluidClass: [{
+                type: HostBinding,
+                args: ["class.cds--text-input--fluid"]
+            }], fluidSkeletonClass: [{
+                type: HostBinding,
+                args: ["class.cds--text-input--fluid__skeleton"]
             }] } });
 
 /**
@@ -891,6 +965,10 @@ class PasswordInputLabelComponent extends BaseIconButton {
          * Tooltip text for showing password.
          */
         this.showPasswordLabel = "Show password";
+        /**
+         * Experimental: enable fluid state
+         */
+        this.fluid = false;
         /**
          * Binding for applying class to host element.
          */
@@ -901,6 +979,12 @@ class PasswordInputLabelComponent extends BaseIconButton {
     get isReadonly() {
         return this.wrapper?.nativeElement.querySelector("input")?.readOnly ?? false;
     }
+    get fluidClass() {
+        return this.fluid && !this.skeleton;
+    }
+    get fluidSkeletonClass() {
+        return this.fluid && this.skeleton;
+    }
     /**
      * Lifecycle hook called after the view has been initialized to set the ID of the input element
      */
@@ -939,14 +1023,18 @@ class PasswordInputLabelComponent extends BaseIconButton {
  */
 PasswordInputLabelComponent.labelCounter = 0;
 PasswordInputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInputLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PasswordInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PasswordInputLabelComponent, selector: "cds-password-label, ibm-password-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", passwordInputTemplate: "passwordInputTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel", hidePasswordLabel: "hidePasswordLabel", showPasswordLabel: "showPasswordLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--password-input-wrapper": "this.passwordInputWrapper", "class.cds--text-input-wrapper": "this.textInputWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly" } }, queries: [{ propertyName: "textInput", first: true, predicate: PasswordInput, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+PasswordInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PasswordInputLabelComponent, selector: "cds-password-label, ibm-password-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", passwordInputTemplate: "passwordInputTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel", hidePasswordLabel: "hidePasswordLabel", showPasswordLabel: "showPasswordLabel", fluid: "fluid" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--password-input-wrapper": "this.passwordInputWrapper", "class.cds--text-input-wrapper": "this.textInputWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly", "class.cds--text-input--fluid": "this.fluidClass", "class.cds--text-input--fluid__skeleton": "this.fluidSkeletonClass" } }, queries: [{ propertyName: "textInput", first: true, predicate: PasswordInput, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+		<ng-container *ngIf="skeleton">
+			<span class="cds--label cds--skeleton"></span>
+			<div class="cds--text-input cds--skeleton"></div>
+		</ng-container>
 		<label
+			*ngIf="!skeleton"
 			[for]="labelInputID"
 			[attr.aria-label]="ariaLabel"
 			class="cds--label"
 			[ngClass]="{
-				'cds--label--disabled': disabled,
-				'cds--skeleton': skeleton
+				'cds--label--disabled': disabled
 			}">
 			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
 			<ng-template #labelContent>
@@ -954,7 +1042,7 @@ PasswordInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
 			</ng-template>
 		</label>
 
-		<div class="cds--text-input__field-outer-wrapper">
+		<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
 			<div
 			class="cds--text-input__field-wrapper"
 			[ngClass]="{
@@ -999,24 +1087,38 @@ PasswordInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
 							</button>
 						</div>
 				</cds-tooltip>
-			</div>
-			<div
-				*ngIf="!skeleton && helperText && !invalid && !warn"
-				class="cds--form__helper-text"
-				[ngClass]="{ 'cds--form__helper-text--disabled': disabled }">
-				<ng-container *ngIf="!isTemplate(helperText)">{{ helperText }}</ng-container>
-				<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
-			</div>
 
-			<div *ngIf="!warn && invalid" class="cds--form-requirement">
-				<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
-				<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				<ng-container *ngIf="fluid">
+					<hr class="cds--text-input__divider" />
+					<div *ngIf="!warn && invalid" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+					<div *ngIf="!invalid && warn" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
 			</div>
+			<ng-container *ngIf="!fluid">
+				<div
+					*ngIf="!skeleton && helperText && !invalid && !warn"
+					class="cds--form__helper-text"
+					[ngClass]="{ 'cds--form__helper-text--disabled': disabled }">
+					<ng-container *ngIf="!isTemplate(helperText)">{{ helperText }}</ng-container>
+					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+				</div>
 
-			<div *ngIf="!invalid && warn" class="cds--form-requirement">
-				<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
-				<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
-			</div>
+				<div *ngIf="!warn && invalid" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				</div>
+
+				<div *ngIf="!invalid && warn" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
+					<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+				</div>
+			</ng-container>
 		</div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PasswordInputLabelComponent, decorators: [{
@@ -1024,13 +1126,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{
                     selector: "cds-password-label, ibm-password-label",
                     template: `
+		<ng-container *ngIf="skeleton">
+			<span class="cds--label cds--skeleton"></span>
+			<div class="cds--text-input cds--skeleton"></div>
+		</ng-container>
 		<label
+			*ngIf="!skeleton"
 			[for]="labelInputID"
 			[attr.aria-label]="ariaLabel"
 			class="cds--label"
 			[ngClass]="{
-				'cds--label--disabled': disabled,
-				'cds--skeleton': skeleton
+				'cds--label--disabled': disabled
 			}">
 			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
 			<ng-template #labelContent>
@@ -1038,7 +1144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 			</ng-template>
 		</label>
 
-		<div class="cds--text-input__field-outer-wrapper">
+		<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">
 			<div
 			class="cds--text-input__field-wrapper"
 			[ngClass]="{
@@ -1083,24 +1189,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 							</button>
 						</div>
 				</cds-tooltip>
-			</div>
-			<div
-				*ngIf="!skeleton && helperText && !invalid && !warn"
-				class="cds--form__helper-text"
-				[ngClass]="{ 'cds--form__helper-text--disabled': disabled }">
-				<ng-container *ngIf="!isTemplate(helperText)">{{ helperText }}</ng-container>
-				<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
-			</div>
 
-			<div *ngIf="!warn && invalid" class="cds--form-requirement">
-				<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
-				<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				<ng-container *ngIf="fluid">
+					<hr class="cds--text-input__divider" />
+					<div *ngIf="!warn && invalid" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+						<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+					</div>
+					<div *ngIf="!invalid && warn" class="cds--form-requirement">
+						<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
+						<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+					</div>
+				</ng-container>
 			</div>
+			<ng-container *ngIf="!fluid">
+				<div
+					*ngIf="!skeleton && helperText && !invalid && !warn"
+					class="cds--form__helper-text"
+					[ngClass]="{ 'cds--form__helper-text--disabled': disabled }">
+					<ng-container *ngIf="!isTemplate(helperText)">{{ helperText }}</ng-container>
+					<ng-template *ngIf="isTemplate(helperText)" [ngTemplateOutlet]="helperText"></ng-template>
+				</div>
 
-			<div *ngIf="!invalid && warn" class="cds--form-requirement">
-				<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
-				<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
-			</div>
+				<div *ngIf="!warn && invalid" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(invalidText)">{{ invalidText }}</ng-container>
+					<ng-template *ngIf="isTemplate(invalidText)" [ngTemplateOutlet]="invalidText"></ng-template>
+				</div>
+
+				<div *ngIf="!invalid && warn" class="cds--form-requirement">
+					<ng-container *ngIf="!isTemplate(warnText)">{{ warnText }}</ng-container>
+					<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
+				</div>
+			</ng-container>
 		</div>
     `
                 }]
@@ -1133,6 +1253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], showPasswordLabel: [{
                 type: Input
+            }], fluid: [{
+                type: Input
             }], wrapper: [{
                 type: ViewChild,
                 args: ["wrapper", { static: true }]
@@ -1148,6 +1270,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], isReadonly: [{
                 type: HostBinding,
                 args: ["class.cds--text-input-wrapper--readonly"]
+            }], fluidClass: [{
+                type: HostBinding,
+                args: ["class.cds--text-input--fluid"]
+            }], fluidSkeletonClass: [{
+                type: HostBinding,
+                args: ["class.cds--text-input--fluid__skeleton"]
             }] } });
 
 /**
@@ -1357,7 +1485,7 @@ Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0
 				<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
 			</div>
 		</ng-template>
-	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textAreaTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "component", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: PasswordInputLabelComponent, selector: "cds-password-label, ibm-password-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "passwordInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "hidePasswordLabel", "showPasswordLabel"] }] });
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textAreaTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "component", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "component", type: PasswordInputLabelComponent, selector: "cds-password-label, ibm-password-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "passwordInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "hidePasswordLabel", "showPasswordLabel", "fluid"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Label, decorators: [{
             type: Component,
             args: [{