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

Next generation components

{"version":3,"file":"carbon-components-angular-input.mjs","sources":["../../src/input/input.directive.ts","../../src/input/text-area.directive.ts","../../src/input/password.directive.ts","../../src/input/textarea-label.component.ts","../../src/input/text-input-label.component.ts","../../src/input/password-input-label.component.ts","../../src/input/label.component.ts","../../src/input/input.module.ts","../../src/input/carbon-components-angular-input.ts"],"sourcesContent":["import { Directive, HostBinding, Input } from \"@angular/core\";\n\n/**\n * A directive for applying styling to an input element.\n *\n * Example:\n *\n * ```html\n * <input cdsText/>\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsText], [ibmText]\"\n})\nexport class TextInput {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttribute() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n\n}\n","import { Directive, HostBinding, Input } from \"@angular/core\";\n\n/**\n * A directive for applying styling to a textarea element.\n *\n * Example:\n *\n * ```html\n * <textarea cdsTextArea></textarea>\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsTextArea], [ibmTextArea]\"\n})\nexport class TextArea {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@HostBinding(\"class.cds--text-area\") baseClass = true;\n\t@HostBinding(\"class.cds--text-area--invalid\") @Input() invalid = false;\n\t/**\n\t * Set to `true` to put the textarea in a warning state.\n\t * Mirrors the `warn` prop of the React `TextArea` component.\n\t */\n\t@HostBinding(\"class.cds--text-area--warn\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t@HostBinding(\"class.cds--text-area--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttr() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n}\n","import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tRenderer2,\n\tElementRef,\n\tAfterViewInit\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsPassword], [ibmPassword]\"\n})\nexport class PasswordInput implements AfterViewInit {\n\n\t@Input() set type(type: string) {\n\t\tif (type) {\n\t\t\tthis._type = type;\n\t\t\tif (this.elementRef) {\n\t\t\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t\t\t}\n\t\t}\n\t}\n\t@HostBinding(\"class.cds--password-input\") passwordInputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttribute() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n\n\tprivate _type = \"password\";\n\n\tconstructor(protected elementRef: ElementRef, protected renderer: Renderer2) { }\n\n\tngAfterViewInit(): void {\n\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t}\n}\n","import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tOnChanges,\n\tOnDestroy,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tChangeDetectorRef,\n\tSimpleChanges\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-textarea-label>\n * \tLabel\n * \t<textarea cdsTextArea class=\"textarea-field\">\n * </cds-textarea-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input-text-area--basic)\n */\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-area cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<ng-container *ngIf=\"!skeleton\">\n\t\t\t<div class=\"cds--text-area__label-wrapper\">\n\t\t\t\t<label\n\t\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t\t\t<ng-template #labelContent>\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</label>\n\t\t\t\t<span\n\t\t\t\t\t*ngIf=\"enableCounter && maxCount\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t{{textCount}}/{{maxCount}}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-area__wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-area__wrapper--warn': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!fluid && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-area__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!fluid && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-area__invalid-icon cds--text-area__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template *ngIf=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t\t<ng-template #textAreaContent>\n\t\t\t\t\t<ng-content select=\"[cdsTextArea],[ibmTextArea],textarea\"></ng-content>\n\t\t\t\t</ng-template>\n\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--text-area__divider\" />\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--text-area__invalid-icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--text-area__invalid-icon cds--text-area__invalid-icon--warning\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\t`\n})\nexport class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestroy {\n\n\t@HostBinding(\"class.cds--text-area__wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"textarea\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-area--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-area--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-textarea-\" + TextareaLabelComponent.labelCounter;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textAreaTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t/**\n\t * Set to `true` to hide the label visually, but keep accessible to\n\t * screen readers.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set to `true` (`maxCount` must be set) to displays a live character/word\n\t * counter alongside the label.\n\t */\n\t@Input() enableCounter = false;\n\n\t/**\n\t * Maximum number of characters (or words) allowed. Required for the\n\t * counter to display.\n\t */\n\t@Input() maxCount: number;\n\n\t/**\n\t * Determines whether the counter counts characters or words.\n\t * When `\"word\"` and `maxCount` is set, input is clamped to `maxCount` words\n\t * on each change. Excess words are trimmed from the end of the value.\n\t */\n\t@Input() counterMode: \"character\" | \"word\" = \"character\";\n\n\t//  Tracks current character / word count for the counter display.\n\ttextCount = 0;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t// Cached reference to the textarea element, set once in ngAfterViewInit.\n\tprivate _textareaElement: HTMLTextAreaElement | null = null;\n\t// Cached listener so it can be removed precisely (avoids anonymous-function leak)\n\tprivate _inputListener: ((e: Event) => void) | null = null;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label` and attaches the\n\t * counter listener when `enableCounter` is already `true` on first render.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user — reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\n\t\t\t\tthis._textareaElement = inputElement;\n\t\t\t\tthis._syncMaxLength();\n\n\t\t\t\tif (this.enableCounter) {\n\t\t\t\t\tthis.textCount = this._countValue(inputElement.value || \"\");\n\t\t\t\t\tthis._attachCounterListener();\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Attach/remove listener and seed `textCount` from the textarea's current value.\n\t * @param changes\n\t */\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.enableCounter && !changes.enableCounter.firstChange) {\n\t\t\tif (changes.enableCounter.currentValue) {\n\t\t\t\tif (this._textareaElement) {\n\t\t\t\t\tthis.textCount = this._countValue(this._textareaElement.value || \"\");\n\t\t\t\t\tthis._attachCounterListener();\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis._detachCounterListener();\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\t(changes.maxCount || changes.counterMode) &&\n\t\t\t!(changes.maxCount?.firstChange && changes.counterMode?.firstChange)\n\t\t) {\n\t\t\tthis._syncMaxLength();\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis._detachCounterListener();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Keeps the textarea's `maxlength` attribute in sync with `maxCount`. This is only set\n\t * when counterMode is set to `character`. When counterMode is set to `word`, we enforce limit via JS.\n\t * If `maxCount` is unset or the mode is `\"word\"`, any previously applied\n\t * `maxlength` is removed so the textarea is unrestricted by the attribute.\n\t */\n\tprivate _syncMaxLength(): void {\n\t\tif (!this._textareaElement) {\n\t\t\treturn;\n\t\t}\n\t\tif (this.counterMode === \"character\" && this.maxCount != null) {\n\t\t\tthis._textareaElement.setAttribute(\"maxlength\", String(this.maxCount));\n\t\t} else {\n\t\t\tthis._textareaElement.removeAttribute(\"maxlength\");\n\t\t}\n\t}\n\n\t/**\n\t * Attaches the input event listener, ensuring it is never added twice.\n\t */\n\tprivate _attachCounterListener(): void {\n\t\tthis._detachCounterListener();\n\t\tif (!this._textareaElement) {\n\t\t\treturn;\n\t\t}\n\t\tthis._inputListener = (e: Event) => {\n\t\t\tconst el = e.target as HTMLTextAreaElement;\n\t\t\t// Word-mode enforcement: clamp value to maxCount words on each input so\n\t\t\t// the textarea never holds more words than allowed.  Character mode relies\n\t\t\t// on the native `maxlength` attribute set by the developer.\n\t\t\tif (this.counterMode === \"word\" && this.maxCount != null) {\n\t\t\t\tconst clamped = this._truncateToWordLimit(el.value || \"\", this.maxCount);\n\t\t\t\tif (clamped !== el.value) {\n\t\t\t\t\tel.value = clamped;\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.textCount = this._countValue(el.value || \"\");\n\t\t};\n\t\tthis._textareaElement.addEventListener(\"input\", this._inputListener);\n\t}\n\n\t/**\n\t * Truncates `value` so it contains at most `limit` Unicode words.\n\t * Whitespace between and around words is preserved up to the last allowed word;\n\t * any trailing content (partial word or space) beyond the limit is dropped.\n\t */\n\tprivate _truncateToWordLimit(value: string, limit: number): string {\n\t\tlet wordsSeen = 0;\n\t\t// Walk through the string capturing word boundaries\n\t\tconst wordPattern = /\\p{L}+/gu;\n\t\tlet match: RegExpExecArray | null;\n\t\tlet cutIndex = value.length;\n\t\twhile ((match = wordPattern.exec(value)) !== null) {\n\t\t\twordsSeen++;\n\t\t\tif (wordsSeen === limit) {\n\t\t\t\t// Allow the string to continue up to (but not past) the end of this word\n\t\t\t\tcutIndex = match.index + match[0].length;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\treturn wordsSeen < limit ? value : value.slice(0, cutIndex);\n\t}\n\n\n\t/**\n\t * Removes the input event listener and clears the cached reference.\n\t */\n\tprivate _detachCounterListener(): void {\n\t\tif (this._inputListener && this._textareaElement) {\n\t\t\tthis._textareaElement.removeEventListener(\"input\", this._inputListener);\n\t\t\tthis._inputListener = null;\n\t\t}\n\t}\n\n\tprivate _countValue(value: string): number {\n\t\tif (this.counterMode === \"word\") {\n\t\t\treturn value.match(/\\p{L}+/gu)?.length || 0;\n\t\t}\n\t\treturn value.length;\n\t}\n}\n","import {\n\tAfterContentInit,\n\tAfterViewInit,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tSimpleChanges,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-input cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<ng-container *ngIf=\"!skeleton\">\n\t\t\t<!-- non-inline: label-wrapper above field; inline: label+validation side-by-side -->\n\t\t\t<ng-container *ngIf=\"!inline; else inlineHeader\">\n\t\t\t\t<div class=\"cds--text-input__label-wrapper\">\n\t\t\t\t\t<label\n\t\t\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t\t\t}\">\n\t\t\t\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t\t\t\t<ng-template #labelContent>\n\t\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</label>\n\t\t\t\t\t<span\n\t\t\t\t\t\t*ngIf=\"enableCounter && maxCount\"\n\t\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t{{textCount}}/{{maxCount}}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<ng-template #inlineHeader>\n\t\t\t\t<div class=\"cds--text-input__label-helper-wrapper\">\n\t\t\t\t\t<div class=\"cds--text-input__label-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t\t\t\t'cds--visually-hidden': hideLabel,\n\t\t\t\t\t\t\t\t'cds--label--inline': true,\n\t\t\t\t\t\t\t\t'cds--label--inline--sm': size === 'sm',\n\t\t\t\t\t\t\t\t'cds--label--inline--md': size === 'md',\n\t\t\t\t\t\t\t\t'cds--label--inline--lg': size === 'lg'\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<ng-template *ngIf=\"labelTemplate\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"validationOrHelper\"></ng-container>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-outer-wrapper\"\n\t\t\t\t[ngClass]=\"{'cds--text-input__field-outer-wrapper--inline': inline}\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t#wrapper>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid && !warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t\t\t<ng-template #textInputContent>\n\t\t\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t\t\t</ng-template>\n\n\t\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngIf=\"!fluid && !inline\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"validationOrHelper\"></ng-container>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #validationOrHelper>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled, 'cds--form__helper-text--inline': inline}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit, AfterContentInit, OnChanges, OnDestroy {\n\n\t@HostBinding(\"class.cds--text-input-wrapper--inline\") get isInlineWrapper() {\n\t\treturn this.inline;\n\t}\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t/**\n\t * Set to `true` to hide the label visually, but keep accessible to\n\t * screen readers.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set to `true` to render the label and field side-by-side instead of stacked.\n\t */\n\t@Input() inline = false;\n\n\t/**\n\t * The render size for the `TextInput`. Used to compute the INLINE label size\n\t * variant class (`cds--label--inline--{size}`).\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` (`maxCount` must be set) to displays a live character\n\t * counter alongside the label.\n\t */\n\t@Input() enableCounter = false;\n\n\t/**\n\t * Maximum number of characters (or words) allowed. Required for the\n\t * counter to display.\n\t */\n\t@Input() maxCount: number;\n\n\t// Tracks current character count for the counter display.\n\ttextCount = 0;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\n\t// Cached reference to the input element, set once in ngAfterViewInit.\n\tprivate _inputElement: HTMLInputElement | null = null;\n\t// Cached listener so it can be removed precisely (avoids anonymous-function leak).\n\tprivate _inputListener: ((e: Event) => void) | null = null;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label` and attaches the\n\t * counter listener when `enableCounter` is already `true` on first render.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user, reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\n\t\t\t\tthis._inputElement = inputElement;\n\n\t\t\t\tif (this.enableCounter) {\n\t\t\t\t\tthis.textCount = inputElement.value?.length || 0;\n\t\t\t\t\tthis._attachCounterListener();\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Attach/remove listener and seed `textCount` from the textarea's current value.\n\t * @param changes\n\t */\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.enableCounter && !changes.enableCounter.firstChange) {\n\t\t\tif (changes.enableCounter.currentValue) {\n\t\t\t\tif (this._inputElement) {\n\t\t\t\t\tthis.textCount = this._inputElement.value?.length || 0;\n\t\t\t\t\tthis._attachCounterListener();\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis._detachCounterListener();\n\t\t\t}\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tthis.changeDetectorRef.detectChanges();\n\t}\n\n\tngOnDestroy() {\n\t\tthis._detachCounterListener();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Attaches the input event listener, ensuring it is never added twice.\n\t */\n\tprivate _attachCounterListener(): void {\n\t\tthis._detachCounterListener();\n\t\tif (!this._inputElement) {\n\t\t\treturn;\n\t\t}\n\t\tthis._inputListener = (e: Event) => {\n\t\t\tthis.textCount = (e.target as HTMLInputElement).value?.length || 0;\n\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t};\n\t\tthis._inputElement.addEventListener(\"input\", this._inputListener);\n\t}\n\n\t/**\n\t * Removes the input event listener and clears the cached reference.\n\t */\n\tprivate _detachCounterListener(): void {\n\t\tif (this._inputListener && this._inputElement) {\n\t\t\tthis._inputElement.removeEventListener(\"input\", this._inputListener);\n\t\t\tthis._inputListener = null;\n\t\t}\n\t}\n}\n","import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef,\n\tContentChild\n} from \"@angular/core\";\nimport { PasswordInput } from \"./password.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-password-label>\n * \tLabel\n *\t<input cdsPassword>\n * </cds-password-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-password-label, ibm-password-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-input cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<label\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--visually-hidden': hideLabel,\n\t\t\t\t'cds--label--inline': inline\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\" [ngClass]=\"{'cds--text-input__field-outer-wrapper--inline': inline}\">\n\t\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\"\n\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t</cds-tooltip>\n\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n    `\n})\n/**\n * Represents the Password Input Label Component.\n */\nexport class PasswordInputLabelComponent extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Counter for generating unique labelInputID.\n\t */\n\tstatic labelCounter = 0;\n\n\t@ContentChild(PasswordInput) textInput: PasswordInput;\n\n\t/**\n\t * ID for the input item associated with the label.\n\t */\n\t@Input() labelInputID = \"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Type for input field, either password or text.\n\t */\n\tinputType: \"password\" | \"text\" = \"password\";\n\n\t/**\n\t* Flag for checking if password is visible.\n\t*/\n\tpasswordIsVisible = false;\n\n\t/**\n\t * Flag for disabled label.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Flag for loading (skeleton) label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Template for label content.\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\n\t/**\n\t * Template for password input.\n\t */\n\t@Input() passwordInputTemplate: TemplateRef<any>;\n\n\t/**\n\t * Optional helper text under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t * Flag for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Flag for showing a warning.\n\t */\n\t@Input() warn = false;\n\n\t/**\n\t * Warning text.\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Aria label for label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Tooltip text for hiding password.\n\t */\n\t@Input() hidePasswordLabel = \"Hide password\";\n\n\t/**\n\t * Tooltip text for showing password.\n\t */\n\t@Input() showPasswordLabel = \"Show password\";\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t/**\n\t * Set to `true` to hide the label visually, but keep accessible to\n\t * screen readers.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set to `true` to render the label and field side-by-side instead of stacked.\n\t */\n\t@Input() inline = false;\n\n\t/**\n\t * Emits whenever the show/hide password visibility toggle button is clicked.\n\t * Mirrors the `onTogglePasswordVisibility` prop of the React `PasswordInput`\n\t * component.\n\t */\n\t@Output() togglePasswordVisibility = new EventEmitter<\"password\" | \"text\">();\n\n\t/**\n\t * Reference to the wrapper element.\n\t */\n\t@ViewChild(\"wrapper\", { static: true }) wrapper: ElementRef<HTMLDivElement>;\n\n\t/**\n\t * Binding for applying class to host element.\n\t */\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\t@HostBinding(\"class.cds--password-input-wrapper\") passwordInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input-wrapper--inline\") get isInlineWrapper() {\n\t\treturn this.inline;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\t/**\n\t * Constructor for PasswordInputLabelComponent.\n\t * @param changeDetectorRef - Reference to ChangeDetectorRef.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Lifecycle hook called after the view has been initialized to set the ID of the input element\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\tconst inputElement =\n\t\t\t\tthis.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Function to check if a value is a TemplateRef.\n\t * @param value - Value to check.\n\t * @returns Whether the value is a TemplateRef.\n\t */\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handler for toggling password visibility.\n\t */\n\tpublic handleTogglePasswordVisibility() {\n\t\tthis.inputType = this.inputType === \"password\" ? \"text\" : \"password\";\n\t\tthis.textInput.type = this.inputType;\n\t\tthis.passwordIsVisible = this.inputType === \"text\";\n\t\tthis.togglePasswordVisibility.emit(this.inputType);\n\t}\n}\n","import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tAfterContentInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\nimport { TextInput } from \"./input.directive\";\nimport { PasswordInput } from \"./password.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n *\n * ```html\n * <cds-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-label, ibm-label\",\n\ttemplate: `\n\t\t<ng-template #inputContentTemplate>\n\t\t\t<ng-content select=\"input,textarea,div\"></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-template #labelContentTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-container [ngSwitch]=\"type\">\n\t\t\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t\t\t<cds-textarea-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t\t[enableCounter]=\"enableCounter\"\n\t\t\t\t\t[maxCount]=\"maxCount\"\n\t\t\t\t\t[counterMode]=\"counterMode\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-textarea-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t\t\t<cds-text-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t\t[inline]=\"inline\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[enableCounter]=\"enableCounter\"\n\t\t\t\t\t[maxCount]=\"maxCount\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-text-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchCase=\"'PasswordInput'\">\n\t\t\t\t<cds-password-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t\t[inline]=\"inline\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[passwordInputTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-password-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchDefault>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\n\t\t<ng-template #default>\n\t\t\t<label\n\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--skeleton': skeleton\n\t\t\t\t}\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`\n})\nexport class Label implements AfterContentInit, AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t */\n\t@Input() labelInputID = `cds-label-${Label.labelCounter++}`;\n\t/**\n\t * Set to `true` for disabled state.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Set to `true` to hide the label visually, but keep accessible to\n\t * screen readers.\n\t */\n\t@Input() hideLabel = false;\n\n\t/**\n\t * Set to `true` to render the label and field side-by-side instead of stacked.\n\t * Applies to `TextInput` and `PasswordInput` label variants.\n\t */\n\t@Input() inline = false;\n\n\t/**\n\t * The render size for the `TextInput`. Used to compute INLINE label size\n\t * variant classes.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` (`maxCount` must be set) to displays a live character/word\n\t * counter alongside the label.\n\t */\n\t@Input() enableCounter = false;\n\n\t/**\n\t * Maximum number of characters (or words) allowed. Required for the\n\t * counter to display.\n\t */\n\t@Input() maxCount: number;\n\n\t/**\n\t * Determines whether the `TextArea` counter counts characters or words.\n\t */\n\t@Input() counterMode: \"character\" | \"word\" = \"character\";\n\n\t@ViewChild(\"wrapper\") wrapper: ElementRef<HTMLDivElement>;\n\n\t@ContentChild(TextArea) textArea: TextArea;\n\n\t// @ts-ignore\n\t@ContentChild(TextInput, { static: false }) textInput: TextInput;\n\n\t@ContentChild(PasswordInput, { static: false })\n\tpasswordInput: PasswordInput;\n\n\t@HostBinding(\"class.cds--form-item\") get labelClass() {\n\t\treturn this.type === undefined;\n\t}\n\n\ttype: \"TextArea\" | \"TextInput\" | \"PasswordInput\";\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Update wrapper class if a textarea is hosted.\n\t */\n\tn