carbon-components-angular/docs/storybook/number-input-number-stories.d96ba54c.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[5368],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/ai-label/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{zb:()=>AILabelActions,UD:()=>AILabelComponent,q:()=>AILabelContent,uV:()=>AILabelModule});var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs");let AILabelActions=class AILabelActions{constructor(){this.toggletipActions=!0,this.aiLabelActions=!0}};AILabelActions.propDecorators={toggletipActions:[{type:core.HostBinding,args:["class.cds--toggletip-actions"]}],aiLabelActions:[{type:core.HostBinding,args:["class.cds--ai-label-actions"]}]},AILabelActions=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelActions], [ibmAILabelActions]"})],AILabelActions);let AILabelContent=class AILabelContent{};AILabelContent=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelContent], [ibmAILabelContent]"})],AILabelContent);var popover=__webpack_require__("./src/popover/index.ts");let AILabelPopoverDirective=class AILabelPopoverDirective extends popover.OI{constructor(elementRef,ngZone,renderer,changeDetectorRef){super(elementRef,ngZone,renderer,changeDetectorRef),this.elementRef=elementRef,this.ngZone=ngZone,this.renderer=renderer,this.changeDetectorRef=changeDetectorRef,this.highContrast=!0,this.dropShadow=!1}initializeReferences(){this.updateAlignmentClass(this._align),this.bindPopoverRefs(),this.handleChange(this.isOpen)}ngOnChanges(changes){const originalState=this.isOpen;this.handleChange(!1),changes.autoAlign&&!changes.autoAlign.firstChange&&(this.popoverContentRef?.setAttribute("style",""),this.bindPopoverRefs()),this.handleChange(originalState)}bindPopoverRefs(){const panel=this.elementRef.nativeElement.querySelector(":scope > span.cds--popover");panel&&(this.popoverContentRef=panel.querySelector(":scope > span.cds--popover-content"),this.caretRef=this.resolveCaretRef(panel))}resolveCaretRef(panel){return this.autoAlign?panel.querySelector("span.cds--popover-content > span.cds--popover-caret.cds--popover--auto-align"):panel.querySelector(":scope > span.cds--popover-caret")}};AILabelPopoverDirective.ctorParameters=()=>[{type:core.ElementRef},{type:core.NgZone},{type:core.Renderer2},{type:core.ChangeDetectorRef}],AILabelPopoverDirective=(0,tslib_es6.gn)([(0,core.Directive)({selector:"[cdsAILabelPopover]"})],AILabelPopoverDirective);let AILabelComponent=class AILabelComponent{constructor(elementRef){this.elementRef=elementRef,this.aiLabelClass=!0,this.caret=!0,this.dropShadow=!1,this.highContrast=!0,this.autoAlign=!1,this.isOpen=!1,this.onClose=new core.EventEmitter,this.onOpen=new core.EventEmitter,this.isOpenChange=new core.EventEmitter,this.id="ai-label-"+AILabelComponent.labelCounter++,this.aiText="AI",this.kind="default",this.size="xs",this.revertActive=!1,this.revertLabel="Revert to AI input",this.ariaLabel="Show information",this.revertClick=new core.EventEmitter,this.documentClick=this.handleOutsideClick.bind(this)}get revertClass(){return this.revertActive}get alignmentAxisOffset(){return["mini","2xs","xs"].includes(this.size)?-24:0}onPopoverIsOpenChange(open){this.isOpen=open,this.isOpenChange.emit(open)}get triggerClasses(){return{"cds--toggletip-button":!0,"cds--ai-label__button":!0,[`cds--ai-label__button--${this.size}`]:!0,[`cds--ai-label__button--${this.kind}`]:!0,"cds--ai-label__button--inline-with-content":"inline"===this.kind&&!!this.textLabel}}get computedAriaLabel(){const suffix="inline"===this.kind&&this.textLabel?this.textLabel:this.ariaLabel;return`${this.aiText} ${suffix}`}ngAfterViewInit(){this.isOpen&&document.addEventListener("click",this.documentClick)}ngOnChanges(changes){changes.revertActive&&!changes.revertActive.firstChange&&changes.revertActive.currentValue&&(this.isOpen=!1,document.removeEventListener("click",this.documentClick))}ngOnDestroy(){document.removeEventListener("click",this.documentClick)}onTriggerClick(event){const opening=!this.isOpen;opening?document.addEventListener("click",this.documentClick):document.removeEventListener("click",this.documentClick),this.aiLabelPopover?.handleChange(opening,event)}onRevertButtonClick(event){this.revertClick.emit(event)}hostkeys(event){this.isOpen&&"Escape"===event.key&&(event.stopPropagation(),document.removeEventListener("click",this.documentClick),this.aiLabelPopover?.handleChange(!1,event))}handleOutsideClick(event){this.elementRef.nativeElement.contains(event.target)||(this.aiLabelPopover?.handleChange(!1,event),document.removeEventListener("click",this.documentClick))}};AILabelComponent.labelCounter=0,AILabelComponent.ctorParameters=()=>[{type:core.ElementRef}],AILabelComponent.propDecorators={aiLabelClass:[{type:core.HostBinding,args:["class.cds--ai-label"]}],revertClass:[{type:core.HostBinding,args:["class.cds--ai-label--revert"]}],align:[{type:core.Input}],caret:[{type:core.Input}],dropShadow:[{type:core.Input}],highContrast:[{type:core.Input}],autoAlign:[{type:core.Input}],isOpen:[{type:core.Input}],onClose:[{type:core.Output}],onOpen:[{type:core.Output}],isOpenChange:[{type:core.Output}],id:[{type:core.Input}],aiText:[{type:core.Input}],textLabel:[{type:core.Input}],kind:[{type:core.Input}],size:[{type:core.Input}],revertActive:[{type:core.Input}],revertLabel:[{type:core.Input}],ariaLabel:[{type:core.Input}],revertClick:[{type:core.Output}],aiLabelPopover:[{type:core.ViewChild,args:["aiLabelPopoverHost",{read:AILabelPopoverDirective}]}],hostkeys:[{type:core.HostListener,args:["keyup",["$event"]]}]},AILabelComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-ai-label, ibm-ai-label",changeDetection:core.ChangeDetectionStrategy.OnPush,template:'\n\t\t<ng-container *ngIf="!revertActive">\n\t\t\t<span\n\t\t\t\t#aiLabelPopoverHost\n\t\t\t\tcdsAILabelPopover\n\t\t\t\tclass="cds--toggletip"\n\t\t\t\t[isOpen]="isOpen"\n\t\t\t\t(isOpenChange)="onPopoverIsOpenChange($event)"\n\t\t\t\t(onOpen)="onOpen.emit($event)"\n\t\t\t\t(onClose)="onClose.emit($event)"\n\t\t\t\t[align]="align"\n\t\t\t\t[caret]="caret"\n\t\t\t\t[dropShadow]="dropShadow"\n\t\t\t\t[highContrast]="highContrast"\n\t\t\t\t[autoAlign]="autoAlign"\n\t\t\t\t[alignmentAxisOffset]="alignmentAxisOffset">\n\t\t\t\t<button\n\t\t\t\t\ttype="button"\n\t\t\t\t\t[attr.aria-label]="computedAriaLabel"\n\t\t\t\t\t[attr.aria-expanded]="isOpen"\n\t\t\t\t\t[attr.aria-controls]="id"\n\t\t\t\t\t[ngClass]="triggerClasses"\n\t\t\t\t\t(click)="onTriggerClick($event)">\n\t\t\t\t\t<span class="cds--ai-label__text">{{aiText}}</span>\n\t\t\t\t\t<span *ngIf="kind === \'inline\' && textLabel" class="cds--ai-label__additional-text">{{textLabel}}</span>\n\t\t\t\t</button>\n\n\t\t\t\t<span\n\t\t\t\t\t[id]="id"\n\t\t\t\t\tclass="cds--popover"\n\t\t\t\t\taria-live="polite">\n\t\t\t\t\t<span class="cds--popover-content cds--ai-label-content">\n\t\t\t\t\t\t<div class="cds--toggletip-content">\n\t\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span *ngIf="autoAlign" class="cds--popover-caret cds--popover--auto-align"></span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf="!autoAlign" class="cds--popover-caret"></span>\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</ng-container>\n\n\t\t<cds-icon-button\n\t\t\t*ngIf="revertActive"\n\t\t\tkind="ghost"\n\t\t\tsize="sm"\n\t\t\t[description]="revertLabel"\n\t\t\t[autoAlign]="autoAlign"\n\t\t\t[buttonAttributes]="{ \'aria-label\': revertLabel }"\n\t\t\t(click)="onRevertButtonClick($event)">\n\t\t\t<svg cdsIcon="undo" size="16"></svg>\n\t\t</cds-icon-button>\n\t'})],AILabelComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),src_button=__webpack_require__("./src/button/index.ts"),icon=__webpack_require__("./src/icon/index.ts");let AILabelModule=class AILabelModule{};AILabelModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[AILabelComponent,AILabelPopoverDirective,AILabelContent,AILabelActions],exports:[AILabelComponent,AILabelContent,AILabelActions],imports:[common.CommonModule,src_button.hJ,icon.QX,popover.UU]})],AILabelModule)},"./src/number-input/number.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Fluid:()=>Fluid,NgModel:()=>NgModel,Skeleton:()=>Skeleton,__namedExportsOrder:()=>__namedExportsOrder,default:()=>number_stories,withAILabel:()=>withAILabel});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts");class NumberChange{}let NumberComponent=class NumberComponent{constructor(i18n){this.i18n=i18n,this.containerClass=!0,this.readonly=!1,this.theme="dark",this.disabled=!1,this.skeleton=!1,this.invalid=!1,this.id=`number-${NumberComponent.numberCount}`,this.placeholder="",this.size="md",this.min=null,this.max=null,this.step=1,this.warn=!1,this.hideLabel=!1,this.hideSteppers=!1,this.inputMode="decimal",this.change=new core.EventEmitter,this.fluid=!1,this._isFocused=!1,this._value=0,this._decrementLabel=this.i18n.getOverridable("NUMBER.DECREMENT"),this._incrementLabel=this.i18n.getOverridable("NUMBER.INCREMENT"),this.onTouched=()=>{},this.propagateChange=_=>{},NumberComponent.numberCount++}set value(v){this._value=""!==v&&null!==v?Number(v):null}get value(){return this._value}set decrementLabel(value){this._decrementLabel.override(value)}get decrementLabel(){return this._decrementLabel.value}set incrementLabel(value){this._incrementLabel.override(value)}get incrementLabel(){return this._incrementLabel.value}get fluidInvalid(){return this.fluid&&this.invalid}get fluidDisabled(){return this.fluid&&this.disabled}get fluidFocus(){return this.fluid&&this._isFocused}get fluidSkeleton(){return this.fluid&&this.skeleton}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}focusOut(){this.onTouched()}setDisabledState(isDisabled){this.disabled=isDisabled}onIncrement(){return null!==this.max&&this.value+this.step>this.max?(this.value=this.max,void this.emitChangeEvent()):null!==this.min&&this.value+this.step<this.min?(this.value=this.min,void this.emitChangeEvent()):void((null===this.max||this.value+this.step<=this.max)&&(this.value+=this.step,this.value=parseFloat(this.value.toPrecision(this.precision)),this.emitChangeEvent()))}onDecrement(){return null!==this.max&&this.value-this.step>this.max?(this.value=this.max,void this.emitChangeEvent()):null!==this.min&&this.value-this.step<this.min?(this.value=this.min,void this.emitChangeEvent()):void((null===this.min||this.value-this.step>=this.min)&&(this.value-=this.step,this.value=parseFloat(this.value.toPrecision(this.precision)),this.emitChangeEvent()))}getDecrementLabel(){return this._decrementLabel.subject}getIncrementLabel(){return this._incrementLabel.subject}emitChangeEvent(){let event=new NumberChange;event.source=this,event.value=this.value,this.change.emit(event),this.propagateChange(this.value)}onNumberInputChange(event){this.value=event.target.value,this.emitChangeEvent()}isTemplate(value){return value instanceof core.TemplateRef}handleFocus(event){"type"in event.target&&"button"===event.target.type?this._isFocused=!1:this._isFocused="focus"===event.type}};NumberComponent.numberCount=0,NumberComponent.ctorParameters=()=>[{type:i18n.oc}],NumberComponent.propDecorators={containerClass:[{type:core.HostBinding,args:["class.cds--form-item"]}],readonly:[{type:core.Input},{type:core.HostBinding,args:["class.cds--number--readonly"]}],theme:[{type:core.Input}],disabled:[{type:core.Input}],skeleton:[{type:core.Input}],invalid:[{type:core.Input}],id:[{type:core.Input}],placeholder:[{type:core.Input}],size:[{type:core.Input}],required:[{type:core.Input}],value:[{type:core.Input}],min:[{type:core.Input}],max:[{type:core.Input}],label:[{type:core.Input}],decorator:[{type:core.Input}],helperText:[{type:core.Input}],invalidText:[{type:core.Input}],step:[{type:core.Input}],precision:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],ariaLabel:[{type:core.Input}],hideLabel:[{type:core.Input}],hideSteppers:[{type:core.Input}],inputMode:[{type:core.Input}],pattern:[{type:core.Input}],change:[{type:core.Output}],decrementLabel:[{type:core.Input}],incrementLabel:[{type:core.Input}],fluid:[{type:core.HostBinding,args:["class.cds--number-input--fluid"]},{type:core.Input}],fluidInvalid:[{type:core.HostBinding,args:["class.cds--number-input--fluid--invalid"]}],fluidDisabled:[{type:core.HostBinding,args:["class.cds--number-input--fluid--disabled"]}],fluidFocus:[{type:core.HostBinding,args:["class.cds--number-input--fluid--focus"]}],fluidSkeleton:[{type:core.HostBinding,args:["class.cds--text-input--fluid__skeleton"]}],focusOut:[{type:core.HostListener,args:["focusout"]}]},NumberComponent=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-number, ibm-number",template:'\n\t\t<label *ngIf="skeleton && label" class="cds--label cds--skeleton"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]="(invalid ? true : null)"\n\t\t\tclass="cds--number"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--number--light\': theme === \'light\',\n\t\t\t\t\'cds--number--nolabel\': hideLabel || !label,\n\t\t\t\t\'cds--number--nosteppers\': hideSteppers,\n\t\t\t\t\'cds--number--helpertext\': helperText,\n\t\t\t\t\'cds--skeleton\' : skeleton,\n\t\t\t\t\'cds--number--sm\': size === \'sm\',\n\t\t\t\t\'cds--number--md\': size === \'md\',\n\t\t\t\t\'cds--number--lg\': size === \'lg\'\n\t\t\t}">\n\t\t\t<label\n\t\t\t\t*ngIf="!skeleton && label"\n\t\t\t\t[for]="id"\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--visually-hidden\': hideLabel\n\t\t\t\t}">\n\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass="cds--number__input-wrapper"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--number__input-wrapper--warning\': warn,\n\t\t\t\t\t\'cds--number__input-wrapper--decorator\': !!decorator\n\t\t\t\t}">\n\t\t\t\t<input\n\t\t\t\t\ttype="number"\n\t\t\t\t\t[id]="id"\n\t\t\t\t\t[value]="value"\n\t\t\t\t\t[attr.min]="min"\n\t\t\t\t\t[attr.max]="max"\n\t\t\t\t\t[attr.step]="step"\n\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t[readonly]="readonly"\n\t\t\t\t\t[required]="required"\n\t\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\t\t[attr.data-invalid]="invalid ? invalid : null"\n\t\t\t\t\t[attr.inputmode]="inputMode || null"\n\t\t\t\t\t[attr.pattern]="pattern || null"\n\t\t\t\t\t[placeholder]="placeholder"\n\t\t\t\t\t(focus)="fluid ? handleFocus($event): null"\n\t\t\t\t\t(blur)="fluid ? handleFocus($event): null"\n\t\t\t\t\t(change)="onNumberInputChange($event)"/>\n\t\t\t\t<ng-container *ngIf="decorator">\n\t\t\t\t\t<div class="cds--number__input-inner-wrapper--decorator">\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]="decorator"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton && invalid"\n\t\t\t\t\tcdsIcon="warning--filled"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tclass="cds--number__invalid">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf="!skeleton && !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--number__invalid cds--number__invalid--warning">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf="!skeleton && !hideSteppers" class="cds--number__controls">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass="cds--number__control-btn down-icon"\n\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\t[attr.disabled]="disabled ? true : null"\n\t\t\t\t\t\taria-live="polite"\n\t\t\t\t\t\taria-atomic="true"\n\t\t\t\t\t\t[attr.aria-label]="getDecrementLabel() | async"\n\t\t\t\t\t\t(click)="onDecrement()">\n\t\t\t\t\t\t<svg cdsIcon="subtract" size="16"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class="cds--number__rule-divider"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass="cds--number__control-btn up-icon"\n\t\t\t\t\t\ttype="button"\n\t\t\t\t\t\t[attr.disabled]="disabled ? true : null"\n\t\t\t\t\t\taria-live="polite"\n\t\t\t\t\t\taria-atomic="true"\n\t\t\t\t\t\t[attr.aria-label]="getIncrementLabel() | async"\n\t\t\t\t\t\t(click)="onIncrement()">\n\t\t\t\t\t\t<svg cdsIcon="add" size="16"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class="cds--number__rule-divider"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf="fluid" class="cds--number-input__divider" />\n\t\t\t<div\n\t\t\t\t*ngIf="helperText && !invalid && !warn && !fluid"\n\t\t\t\tclass="cds--form__helper-text"\n\t\t\t\t[ngClass]="{\n\t\t\t\t\t\'cds--form__helper-text--disabled\': disabled\n\t\t\t\t}">\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</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:NumberComponent,multi:!0}]})],NumberComponent);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),icon=__webpack_require__("./src/icon/index.ts");let NumberModule=class NumberModule{};NumberModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[NumberComponent],exports:[NumberComponent],imports:[fesm2020_forms.u5,common.CommonModule,i18n.LU,icon.QX]})],NumberModule);var ai_label=__webpack_require__("./src/ai-label/index.ts"),src_button=__webpack_require__("./src/button/index.ts"),ai_label_story_shared=__webpack_require__("./src/storybook/ai-label-story-shared.ts");const number_stories={title:"Components/Number Input",decorators:[(0,dist.moduleMetadata)({imports:[NumberModule,fesm2020_forms.u5,ai_label.uV,src_button.hJ,icon.QX]})],args:{value:0,label:"Number input label",helperText:"Optional helper text",invalidText:"Invalid text",min:0,max:100,step:1,invalid:!1,readonly:!1,disabled:!1,size:"md",theme:"dark",warn:!1,warnText:"Warn text",fluid:!1,hideLabel:!1,hideSteppers:!1},argTypes:{size:{options:["sm","md","lg"],control:"radio"},theme:{options:["light","dark"],control:"radio"},change:{action:"changed"}},component:NumberComponent},Template=args=>({props:args,template:'\n        <cds-number\n            [label]="label"\n            [helperText]="[helperText]"\n            [theme]="theme"\n            [min]="min"\n            [max]="max"\n            [step]="step"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [size]="size"\n            [readonly]="readonly"\n            [disabled]="disabled"\n            [fluid]="fluid"\n            [hideLabel]="hideLabel"\n            [hideSteppers]="hideSteppers"\n            (change)="change($event)">\n        </cds-number>\n    '}),Basic=Template.bind({}),Fluid=Template.bind({});Fluid.args={fluid:!0};const NgModel=(args=>({props:args,template:'\n        <cds-number\n            [label]="label"\n            [helperText]="[helperText]"\n            [theme]="theme"\n            [min]="min"\n            [size]="size"\n            [max]="max"\n            [step]="step"\n            [precision]="precision"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [disabled]="disabled"\n            [(ngModel)]="value"\n            [fluid]="fluid"\n            [hideLabel]="hideLabel"\n            [hideSteppers]="hideSteppers"\n            (change)="change($event)">\n        </cds-number>\n        {{ value }}\n    '})).bind({});NgModel.story="ngModel";const Skeleton=(args=>({props:args,template:'\n        <cds-number\n            label="Number input label"\n            skeleton="true"\n            [fluid]="fluid"\n            (change)="change($event)">\n        </cds-number>\n    '})).bind({}),withAILabel=()=>({styles:ai_label_story_shared.J6,template:'\n        <cds-number\n            label="Number"\n            [decorator]="decoratorTpl"\n            [min]="0"\n            [max]="100">\n        </cds-number>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                [align]="\'bottom-end\'"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+"\n            </cds-ai-label>\n        </ng-template>\n    "});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-number\n            [label]="label"\n            [helperText]="[helperText]"\n            [theme]="theme"\n            [min]="min"\n            [max]="max"\n            [step]="step"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [size]="size"\n            [readonly]="readonly"\n            [disabled]="disabled"\n            [fluid]="fluid"\n            [hideLabel]="hideLabel"\n            [hideSteppers]="hideSteppers"\n            (change)="change($event)">\n        </cds-number>\n    `\n})',...Basic.parameters?.docs?.source}}},Fluid.parameters={...Fluid.parameters,docs:{...Fluid.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-number\n            [label]="label"\n            [helperText]="[helperText]"\n            [theme]="theme"\n            [min]="min"\n            [max]="max"\n            [step]="step"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [size]="size"\n            [readonly]="readonly"\n            [disabled]="disabled"\n            [fluid]="fluid"\n            [hideLabel]="hideLabel"\n            [hideSteppers]="hideSteppers"\n            (change)="change($event)">\n        </cds-number>\n    `\n})',...Fluid.parameters?.docs?.source}}},NgModel.parameters={...NgModel.parameters,docs:{...NgModel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-number\n            [label]="label"\n            [helperText]="[helperText]"\n            [theme]="theme"\n            [min]="min"\n            [size]="size"\n            [max]="max"\n            [step]="step"\n            [precision]="precision"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [disabled]="disabled"\n            [(ngModel)]="value"\n            [fluid]="fluid"\n            [hideLabel]="hideLabel"\n            [hideSteppers]="hideSteppers"\n            (change)="change($event)">\n        </cds-number>\n        {{ value }}\n    `\n})',...NgModel.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-number\n            label="Number input label"\n            skeleton="true"\n            [fluid]="fluid"\n            (change)="change($event)">\n        </cds-number>\n    `\n})',...Skeleton.parameters?.docs?.source}}},withAILabel.parameters={...withAILabel.parameters,docs:{...withAILabel.parameters?.docs,source:{originalSource:'() => ({\n  styles: AI_LABEL_STORY_STYLES,\n  template: `\n        <cds-number\n            label="Number"\n            [decorator]="decoratorTpl"\n            [min]="0"\n            [max]="100">\n        </cds-number>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                [align]="\'bottom-end\'"\n                aiText="AI"\n                ariaLabel="Show information">\n                ` + AI_LABEL_INNER + `\n            </cds-ai-label>\n        </ng-template>\n    `\n})',...withAILabel.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","Fluid","NgModel","Skeleton","withAILabel"]}}]);