carbon-components-angular 5.72.0 → 5.72.2

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

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, HostBinding, TemplateRef, Component, ViewChild, ContentChild, EventEmitter, Output, NgModule } from '@angular/core';
+import { Directive, Self, Optional, Input, HostBinding, TemplateRef, Component, ViewChild, ContentChild, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from 'carbon-components-angular/icon';
 import { IconModule } from 'carbon-components-angular/icon';
+import { startWith } from 'rxjs/operators';
 import { BaseIconButton, ButtonModule } from 'carbon-components-angular/button';
 import * as i3 from 'carbon-components-angular/tooltip';
 import { TooltipModule } from 'carbon-components-angular/tooltip';
@@ -21,7 +23,8 @@ import { TooltipModule } from 'carbon-components-angular/tooltip';
  * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
  */
 class TextInput {
-    constructor() {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
         /**
          * @deprecated since v5 - Use `cdsLayer` directive instead
          * `light` or `dark` input theme
@@ -65,14 +68,20 @@ class TextInput {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextInput, deps: [{ token: i1.NgControl, optional: true, self: true }], 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--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: [{
                     selector: "[cdsText], [ibmText]"
                 }]
-        }], propDecorators: { theme: [{
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { theme: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -132,7 +141,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.
  */
 class TextArea {
-    constructor() {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
         /**
          * @deprecated since v5 - Use `cdsLayer` directive instead
          * `light` or `dark` input theme
@@ -153,14 +163,20 @@ class TextArea {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextArea, deps: [{ token: i1.NgControl, optional: true, self: true }], 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", warn: "warn", skeleton: "skeleton" }, host: { properties: { "class.cds--text-area": "this.baseClass", "class.cds--text-area--invalid": "this.invalid", "class.cds--text-area--warn": "this.warn", "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: [{
                     selector: "[cdsTextArea], [ibmTextArea]"
                 }]
-        }], propDecorators: { theme: [{
+        }], ctorParameters: function () {
+        return [{ type: i1.NgControl, decorators: [{
+                        type: Self
+                    }, {
+                        type: Optional
+                    }] }];
+    }, propDecorators: { theme: [{
                 type: Input
             }], baseClass: [{
                 type: HostBinding,
@@ -371,12 +387,14 @@ class TextareaLabelComponent {
          * on each change. Excess words are trimmed from the end of the value.
          */
         this.counterMode = "character";
-        //  Tracks current character / word count for the counter display.
+        // Tracks current character / word count for the counter display.
         this.textCount = 0;
         this.labelClass = true;
         // Cached reference to the textarea element, set once in ngAfterViewInit.
         this._textareaElement = null;
-        // Cached listener so it can be removed precisely (avoids anonymous-function leak)
+        // RxJS subscription used when NgControl is available (template-driven & reactive forms).
+        this._subscription = null;
+        // Fallback DOM listener used only when no NgControl is present (plain textarea).
         this._inputListener = null;
     }
     get isReadonly() {
@@ -424,7 +442,6 @@ class TextareaLabelComponent {
     }
     /**
      * Attach/remove listener and seed `textCount` from the textarea's current value.
-     * @param changes
      */
     ngOnChanges(changes) {
         var _a, _b;
@@ -469,27 +486,49 @@ class TextareaLabelComponent {
         }
     }
     /**
-     * Attaches the input event listener, ensuring it is never added twice.
+     * Attaches the counter listener, listen for either ngControl or native DOM input
+     * event listener
      */
     _attachCounterListener() {
+        var _a;
         this._detachCounterListener();
-        if (!this._textareaElement) {
-            return;
-        }
-        this._inputListener = (e) => {
-            const el = e.target;
-            // Word-mode enforcement: clamp value to maxCount words on each input so
-            // the textarea never holds more words than allowed.  Character mode relies
-            // on the native `maxlength` attribute set by the developer.
-            if (this.counterMode === "word" && this.maxCount != null) {
-                const clamped = this._truncateToWordLimit(el.value || "", this.maxCount);
-                if (clamped !== el.value) {
-                    el.value = clamped;
+        const control = (_a = this.textArea) === null || _a === void 0 ? void 0 : _a.ngControl;
+        if (control === null || control === void 0 ? void 0 : control.valueChanges) {
+            // NgControl listener
+            this._subscription = control.valueChanges
+                .pipe(startWith(control.value))
+                .subscribe((value) => {
+                var _a;
+                const raw = value || "";
+                if (this.counterMode === "word" && this.maxCount != null) {
+                    const clamped = this._truncateToWordLimit(raw, this.maxCount);
+                    if (clamped !== raw) {
+                        // Write back through the control so the form model stays in sync.
+                        // emitEvent false to avoid infinite loop
+                        (_a = control === null || control === void 0 ? void 0 : control.control) === null || _a === void 0 ? void 0 : _a.setValue(clamped, { emitEvent: false });
+                    }
                 }
+                this.textCount = this._countValue(raw);
+                this.changeDetectorRef.markForCheck();
+            });
+        }
+        else {
+            // Fallback DOM path
+            if (!this._textareaElement) {
+                return;
             }
-            this.textCount = this._countValue(el.value || "");
-        };
-        this._textareaElement.addEventListener("input", this._inputListener);
+            this._inputListener = (e) => {
+                const el = e.target;
+                if (this.counterMode === "word" && this.maxCount != null) {
+                    const clamped = this._truncateToWordLimit(el.value || "", this.maxCount);
+                    if (clamped !== el.value) {
+                        el.value = clamped;
+                    }
+                }
+                this.textCount = this._countValue(el.value || "");
+            };
+            this._textareaElement.addEventListener("input", this._inputListener);
+        }
     }
     /**
      * Truncates `value` so it contains at most `limit` Unicode words.
@@ -513,9 +552,13 @@ class TextareaLabelComponent {
         return wordsSeen < limit ? value : value.slice(0, cutIndex);
     }
     /**
-     * Removes the input event listener and clears the cached reference.
+     * Removes the subscription (NgControl path) and removes the DOM listener
+     * (fallback path). Safe to call when neither is active.
      */
     _detachCounterListener() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._subscription = null;
         if (this._inputListener && this._textareaElement) {
             this._textareaElement.removeEventListener("input", this._inputListener);
             this._inputListener = null;
@@ -632,7 +675,7 @@ TextareaLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
 				</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"] }] });
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: [{
@@ -863,7 +906,9 @@ class TextInputLabelComponent {
         this.textInputWrapper = true;
         // Cached reference to the input element, set once in ngAfterViewInit.
         this._inputElement = null;
-        // Cached listener so it can be removed precisely (avoids anonymous-function leak).
+        // RxJS subscription used when NgControl is available (template-driven & reactive forms).
+        this._subscription = null;
+        // Fallback cached DOM listener so it can be removed precisely (avoids anonymous-function leak).
         this._inputListener = null;
     }
     get isInlineWrapper() {
@@ -913,8 +958,7 @@ class TextInputLabelComponent {
         }
     }
     /**
-     * Attach/remove listener and seed `textCount` from the textarea's current value.
-     * @param changes
+     * Attach/remove listener and seed `textCount` from the input's current value.
      */
     ngOnChanges(changes) {
         var _a;
@@ -941,24 +985,43 @@ class TextInputLabelComponent {
         return value instanceof TemplateRef;
     }
     /**
-     * Attaches the input event listener, ensuring it is never added twice.
+     * Attaches the counter listener, listen for either ngControl or native DOM input
+     * event listener
      */
     _attachCounterListener() {
+        var _a;
         this._detachCounterListener();
-        if (!this._inputElement) {
-            return;
+        const control = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.ngControl;
+        if (control === null || control === void 0 ? void 0 : control.valueChanges) {
+            // NgControl listener
+            this._subscription = control.valueChanges
+                .pipe(startWith(control.value))
+                .subscribe((value) => {
+                this.textCount = (value === null || value === void 0 ? void 0 : value.length) || 0;
+                this.changeDetectorRef.markForCheck();
+            });
+        }
+        else {
+            // Fallback DOM path
+            if (!this._inputElement) {
+                return;
+            }
+            this._inputListener = (e) => {
+                var _a;
+                this.textCount = ((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                this.changeDetectorRef.detectChanges();
+            };
+            this._inputElement.addEventListener("input", this._inputListener);
         }
-        this._inputListener = (e) => {
-            var _a;
-            this.textCount = ((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
-            this.changeDetectorRef.detectChanges();
-        };
-        this._inputElement.addEventListener("input", this._inputListener);
     }
     /**
-     * Removes the input event listener and clears the cached reference.
+     * Removes the subscription (NgControl path) or removes the DOM listener.
+     * Safe to call when neither is active.
      */
     _detachCounterListener() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._subscription = null;
         if (this._inputListener && this._inputElement) {
             this._inputElement.removeEventListener("input", this._inputListener);
             this._inputListener = null;
@@ -970,7 +1033,7 @@ 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", fluid: "fluid", decorator: "decorator", hideLabel: "hideLabel", inline: "inline", size: "size", enableCounter: "enableCounter", maxCount: "maxCount" }, host: { properties: { "class.cds--text-input-wrapper--inline": "this.isInlineWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly", "class.cds--text-input--fluid": "this.fluidClass", "class.cds--text-input--fluid__skeleton": "this.fluidSkeletonClass", "class.cds--form-item": "this.labelClass", "class.cds--text-input-wrapper": "this.textInputWrapper" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], usesOnChanges: 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", decorator: "decorator", hideLabel: "hideLabel", inline: "inline", size: "size", enableCounter: "enableCounter", maxCount: "maxCount" }, host: { properties: { "class.cds--text-input-wrapper--inline": "this.isInlineWrapper", "class.cds--text-input-wrapper--readonly": "this.isReadonly", "class.cds--text-input--fluid": "this.fluidClass", "class.cds--text-input--fluid__skeleton": "this.fluidSkeletonClass", "class.cds--form-item": "this.labelClass", "class.cds--text-input-wrapper": "this.textInputWrapper" } }, queries: [{ propertyName: "textInput", first: true, predicate: TextInput, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
 		<ng-container *ngIf="skeleton">
 			<span class="cds--label cds--skeleton"></span>
 			<div class="cds--text-input cds--skeleton"></div>
@@ -1094,7 +1157,7 @@ TextInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.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: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: [{
             type: Component,
             args: [{
@@ -1276,6 +1339,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], wrapper: [{
                 type: ViewChild,
                 args: ["wrapper", { static: false }]
+            }], textInput: [{
+                type: ContentChild,
+                args: [TextInput, { static: false }]
             }], labelClass: [{
                 type: HostBinding,
                 args: ["class.cds--form-item"]
@@ -1524,7 +1590,7 @@ PasswordInputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
 				</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"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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: [{
             type: Component,
             args: [{
@@ -1937,7 +2003,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", "hideLabel", "enableCounter", "maxCount", "counterMode", "decorator"] }, { kind: "component", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid", "decorator", "hideLabel", "inline", "size", "enableCounter", "maxCount"] }, { 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", "hideLabel", "inline"], outputs: ["togglePasswordVisibility"] }] });
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.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", "hideLabel", "enableCounter", "maxCount", "counterMode", "decorator"] }, { kind: "component", type: TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid", "decorator", "hideLabel", "inline", "size", "enableCounter", "maxCount"] }, { 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", "hideLabel", "inline"], outputs: ["togglePasswordVisibility"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Label, decorators: [{
             type: Component,
             args: [{