carbon-components-angular/docs/storybook/datepicker-datepicker-stories.559a71ec.iframe.bundle.js

Next generation components

"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[6663],{"./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/datepicker/datepicker.stories.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Basic:()=>Basic,Range:()=>Range,Single:()=>Single,Skeleton:()=>Skeleton,__namedExportsOrder:()=>__namedExportsOrder,default:()=>datepicker_stories,withAILabel:()=>withAILabel});var dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),rangePlugin=__webpack_require__("./node_modules/flatpickr/dist/plugins/rangePlugin.js"),rangePlugin_default=__webpack_require__.n(rangePlugin),esm=__webpack_require__("./node_modules/flatpickr/dist/esm/index.js"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");const monthToStr=(monthNumber,shorthand,locale)=>locale.months[shorthand?"shorthand":"longhand"][monthNumber],config_selectorFlatpickrMonthYearContainer=".flatpickr-current-month",config_selectorFlatpickrYearContainer=".numInputWrapper",config_classFlatpickrCurrentMonth="cur-month",config_shorthand=!1,carbonFlatpickrMonthSelectPlugin=fp=>{const updateCurrentMonth=()=>{if(!fp.yearElements)return;const monthStr=monthToStr(fp.currentMonth,!0===config_shorthand,fp.l10n);fp.yearElements.forEach((elem=>{const currentMonthContainer=elem.closest(config_selectorFlatpickrMonthYearContainer);Array.prototype.forEach.call(currentMonthContainer.querySelectorAll(".cur-month"),(monthElement=>{monthElement.textContent=monthStr}))}))};return{onMonthChange:updateCurrentMonth,onValueUpdate:updateCurrentMonth,onOpen:updateCurrentMonth,onReady:[()=>{fp.monthElements&&fp.yearElements&&(fp.monthElements.forEach((elem=>{elem.parentNode&&elem.parentNode.removeChild(elem)})),fp.monthElements.splice(0,fp.monthElements.length,...fp.monthElements.map((()=>{const monthElement=fp._createElement("span",config_classFlatpickrCurrentMonth);return monthElement.textContent=monthToStr(fp.currentMonth,!0===config_shorthand,fp.l10n),fp.yearElements[0].closest(config_selectorFlatpickrMonthYearContainer).insertBefore(monthElement,fp.yearElements[0].closest(config_selectorFlatpickrYearContainer)),monthElement}))))},updateCurrentMonth,()=>{fp.loadedPlugins.push("carbonFlatpickrMonthSelectPlugin")}]}};var l10n=__webpack_require__("./node_modules/flatpickr/dist/l10n/index.js"),l10n_default=__webpack_require__.n(l10n),i18n=__webpack_require__("./src/i18n/index.ts");l10n_default()?.default.en?.weekdays&&(l10n_default().default.en.weekdays.shorthand=l10n_default().default.en.weekdays.longhand.map((day=>"Thursday"===day?"Th":day.charAt(0))));let DatePicker=class DatePicker{constructor(elementRef,i18n){this.elementRef=elementRef,this.i18n=i18n,this.range=!1,this.dateFormat="m/d/Y",this.language="en",this.placeholder="mm/dd/yyyy",this.ariaLabel="calendar container",this.inputPattern="^\\d{1,2}/\\d{1,2}/\\d{4}$",this.id="datepicker-"+DatePicker.datePickerCount++,this.theme="dark",this.disabled=!1,this.readonly=!1,this.invalid=!1,this.warn=!1,this.size="md",this.rangeInvalid=!1,this.rangeWarn=!1,this.skeleton=!1,this.plugins=[],this.valueChange=new core.EventEmitter,this.onClose=new core.EventEmitter,this._value=[],this._flatpickrOptions={allowInput:!0},this.flatpickrBaseOptions={mode:"single",dateFormat:"m/d/Y",plugins:this.plugins,onOpen:()=>{this.updateClassNames(),this.updateAttributes(),this.updateCalendarListeners()},onClose:date=>{if(this.range&&this.flatpickrInstance){const inputValue=this.input.input.nativeElement.value,rangeInputValue=this.rangeInput.input.nativeElement.value;if(inputValue||rangeInputValue){const parseDate=date=>this.flatpickrInstance.parseDate(date,this.dateFormat);this.setDateValues([parseDate(inputValue),parseDate(rangeInputValue||inputValue)]),this.doSelect(this.flatpickrInstance.selectedDates)}}this.onClose.emit(date)},onDayCreate:(_dObj,_dStr,_fp,dayElem)=>{dayElem.classList.add("cds--date-picker__day")},nextArrow:this.rightArrowHTML(),prevArrow:this.leftArrowHTML(),value:this.value},this.flatpickrInstance=null,this.onTouched=()=>{},this.propagateChange=_=>{},this.preventCalendarClose=event=>event.stopPropagation()}set value(v){v||(v=[]),this._value=v}get value(){return this._value}set flatpickrOptions(options){this._flatpickrOptions=Object.assign({},this._flatpickrOptions,options)}get flatpickrOptions(){const plugins=[...this.plugins,carbonFlatpickrMonthSelectPlugin];return this.range&&plugins.push(rangePlugin_default()({input:`#${this.id}-rangeInput`,position:"left"})),Object.assign({},this._flatpickrOptions,this.flatpickrBaseOptions,{mode:this.range?"range":"single",plugins,dateFormat:this.dateFormat,locale:l10n_default()?.default[this.language]||l10n_default()[this.language],clickOpens:!this.readonly})}ngOnInit(){"en"!==this.i18n.getLocale()&&this.i18n.getLocaleObservable().subscribe((locale=>{this.language=locale,this.resetFlatpickrInstance()}))}ngOnChanges(changes){const flatpickrChangeKeys=["range","dateFormat","language","id","value","plugins","flatpickrOptions","readonly"];Object.keys(changes).some((key=>flatpickrChangeKeys.includes(key)))&&this.resetFlatpickrInstance(changes.value)}ngAfterViewInit(){this.skeleton||(this.input.input.nativeElement.value=this._value[0]??"",this.range&&(this.rangeInput.input.nativeElement.value=this._value[1]??"")),setTimeout((()=>{this.addInputListeners()}),0)}ngAfterViewChecked(){this.isFlatpickrLoaded()||(this.flatpickrInstance=(0,esm.Z)(`#${this.id}-input`,this.flatpickrOptions),this.isFlatpickrLoaded()&&this.value.length>0&&this.setDateValues(this.value))}onFocus(){if(this.range)if(this.rangeInput.input.nativeElement===document.activeElement&&this.flatpickrInstance.selectedDates[1]){const currentMonth=this.flatpickrInstance.selectedDates[1].getMonth();this.flatpickrInstance.changeMonth(currentMonth,!1)}else if(this.input.input.nativeElement===document.activeElement&&this.flatpickrInstance.selectedDates[0]){const currentMonth=this.flatpickrInstance.selectedDates[0].getMonth();this.flatpickrInstance.changeMonth(currentMonth,!1)}}onFocusOut(){this.onTouched()}writeValue(value){this.value=value,setTimeout((()=>{this.isFlatpickrLoaded()&&this.flatpickrInstance.config&&this.setDateValues(this.value)}))}setDisabledState(isDisabled){this.disabled=isDisabled}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}ngOnDestroy(){this.isFlatpickrLoaded()&&this.flatpickrInstance.destroy()}onValueChange(event){if(this.isFlatpickrLoaded()){const date=this.flatpickrInstance.parseDate(event,this.dateFormat);this.range?this.setDateValues([date,this.flatpickrInstance.selectedDates[1]]):this.setDateValues([date]),this.doSelect(this.flatpickrInstance.selectedDates)}}onRangeValueChange(event){if(this.isFlatpickrLoaded()&&this.flatpickrInstance.isOpen){const date=this.flatpickrInstance.parseDate(event,this.dateFormat);this.setDateValues([this.flatpickrInstance.selectedDates[0],date]),this.doSelect(this.flatpickrInstance.selectedDates)}}openCalendar(datepickerInput,event){if(!this.readonly&&!this.skeleton)if(this.isDecoratorClick(event))this.isFlatpickrLoaded()&&this.flatpickrInstance.isOpen&&this.flatpickrInstance.close();else if(this.range){if(datepickerInput.input.nativeElement.click(),datepickerInput===this.input&&this.flatpickrInstance.selectedDates[0]){const currentMonth=this.flatpickrInstance.selectedDates[0].getMonth();this.flatpickrInstance.currentYear=this.flatpickrInstance.selectedDates[0].getFullYear(),this.flatpickrInstance.changeMonth(currentMonth,!1)}}else this.flatpickrInstance.open()}isDecoratorClick(event){if(!event?.target)return!1;const t=event.target;return null!=(t instanceof Element?t:t.parentElement)?.closest(".cds--date-picker-input-inner-wrapper--decorator")}updateCalendarListeners(){const calendarContainer=document.querySelectorAll(".flatpickr-calendar");Array.from(calendarContainer).forEach((calendar=>{calendar.removeEventListener("click",this.preventCalendarClose),calendar.addEventListener("click",this.preventCalendarClose)}))}addInputListeners(){if(!this.isFlatpickrLoaded())return;const addFocusCalendarListener=element=>{element.addEventListener("keydown",(event=>{if(!this.readonly&&("Escape"===event.key&&this.flatpickrInstance.close(),"ArrowDown"===event.key)){this.flatpickrInstance.isOpen||this.flatpickrInstance.open();const calendarContainer=this.flatpickrInstance.calendarContainer,dayElement=calendarContainer&&calendarContainer.querySelector(".flatpickr-day[tabindex]"),selectedDateElem=calendarContainer&&calendarContainer.querySelector(".selected"),todayDateElem=calendarContainer&&calendarContainer.querySelector(".today");dayElement&&((todayDateElem||selectedDateElem||dayElement).focus(),document.activeElement!==dayElement&&this.flatpickrInstance.selectedDateElem&&this.flatpickrInstance.selectedDateElem.focus())}}))};this.input&&this.input.input&&addFocusCalendarListener(this.input.input.nativeElement),this.rangeInput&&this.rangeInput.input&&addFocusCalendarListener(this.rangeInput.input.nativeElement)}resetFlatpickrInstance(newDates){if(this.isFlatpickrLoaded()){let dates=this.flatpickrInstance.selectedDates;newDates&&this.didDateValueChange(newDates.currentValue,newDates.previousValue)&&(dates=newDates.currentValue),this.flatpickrInstance=(0,esm.Z)(`#${this.id}-input`,this.flatpickrOptions),this.setDateValues(dates)}}updateClassNames(){if(!this.elementRef)return;const calendarContainer=document.querySelectorAll(".flatpickr-calendar"),monthContainer=document.querySelectorAll(".flatpickr-month"),weekdaysContainer=document.querySelectorAll(".flatpickr-weekdays"),weekdayContainer=document.querySelectorAll(".flatpickr-weekday"),daysContainer=document.querySelectorAll(".flatpickr-days"),dayContainer=document.querySelectorAll(".flatpickr-day"),addClassIfNotExists=(classname,elementList)=>{Array.from(elementList).forEach((element=>{element.classList.contains(classname)||element.classList.add(classname)}))};addClassIfNotExists("cds--date-picker__calendar",calendarContainer),addClassIfNotExists("cds--date-picker__month",monthContainer),addClassIfNotExists("cds--date-picker__weekdays",weekdaysContainer),addClassIfNotExists("cds--date-picker__days",daysContainer),Array.from(weekdayContainer).forEach((element=>{element.innerHTML=element.innerHTML.replace(/\s+/g,""),element.classList.add("cds--date-picker__weekday")})),Array.from(dayContainer).forEach((element=>{element.setAttribute("role","button"),element.classList.add("cds--date-picker__day"),this.value&&(element.classList.contains("today")&&this.value.length>0?element.classList.add("no-border"):element.classList.contains("today")&&0===this.value.length&&element.classList.remove("no-border"))}))}updateAttributes(){const calendarContainer=document.querySelectorAll(".flatpickr-calendar");Array.from(calendarContainer).forEach((calendar=>{calendar.setAttribute("role","application"),calendar.setAttribute("aria-label",this.ariaLabel)}))}setDateValues(dates){if(this.isFlatpickrLoaded()){const singleInput=this.elementRef.nativeElement.querySelector(`#${this.id}-input`),rangeInput=this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);let shouldRefocusDateElement=this.flatpickrInstance.selectedDateElem===document.activeElement;this.flatpickrInstance.setDate(dates),shouldRefocusDateElement&&this.flatpickrInstance.selectedDateElem.focus();let singleDate="";if("string"==typeof this.flatpickrInstance.selectedDates[0]?(singleDate=this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0],this.dateFormat),singleDate=this.flatpickrInstance.formatDate(singleDate,this.dateFormat)):this.flatpickrInstance.selectedDates[0]&&(singleDate=this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0],this.dateFormat)),rangeInput){let rangeDate="";"string"==typeof this.flatpickrInstance.selectedDates[1]?(rangeDate=this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(),this.dateFormat),rangeDate=this.flatpickrInstance.formatDate(rangeDate,this.dateFormat)):this.flatpickrInstance.selectedDates[1]&&(rangeDate=this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1],this.dateFormat)),setTimeout((()=>{rangeInput.value=rangeDate,singleInput.value=singleDate}))}}}doSelect(selectedValue){if(this.range&&this.flatpickrInstance.selectedDates[0]){const currentMonth=this.flatpickrInstance.selectedDates[0].getMonth();let shouldRefocusDateElement=this.flatpickrInstance.selectedDateElem===document.activeElement;this.flatpickrInstance.changeMonth(currentMonth,!1),shouldRefocusDateElement&&this.flatpickrInstance.selectedDateElem.focus()}this.valueChange.emit(selectedValue),this.propagateChange(selectedValue)}didDateValueChange(currentValue,previousValue){return currentValue[0]!==previousValue[0]||currentValue[1]!==previousValue[1]}isFlatpickrLoaded(){return!!this.flatpickrInstance&&!!this.flatpickrInstance.setDate}rightArrowHTML(){return'\n\t\t\t<svg width="16px" height="16px" viewBox="0 0 16 16">\n\t\t\t\t<polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>\n\t\t\t\t<rect width="16" height="16" style="fill:none" />\n\t\t\t</svg>'}leftArrowHTML(){return'\n\t\t\t<svg width="16px" height="16px" viewBox="0 0 16 16">\n\t\t\t\t<polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>\n\t\t\t\t<rect width="16" height="16" style="fill:none" />\n\t\t\t</svg>'}};DatePicker.datePickerCount=0,DatePicker.ctorParameters=()=>[{type:core.ElementRef},{type:i18n.oc}],DatePicker.propDecorators={range:[{type:core.Input}],dateFormat:[{type:core.Input}],language:[{type:core.Input}],label:[{type:core.Input}],helperText:[{type:core.Input}],decorator:[{type:core.Input}],rangeDecorator:[{type:core.Input}],rangeHelperText:[{type:core.Input}],rangeLabel:[{type:core.Input}],placeholder:[{type:core.Input}],ariaLabel:[{type:core.Input}],inputPattern:[{type:core.Input}],id:[{type:core.Input}],value:[{type:core.Input}],theme:[{type:core.Input}],disabled:[{type:core.Input}],readonly:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],size:[{type:core.Input}],rangeInvalid:[{type:core.Input}],rangeInvalidText:[{type:core.Input}],rangeWarn:[{type:core.Input}],rangeWarnText:[{type:core.Input}],skeleton:[{type:core.Input}],plugins:[{type:core.Input}],flatpickrOptions:[{type:core.Input}],input:[{type:core.ViewChild,args:["input",{static:!0}]}],rangeInput:[{type:core.ViewChild,args:["rangeInput"]}],valueChange:[{type:core.Output}],onClose:[{type:core.Output}],onFocus:[{type:core.HostListener,args:["focusin"]}],onFocusOut:[{type:core.HostListener,args:["focusout"]}]},DatePicker=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-date-picker, ibm-date-picker",template:'\n\t<div class="cds--form-item">\n\t\t<div\n\t\t\tclass="cds--date-picker"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--date-picker--range\' : range,\n\t\t\t\t\'cds--date-picker--single\' : !range,\n\t\t\t\t\'cds--date-picker--light\' : theme === \'light\',\n\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t}">\n\t\t\t<div class="cds--date-picker-container">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]="label"\n\t\t\t\t\t[placeholder]="placeholder"\n\t\t\t\t\t[pattern]="inputPattern"\n\t\t\t\t\t[id]="id + \'-input\'"\n\t\t\t\t\t[size]="size"\n\t\t\t\t\t[type]="(range ? \'range\' : \'single\')"\n\t\t\t\t\t[hasIcon]="(range ? false : true)"\n\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t[readonly]="readonly"\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[skeleton]="skeleton"\n\t\t\t\t\t[helperText]="helperText"\n\t\t\t\t\t[decorator]="decorator"\n\t\t\t\t\t(valueChange)="onValueChange($event)"\n\t\t\t\t\t(click)="openCalendar(input, $event)">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf="range" class="cds--date-picker-container">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]="rangeLabel"\n\t\t\t\t\t[placeholder]="placeholder"\n\t\t\t\t\t[pattern]="inputPattern"\n\t\t\t\t\t[id]="id + \'-rangeInput\'"\n\t\t\t\t\t[size]="size"\n\t\t\t\t\t[type]="(range ? \'range\' : \'single\')"\n\t\t\t\t\t[hasIcon]="(range ? true : null)"\n\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t[readonly]="readonly"\n\t\t\t\t\t[invalid]="rangeInvalid"\n\t\t\t\t\t[invalidText]="rangeInvalidText"\n\t\t\t\t\t[warn]="rangeWarn"\n\t\t\t\t\t[warnText]="rangeWarnText"\n\t\t\t\t\t[skeleton]="skeleton"\n\t\t\t\t\t[helperText]="rangeHelperText"\n\t\t\t\t\t[decorator]="rangeDecorator"\n\t\t\t\t\t(valueChange)="onRangeValueChange($event)"\n\t\t\t\t\t(click)="openCalendar(rangeInput, $event)">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:DatePicker,multi:!0}],encapsulation:core.ViewEncapsulation.None})],DatePicker);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs");let DatePickerInput=class DatePickerInput{constructor(elementRef){this.elementRef=elementRef,this.type="simple",this.id="datepicker-"+DatePickerInput.datePickerCount++,this.hasIcon=!1,this.placeholder="mm/dd/yyyy",this.pattern="^\\d{1,2}/\\d{1,2}/\\d{4}$",this.valueChange=new core.EventEmitter,this.theme="dark",this.disabled=!1,this.readonly=!1,this.invalid=!1,this.warn=!1,this.skeleton=!1,this.value="",this.size="md",this.onTouched=()=>{},this.propagateChange=_=>{}}onChange(event){this.value=event.target.value,this.valueChange.emit(this.value),this.propagateChange(this.value),this.onTouched()}writeValue(value){this.value=value}registerOnChange(fn){this.propagateChange=fn}registerOnTouched(fn){this.onTouched=fn}isTemplate(value){return value instanceof core.TemplateRef}};DatePickerInput.datePickerCount=0,DatePickerInput.ctorParameters=()=>[{type:core.ElementRef}],DatePickerInput.propDecorators={type:[{type:core.Input}],id:[{type:core.Input}],hasIcon:[{type:core.Input}],label:[{type:core.Input}],placeholder:[{type:core.Input}],pattern:[{type:core.Input}],valueChange:[{type:core.Output}],theme:[{type:core.Input}],disabled:[{type:core.Input}],readonly:[{type:core.Input}],invalid:[{type:core.Input}],invalidText:[{type:core.Input}],warn:[{type:core.Input}],warnText:[{type:core.Input}],helperText:[{type:core.Input}],decorator:[{type:core.Input}],skeleton:[{type:core.Input}],value:[{type:core.Input}],size:[{type:core.Input}],input:[{type:core.ViewChild,args:["input"]}]},DatePickerInput=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-date-picker-input, ibm-date-picker-input",template:'\n\t<div class="cds--form-item">\n\t\t<div class="cds--date-picker"\n\t\t\t[ngClass]="{\n\t\t\t\t\'cds--date-picker--simple\' : type === \'simple\',\n\t\t\t\t\'cds--date-picker--single\' : type === \'single\',\n\t\t\t\t\'cds--date-picker--range\' : type === \'range\',\n\t\t\t\t\'cds--date-picker--light\' : theme === \'light\',\n\t\t\t\t\'cds--skeleton\' : skeleton\n\t\t\t}">\n\t\t\t<div class="cds--date-picker-container">\n\t\t\t\t\x3c!-- Skeleton structure --\x3e\n\t\t\t\t<ng-container *ngIf="skeleton">\n\t\t\t\t\t<span class="cds--label cds--skeleton"></span>\n\t\t\t\t\t<div class="cds--date-picker__input cds--skeleton"></div>\n\t\t\t\t</ng-container>\n\t\t\t\t<label\n\t\t\t\t\t*ngIf="label && !skeleton"\n\t\t\t\t\t[for]="id"\n\t\t\t\t\tclass="cds--label"\n\t\t\t\t\t[ngClass]="{\'cds--label--disabled\': disabled}">\n\t\t\t\t\t<ng-container *ngIf="!isTemplate(label)">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf="isTemplate(label)" [ngTemplateOutlet]="label"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div class="cds--date-picker-input__wrapper"\n\t\t\t\t\t*ngIf="!skeleton"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--date-picker-input__wrapper--invalid\': invalid,\n\t\t\t\t\t\t\'cds--date-picker-input__wrapper--warn\': warn,\n\t\t\t\t\t\t\'cds--date-picker-input__wrapper--decorator\': !!decorator\n\t\t\t\t\t}">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t#input\n\t\t\t\t\t\t\tautocomplete="off"\n\t\t\t\t\t\t\ttype="text"\n\t\t\t\t\t\t\tclass="cds--date-picker__input"\n\t\t\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\t\t\'cds--date-picker__input--sm\': size === \'sm\',\n\t\t\t\t\t\t\t\t\'cds--date-picker__input--md\': size === \'md\',\n\t\t\t\t\t\t\t\t\'cds--date-picker__input--lg\': size === \'lg\'\n\t\t\t\t\t\t\t}"\n\t\t\t\t\t\t\t[attr.data-invalid]="invalid ? true : undefined"\n\t\t\t\t\t\t\t[value]="value"\n\t\t\t\t\t\t\t[pattern]="pattern"\n\t\t\t\t\t\t\t[placeholder]="placeholder"\n\t\t\t\t\t\t\t[id]="id"\n\t\t\t\t\t\t\t[disabled]="disabled"\n\t\t\t\t\t\t\t[readonly]="readonly"\n\t\t\t\t\t\t\t(change)="onChange($event)"/>\n\t\t\t\t\t\t<ng-container *ngIf="decorator">\n\t\t\t\t\t\t\t<div class="cds--date-picker-input-inner-wrapper--decorator">\n\t\t\t\t\t\t\t\t<ng-template [ngTemplateOutlet]="decorator"></ng-template>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="type !== \'simple\' && !warn && !invalid"\n\t\t\t\t\t\t\tcdsIcon="calendar"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--date-picker__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="invalid"\n\t\t\t\t\t\t\tclass="cds--date-picker__icon cds--date-picker__icon--invalid"\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</svg>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t*ngIf="!invalid && warn"\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--date-picker__icon cds--date-picker__icon--warn">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\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</div>\n\t\t</div>\n</div>\n\t',providers:[{provide:fesm2020_forms.JU,useExisting:DatePickerInput,multi:!0}]})],DatePickerInput);var icon=__webpack_require__("./src/icon/index.ts");let DatePickerInputModule=class DatePickerInputModule{};DatePickerInputModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[DatePickerInput],exports:[DatePickerInput],imports:[common.CommonModule,icon.QX]})],DatePickerInputModule);var utils=__webpack_require__("./src/utils/index.ts");let DatePickerModule=class DatePickerModule{};DatePickerModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[DatePicker],exports:[DatePicker,DatePickerInputModule],imports:[common.CommonModule,DatePickerInputModule,utils.As,i18n.LU]})],DatePickerModule);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 datepicker_stories={title:"Components/Date Picker",decorators:[(0,dist.moduleMetadata)({imports:[DatePickerModule,ai_label.uV,src_button.hJ,icon.QX]})],args:{label:"Label text",placeholder:"mm/dd/yyyy",invalidText:"Invalid date format",invalid:!1,warnText:"This is a warning",warn:!1,disabled:!1,readonly:!1,language:"en",theme:"dark",size:"md"},argTypes:{theme:{options:["light","dark"],control:"radio"},size:{options:["sm","md","lg"],control:"radio"},valueChange:{action:"Date changed!"}},component:DatePicker},Basic=(args=>({props:args,template:'\n        <cds-date-picker-input\n            [theme]="theme"\n            [label]="label"\n            [placeholder]="placeholder"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker-input>\n    '})).bind({}),withAILabel=(args=>({props:args,styles:ai_label_story_shared.J6,template:'\n        <cds-date-picker\n            [theme]="theme"\n            [label]="label"\n            [placeholder]="placeholder"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [type]="\'single\'"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [decorator]="decoratorTpl"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                '+ai_label_story_shared.Ag+"\n            </cds-ai-label>\n        </ng-template>\n    "})).bind({}),Single=(args=>({props:args,template:'\n        <p>With initial value</p>\n        <cds-date-picker\n            [label]="label"\n            id="initial-value-datepicker"\n            [placeholder]="placeholder"\n            [language]="language"\n            [size]="size"\n            [theme]="theme"\n            [value]="value"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [dateFormat]="dateFormat"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker>\n        <p style="margin-top: 20px;">Without initial value</p>\n        <cds-date-picker\n            [label]="label"\n            [placeholder]="placeholder"\n            [language]="language"\n            [size]="size"\n            [theme]="theme"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [dateFormat]="dateFormat"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker>\n    '})).bind({});Single.args={dateFormat:"m/d/y",language:"en"},Single.argTypes={language:{options:["en","de","fi","ja","zh","es","fr","it","ko","pt"],control:"select"}};const Range=(args=>({props:args,template:'\n        <p>With initial value</p>\n        <cds-date-picker\n            [label]="label"\n            [rangeLabel]="label"\n            [size]="size"\n            range="true"\n            id="initial-value-range-datepicker"\n            [placeholder]="placeholder"\n            [language]="language"\n            [theme]="theme"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [rangeInvalid]="invalid"\n            [rangeInvalidText]="invalidText"\n            [dateFormat]="dateFormat"\n            [flatpickrOptions]="flatpickrOptions"\n            [value]="value"\n            (valueChange)="valueChange($event)"\n            [helperText]="helperText">\n        </cds-date-picker>\n        <p style="margin-top: 20px;">Without initial value</p>\n        <cds-date-picker\n            [label]="label"\n            [rangeLabel]="label"\n            [size]="size"\n            range="true"\n            [language]="language"\n            [placeholder]="placeholder"\n            [theme]="theme"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [rangeWarn]="warn"\n            [rangeWarnText]="warnText"\n            [dateFormat]="dateFormat"\n            [flatpickrOptions]="flatpickrOptions"\n            (valueChange)="valueChange($event)"\n            [helperText]="helperText">\n        </cds-date-picker>\n    '})).bind({});Range.args={dateFormat:"d/m/Y",value:["02/11/24","08/11/24"],language:"en",flatpickrOptions:{minDate:new Date("11/01/24"),maxDate:new Date("11/30/24")}},Range.argTypes={language:{options:["en","de","fi","ja","zh","es","fr","it","ko","pt"],control:"select"}};const Skeleton=(args=>({props:args,template:'\n    <cds-date-picker\n        range="true"\n        skeleton="true">\n    </cds-date-picker>\n    '})).bind({});Basic.parameters={...Basic.parameters,docs:{...Basic.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <cds-date-picker-input\n            [theme]="theme"\n            [label]="label"\n            [placeholder]="placeholder"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker-input>\n    `\n})',...Basic.parameters?.docs?.source}}},withAILabel.parameters={...withAILabel.parameters,docs:{...withAILabel.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  styles: AI_LABEL_STORY_STYLES,\n  template: `\n        <cds-date-picker\n            [theme]="theme"\n            [label]="label"\n            [placeholder]="placeholder"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [size]="size"\n            [type]="\'single\'"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [decorator]="decoratorTpl"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker>\n        <ng-template #decoratorTpl>\n            <cds-ai-label\n                class="ai-label-container"\n                kind="default"\n                size="mini"\n                [autoAlign]="true"\n                aiText="AI"\n                ariaLabel="Show information">\n                ` + AI_LABEL_INNER + `\n            </cds-ai-label>\n        </ng-template>\n    `\n})',...withAILabel.parameters?.docs?.source}}},Single.parameters={...Single.parameters,docs:{...Single.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <p>With initial value</p>\n        <cds-date-picker\n            [label]="label"\n            id="initial-value-datepicker"\n            [placeholder]="placeholder"\n            [language]="language"\n            [size]="size"\n            [theme]="theme"\n            [value]="value"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [dateFormat]="dateFormat"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker>\n        <p style="margin-top: 20px;">Without initial value</p>\n        <cds-date-picker\n            [label]="label"\n            [placeholder]="placeholder"\n            [language]="language"\n            [size]="size"\n            [theme]="theme"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [dateFormat]="dateFormat"\n            (valueChange)="valueChange($event)">\n        </cds-date-picker>\n    `\n})',...Single.parameters?.docs?.source}}},Range.parameters={...Range.parameters,docs:{...Range.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n        <p>With initial value</p>\n        <cds-date-picker\n            [label]="label"\n            [rangeLabel]="label"\n            [size]="size"\n            range="true"\n            id="initial-value-range-datepicker"\n            [placeholder]="placeholder"\n            [language]="language"\n            [theme]="theme"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [rangeInvalid]="invalid"\n            [rangeInvalidText]="invalidText"\n            [dateFormat]="dateFormat"\n            [flatpickrOptions]="flatpickrOptions"\n            [value]="value"\n            (valueChange)="valueChange($event)"\n            [helperText]="helperText">\n        </cds-date-picker>\n        <p style="margin-top: 20px;">Without initial value</p>\n        <cds-date-picker\n            [label]="label"\n            [rangeLabel]="label"\n            [size]="size"\n            range="true"\n            [language]="language"\n            [placeholder]="placeholder"\n            [theme]="theme"\n            [disabled]="disabled"\n            [readonly]="readonly"\n            [invalid]="invalid"\n            [invalidText]="invalidText"\n            [warn]="warn"\n            [warnText]="warnText"\n            [rangeWarn]="warn"\n            [rangeWarnText]="warnText"\n            [dateFormat]="dateFormat"\n            [flatpickrOptions]="flatpickrOptions"\n            (valueChange)="valueChange($event)"\n            [helperText]="helperText">\n        </cds-date-picker>\n    `\n})',...Range.parameters?.docs?.source}}},Skeleton.parameters={...Skeleton.parameters,docs:{...Skeleton.parameters?.docs,source:{originalSource:'args => ({\n  props: args,\n  template: `\n    <cds-date-picker\n        range="true"\n        skeleton="true">\n    </cds-date-picker>\n    `\n})',...Skeleton.parameters?.docs?.source}}};const __namedExportsOrder=["Basic","withAILabel","Single","Range","Skeleton"]}}]);