carbon-components-angular 5.8.1 → 5.9.1

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

@@ -142,49 +142,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ["class.cds--text-area--light"]
             }] } });
 
-/**
- * [See demo](../../?path=/story/components-input--label)
- *
- * ```html
- * <cds-label labelState="success">
- * 	<label label>Field with success</label>
- * 	<input type="text" class="input-field">
- * </cds-label>
- *
- * <cds-label labelState="warning">
- * 	<label label>Field with warning</label>
- * 	<input type="text" class="input-field">
- * </cds-label>
- *
- * <cds-label labelState="error">
- * 	<label label>Field with error</label>
- * 	<input type="text" class="input-field">
- * </cds-label>
- * ```
- */
-class Label {
+class TextareaLabelComponent {
     /**
      * Creates an instance of Label.
      */
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
-        /**
-         * The class of the wrapper
-         */
-        this.wrapperClass = "cds--text-input__field-wrapper";
         /**
          * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
          * its input counterpart through the 'for' attribute.
         */
-        this.labelInputID = `cds-label-${Label.labelCounter++}`;
+        this.labelInputID = "ibm-textarea-" + TextareaLabelComponent.labelCounter;
         /**
-         * Set to `true` for disabled state.
+         * Set to `true` for a disabled label.
          */
         this.disabled = false;
-        /**
-         * State of the `Label` will determine the styles applied.
-         */
-        this.labelState = "";
         /**
          * Set to `true` for a loading label.
          */
@@ -200,20 +172,222 @@ class Label {
         this.labelClass = true;
     }
     /**
-     * Update wrapper class if a textarea is hosted.
+     * Sets the id on the input item associated with the `Label`.
      */
-    ngAfterContentInit() {
-        if (this.textArea) {
-            this.wrapperClass = "cds--text-area__wrapper";
+    ngAfterViewInit() {
+        if (this.wrapper) {
+            // Prioritize setting id to `textarea` over div
+            const inputElement = this.wrapper.nativeElement.querySelector("textarea");
+            if (inputElement) {
+                // avoid overriding ids already set by the user reuse it instead
+                if (inputElement.id) {
+                    this.labelInputID = inputElement.id;
+                    this.changeDetectorRef.detectChanges();
+                }
+                inputElement.setAttribute("id", this.labelInputID);
+                return;
+            }
+            const divElement = this.wrapper.nativeElement.querySelector("div");
+            if (divElement) {
+                if (divElement.id) {
+                    this.labelInputID = divElement.id;
+                    this.changeDetectorRef.detectChanges();
+                }
+                divElement.setAttribute("id", this.labelInputID);
+            }
         }
     }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+}
+/**
+ * Used to build the id of the input item associated with the `Label`.
+ */
+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" } }, 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="!warn && invalid"
+				ibmIcon="warning--filled"
+				size="16"
+				class="cds--text-area__invalid-icon">
+			</svg>
+			<svg
+				*ngIf="!invalid && warn"
+				ibmIcon="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="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="!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>
+	`, 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="!warn && invalid"
+				ibmIcon="warning--filled"
+				size="16"
+				class="cds--text-area__invalid-icon">
+			</svg>
+			<svg
+				*ngIf="!invalid && warn"
+				ibmIcon="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="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="!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>
+	`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { labelInputID: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], skeleton: [{
+                type: Input
+            }], labelTemplate: [{
+                type: Input
+            }], textAreaTemplate: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], invalidText: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], warn: [{
+                type: Input
+            }], warnText: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], wrapper: [{
+                type: ViewChild,
+                args: ["wrapper", { static: false }]
+            }], textArea: [{
+                type: ContentChild,
+                args: [TextArea, { static: false }]
+            }], labelClass: [{
+                type: HostBinding,
+                args: ["class.cds--form-item"]
+            }] } });
+
+class TextInputLabelComponent {
+    /**
+     * Creates an instance of Label.
+     */
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        /**
+         * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
+         * its input counterpart through the 'for' attribute.
+        */
+        this.labelInputID = "ibm-text-input-" + TextInputLabelComponent.labelCounter++;
+        /**
+         * Set to `true` for a disabled label.
+         */
+        this.disabled = false;
+        /**
+         * Set to `true` for a loading label.
+         */
+        this.skeleton = false;
+        /**
+         * Set to `true` for an invalid label component.
+         */
+        this.invalid = false;
+        /**
+          * Set to `true` to show a warning (contents set by warningText)
+          */
+        this.warn = false;
+        this.labelClass = true;
+    }
     /**
      * Sets the id on the input item associated with the `Label`.
      */
     ngAfterViewInit() {
         if (this.wrapper) {
-            // Prioritize setting id to `input` & `textarea` over div
-            const inputElement = this.wrapper.nativeElement.querySelector("input,textarea");
+            // Prioritize setting id to `input` over div
+            const inputElement = this.wrapper.nativeElement.querySelector("input");
             if (inputElement) {
                 // avoid overriding ids already set by the user reuse it instead
                 if (inputElement.id) {
@@ -240,21 +414,24 @@ class Label {
 /**
  * Used to build the id of the input item associated with the `Label`.
  */
-Label.labelCounter = 0;
-Label.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Label, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Label, selector: "cds-label, ibm-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", labelState: "labelState", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextArea, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
+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" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
 		<label
 			[for]="labelInputID"
 			[attr.aria-label]="ariaLabel"
 			class="cds--label"
 			[ngClass]="{
-				'cds--skeleton': skeleton,
-				'cds--label--disabled': disabled && !skeleton
+				'cds--label--disabled': disabled,
+				'cds--skeleton': skeleton
 			}">
-			<ng-content></ng-content>
+			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
+			<ng-template #labelContent>
+				<ng-content></ng-content>
+			</ng-template>
 		</label>
 		<div
-			[class]="wrapperClass"
+			class="cds--text-input__field-wrapper"
 			[ngClass]="{
 				'cds--text-input__field-wrapper--warning': warn
 			}"
@@ -262,27 +439,25 @@ Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0
 			#wrapper>
 			<svg
 				*ngIf="!warn && invalid"
-				cdsIcon="warning--filled"
+				ibmIcon="warning--filled"
 				size="16"
-				[ngClass]="{
-					'cds--text-input__invalid-icon': !textArea,
-					'cds--text-area__invalid-icon': textArea
-				}">
+				class="cds--text-input__invalid-icon">
 			</svg>
 			<svg
 				*ngIf="!invalid && warn"
-				cdsIcon="warning--alt--filled"
+				ibmIcon="warning--alt--filled"
 				size="16"
 				class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
 			</svg>
-			<ng-content select="input,textarea,div"></ng-content>
+			<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
+			<ng-template #textInputContent>
+				<ng-content select="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
-			}">
+			[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>
@@ -295,23 +470,26 @@ Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0
 			<ng-template *ngIf="isTemplate(warnText)" [ngTemplateOutlet]="warnText"></ng-template>
 		</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: Label, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInputLabelComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "cds-label, ibm-label",
+                    selector: "cds-text-label, ibm-text-label",
                     template: `
 		<label
 			[for]="labelInputID"
 			[attr.aria-label]="ariaLabel"
 			class="cds--label"
 			[ngClass]="{
-				'cds--skeleton': skeleton,
-				'cds--label--disabled': disabled && !skeleton
+				'cds--label--disabled': disabled,
+				'cds--skeleton': skeleton
 			}">
-			<ng-content></ng-content>
+			<ng-template *ngIf="labelTemplate; else labelContent" [ngTemplateOutlet]="labelTemplate"></ng-template>
+			<ng-template #labelContent>
+				<ng-content></ng-content>
+			</ng-template>
 		</label>
 		<div
-			[class]="wrapperClass"
+			class="cds--text-input__field-wrapper"
 			[ngClass]="{
 				'cds--text-input__field-wrapper--warning': warn
 			}"
@@ -319,27 +497,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 			#wrapper>
 			<svg
 				*ngIf="!warn && invalid"
-				cdsIcon="warning--filled"
+				ibmIcon="warning--filled"
 				size="16"
-				[ngClass]="{
-					'cds--text-input__invalid-icon': !textArea,
-					'cds--text-area__invalid-icon': textArea
-				}">
+				class="cds--text-input__invalid-icon">
 			</svg>
 			<svg
 				*ngIf="!invalid && warn"
-				cdsIcon="warning--alt--filled"
+				ibmIcon="warning--alt--filled"
 				size="16"
 				class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
 			</svg>
-			<ng-content select="input,textarea,div"></ng-content>
+			<ng-template *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>
+			<ng-template #textInputContent>
+				<ng-content select="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
-			}">
+			[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>
@@ -357,7 +533,318 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
-            }], labelState: [{
+            }], skeleton: [{
+                type: Input
+            }], labelTemplate: [{
+                type: Input
+            }], textInputTemplate: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], invalidText: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], warn: [{
+                type: Input
+            }], warnText: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], wrapper: [{
+                type: ViewChild,
+                args: ["wrapper", { static: false }]
+            }], labelClass: [{
+                type: HostBinding,
+                args: ["class.cds--form-item"]
+            }] } });
+
+/**
+ * [See demo](../../?path=/story/components-input--label)
+ *
+ * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components
+ *
+ * ```html
+ * <cds-label>
+ * 	Label
+ * 	<input cdsText type="text" class="input-field">
+ * </cds-label>
+ * ```
+ */
+class Label {
+    /**
+     * Creates an instance of Label.
+     */
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        /**
+         * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with
+         * its input counterpart through the 'for' attribute.
+        */
+        this.labelInputID = `cds-label-${Label.labelCounter++}`;
+        /**
+         * Set to `true` for disabled state.
+         */
+        this.disabled = false;
+        /**
+         * Set to `true` for a loading label.
+         */
+        this.skeleton = false;
+        /**
+         * Set to `true` for an invalid label component.
+         */
+        this.invalid = false;
+        /**
+          * Set to `true` to show a warning (contents set by warningText)
+          */
+        this.warn = false;
+    }
+    get labelClass() {
+        return this.type === undefined;
+    }
+    /**
+     * Update wrapper class if a textarea is hosted.
+     */
+    ngAfterContentInit() {
+        if (this.textArea) {
+            this.type = "TextArea";
+        }
+        else if (this.textInput) {
+            this.type = "TextInput";
+        }
+    }
+    /**
+     * Sets the id on the input item associated with the `Label`.
+     */
+    ngAfterViewInit() {
+        // Will only be called when `default` template is being used
+        if (this.wrapper) {
+            // Prioritize setting id to `input` & `textarea` over div
+            const inputElement = this.wrapper.nativeElement.querySelector("input,textarea");
+            if (inputElement) {
+                // avoid overriding ids already set by the user reuse it instead
+                if (inputElement.id) {
+                    this.labelInputID = inputElement.id;
+                    this.changeDetectorRef.detectChanges();
+                }
+                inputElement.setAttribute("id", this.labelInputID);
+                return;
+            }
+            const divElement = this.wrapper.nativeElement.querySelector("div");
+            if (divElement) {
+                if (divElement.id) {
+                    this.labelInputID = divElement.id;
+                    this.changeDetectorRef.detectChanges();
+                }
+                divElement.setAttribute("id", this.labelInputID);
+            }
+        }
+    }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+}
+/**
+ * Used to build the id of the input item associated with the `Label`.
+ */
+Label.labelCounter = 0;
+Label.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Label, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+Label.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Label, selector: "cds-label, ibm-label", inputs: { labelInputID: "labelInputID", disabled: "disabled", skeleton: "skeleton", helperText: "helperText", invalidText: "invalidText", invalid: "invalid", warn: "warn", warnText: "warnText", ariaLabel: "ariaLabel" }, host: { properties: { "class.cds--form-item": "this.labelClass" } }, queries: [{ propertyName: "textArea", first: true, predicate: TextArea, descendants: true }, { propertyName: "textInput", first: true, predicate: TextInput, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], ngImport: i0, template: `
+		<ng-template #inputContentTemplate>
+			<ng-content select="input,textarea,div"></ng-content>
+		</ng-template>
+
+		<ng-template #labelContentTemplate>
+			<ng-content></ng-content>
+		</ng-template>
+
+		<ng-container [ngSwitch]="type">
+			<ng-container *ngSwitchCase="'TextArea'">
+				<cds-textarea-label
+					[labelInputID]="labelInputID"
+					[disabled]="disabled"
+					[skeleton]="skeleton"
+					[helperText]="helperText"
+					[invalid]="invalid"
+					[invalidText]="invalidText"
+					[warn]="warn"
+					[warnText]="warnText"
+					[ariaLabel]="ariaLabel"
+					[labelTemplate]="labelContentTemplate"
+					[textAreaTemplate]="inputContentTemplate">
+				</cds-textarea-label>
+			</ng-container>
+			<ng-container *ngSwitchCase="'TextInput'">
+				<cds-text-label
+					[labelInputID]="labelInputID"
+					[disabled]="disabled"
+					[skeleton]="skeleton"
+					[helperText]="helperText"
+					[invalid]="invalid"
+					[invalidText]="invalidText"
+					[warn]="warn"
+					[warnText]="warnText"
+					[ariaLabel]="ariaLabel"
+					[labelTemplate]="labelContentTemplate"
+					[textInputTemplate]="inputContentTemplate">
+				</cds-text-label>
+			</ng-container>
+			<ng-container *ngSwitchDefault>
+				<ng-template [ngTemplateOutlet]="default"></ng-template>
+			</ng-container>
+		</ng-container>
+
+		<ng-template #default>
+			<label
+				[for]="labelInputID"
+				[attr.aria-label]="ariaLabel"
+				class="cds--label"
+				[ngClass]="{
+					'cds--label--disabled': disabled,
+					'cds--skeleton': skeleton
+				}">
+				<ng-template [ngTemplateOutlet]="labelContentTemplate"></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="!warn && invalid"
+					ibmIcon="warning--filled"
+					size="16"
+					class="cds--text-input__invalid-icon">
+				</svg>
+				<svg
+					*ngIf="!invalid && warn"
+					ibmIcon="warning--alt--filled"
+					size="16"
+					class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
+				</svg>
+				<ng-template [ngTemplateOutlet]="inputContentTemplate"></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="!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-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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Label, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "cds-label, ibm-label",
+                    template: `
+		<ng-template #inputContentTemplate>
+			<ng-content select="input,textarea,div"></ng-content>
+		</ng-template>
+
+		<ng-template #labelContentTemplate>
+			<ng-content></ng-content>
+		</ng-template>
+
+		<ng-container [ngSwitch]="type">
+			<ng-container *ngSwitchCase="'TextArea'">
+				<cds-textarea-label
+					[labelInputID]="labelInputID"
+					[disabled]="disabled"
+					[skeleton]="skeleton"
+					[helperText]="helperText"
+					[invalid]="invalid"
+					[invalidText]="invalidText"
+					[warn]="warn"
+					[warnText]="warnText"
+					[ariaLabel]="ariaLabel"
+					[labelTemplate]="labelContentTemplate"
+					[textAreaTemplate]="inputContentTemplate">
+				</cds-textarea-label>
+			</ng-container>
+			<ng-container *ngSwitchCase="'TextInput'">
+				<cds-text-label
+					[labelInputID]="labelInputID"
+					[disabled]="disabled"
+					[skeleton]="skeleton"
+					[helperText]="helperText"
+					[invalid]="invalid"
+					[invalidText]="invalidText"
+					[warn]="warn"
+					[warnText]="warnText"
+					[ariaLabel]="ariaLabel"
+					[labelTemplate]="labelContentTemplate"
+					[textInputTemplate]="inputContentTemplate">
+				</cds-text-label>
+			</ng-container>
+			<ng-container *ngSwitchDefault>
+				<ng-template [ngTemplateOutlet]="default"></ng-template>
+			</ng-container>
+		</ng-container>
+
+		<ng-template #default>
+			<label
+				[for]="labelInputID"
+				[attr.aria-label]="ariaLabel"
+				class="cds--label"
+				[ngClass]="{
+					'cds--label--disabled': disabled,
+					'cds--skeleton': skeleton
+				}">
+				<ng-template [ngTemplateOutlet]="labelContentTemplate"></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="!warn && invalid"
+					ibmIcon="warning--filled"
+					size="16"
+					class="cds--text-input__invalid-icon">
+				</svg>
+				<svg
+					*ngIf="!invalid && warn"
+					ibmIcon="warning--alt--filled"
+					size="16"
+					class="cds--text-input__invalid-icon cds--text-input__invalid-icon--warning">
+				</svg>
+				<ng-template [ngTemplateOutlet]="inputContentTemplate"></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="!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-template>
+	`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { labelInputID: [{
+                type: Input
+            }], disabled: [{
                 type: Input
             }], skeleton: [{
                 type: Input
@@ -379,6 +866,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], textArea: [{
                 type: ContentChild,
                 args: [TextArea]
+            }], textInput: [{
+                type: ContentChild,
+                args: [TextInput, { static: false }]
             }], labelClass: [{
                 type: HostBinding,
                 args: ["class.cds--form-item"]
@@ -390,9 +880,13 @@ class InputModule {
 InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: InputModule, declarations: [Label,
         TextInput,
-        TextArea], imports: [CommonModule,
+        TextArea,
+        TextareaLabelComponent,
+        TextInputLabelComponent], imports: [CommonModule,
         FormsModule,
         IconModule], exports: [Label,
+        TextareaLabelComponent,
+        TextInputLabelComponent,
         TextInput,
         TextArea] });
 InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputModule, imports: [CommonModule,
@@ -404,10 +898,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     declarations: [
                         Label,
                         TextInput,
-                        TextArea
+                        TextArea,
+                        TextareaLabelComponent,
+                        TextInputLabelComponent
                     ],
                     exports: [
                         Label,
+                        TextareaLabelComponent,
+                        TextInputLabelComponent,
                         TextInput,
                         TextArea
                     ],
@@ -423,5 +921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { InputModule, Label, TextArea, TextInput };
+export { InputModule, Label, TextArea, TextInput, TextInputLabelComponent, TextareaLabelComponent };
 //# sourceMappingURL=carbon-components-angular-input.mjs.map