carbon-components-angular/docs/storybook/1345.d1a47622.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[1345],{"./src/input/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{gP:()=>InputModule,R$:()=>PasswordInputLabelComponent,gA:()=>TextInputLabelComponent,y8:()=>TextareaLabelComponent});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let TextInput=class TextInput{constructor(){this.theme="dark",this.size="md",this.inputClass=!0,this.invalid=!1,this.warn=!1,this.skeleton=!1}get isSizeSm(){return"sm"===this.size}get isSizeMd(){return"md"===this.size}get isSizelg(){return"lg"===this.size}get sizeSm(){return"sm"===this.size}get sizeMd(){return"md"===this.size}get sizelg(){return"lg"===this.size}get isLightTheme(){return"light"===this.theme}get getInvalidAttribute(){return!!this.invalid||void 0}};TextInput.propDecorators={theme:[{type:core.Input}],size:[{type:core.Input}],inputClass:[{type:core.HostBinding,args:["class.cds--text-input"]}],isSizeSm:[{type:core.HostBinding,args:["class.cds--text-input--sm"]}],isSizeMd:[{type:core.HostBinding,args:["class.cds--text-input--md"]}],isSizelg:[{type:core.HostBinding,args:["class.cds--text-input--lg"]}],sizeSm:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],sizeMd:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],sizelg:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],invalid:[{type:core.HostBinding,args:["class.cds--text-input--invalid"]},{type:core.Input}],warn:[{type:core.HostBinding,args:["class.cds--text-input--warning"]},{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],isLightTheme:[{type:core.HostBinding,args:["class.cds--text-input--light"]}],getInvalidAttribute:[{type:core.HostBinding,args:["attr.data-invalid"]}]},TextInput=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsText], [ibmText]"})],TextInput);var fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let TextArea=class TextArea{constructor(){this.theme="dark",this.baseClass=!0,this.invalid=!1,this.skeleton=!1}get isLightTheme(){return"light"===this.theme}get getInvalidAttr(){return!!this.invalid||void 0}};TextArea.propDecorators={theme:[{type:core.Input}],baseClass:[{type:core.HostBinding,args:["class.cds--text-area"]}],invalid:[{type:core.HostBinding,args:["class.cds--text-area--invalid"]},{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],isLightTheme:[{type:core.HostBinding,args:["class.cds--text-area--light"]}],getInvalidAttr:[{type:core.HostBinding,args:["attr.data-invalid"]}]},TextArea=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsTextArea], [ibmTextArea]"})],TextArea);let PasswordInput=class PasswordInput{constructor(elementRef,renderer){this.elementRef=elementRef,this.renderer=renderer,this.passwordInputClass=!0,this.inputClass=!0,this.invalid=!1,this.warn=!1,this.skeleton=!1,this.theme="dark",this.size="md",this._type="password"}set type(type){type&&(this._type=type,this.elementRef&&this.renderer.setAttribute(this.elementRef.nativeElement,"type",this._type))}get isSizeSm(){return"sm"===this.size}get isSizeMd(){return"md"===this.size}get isSizelg(){return"lg"===this.size}get sizeSm(){return"sm"===this.size}get sizeMd(){return"md"===this.size}get sizelg(){return"lg"===this.size}get isLightTheme(){return"light"===this.theme}get getInvalidAttribute(){return!!this.invalid||void 0}ngAfterViewInit(){this.renderer.setAttribute(this.elementRef.nativeElement,"type",this._type)}};PasswordInput.ctorParameters=()=>[{type:core.ElementRef},{type:core.Renderer2}],PasswordInput.propDecorators={type:[{type:core.Input}],passwordInputClass:[{type:core.HostBinding,args:["class.cds--password-input"]}],isSizeSm:[{type:core.HostBinding,args:["class.cds--text-input--sm"]}],isSizeMd:[{type:core.HostBinding,args:["class.cds--text-input--md"]}],isSizelg:[{type:core.HostBinding,args:["class.cds--text-input--lg"]}],sizeSm:[{type:core.HostBinding,args:["class.cds--layout--size-sm"]}],sizeMd:[{type:core.HostBinding,args:["class.cds--layout--size-md"]}],sizelg:[{type:core.HostBinding,args:["class.cds--layout--size-lg"]}],isLightTheme:[{type:core.HostBinding,args:["class.cds--text-input--light"]}],inputClass:[{type:core.HostBinding,args:["class.cds--text-input"]}],invalid:[{type:core.HostBinding,args:["class.cds--text-input--invalid"]},{type:core.Input}],warn:[{type:core.HostBinding,args:["class.cds--text-input--warning"]},{type:core.Input}],skeleton:[{type:core.HostBinding,args:["class.cds--skeleton"]},{type:core.Input}],theme:[{type:core.Input}],size:[{type:core.Input}],getInvalidAttribute:[{type:core.HostBinding,args:["attr.data-invalid"]}]},PasswordInput=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsPassword], [ibmPassword]"})],PasswordInput);let Label=class Label{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.labelInputID="cds-label-"+Label.labelCounter++,this.disabled=!1,this.skeleton=!1,this.invalid=!1,this.warn=!1}get labelClass(){return void 0===this.type}ngAfterContentInit(){this.textArea?this.type="TextArea":this.textInput?this.type="TextInput":this.passwordInput&&(this.type="PasswordInput")}ngAfterViewInit(){if(this.wrapper){const inputElement=this.wrapper.nativeElement.querySelector("input,textarea");if(inputElement)return inputElement.id&&(this.labelInputID=inputElement.id,this.changeDetectorRef.detectChanges()),void inputElement.setAttribute("id",this.labelInputID);const divElement=this.wrapper.nativeElement.querySelector("div");divElement&&(divElement.id&&(this.labelInputID=divElement.id,this.changeDetectorRef.detectChanges()),divElement.setAttribute("id",this.labelInputID))}}isTemplate(value){return value instanceof core.TemplateRef}};Label.labelCounter=0,Label.ctorParameters=()=>[{type:core.ChangeDetectorRef}],Label.propDecorators={labelInputID:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],helperText:[{type:core.Input}],invalidText:[{type:core.Input}],invalid:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],ariaLabel:[{type:core.Input}],wrapper:[{type:core.ViewChild,args:["wrapper"]}],textArea:[{type:core.ContentChild,args:[TextArea]}],textInput:[{type:core.ContentChild,args:[TextInput,{static:!1}]}],passwordInput:[{type:core.ContentChild,args:[PasswordInput,{static:!1}]}],labelClass:[{type:core.HostBinding,args:["class.cds--form-item"]}]},Label=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-label, ibm-label",template:'\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[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[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[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'})],Label);let TextareaLabelComponent=class TextareaLabelComponent{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.labelInputID="ibm-textarea-"+TextareaLabelComponent.labelCounter,this.disabled=!1,this.skeleton=!1,this.invalid=!1,this.warn=!1,this.fluid=!1,this.labelClass=!0}get isReadonly(){return this.wrapper?.nativeElement.querySelector("textarea")?.readOnly??!1}get fluidClass(){return this.fluid&&!this.skeleton}get fluidSkeletonClass(){return this.fluid&&this.skeleton}ngAfterViewInit(){if(this.wrapper){const inputElement=this.wrapper.nativeElement.querySelector("textarea");if(inputElement)return inputElement.id&&(this.labelInputID=inputElement.id,this.changeDetectorRef.detectChanges()),void inputElement.setAttribute("id",this.labelInputID);const divElement=this.wrapper.nativeElement.querySelector("div");divElement&&(divElement.id&&(this.labelInputID=divElement.id,this.changeDetectorRef.detectChanges()),divElement.setAttribute("id",this.labelInputID))}}isTemplate(value){return value instanceof core.TemplateRef}};TextareaLabelComponent.labelCounter=0,TextareaLabelComponent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],TextareaLabelComponent.propDecorators={labelInputID:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],labelTemplate:[{type:core.Input}],textAreaTemplate:[{type:core.Input}],helperText:[{type:core.Input}],invalidText:[{type:core.Input}],invalid:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],ariaLabel:[{type:core.Input}],fluid:[{type:core.Input}],wrapper:[{type:core.ViewChild,args:["wrapper",{static:!1}]}],textArea:[{type:core.ContentChild,args:[TextArea,{static:!1}]}],labelClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],isReadonly:[{type:core.HostBinding,args:["class.cds--text-area__wrapper--readonly"]}],fluidClass:[{type:core.HostBinding,args:["class.cds--text-area--fluid"]}],fluidSkeletonClass:[{type:core.HostBinding,args:["class.cds--text-area--fluid__skeleton"]}]},TextareaLabelComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-textarea-label, ibm-textarea-label",template:'\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}">\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</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'})],TextareaLabelComponent);let TextInputLabelComponent=class TextInputLabelComponent{constructor(changeDetectorRef){this.changeDetectorRef=changeDetectorRef,this.labelInputID="ibm-text-input-"+TextInputLabelComponent.labelCounter++,this.disabled=!1,this.skeleton=!1,this.invalid=!1,this.warn=!1,this.fluid=!1,this.labelClass=!0,this.textInputWrapper=!0}get isReadonly(){return this.wrapper?.nativeElement.querySelector("input")?.readOnly??!1}get fluidClass(){return this.fluid&&!this.skeleton}get fluidSkeletonClass(){return this.fluid&&this.skeleton}ngAfterViewInit(){if(this.wrapper){const inputElement=this.wrapper.nativeElement.querySelector("input");if(inputElement)return inputElement.id&&(this.labelInputID=inputElement.id,this.changeDetectorRef.detectChanges()),void inputElement.setAttribute("id",this.labelInputID);const divElement=this.wrapper.nativeElement.querySelector("div");divElement&&(divElement.id&&(this.labelInputID=divElement.id,this.changeDetectorRef.detectChanges()),divElement.setAttribute("id",this.labelInputID))}}ngAfterContentInit(){this.changeDetectorRef.detectChanges()}isTemplate(value){return value instanceof core.TemplateRef}};TextInputLabelComponent.labelCounter=0,TextInputLabelComponent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],TextInputLabelComponent.propDecorators={labelInputID:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],labelTemplate:[{type:core.Input}],textInputTemplate:[{type:core.Input}],helperText:[{type:core.Input}],invalidText:[{type:core.Input}],invalid:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],ariaLabel:[{type:core.Input}],fluid:[{type:core.Input}],wrapper:[{type:core.ViewChild,args:["wrapper",{static:!1}]}],labelClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],textInputWrapper:[{type:core.HostBinding,args:["class.cds--text-input-wrapper"]}],isReadonly:[{type:core.HostBinding,args:["class.cds--text-input-wrapper--readonly"]}],fluidClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid"]}],fluidSkeletonClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid__skeleton"]}]},TextInputLabelComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-text-label, ibm-text-label",template:'\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}">\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\t\t<div *ngIf="!skeleton" class="cds--text-input__field-outer-wrapper">\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 && !warn"\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 *ngIf="textInputTemplate; else textInputContent" [ngTemplateOutlet]="textInputTemplate"></ng-template>\n\t\t\t\t<ng-template #textInputContent>\n\t\t\t\t\t<ng-content select="[cdsText],[ibmText],input[type=text],div"></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-input__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</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="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</div>\n\t'})],TextInputLabelComponent);var icon=__webpack_require__("./src/icon/index.ts"),src_button=__webpack_require__("./src/button/index.ts");let PasswordInputLabelComponent=class PasswordInputLabelComponent extends src_button.HL{constructor(changeDetectorRef){super(),this.changeDetectorRef=changeDetectorRef,this.labelInputID="cds-password-input-"+PasswordInputLabelComponent.labelCounter++,this.inputType="password",this.passwordIsVisible=!1,this.disabled=!1,this.skeleton=!1,this.invalid=!1,this.warn=!1,this.hidePasswordLabel="Hide password",this.showPasswordLabel="Show password",this.fluid=!1,this.labelClass=!0,this.passwordInputWrapper=!0,this.textInputWrapper=!0}get isReadonly(){return this.wrapper?.nativeElement.querySelector("input")?.readOnly??!1}get fluidClass(){return this.fluid&&!this.skeleton}get fluidSkeletonClass(){return this.fluid&&this.skeleton}ngAfterViewInit(){if(this.wrapper){const inputElement=this.wrapper.nativeElement.querySelector("input");if(inputElement)return inputElement.id&&(this.labelInputID=inputElement.id,this.changeDetectorRef.detectChanges()),void inputElement.setAttribute("id",this.labelInputID)}}isTemplate(value){return value instanceof core.TemplateRef}handleTogglePasswordVisibility(){this.inputType="password"===this.inputType?"text":"password",this.textInput.type=this.inputType,this.passwordIsVisible="text"===this.inputType}};PasswordInputLabelComponent.labelCounter=0,PasswordInputLabelComponent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],PasswordInputLabelComponent.propDecorators={textInput:[{type:core.ContentChild,args:[PasswordInput]}],labelInputID:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],labelTemplate:[{type:core.Input}],passwordInputTemplate:[{type:core.Input}],helperText:[{type:core.Input}],invalidText:[{type:core.Input}],invalid:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],ariaLabel:[{type:core.Input}],hidePasswordLabel:[{type:core.Input}],showPasswordLabel:[{type:core.Input}],fluid:[{type:core.Input}],wrapper:[{type:core.ViewChild,args:["wrapper",{static:!0}]}],labelClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],passwordInputWrapper:[{type:core.HostBinding,args:["class.cds--password-input-wrapper"]}],textInputWrapper:[{type:core.HostBinding,args:["class.cds--text-input-wrapper"]}],isReadonly:[{type:core.HostBinding,args:["class.cds--text-input-wrapper--readonly"]}],fluidClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid"]}],fluidSkeletonClass:[{type:core.HostBinding,args:["class.cds--text-input--fluid__skeleton"]}]},PasswordInputLabelComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-password-label, ibm-password-label",template:'\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}">\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">\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    '})],PasswordInputLabelComponent);var tooltip=__webpack_require__("./src/tooltip/index.ts");let InputModule=class InputModule{};InputModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Label,TextInput,TextArea,PasswordInput,TextareaLabelComponent,TextInputLabelComponent,PasswordInputLabelComponent],exports:[Label,TextareaLabelComponent,TextInputLabelComponent,PasswordInputLabelComponent,TextInput,TextArea,PasswordInput],imports:[common.CommonModule,fesm2020_forms.u5,icon.QX,src_button.hJ,tooltip.z8]})],InputModule)}}]);