carbon-components-angular/docs/storybook/1345.84217a3b.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.warn=!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}],warn:[{type:core.HostBinding,args:["class.cds--text-area--warn"]},{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,this.hideLabel=!1,this.inline=!1,this.size="md",this.enableCounter=!1,this.counterMode="character"}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}],hideLabel:[{type:core.Input}],inline:[{type:core.Input}],size:[{type:core.Input}],enableCounter:[{type:core.Input}],maxCount:[{type:core.Input}],counterMode:[{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[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'})],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.hideLabel=!1,this.enableCounter=!1,this.counterMode="character",this.textCount=0,this.labelClass=!0,this._textareaElement=null,this._inputListener=null}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()),inputElement.setAttribute("id",this.labelInputID),this._textareaElement=inputElement,this._syncMaxLength(),void(this.enableCounter&&(this.textCount=this._countValue(inputElement.value||""),this._attachCounterListener()));const divElement=this.wrapper.nativeElement.querySelector("div");divElement&&(divElement.id&&(this.labelInputID=divElement.id,this.changeDetectorRef.detectChanges()),divElement.setAttribute("id",this.labelInputID))}}ngOnChanges(changes){changes.enableCounter&&!changes.enableCounter.firstChange&&(changes.enableCounter.currentValue?this._textareaElement&&(this.textCount=this._countValue(this._textareaElement.value||""),this._attachCounterListener(),this.changeDetectorRef.detectChanges()):this._detachCounterListener()),!changes.maxCount&&!changes.counterMode||changes.maxCount?.firstChange&&changes.counterMode?.firstChange||this._syncMaxLength()}ngOnDestroy(){this._detachCounterListener()}isTemplate(value){return value instanceof core.TemplateRef}_syncMaxLength(){this._textareaElement&&("character"===this.counterMode&&null!=this.maxCount?this._textareaElement.setAttribute("maxlength",String(this.maxCount)):this._textareaElement.removeAttribute("maxlength"))}_attachCounterListener(){this._detachCounterListener(),this._textareaElement&&(this._inputListener=e=>{const el=e.target;if("word"===this.counterMode&&null!=this.maxCount){const clamped=this._truncateToWordLimit(el.value||"",this.maxCount);clamped!==el.value&&(el.value=clamped)}this.textCount=this._countValue(el.value||"")},this._textareaElement.addEventListener("input",this._inputListener))}_truncateToWordLimit(value,limit){let wordsSeen=0;const wordPattern=/\p{L}+/gu;let match,cutIndex=value.length;for(;null!==(match=wordPattern.exec(value));)if(wordsSeen++,wordsSeen===limit){cutIndex=match.index+match[0].length;break}return wordsSeen<limit?value:value.slice(0,cutIndex)}_detachCounterListener(){this._inputListener&&this._textareaElement&&(this._textareaElement.removeEventListener("input",this._inputListener),this._inputListener=null)}_countValue(value){return"word"===this.counterMode?value.match(/\p{L}+/gu)?.length||0:value.length}};TextareaLabelComponent.labelCounter=0,TextareaLabelComponent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],TextareaLabelComponent.propDecorators={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"]}],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}],hideLabel:[{type:core.Input}],enableCounter:[{type:core.Input}],maxCount:[{type:core.Input}],counterMode:[{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"]}]},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\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'})],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.hideLabel=!1,this.inline=!1,this.size="md",this.enableCounter=!1,this.textCount=0,this.labelClass=!0,this.textInputWrapper=!0,this._inputElement=null,this._inputListener=null}get isInlineWrapper(){return this.inline}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()),inputElement.setAttribute("id",this.labelInputID),this._inputElement=inputElement,void(this.enableCounter&&(this.textCount=inputElement.value?.length||0,this._attachCounterListener()));const divElement=this.wrapper.nativeElement.querySelector("div");divElement&&(divElement.id&&(this.labelInputID=divElement.id,this.changeDetectorRef.detectChanges()),divElement.setAttribute("id",this.labelInputID))}}ngOnChanges(changes){changes.enableCounter&&!changes.enableCounter.firstChange&&(changes.enableCounter.currentValue?this._inputElement&&(this.textCount=this._inputElement.value?.length||0,this._attachCounterListener(),this.changeDetectorRef.detectChanges()):this._detachCounterListener())}ngAfterContentInit(){this.changeDetectorRef.detectChanges()}ngOnDestroy(){this._detachCounterListener()}isTemplate(value){return value instanceof core.TemplateRef}_attachCounterListener(){this._detachCounterListener(),this._inputElement&&(this._inputListener=e=>{this.textCount=e.target.value?.length||0,this.changeDetectorRef.detectChanges()},this._inputElement.addEventListener("input",this._inputListener))}_detachCounterListener(){this._inputListener&&this._inputElement&&(this._inputElement.removeEventListener("input",this._inputListener),this._inputListener=null)}};TextInputLabelComponent.labelCounter=0,TextInputLabelComponent.ctorParameters=()=>[{type:core.ChangeDetectorRef}],TextInputLabelComponent.propDecorators={isInlineWrapper:[{type:core.HostBinding,args:["class.cds--text-input-wrapper--inline"]}],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"]}],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}],hideLabel:[{type:core.Input}],inline:[{type:core.Input}],size:[{type:core.Input}],enableCounter:[{type:core.Input}],maxCount:[{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"]}]},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<ng-container *ngIf="!skeleton">\n\t\t\t\x3c!-- non-inline: label-wrapper above field; inline: label+validation side-by-side --\x3e\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'})],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.hideLabel=!1,this.inline=!1,this.togglePasswordVisibility=new core.EventEmitter,this.labelClass=!0,this.passwordInputWrapper=!0,this.textInputWrapper=!0}get isReadonly(){return this.wrapper?.nativeElement.querySelector("input")?.readOnly??!1}get isInlineWrapper(){return this.inline}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,this.togglePasswordVisibility.emit(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}],hideLabel:[{type:core.Input}],inline:[{type:core.Input}],togglePasswordVisibility:[{type:core.Output}],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"]}],isInlineWrapper:[{type:core.HostBinding,args:["class.cds--text-input-wrapper--inline"]}],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\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    '})],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)}}]);