From d09e55500c1bf683941c1fbd1831cb6d9288c8b2 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Mon, 26 Nov 2018 22:19:48 +0100 Subject: [PATCH] chore(): update stencil (#16460) --- core/api.txt | 145 +++++++++++++++--- core/package.json | 6 +- core/scripts/api-spec-generator.js | 1 + core/src/components/action-sheet/readme.md | 26 ++-- core/src/components/alert/readme.md | 30 ++-- .../components/animation-controller/readme.md | 10 +- core/src/components/button/button.tsx | 8 +- core/src/components/datetime/readme.md | 46 +++--- core/src/components/fab/fab.tsx | 4 +- .../components/item-divider/item-divider.tsx | 2 +- core/src/components/item/item.tsx | 4 +- core/src/components/label/label.tsx | 4 +- core/src/components/list/list.tsx | 4 +- core/src/components/loading/readme.md | 4 +- core/src/components/menu-controller/readme.md | 8 +- core/src/components/modal/readme.md | 24 +-- core/src/components/nav/readme.md | 112 +++++++------- core/src/components/picker/readme.md | 26 ++-- core/src/components/popover/readme.md | 28 ++-- .../ripple-effect/ripple-effect.tsx | 3 +- core/src/components/router-outlet/readme.md | 8 +- .../segment-button/segment-button.tsx | 2 +- core/src/components/toast/readme.md | 30 ++-- core/src/components/virtual-scroll/readme.md | 26 ++-- core/src/utils/theme.ts | 2 +- core/tslint.json | 1 + 26 files changed, 331 insertions(+), 233 deletions(-) diff --git a/core/api.txt b/core/api.txt index 15fd9c07d8..a406b244a3 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1,16 +1,18 @@ +ion-action-sheet-controller ion-action-sheet-controller,method,create,create(opts: ActionSheetOptions) => Promise ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-action-sheet-controller,method,getTop,getTop() => Promise +ion-action-sheet ion-action-sheet,prop,animated,boolean,true,false ion-action-sheet,prop,backdropDismiss,boolean,true,false ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],undefined,false ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false -ion-action-sheet,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-action-sheet,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-action-sheet,prop,header,string | undefined,undefined,false ion-action-sheet,prop,keyboardClose,boolean,true,false -ion-action-sheet,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-action-sheet,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-action-sheet,prop,mode,"ios" | "md",undefined,false ion-action-sheet,prop,subHeader,string | undefined,undefined,false ion-action-sheet,prop,translucent,boolean,false,false @@ -27,19 +29,21 @@ ion-action-sheet,event,ionActionSheetWillPresent,void,true ion-action-sheet,css-prop,--max-width ion-action-sheet,css-prop,--width +ion-alert-controller ion-alert-controller,method,create,create(opts: AlertOptions) => Promise ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-alert-controller,method,getTop,getTop() => Promise +ion-alert ion-alert,prop,animated,boolean,true,false ion-alert,prop,backdropDismiss,boolean,true,false ion-alert,prop,buttons,(string | AlertButton)[],[],false ion-alert,prop,cssClass,string | string[] | undefined,undefined,false -ion-alert,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-alert,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-alert,prop,header,string | undefined,undefined,false ion-alert,prop,inputs,AlertInput[],[],false ion-alert,prop,keyboardClose,boolean,true,false -ion-alert,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-alert,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-alert,prop,message,string | undefined,undefined,false ion-alert,prop,mode,"ios" | "md",undefined,false ion-alert,prop,subHeader,string | undefined,undefined,false @@ -58,17 +62,22 @@ ion-alert,css-prop,--background ion-alert,css-prop,--max-height ion-alert,css-prop,--min-width +ion-anchor ion-anchor,prop,color,string | undefined,undefined,false ion-anchor,prop,href,string | undefined,undefined,false ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false ion-anchor,css-prop,--background ion-anchor,css-prop,--color +ion-animation-controller ion-animation-controller,method,create,create(animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise +ion-app +ion-avatar ion-avatar,css-prop,--border-radius +ion-back-button ion-back-button,prop,color,string | undefined,undefined,false ion-back-button,prop,defaultHref,string | undefined,undefined,false ion-back-button,prop,icon,null | string | undefined,undefined,false @@ -101,11 +110,13 @@ ion-back-button,css-prop,--padding-top ion-back-button,css-prop,--ripple-color ion-back-button,css-prop,--transition +ion-backdrop ion-backdrop,prop,stopPropagation,boolean,true,false ion-backdrop,prop,tappable,boolean,true,false ion-backdrop,prop,visible,boolean,true,false ion-backdrop,event,ionBackdropTap,void,true +ion-badge ion-badge,prop,color,string | undefined,undefined,false ion-badge,prop,mode,"ios" | "md",undefined,false ion-badge,css-prop,--background @@ -115,6 +126,7 @@ ion-badge,css-prop,--padding-end ion-badge,css-prop,--padding-start ion-badge,css-prop,--padding-top +ion-button ion-button,prop,buttonType,string,'button',false ion-button,prop,color,string | undefined,undefined,false ion-button,prop,disabled,boolean,false,false @@ -154,26 +166,33 @@ ion-button,css-prop,--ripple-color ion-button,css-prop,--transition ion-button,css-prop,--width +ion-buttons +ion-card-content ion-card-content,prop,mode,"ios" | "md",undefined,false +ion-card-header ion-card-header,prop,color,string | undefined,undefined,false ion-card-header,prop,mode,"ios" | "md",undefined,false ion-card-header,prop,translucent,boolean,false,false +ion-card-subtitle ion-card-subtitle,prop,color,string | undefined,undefined,false ion-card-subtitle,prop,mode,"ios" | "md",undefined,false ion-card-subtitle,css-prop,--color +ion-card-title ion-card-title,prop,color,string | undefined,undefined,false ion-card-title,prop,mode,"ios" | "md",undefined,false ion-card-title,css-prop,--color +ion-card ion-card,prop,color,string | undefined,undefined,false ion-card,prop,mode,"ios" | "md",undefined,false ion-card,css-prop,--background ion-card,css-prop,--color +ion-checkbox ion-checkbox,prop,checked,boolean,false,false ion-checkbox,prop,color,string | undefined,undefined,false ion-checkbox,prop,disabled,boolean,false,false @@ -195,12 +214,14 @@ ion-checkbox,css-prop,--height ion-checkbox,css-prop,--transition ion-checkbox,css-prop,--width +ion-chip ion-chip,prop,color,string | undefined,undefined,false ion-chip,prop,mode,"ios" | "md",undefined,false ion-chip,prop,outline,boolean,false,false ion-chip,css-prop,--background ion-chip,css-prop,--color +ion-col ion-col,prop,offset,string | undefined,undefined,false ion-col,prop,offsetLg,string | undefined,undefined,false ion-col,prop,offsetMd,string | undefined,undefined,false @@ -233,6 +254,7 @@ ion-col,css-prop,--ion-grid-column-padding-xl ion-col,css-prop,--ion-grid-column-padding-xs ion-col,css-prop,--ion-grid-columns +ion-content ion-content,prop,color,string | undefined,undefined,false ion-content,prop,forceOverscroll,boolean | undefined,undefined,false ion-content,prop,fullscreen,boolean,false,false @@ -257,6 +279,7 @@ ion-content,css-prop,--padding-end ion-content,css-prop,--padding-start ion-content,css-prop,--padding-top +ion-datetime ion-datetime,prop,cancelText,string,'Cancel',false ion-datetime,prop,dayNames,string | string[] | undefined,undefined,false ion-datetime,prop,dayShortNames,string | string[] | undefined,undefined,false @@ -274,7 +297,7 @@ ion-datetime,prop,monthShortNames,string | string[] | undefined,undefined,false ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,false ion-datetime,prop,name,string,this.inputId,false ion-datetime,prop,pickerFormat,string | undefined,undefined,false -ion-datetime,prop,pickerOptions,Partial | undefined,undefined,false +ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false ion-datetime,prop,placeholder,null | string | undefined,undefined,false ion-datetime,prop,value,null | string | undefined,undefined,false ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false @@ -289,6 +312,7 @@ ion-datetime,css-prop,--padding-start ion-datetime,css-prop,--padding-top ion-datetime,css-prop,--placeholder-color +ion-fab-button ion-fab-button,prop,activated,boolean,false,false ion-fab-button,prop,color,string | undefined,undefined,false ion-fab-button,prop,disabled,boolean,false,false @@ -324,18 +348,22 @@ ion-fab-button,css-prop,--ripple-color ion-fab-button,css-prop,--transition ion-fab-button,css-prop,--width +ion-fab-list ion-fab-list,prop,activated,boolean,false,false ion-fab-list,prop,side,"bottom" | "end" | "start" | "top",'bottom',false +ion-fab ion-fab,prop,activated,boolean,false,false ion-fab,prop,edge,boolean,false,false ion-fab,prop,horizontal,"center" | "end" | "start" | undefined,undefined,false ion-fab,prop,vertical,"bottom" | "center" | "top" | undefined,undefined,false ion-fab,method,close,close() => void +ion-footer ion-footer,prop,mode,"ios" | "md",undefined,false ion-footer,prop,translucent,boolean,false,false +ion-grid ion-grid,prop,fixed,boolean,false,false ion-grid,css-prop,--ion-grid-padding ion-grid,css-prop,--ion-grid-padding-lg @@ -350,22 +378,27 @@ ion-grid,css-prop,--ion-grid-width-sm ion-grid,css-prop,--ion-grid-width-xl ion-grid,css-prop,--ion-grid-width-xs +ion-header ion-header,prop,mode,"ios" | "md",undefined,false ion-header,prop,translucent,boolean,false,false +ion-img ion-img,prop,alt,string | undefined,undefined,false ion-img,prop,src,string | undefined,undefined,false ion-img,event,ionImgDidLoad,void,true +ion-infinite-scroll-content ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false +ion-infinite-scroll ion-infinite-scroll,prop,disabled,boolean,false,false ion-infinite-scroll,prop,position,"bottom" | "top",'bottom',false ion-infinite-scroll,prop,threshold,string,'15%',false ion-infinite-scroll,method,complete,complete() => void ion-infinite-scroll,event,ionInfinite,void,true +ion-input ion-input,prop,accept,string | undefined,undefined,false ion-input,prop,autocapitalize,string,'off',false ion-input,prop,autocomplete,"off" | "on",'off',false @@ -411,6 +444,7 @@ ion-input,css-prop,--placeholder-font-style ion-input,css-prop,--placeholder-font-weight ion-input,css-prop,--placeholder-opacity +ion-item-divider ion-item-divider,prop,color,string | undefined,undefined,false ion-item-divider,prop,mode,"ios" | "md",undefined,false ion-item-divider,css-prop,--background @@ -420,7 +454,9 @@ ion-item-divider,css-prop,--padding-end ion-item-divider,css-prop,--padding-start ion-item-divider,css-prop,--padding-top +ion-item-group +ion-item-option ion-item-option,prop,color,string | undefined,undefined,false ion-item-option,prop,disabled,boolean,false,false ion-item-option,prop,expandable,boolean,false,false @@ -429,9 +465,11 @@ ion-item-option,prop,mode,"ios" | "md",undefined,false ion-item-option,css-prop,--background ion-item-option,css-prop,--color +ion-item-options ion-item-options,prop,side,"end" | "start",'end',false ion-item-options,event,ionSwipe,any,true +ion-item-sliding ion-item-sliding,prop,disabled,boolean,false,false ion-item-sliding,method,close,close() => Promise ion-item-sliding,method,closeOpened,closeOpened() => Promise @@ -439,6 +477,7 @@ ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise ion-item-sliding,event,ionDrag,void,true +ion-item ion-item,prop,button,boolean,false,false ion-item,prop,color,string | undefined,undefined,false ion-item,prop,detail,boolean | undefined,undefined,false @@ -477,32 +516,37 @@ ion-item,css-prop,--padding-start ion-item,css-prop,--padding-top ion-item,css-prop,--transition +ion-label ion-label,prop,color,string | undefined,undefined,false ion-label,prop,mode,"ios" | "md",undefined,false ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false ion-label,css-prop,--color +ion-list-header ion-list-header,prop,color,string | undefined,undefined,false ion-list-header,prop,mode,"ios" | "md",undefined,false ion-list-header,css-prop,--background ion-list-header,css-prop,--color +ion-list ion-list,prop,inset,boolean,false,false ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false ion-list,prop,mode,"ios" | "md",undefined,false ion-list,method,closeSlidingItems,closeSlidingItems() => Promise +ion-loading-controller ion-loading-controller,method,create,create(opts?: LoadingOptions | undefined) => Promise ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-loading-controller,method,getTop,getTop() => Promise +ion-loading ion-loading,prop,animated,boolean,true,false ion-loading,prop,backdropDismiss,boolean,false,false ion-loading,prop,cssClass,string | string[] | undefined,undefined,false ion-loading,prop,duration,number,0,false -ion-loading,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-loading,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-loading,prop,keyboardClose,boolean,true,false -ion-loading,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-loading,prop,message,string | undefined,undefined,false ion-loading,prop,mode,"ios" | "md",undefined,false ion-loading,prop,showBackdrop,boolean,true,false @@ -519,12 +563,14 @@ ion-loading,event,ionLoadingDidUnload,void,true ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail,true ion-loading,event,ionLoadingWillPresent,void,true +ion-menu-button ion-menu-button,prop,autoHide,boolean,true,false ion-menu-button,prop,color,string | undefined,undefined,false ion-menu-button,prop,menu,string | undefined,undefined,false ion-menu-button,prop,mode,"ios" | "md",undefined,false ion-menu-button,css-prop,--color +ion-menu-controller ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise ion-menu-controller,method,get,get(menuId?: string | null | undefined) => Promise @@ -538,9 +584,11 @@ ion-menu-controller,method,registerAnimation,registerAnimation(name: string, ani ion-menu-controller,method,swipeGesture,swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise ion-menu-controller,method,toggle,toggle(menuId?: string | null | undefined) => Promise +ion-menu-toggle ion-menu-toggle,prop,autoHide,boolean,true,false ion-menu-toggle,prop,menu,string | undefined,undefined,false +ion-menu ion-menu,prop,contentId,string | undefined,undefined,false ion-menu,prop,disabled,boolean,false,false ion-menu,prop,maxEdgeStart,number,50,false @@ -562,18 +610,20 @@ ion-menu,css-prop,--background ion-menu,css-prop,--width ion-menu,css-prop,--width-small +ion-modal-controller ion-modal-controller,method,create,create(opts: ModalOptions) => Promise ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-modal-controller,method,getTop,getTop() => Promise +ion-modal ion-modal,prop,animated,boolean,true,false ion-modal,prop,backdropDismiss,boolean,true,false ion-modal,prop,component,Function | HTMLElement | null | string,undefined,false ion-modal,prop,componentProps,undefined | { [key: string]: any; },undefined,false ion-modal,prop,cssClass,string | string[] | undefined,undefined,false -ion-modal,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-modal,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-modal,prop,keyboardClose,boolean,true,false -ion-modal,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-modal,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-modal,prop,mode,"ios" | "md",undefined,false ion-modal,prop,showBackdrop,boolean,true,false ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise @@ -587,15 +637,19 @@ ion-modal,event,ionModalDidUnload,void,true ion-modal,event,ionModalWillDismiss,OverlayEventDetail,true ion-modal,event,ionModalWillPresent,void,true +ion-nav-pop +ion-nav-push ion-nav-push,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false ion-nav-push,prop,componentProps,undefined | { [key: string]: any; },undefined,false +ion-nav-set-root ion-nav-set-root,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false ion-nav-set-root,prop,componentProps,undefined | { [key: string]: any; },undefined,false +ion-nav ion-nav,prop,animated,boolean,true,false -ion-nav,prop,animation,AnimationBuilder | undefined,undefined,false +ion-nav,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false ion-nav,prop,rootParams,undefined | { [key: string]: any; },undefined,false ion-nav,prop,swipeGesture,boolean | undefined,undefined,false @@ -616,24 +670,28 @@ ion-nav,event,ionNavDidChange,void,true ion-nav,event,ionNavWillChange,void,true ion-nav,event,ionNavWillLoad,void,true +ion-note ion-note,prop,color,string | undefined,undefined,false ion-note,prop,mode,"ios" | "md",undefined,false ion-note,css-prop,--color +ion-picker-column +ion-picker-controller ion-picker-controller,method,create,create(opts: PickerOptions) => Promise ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-picker-controller,method,getTop,getTop() => Promise +ion-picker ion-picker,prop,animated,boolean,true,false ion-picker,prop,backdropDismiss,boolean,true,false ion-picker,prop,buttons,PickerButton[],[],false ion-picker,prop,columns,PickerColumn[],[],false ion-picker,prop,cssClass,string | string[] | undefined,undefined,false ion-picker,prop,duration,number,0,false -ion-picker,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-picker,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-picker,prop,keyboardClose,boolean,true,false -ion-picker,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-picker,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-picker,prop,mode,"ios" | "md",undefined,false ion-picker,prop,showBackdrop,boolean,true,false ion-picker,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise @@ -648,19 +706,21 @@ ion-picker,event,ionPickerDidUnload,void,true ion-picker,event,ionPickerWillDismiss,OverlayEventDetail,true ion-picker,event,ionPickerWillPresent,void,true +ion-popover-controller ion-popover-controller,method,create,create(opts: PopoverOptions) => Promise ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-popover-controller,method,getTop,getTop() => Promise +ion-popover ion-popover,prop,animated,boolean,true,false ion-popover,prop,backdropDismiss,boolean,true,false ion-popover,prop,component,Function | HTMLElement | null | string,undefined,false ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false ion-popover,prop,cssClass,string | string[] | undefined,undefined,false -ion-popover,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-popover,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-popover,prop,event,any,undefined,false ion-popover,prop,keyboardClose,boolean,true,false -ion-popover,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-popover,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-popover,prop,mode,"ios" | "md",undefined,false ion-popover,prop,showBackdrop,boolean,true,false ion-popover,prop,translucent,boolean,false,false @@ -675,11 +735,13 @@ ion-popover,event,ionPopoverDidUnload,void,true ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true ion-popover,event,ionPopoverWillPresent,void,true +ion-radio-group ion-radio-group,prop,allowEmptySelection,boolean,false,false ion-radio-group,prop,name,string,this.inputId,false ion-radio-group,prop,value,any,undefined,false ion-radio-group,event,ionChange,InputChangeEvent,true +ion-radio ion-radio,prop,checked,boolean,false,false ion-radio,prop,color,string | undefined,undefined,false ion-radio,prop,disabled,boolean,false,false @@ -694,6 +756,7 @@ ion-radio,event,ionSelect,CheckedInputChangeEvent,true ion-radio,css-prop,--color ion-radio,css-prop,--color-checked +ion-range ion-range,prop,color,string | undefined,undefined,false ion-range,prop,debounce,number,0,false ion-range,prop,disabled,boolean,false,false @@ -718,11 +781,13 @@ ion-range,css-prop,--knob-border-radius ion-range,css-prop,--knob-box-shadow ion-range,css-prop,--knob-size +ion-refresher-content ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false ion-refresher-content,prop,pullingText,string | undefined,undefined,false ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false ion-refresher-content,prop,refreshingText,string | undefined,undefined,false +ion-refresher ion-refresher,prop,closeDuration,string,'280ms',false ion-refresher,prop,disabled,boolean,false,false ion-refresher,prop,pullMax,number,this.pullMin + 60,false @@ -735,26 +800,33 @@ ion-refresher,event,ionPull,void,true ion-refresher,event,ionRefresh,RefresherEventDetail,true ion-refresher,event,ionStart,void,true +ion-reorder-group ion-reorder-group,prop,disabled,boolean,true,false ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[] | undefined) => Promise ion-reorder-group,event,ionItemReorder,ItemReorderDetail,true +ion-reorder +ion-ripple-effect ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void> +ion-route-redirect ion-route-redirect,prop,from,string,undefined,false ion-route-redirect,prop,to,null | string | undefined,undefined,false ion-route-redirect,event,ionRouteRedirectChanged,void,true +ion-route ion-route,prop,component,string,undefined,false ion-route,prop,componentProps,undefined | { [key: string]: any; },undefined,false ion-route,prop,url,string,'',false ion-route,event,ionRouteDataChanged,any,true +ion-router-outlet ion-router-outlet,prop,animated,boolean,true,false -ion-router-outlet,prop,animation,AnimationBuilder | undefined,undefined,false +ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false +ion-router ion-router,prop,root,string,'/',false ion-router,prop,useHash,boolean,true,false ion-router,method,goBack,goBack() => Promise @@ -762,7 +834,9 @@ ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise ion-router,event,ionRouteDidChange,RouterEventDetail,true ion-router,event,ionRouteWillChange,RouterEventDetail,true +ion-row +ion-searchbar ion-searchbar,prop,animated,boolean,false,false ion-searchbar,prop,autocomplete,"off" | "on",'off',false ion-searchbar,prop,autocorrect,"off" | "on",'off',false @@ -795,6 +869,7 @@ ion-searchbar,css-prop,--placeholder-font-style ion-searchbar,css-prop,--placeholder-font-weight ion-searchbar,css-prop,--placeholder-opacity +ion-segment-button ion-segment-button,prop,checked,boolean,false,false ion-segment-button,prop,color,string | undefined,undefined,false ion-segment-button,prop,disabled,boolean,false,false @@ -827,6 +902,7 @@ ion-segment-button,css-prop,--padding-start ion-segment-button,css-prop,--padding-top ion-segment-button,css-prop,--transition +ion-segment ion-segment,prop,color,string | undefined,undefined,false ion-segment,prop,disabled,boolean,false,false ion-segment,prop,mode,"ios" | "md",undefined,false @@ -835,15 +911,18 @@ ion-segment,prop,value,null | string | undefined,undefined,false ion-segment,event,ionChange,TextInputChangeEvent,true ion-segment,event,ionStyle,StyleEvent,true +ion-select-option ion-select-option,prop,disabled,boolean,false,false ion-select-option,prop,selected,boolean,false,false ion-select-option,prop,value,any,undefined,false +ion-select-popover ion-select-popover,prop,header,string | undefined,undefined,false ion-select-popover,prop,message,string | undefined,undefined,false ion-select-popover,prop,options,SelectPopoverOption[],[],false ion-select-popover,prop,subHeader,string | undefined,undefined,false +ion-select ion-select,prop,cancelText,string,'Cancel',false ion-select,prop,disabled,boolean,false,false ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false @@ -868,10 +947,13 @@ ion-select,css-prop,--padding-start ion-select,css-prop,--padding-top ion-select,css-prop,--placeholder-color +ion-skeleton-text ion-skeleton-text,prop,width,string,'100%',false ion-skeleton-text,css-prop,--background +ion-slide +ion-slides ion-slides,prop,mode,"ios" | "md",undefined,false ion-slides,prop,options,any,{},false ion-slides,prop,pager,boolean,false,false @@ -909,18 +991,21 @@ ion-slides,event,ionSlideWillChange,void,true ion-slides,css-prop,--bullet-background ion-slides,css-prop,--bullet-background-active +ion-spinner ion-spinner,prop,color,string | undefined,undefined,false ion-spinner,prop,duration,number | undefined,undefined,false ion-spinner,prop,name,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false ion-spinner,prop,paused,boolean,false,false ion-spinner,css-prop,--color +ion-split-pane ion-split-pane,prop,disabled,boolean,false,false ion-split-pane,prop,when,boolean | string,QUERY['lg'],false ion-split-pane,event,ionChange,{visible: boolean},false ion-split-pane,event,ionSplitPaneVisible,void,true ion-split-pane,css-prop,--border +ion-tab-bar ion-tab-bar,prop,color,string | undefined,undefined,false ion-tab-bar,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide",'icon-top',false ion-tab-bar,prop,mode,"ios" | "md",undefined,false @@ -930,6 +1015,7 @@ ion-tab-bar,css-prop,--background ion-tab-bar,css-prop,--border ion-tab-bar,css-prop,--color +ion-tab-button ion-tab-button,prop,color,string | undefined,undefined,false ion-tab-button,prop,disabled,boolean,false,false ion-tab-button,prop,href,string | undefined,undefined,false @@ -946,10 +1032,12 @@ ion-tab-button,css-prop,--padding-start ion-tab-button,css-prop,--padding-top ion-tab-button,css-prop,--ripple-color +ion-tab ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false ion-tab,prop,tab,string,undefined,false ion-tab,method,setActive,setActive() => Promise +ion-tabs ion-tabs,method,getSelected,getSelected() => Promise ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise @@ -958,9 +1046,11 @@ ion-tabs,event,ionNavDidChange,void,true ion-tabs,event,ionNavWillChange,void,true ion-tabs,event,ionNavWillLoad,void,true +ion-text ion-text,prop,color,string | undefined,undefined,false ion-text,prop,mode,"ios" | "md",undefined,false +ion-textarea ion-textarea,prop,autocapitalize,string,'none',false ion-textarea,prop,autofocus,boolean,false,false ion-textarea,prop,clearOnEdit,boolean,false,false @@ -996,24 +1086,28 @@ ion-textarea,css-prop,--placeholder-font-style ion-textarea,css-prop,--placeholder-font-weight ion-textarea,css-prop,--placeholder-opacity +ion-thumbnail ion-thumbnail,css-prop,--border-radius ion-thumbnail,css-prop,--size +ion-title ion-title,prop,color,string | undefined,undefined,false ion-title,css-prop,--color +ion-toast-controller ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise ion-toast-controller,method,getTop,getTop() => Promise +ion-toast ion-toast,prop,animated,boolean,true,false ion-toast,prop,closeButtonText,string | undefined,undefined,false ion-toast,prop,color,string | undefined,undefined,false ion-toast,prop,cssClass,string | string[] | undefined,undefined,false ion-toast,prop,duration,number,0,false -ion-toast,prop,enterAnimation,AnimationBuilder | undefined,undefined,false +ion-toast,prop,enterAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-toast,prop,keyboardClose,boolean,false,false -ion-toast,prop,leaveAnimation,AnimationBuilder | undefined,undefined,false +ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) => Promise) | undefined,undefined,false ion-toast,prop,message,string | undefined,undefined,false ion-toast,prop,mode,"ios" | "md",undefined,false ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false @@ -1033,6 +1127,7 @@ ion-toast,css-prop,--background ion-toast,css-prop,--button-color ion-toast,css-prop,--color +ion-toggle ion-toggle,prop,checked,boolean,false,false ion-toggle,prop,color,string | undefined,undefined,false ion-toggle,prop,disabled,boolean,false,false @@ -1047,6 +1142,7 @@ ion-toggle,css-prop,--background-checked ion-toggle,css-prop,--handle-background ion-toggle,css-prop,--handle-background-checked +ion-toolbar ion-toolbar,prop,color,string | undefined,undefined,false ion-toolbar,prop,mode,"ios" | "md",undefined,false ion-toolbar,css-prop,--background @@ -1061,17 +1157,18 @@ ion-toolbar,css-prop,--padding-end ion-toolbar,css-prop,--padding-start ion-toolbar,css-prop,--padding-top +ion-virtual-scroll ion-virtual-scroll,prop,approxFooterHeight,number,40,false ion-virtual-scroll,prop,approxHeaderHeight,number,40,false ion-virtual-scroll,prop,approxItemHeight,number,45,false -ion-virtual-scroll,prop,footerFn,HeaderFn | undefined,undefined,false -ion-virtual-scroll,prop,headerFn,HeaderFn | undefined,undefined,false -ion-virtual-scroll,prop,itemHeight,ItemHeightFn | undefined,undefined,false +ion-virtual-scroll,prop,footerFn,((item: any, index: number, items: any[]) => string | null | undefined) | undefined,undefined,false +ion-virtual-scroll,prop,headerFn,((item: any, index: number, items: any[]) => string | null | undefined) | undefined,undefined,false +ion-virtual-scroll,prop,itemHeight,((item: any, index: number) => number) | undefined,undefined,false ion-virtual-scroll,prop,items,any[] | undefined,undefined,false -ion-virtual-scroll,prop,nodeRender,ItemRenderFn | undefined,undefined,false -ion-virtual-scroll,prop,renderFooter,(item: any, index: number) => any | undefined,undefined,false -ion-virtual-scroll,prop,renderHeader,(item: any, index: number) => any | undefined,undefined,false -ion-virtual-scroll,prop,renderItem,(item: any, index: number) => any | undefined,undefined,false +ion-virtual-scroll,prop,nodeRender,((el: HTMLElement | null, cell: Cell, domIndex: number) => HTMLElement) | undefined,undefined,false +ion-virtual-scroll,prop,renderFooter,((item: any, index: number) => any) | undefined,undefined,false +ion-virtual-scroll,prop,renderHeader,((item: any, index: number) => any) | undefined,undefined,false +ion-virtual-scroll,prop,renderItem,((item: any, index: number) => any) | undefined,undefined,false ion-virtual-scroll,method,markDirty,markDirty(offset: number, len?: number) => void ion-virtual-scroll,method,markDirtyTail,markDirtyTail() => void ion-virtual-scroll,method,positionForItem,positionForItem(index: number) => Promise \ No newline at end of file diff --git a/core/package.json b/core/package.json index f91fa11333..a64ebb2253 100644 --- a/core/package.json +++ b/core/package.json @@ -27,10 +27,10 @@ ], "dependencies": { "@types/node": "10.11.0", - "ionicons": "4.4.7" + "ionicons": "4.4.8" }, "devDependencies": { - "@stencil/core": "0.16.0-5", + "@stencil/core": "0.16.0-6", "@stencil/sass": "0.1.1", "@stencil/utils": "latest", "@types/jest": "^23.3.1", @@ -53,7 +53,7 @@ "stylelint-order": "~1.0.0", "swiper": "4.4.1", "tslint": "^5.10.0", - "tslint-ionic-rules": "0.0.19", + "tslint-ionic-rules": "0.0.20", "tslint-react": "^3.6.0", "typescript": "^2.9.2" }, diff --git a/core/scripts/api-spec-generator.js b/core/scripts/api-spec-generator.js index fbbe9447e9..89261daf11 100644 --- a/core/scripts/api-spec-generator.js +++ b/core/scripts/api-spec-generator.js @@ -17,6 +17,7 @@ function apiSpecGenerator(opts) { function generateComponent(component, content) { content.push(''); + content.push(component.tag); component.props.forEach(prop => { content.push(`${component.tag},prop,${prop.name},${prop.type},${prop.default},${prop.required}`); diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index 529c5121b0..86e7846dec 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -16,19 +16,19 @@ A button's `role` property can either be `destructive` or `cancel`. Buttons with ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `AnimationBuilder \| undefined` | `undefined` | -| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `AnimationBuilder \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the action sheet will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the action sheet will be translucent. | `boolean` | `false` | ## Events diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 6422fc3011..bdf2eb7c1a 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -25,21 +25,21 @@ Alerts can also include several different inputs whose data can be passed back t ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the alert is presented. | `AnimationBuilder \| undefined` | `undefined` | -| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | -| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder \| undefined` | `undefined` | -| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the alert is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | +| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | +| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` | ## Events diff --git a/core/src/components/animation-controller/readme.md b/core/src/components/animation-controller/readme.md index 2707576755..8db979d704 100644 --- a/core/src/components/animation-controller/readme.md +++ b/core/src/components/animation-controller/readme.md @@ -15,11 +15,11 @@ Creates an animation instance #### Parameters -| Name | Type | Description | -| ------------------ | ------------------------------- | ----------- | -| `animationBuilder` | `AnimationBuilder \| undefined` | | -| `baseEl` | `any` | | -| `opts` | `any` | | +| Name | Type | Description | +| ------------------ | -------------------------------------------------------------------------------------- | ----------- | +| `animationBuilder` | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | | +| `baseEl` | `any` | | +| `opts` | `any` | | #### Returns diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 69ffd09855..4368ce120c 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -151,10 +151,10 @@ export class Button implements ComponentInterface { class: { ...createColorClasses(color), [buttonType]: true, - [`${buttonType}-${expand}`]: !!expand, - [`${buttonType}-${size}`]: !!size, - [`${buttonType}-${shape}`]: !!shape, - [`${buttonType}-${fill}`]: !!fill, + [`${buttonType}-${expand}`]: expand !== undefined, + [`${buttonType}-${size}`]: size !== undefined, + [`${buttonType}-${shape}`]: shape !== undefined, + [`${buttonType}-${fill}`]: true, [`${buttonType}-strong`]: strong, 'focused': keyFocus, diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index 4333e1026d..0efc6f75b5 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -204,29 +204,29 @@ dates in JavaScript. ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------- | -| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` | -| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` | -| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` | -| `dayValues` | `day-values` | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` | -| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` | `'MMM D, YYYY'` | -| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` | -| `hourValues` | `hour-values` | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` | -| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | `undefined` | -| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | `undefined` | -| `minuteValues` | `minute-values` | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` | -| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` | -| `monthValues` | `month-values` | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | `undefined` | -| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial \| undefined` | `undefined` | -| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` | -| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` | -| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | +| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` | +| `dayNames` | `day-names` | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `dayShortNames` | `day-short-names` | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `dayValues` | `day-values` | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` | +| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` | +| `displayFormat` | `display-format` | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`. | `string` | `'MMM D, YYYY'` | +| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` | +| `hourValues` | `hour-values` | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` | +| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | `undefined` | +| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | `undefined` | +| `minuteValues` | `minute-values` | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | `undefined` | +| `monthValues` | `month-values` | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | `undefined` | +| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | +| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | `undefined` | +| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: "ios" \| "md" \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined` | +| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` | +| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` | +| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` | ## Events diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx index f61ed6e342..8c7da470bc 100644 --- a/core/src/components/fab/fab.tsx +++ b/core/src/components/fab/fab.tsx @@ -68,8 +68,8 @@ export class Fab implements ComponentInterface { hostData() { return { class: { - [`fab-horizontal-${this.horizontal}`]: !!this.horizontal, - [`fab-vertical-${this.vertical}`]: !!this.vertical, + [`fab-horizontal-${this.horizontal}`]: this.horizontal !== undefined, + [`fab-vertical-${this.vertical}`]: this.vertical !== undefined, 'fab-edge': this.edge } }; diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx index 67d7f1aa54..1d6e2bc65c 100644 --- a/core/src/components/item-divider/item-divider.tsx +++ b/core/src/components/item-divider/item-divider.tsx @@ -31,7 +31,7 @@ export class ItemDivider implements ComponentInterface { // Change the button size to small for each ion-button in the item // unless the size is explicitly set Array.from(this.el.querySelectorAll('ion-button')).forEach(button => { - if (!button.size) { + if (button.size === undefined) { button.size = 'small'; } }); diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index a8b3f2aa3f..99e6b1ecd7 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -106,7 +106,7 @@ export class Item implements ComponentInterface { // Change the button size to small for each ion-button in the item // unless the size is explicitly set Array.from(this.el.querySelectorAll('ion-button')).forEach(button => { - if (!button.size) { + if (button.size === undefined) { button.size = 'small'; } }); @@ -132,7 +132,7 @@ export class Item implements ComponentInterface { class: { ...childStyles, ...createColorClasses(this.color), - [`item-lines-${this.lines}`]: !!this.lines, + [`item-lines-${this.lines}`]: this.lines !== undefined, 'item-disabled': this.disabled, 'in-list': hostContext('ion-list', this.el), 'item': true, diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx index 110e310bdd..823e448813 100644 --- a/core/src/components/label/label.tsx +++ b/core/src/components/label/label.tsx @@ -61,7 +61,7 @@ export class Label implements ComponentInterface { const position = this.position; this.ionStyle.emit({ 'label': true, - [`label-${position}`]: !!position + [`label-${position}`]: position !== undefined }); } @@ -70,7 +70,7 @@ export class Label implements ComponentInterface { return { class: { ...createColorClasses(this.color), - [`label-${position}`]: !!position, + [`label-${position}`]: position !== undefined, [`label-no-animate`]: (this.noAnimate) } }; diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index 00919a8036..9a1e09660f 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -48,9 +48,9 @@ export class List implements ComponentInterface { return { class: { ...createThemedClasses(this.mode, 'list'), - [`list-lines-${this.lines}`]: !!this.lines, + [`list-lines-${this.lines}`]: this.lines !== undefined, 'list-inset': this.inset, - [`list-${this.mode}-lines-${this.lines}`]: !!this.lines + [`list-${this.mode}-lines-${this.lines}`]: this.lines !== undefined } }; } diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index fcfbc8341a..a11fd3d758 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -24,9 +24,9 @@ The loading indicator can be dismissed automatically after a specific amount of | `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | | `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | | `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder \| undefined` | `undefined` | +| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | | `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | diff --git a/core/src/components/menu-controller/readme.md b/core/src/components/menu-controller/readme.md index 05a382abd4..6b353d10ce 100644 --- a/core/src/components/menu-controller/readme.md +++ b/core/src/components/menu-controller/readme.md @@ -154,10 +154,10 @@ Registers a new animation that can be used in any `ion-menu`. #### Parameters -| Name | Type | Description | -| ----------- | ------------------ | ----------- | -| `name` | `string` | | -| `animation` | `AnimationBuilder` | | +| Name | Type | Description | +| ----------- | ----------------------------------------------------------------------- | ----------- | +| `name` | `string` | | +| `animation` | `(Animation: Animation, baseEl: any, opts?: any) => Promise` | | #### Returns diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 6265e37474..f5d3ed0e5d 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -14,18 +14,18 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `component` | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | `undefined` | -| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the modal is presented. | `AnimationBuilder \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `AnimationBuilder \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `component` | `component` | The component to display inside of the modal. | `Function \| HTMLElement \| null \| string` | `undefined` | +| `componentProps` | -- | The data to pass to the modal component. | `undefined \| { [key: string]: any; }` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the modal is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` | ## Events diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md index 2b9d3011c7..4440ded8ec 100644 --- a/core/src/components/nav/readme.md +++ b/core/src/components/nav/readme.md @@ -9,13 +9,13 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we ## Properties -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` | -| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | `undefined` | -| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | -| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` | -| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` | +| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | +| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` | +| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` | ## Events @@ -93,13 +93,13 @@ Inserts a component into the nav stack at the specified index. This is useful if #### Parameters -| Name | Type | Description | -| ---------------- | ---------------------------------------- | ----------- | -| `insertIndex` | `number` | | -| `component` | `T` | | -| `componentProps` | `ComponentProps \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `insertIndex` | `number` | | +| `component` | `T` | | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -113,12 +113,12 @@ Inserts an array of components into the nav stack at the specified index. The la #### Parameters -| Name | Type | Description | -| ------------------ | --------------------------------- | ----------- | -| `insertIndex` | `number` | | -| `insertComponents` | `NavComponent[]` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `insertIndex` | `number` | | +| `insertComponents` | `NavComponent[]` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -132,10 +132,10 @@ Call to navigate back from a current component. Similar to push(), you can also #### Parameters -| Name | Type | Description | -| ------ | --------------------------------- | ----------- | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -149,11 +149,11 @@ Pop to a specific index in the navigation stack #### Parameters -| Name | Type | Description | -| ----------------- | --------------------------------- | ----------- | -| `indexOrViewCtrl` | `ViewController \| number` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `indexOrViewCtrl` | `ViewController \| number` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -167,10 +167,10 @@ Navigate back to the root of the stack, no matter how far back that is. #### Parameters -| Name | Type | Description | -| ------ | --------------------------------- | ----------- | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -184,12 +184,12 @@ Push a new component onto the current navigation stack. Pass any additional info #### Parameters -| Name | Type | Description | -| ---------------- | ---------------------------------------- | ----------- | -| `component` | `T` | | -| `componentProps` | `ComponentProps \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `component` | `T` | | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -203,12 +203,12 @@ Removes a page from the nav stack at the specified index. #### Parameters -| Name | Type | Description | -| ------------- | --------------------------------- | ----------- | -| `startIndex` | `number` | | -| `removeCount` | `number` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `startIndex` | `number` | | +| `removeCount` | `number` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -222,11 +222,11 @@ Set the views of the current navigation stack and navigate to the last view. By #### Parameters -| Name | Type | Description | -| ------- | --------------------------------- | ----------- | -| `views` | `any[]` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `views` | `any[]` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns @@ -240,12 +240,12 @@ Set the root for the current navigation stack. #### Parameters -| Name | Type | Description | -| ---------------- | ---------------------------------------- | ----------- | -| `component` | `T` | | -| `componentProps` | `ComponentProps \| null \| undefined` | | -| `opts` | `NavOptions \| null \| undefined` | | -| `done` | `TransitionDoneFn \| undefined` | | +| Name | Type | Description | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `component` | `T` | | +| `componentProps` | `T extends "object" \| "ion-icon" \| "ion-action-sheet-controller" \| "ion-action-sheet" \| "ion-alert-controller" \| "ion-alert" \| "ion-anchor" \| "ion-animation-controller" \| "ion-app" \| "ion-avatar" \| "ion-back-button" \| "ion-backdrop" \| "ion-badge" \| "ion-button" \| "ion-buttons" \| "ion-card-content" \| "ion-card-header" \| "ion-card-subtitle" \| "ion-card-title" \| "ion-card" \| "ion-checkbox" \| "ion-chip" \| "ion-col" \| "ion-content" \| "ion-datetime" \| "ion-fab-button" \| "ion-fab-list" \| "ion-fab" \| "ion-footer" \| "ion-grid" \| "ion-header" \| "ion-img" \| "ion-infinite-scroll-content" \| "ion-infinite-scroll" \| "ion-input" \| "ion-item-divider" \| "ion-item-group" \| "ion-item-option" \| "ion-item-options" \| "ion-item-sliding" \| "ion-item" \| "ion-label" \| "ion-list-header" \| "ion-list" \| "ion-loading-controller" \| "ion-loading" \| "ion-menu-button" \| "ion-menu-controller" \| "ion-menu-toggle" \| "ion-menu" \| "ion-modal-controller" \| "ion-modal" \| "ion-nav-pop" \| "ion-nav-push" \| "ion-nav-set-root" \| "ion-nav" \| "ion-note" \| "ion-picker-column" \| "ion-picker-controller" \| "ion-picker" \| "ion-popover-controller" \| "ion-popover" \| "ion-radio-group" \| "ion-radio" \| "ion-range" \| "ion-refresher-content" \| "ion-refresher" \| "ion-reorder-group" \| "ion-reorder" \| "ion-ripple-effect" \| "ion-route-redirect" \| "ion-route" \| "ion-router-outlet" \| "ion-router" \| "ion-row" \| "ion-searchbar" \| "ion-segment-button" \| "ion-segment" \| "ion-select-option" \| "ion-select-popover" \| "ion-select" \| "ion-skeleton-text" \| "ion-slide" \| "ion-slides" \| "ion-spinner" \| "ion-split-pane" \| "ion-tab-bar" \| "ion-tab-button" \| "ion-tab" \| "ion-tabs" \| "ion-text" \| "ion-textarea" \| "ion-thumbnail" \| "ion-title" \| "ion-toast-controller" \| "ion-toast" \| "ion-toggle" \| "ion-toolbar" \| "ion-virtual-scroll" \| "slot" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" ? StencilIntrinsicElements[T] : { [key: string]: any; } \| null \| undefined` | | +| `opts` | `NavOptions \| null \| undefined` | | +| `done` | `((hasCompleted: boolean, requiresTransition: boolean, enteringView?: ViewController \| undefined, leavingView?: ViewController \| undefined, direction?: string \| undefined) => void) \| undefined` | | #### Returns diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md index 3eed23cb0c..4224e90ea6 100644 --- a/core/src/components/picker/readme.md +++ b/core/src/components/picker/readme.md @@ -9,19 +9,19 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` | -| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the picker is presented. | `AnimationBuilder \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `AnimationBuilder \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` | +| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the picker is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` | ## Events diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 3f80d7fc92..011cc4a268 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -16,20 +16,20 @@ To present a popover, call the `present` method on a popover instance. In order ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `component` | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` | -| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder \| undefined` | `undefined` | -| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | -| `translucent` | `translucent` | If `true`, the popover will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | +| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | +| `component` | `component` | The component to display inside of the popover. | `Function \| HTMLElement \| null \| string` | `undefined` | +| `componentProps` | -- | The data to pass to the popover component. | `undefined \| { [key: string]: any; }` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `enterAnimation` | -- | Animation to use when the popover is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | +| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | +| `translucent` | `translucent` | If `true`, the popover will be translucent. | `boolean` | `false` | ## Events diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index 98ae9d683f..0102167268 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -40,11 +40,10 @@ export class RippleEffect implements ComponentInterface { const finalScale = maxRadius / initialSize; let posX = pageX - rect.left; let posY = pageY - rect.top; - if (this.type) { + if (this.unbounded) { posX = width * 0.5; posY = height * 0.5; } - const x = posX - initialSize * 0.5; const y = posY - initialSize * 0.5; const moveX = width * 0.5 - posX; diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md index eaa5132ce5..15d0cedcd9 100644 --- a/core/src/components/router-outlet/readme.md +++ b/core/src/components/router-outlet/readme.md @@ -13,10 +13,10 @@ While RouterOutlet has methods for navigating around, it's recommended to use th ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` | -| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `AnimationBuilder \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` | +| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | ---------------------------------------------- diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 27048f76fc..79f1429b5b 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -75,7 +75,7 @@ export class SegmentButton implements ComponentInterface { ...createColorClasses(color), 'segment-button-disabled': disabled, 'segment-button-checked': checked, - [`segment-button-layout-${this.layout}`]: !!this.layout + [`segment-button-layout-${this.layout}`]: this.layout !== undefined } }; } diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index b57f0b85b0..6201a9de9f 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -20,21 +20,21 @@ The toast can be dismissed automatically after a specific amount of time by pass ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | -| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` | `undefined` | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | -| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` | `undefined` | -| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | -| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. | `boolean` | `false` | -| `translucent` | `translucent` | If `true`, the toast will be translucent. | `boolean` | `false` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- | +| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` | +| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` | `undefined` | +| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | +| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise) \| undefined` | `undefined` | +| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | +| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | +| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. | `boolean` | `false` | +| `translucent` | `translucent` | If `true`, the toast will be translucent. | `boolean` | `false` | ## Events diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index 77c83ea7bc..0b15cfd298 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -183,19 +183,19 @@ dataset, so please make sure they're performant. ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ----------- | -| `approxFooterHeight` | `approx-footer-height` | The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. | `number` | `40` | -| `approxHeaderHeight` | `approx-header-height` | The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. | `number` | `40` | -| `approxItemHeight` | `approx-item-height` | It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. | `number` | `45` | -| `footerFn` | -- | Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. | `HeaderFn \| undefined` | `undefined` | -| `headerFn` | -- | Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. | `HeaderFn \| undefined` | `undefined` | -| `itemHeight` | -- | An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance | `ItemHeightFn \| undefined` | `undefined` | -| `items` | -- | The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. | `any[] \| undefined` | `undefined` | -| `nodeRender` | -- | NOTE: only Vanilla JS API. | `ItemRenderFn \| undefined` | `undefined` | -| `renderFooter` | -- | NOTE: only JSX API for stencil. Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. | `(item: any, index: number) => any \| undefined` | `undefined` | -| `renderHeader` | -- | NOTE: only JSX API for stencil. Provide a render function for the header to be rendered. Returns a JSX virtual-dom. | `(item: any, index: number) => any \| undefined` | `undefined` | -| `renderItem` | -- | NOTE: only JSX API for stencil. Provide a render function for the items to be rendered. Returns a JSX virtual-dom. | `(item: any, index: number) => any \| undefined` | `undefined` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ----------- | +| `approxFooterHeight` | `approx-footer-height` | The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either `px` or `%` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. | `number` | `40` | +| `approxHeaderHeight` | `approx-header-height` | The approximate height of each header template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. | `number` | `40` | +| `approxItemHeight` | `approx-item-height` | It is important to provide this if virtual item height will be significantly larger than the default The approximate height of each virtual item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. | `number` | `45` | +| `footerFn` | -- | Section footers and the data used within its given template can be dynamically created by passing a function to `footerFn`. The logic within the footer function can decide if the footer template should be used, and what data to give to the footer template. The function must return `null` if a footer cell shouldn't be created. | `((item: any, index: number, items: any[]) => string \| null \| undefined) \| undefined` | `undefined` | +| `headerFn` | -- | Section headers and the data used within its given template can be dynamically created by passing a function to `headerFn`. For example, a large list of contacts usually has dividers between each letter in the alphabet. App's can provide their own custom `headerFn` which is called with each record within the dataset. The logic within the header function can decide if the header template should be used, and what data to give to the header template. The function must return `null` if a header cell shouldn't be created. | `((item: any, index: number, items: any[]) => string \| null \| undefined) \| undefined` | `undefined` | +| `itemHeight` | -- | An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by `ion-virtual-scroll` leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance | `((item: any, index: number) => number) \| undefined` | `undefined` | +| `items` | -- | The data that builds the templates within the virtual scroll. It's important to note that when this data has changed, then the entire virtual scroll is reset, which is an expensive operation and should be avoided if possible. | `any[] \| undefined` | `undefined` | +| `nodeRender` | -- | NOTE: only Vanilla JS API. | `((el: HTMLElement \| null, cell: Cell, domIndex: number) => HTMLElement) \| undefined` | `undefined` | +| `renderFooter` | -- | NOTE: only JSX API for stencil. Provide a render function for the footer to be rendered. Returns a JSX virtual-dom. | `((item: any, index: number) => any) \| undefined` | `undefined` | +| `renderHeader` | -- | NOTE: only JSX API for stencil. Provide a render function for the header to be rendered. Returns a JSX virtual-dom. | `((item: any, index: number) => any) \| undefined` | `undefined` | +| `renderItem` | -- | NOTE: only JSX API for stencil. Provide a render function for the items to be rendered. Returns a JSX virtual-dom. | `((item: any, index: number) => any) \| undefined` | `undefined` | ## Methods diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 8d98705250..7b20e78507 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -17,7 +17,7 @@ export function createColorClasses(color: Color | undefined | null): CssClassMap export function createThemedClasses(mode: Mode | undefined, name: string): CssClassMap { return { [name]: true, - [`${name}-${mode}`]: !!mode + [`${name}-${mode}`]: mode !== undefined }; } diff --git a/core/tslint.json b/core/tslint.json index 54cf47cdfd..799a5ef95c 100644 --- a/core/tslint.json +++ b/core/tslint.json @@ -16,6 +16,7 @@ "no-console": false, "no-unbound-method": true, "no-floating-promises": false, + "no-invalid-template-strings": true, "jsx-key": false, "jsx-self-close": false,