carbon-components-angular 5.41.0 → 5.42.0

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

@@ -139,9 +139,12 @@ class TextArea {
     get isLightTheme() {
         return this.theme === "light";
     }
+    get getInvalidAttr() {
+        return this.invalid ? true : undefined;
+    }
 }
 TextArea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextArea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TextArea.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme" } }, ngImport: i0 });
+TextArea.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: { theme: "theme", invalid: "invalid", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--skeleton": "this.skeleton", "class.cds--text-area--light": "this.isLightTheme", "attr.data-invalid": "this.getInvalidAttr" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextArea, decorators: [{
             type: Directive,
             args: [{
@@ -165,6 +168,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], isLightTheme: [{
                 type: HostBinding,
                 args: ["class.cds--text-area--light"]
+            }], getInvalidAttr: [{
+                type: HostBinding,
+                args: ["attr.data-invalid"]
             }] } });
 
 class PasswordInput {
@@ -324,11 +330,21 @@ class TextareaLabelComponent {
           * Set to `true` to show a warning (contents set by warningText)
           */
         this.warn = false;
+        /**
+         * Experimental: enable fluid state
+         */
+        this.fluid = false;
         this.labelClass = true;
     }
     get isReadonly() {
         return this.wrapper?.nativeElement.querySelector("textarea")?.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`.
      */
@@ -364,117 +380,179 @@ class TextareaLabelComponent {
  */
 TextareaLabelComponent.labelCounter = 0;
 TextareaLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextareaLabelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TextareaLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", textAreaTemplate: "textAreaTemplate", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass", "class.cds--text-area__wrapper--readonly": "this.isReadonly" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextArea, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
-		<label
-			[for]="labelInputID"
-			[attr.aria-label]="ariaLabel"
-			class="cds--label"
-			[ngClass]="{
-				'cds--label--disabled': disabled,
-				'cds--skeleton': skeleton
-			}">
-			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
-			<ng-template #labelContent>
-				<ng-content></ng-content>
-			</ng-template>
-		</label>
-		<div
-			class="cds--text-area__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-area__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="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
-			<ng-template #textAreaContent>
-				<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></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>
+TextareaLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextareaLabelComponent, selector: "cds-textarea-label, ibm-textarea-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", labelTemplate: "labelTemplate", textAreaTemplate: "textAreaTemplate", 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-area__wrapper--readonly": "this.isReadonly", "class.cds--text-area--fluid": "this.fluidClass", "class.cds--text-area--fluid__skeleton": "this.fluidSkeletonClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextArea, descendants: true }], 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-area cds--skeleton"></div>
+		</ng-container>
+		<ng-container *ngIf="!skeleton">
+			<div class="cds--text-area__label-wrapper">
+				<label
+					[for]="labelInputID"
+					[attr.aria-label]="ariaLabel"
+					class="cds--label"
+					[ngClass]="{
+						'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>
+			<div
+				class="cds--text-area__wrapper"
+				[ngClass]="{
+					'cds--text-area__wrapper--warn': warn
+				}"
+				[attr.data-invalid]="(invalid ? true : null)"
+				#wrapper>
+				<svg
+					*ngIf="!fluid && invalid"
+					cdsIcon="warning--filled"
+					size="16"
+					class="cds--text-area__invalid-icon">
+				</svg>
+				<svg
+					*ngIf="!fluid && !invalid && warn"
+					cdsIcon="warning--alt--filled"
+					size="16"
+					class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
+				</svg>
+				<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
+				<ng-template #textAreaContent>
+					<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
+				</ng-template>
+
+				<ng-container *ngIf="fluid">
+					<hr class="cds--text-area__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>
+						<svg
+							cdsIcon="warning--filled"
+							size="16"
+							class="cds--text-area__invalid-icon">
+						</svg>
+					</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>
+						<svg
+							cdsIcon="warning--alt--filled"
+							size="16"
+							class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
+						</svg>
+					</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>
+		</ng-container>
 	`, 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: TextareaLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "cds-textarea-label, ibm-textarea-label",
                     template: `
-		<label
-			[for]="labelInputID"
-			[attr.aria-label]="ariaLabel"
-			class="cds--label"
-			[ngClass]="{
-				'cds--label--disabled': disabled,
-				'cds--skeleton': skeleton
-			}">
-			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
-			<ng-template #labelContent>
-				<ng-content></ng-content>
-			</ng-template>
-		</label>
-		<div
-			class="cds--text-area__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-area__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="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
-			<ng-template #textAreaContent>
-				<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></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>
+		<ng-container *ngIf="skeleton">
+			<span class="cds--label cds--skeleton"></span>
+			<div class="cds--text-area cds--skeleton"></div>
+		</ng-container>
+		<ng-container *ngIf="!skeleton">
+			<div class="cds--text-area__label-wrapper">
+				<label
+					[for]="labelInputID"
+					[attr.aria-label]="ariaLabel"
+					class="cds--label"
+					[ngClass]="{
+						'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>
+			<div
+				class="cds--text-area__wrapper"
+				[ngClass]="{
+					'cds--text-area__wrapper--warn': warn
+				}"
+				[attr.data-invalid]="(invalid ? true : null)"
+				#wrapper>
+				<svg
+					*ngIf="!fluid && invalid"
+					cdsIcon="warning--filled"
+					size="16"
+					class="cds--text-area__invalid-icon">
+				</svg>
+				<svg
+					*ngIf="!fluid && !invalid && warn"
+					cdsIcon="warning--alt--filled"
+					size="16"
+					class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
+				</svg>
+				<ng-template *ngIf="textAreaTemplate; else textAreaContent" [ngTemplateOutlet]="textAreaTemplate"></ng-template>
+				<ng-template #textAreaContent>
+					<ng-content select="[cdsTextArea],[ibmTextArea],textarea"></ng-content>
+				</ng-template>
+
+				<ng-container *ngIf="fluid">
+					<hr class="cds--text-area__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>
+						<svg
+							cdsIcon="warning--filled"
+							size="16"
+							class="cds--text-area__invalid-icon">
+						</svg>
+					</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>
+						<svg
+							cdsIcon="warning--alt--filled"
+							size="16"
+							class="cds--text-area__invalid-icon cds--text-area__invalid-icon--warning">
+						</svg>
+					</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>
+		</ng-container>
 	`
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { labelInputID: [{
@@ -499,6 +577,8 @@ 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 }]
@@ -511,6 +591,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], isReadonly: [{
                 type: HostBinding,
                 args: ["class.cds--text-area__wrapper--readonly"]
+            }], fluidClass: [{
+                type: HostBinding,
+                args: ["class.cds--text-area--fluid"]
+            }], fluidSkeletonClass: [{
+                type: HostBinding,
+                args: ["class.cds--text-area--fluid__skeleton"]
             }] } });
 
 /**
@@ -1271,7 +1357,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"] }, { 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"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Label, decorators: [{
             type: Component,
             args: [{