diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index de758f092a..92b804b2ea 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -26,7 +26,7 @@ export class IonAvatar { } export declare interface IonBackButton extends StencilComponents<'IonBackButton'> {} -@Component({ selector: 'ion-back-button', changeDetection: 0, template: '', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] }) +@Component({ selector: 'ion-back-button', changeDetection: 0, template: '', inputs: ['color', 'mode', 'defaultHref', 'disabled', 'icon', 'text', 'type'] }) export class IonBackButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -34,7 +34,7 @@ export class IonBackButton { this.el = r.nativeElement; } } -proxyInputs(IonBackButton, ['color', 'mode', 'defaultHref', 'icon', 'text']); +proxyInputs(IonBackButton, ['color', 'mode', 'defaultHref', 'disabled', 'icon', 'text', 'type']); export declare interface IonBackdrop extends StencilComponents<'IonBackdrop'> {} @Component({ selector: 'ion-backdrop', changeDetection: 0, template: '', inputs: ['visible', 'tappable', 'stopPropagation'] }) @@ -61,7 +61,7 @@ export class IonBadge { proxyInputs(IonBadge, ['color', 'mode']); export declare interface IonButton extends StencilComponents<'IonButton'> {} -@Component({ selector: 'ion-button', changeDetection: 0, template: '', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type'] }) +@Component({ selector: 'ion-button', changeDetection: 0, template: '', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'download', 'href', 'rel', 'shape', 'size', 'strong', 'target', 'type'] }) export class IonButton { ionFocus!: EventEmitter; ionBlur!: EventEmitter; @@ -72,7 +72,7 @@ export class IonButton { proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']); } } -proxyInputs(IonButton, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type']); +proxyInputs(IonButton, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'download', 'href', 'rel', 'shape', 'size', 'strong', 'target', 'type']); export declare interface IonButtons extends StencilComponents<'IonButtons'> {} @Component({ selector: 'ion-buttons', changeDetection: 0, template: '' }) @@ -85,7 +85,7 @@ export class IonButtons { } export declare interface IonCard extends StencilComponents<'IonCard'> {} -@Component({ selector: 'ion-card', changeDetection: 0, template: '', inputs: ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection'] }) +@Component({ selector: 'ion-card', changeDetection: 0, template: '', inputs: ['color', 'mode', 'button', 'type', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target'] }) export class IonCard { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -93,7 +93,7 @@ export class IonCard { this.el = r.nativeElement; } } -proxyInputs(IonCard, ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection']); +proxyInputs(IonCard, ['color', 'mode', 'button', 'type', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target']); export declare interface IonCardContent extends StencilComponents<'IonCardContent'> {} @Component({ selector: 'ion-card-content', changeDetection: 0, template: '', inputs: ['mode'] }) @@ -222,7 +222,7 @@ proxyMethods(IonFab, ['close']); proxyInputs(IonFab, ['horizontal', 'vertical', 'edge', 'activated']); export declare interface IonFabButton extends StencilComponents<'IonFabButton'> {} -@Component({ selector: 'ion-fab-button', changeDetection: 0, template: '', inputs: ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size'] }) +@Component({ selector: 'ion-fab-button', changeDetection: 0, template: '', inputs: ['mode', 'color', 'activated', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target', 'show', 'translucent', 'type', 'size'] }) export class IonFabButton { ionFocus!: EventEmitter; ionBlur!: EventEmitter; @@ -233,7 +233,7 @@ export class IonFabButton { proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']); } } -proxyInputs(IonFabButton, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size']); +proxyInputs(IonFabButton, ['mode', 'color', 'activated', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target', 'show', 'translucent', 'type', 'size']); export declare interface IonFabList extends StencilComponents<'IonFabList'> {} @Component({ selector: 'ion-fab-list', changeDetection: 0, template: '', inputs: ['activated', 'side'] }) @@ -348,7 +348,7 @@ proxyMethods(IonInput, ['setFocus', 'getInputElement']); proxyInputs(IonInput, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'spellcheck', 'step', 'size', 'type', 'value']); export declare interface IonItem extends StencilComponents<'IonItem'> {} -@Component({ selector: 'ion-item', changeDetection: 0, template: '', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type'] }) +@Component({ selector: 'ion-item', changeDetection: 0, template: '', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'rel', 'lines', 'routerDirection', 'target', 'type'] }) export class IonItem { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -356,7 +356,7 @@ export class IonItem { this.el = r.nativeElement; } } -proxyInputs(IonItem, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type']); +proxyInputs(IonItem, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'rel', 'lines', 'routerDirection', 'target', 'type']); export declare interface IonItemDivider extends StencilComponents<'IonItemDivider'> {} @Component({ selector: 'ion-item-divider', changeDetection: 0, template: '', inputs: ['color', 'mode', 'sticky'] }) @@ -380,7 +380,7 @@ export class IonItemGroup { } export declare interface IonItemOption extends StencilComponents<'IonItemOption'> {} -@Component({ selector: 'ion-item-option', changeDetection: 0, template: '', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] }) +@Component({ selector: 'ion-item-option', changeDetection: 0, template: '', inputs: ['color', 'mode', 'disabled', 'download', 'expandable', 'href', 'rel', 'target', 'type'] }) export class IonItemOption { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -388,7 +388,7 @@ export class IonItemOption { this.el = r.nativeElement; } } -proxyInputs(IonItemOption, ['color', 'mode', 'disabled', 'expandable', 'href']); +proxyInputs(IonItemOption, ['color', 'mode', 'disabled', 'download', 'expandable', 'href', 'rel', 'target', 'type']); export declare interface IonItemOptions extends StencilComponents<'IonItemOptions'> {} @Component({ selector: 'ion-item-options', changeDetection: 0, template: '', inputs: ['side'] }) @@ -469,7 +469,7 @@ proxyMethods(IonMenu, ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen proxyInputs(IonMenu, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']); export declare interface IonMenuButton extends StencilComponents<'IonMenuButton'> {} -@Component({ selector: 'ion-menu-button', changeDetection: 0, template: '', inputs: ['color', 'mode', 'menu', 'autoHide'] }) +@Component({ selector: 'ion-menu-button', changeDetection: 0, template: '', inputs: ['color', 'mode', 'disabled', 'menu', 'autoHide', 'type'] }) export class IonMenuButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -477,7 +477,7 @@ export class IonMenuButton { this.el = r.nativeElement; } } -proxyInputs(IonMenuButton, ['color', 'mode', 'menu', 'autoHide']); +proxyInputs(IonMenuButton, ['color', 'mode', 'disabled', 'menu', 'autoHide', 'type']); export declare interface IonMenuToggle extends StencilComponents<'IonMenuToggle'> {} @Component({ selector: 'ion-menu-toggle', changeDetection: 0, template: '', inputs: ['menu', 'autoHide'] }) @@ -709,7 +709,7 @@ export class IonSegment { proxyInputs(IonSegment, ['color', 'mode', 'disabled', 'scrollable', 'value']); export declare interface IonSegmentButton extends StencilComponents<'IonSegmentButton'> {} -@Component({ selector: 'ion-segment-button', changeDetection: 0, template: '', inputs: ['mode', 'checked', 'disabled', 'layout', 'value'] }) +@Component({ selector: 'ion-segment-button', changeDetection: 0, template: '', inputs: ['mode', 'checked', 'disabled', 'layout', 'type', 'value'] }) export class IonSegmentButton { ionSelect!: EventEmitter; protected el: HTMLElement; @@ -719,7 +719,7 @@ export class IonSegmentButton { proxyOutputs(this, this.el, ['ionSelect']); } } -proxyInputs(IonSegmentButton, ['mode', 'checked', 'disabled', 'layout', 'value']); +proxyInputs(IonSegmentButton, ['mode', 'checked', 'disabled', 'layout', 'type', 'value']); export declare interface IonSelect extends StencilComponents<'IonSelect'> {} @Component({ selector: 'ion-select', changeDetection: 0, template: '', inputs: ['mode', 'disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'compareWith', 'value'] }) @@ -835,7 +835,7 @@ export class IonTabBar { proxyInputs(IonTabBar, ['mode', 'color', 'selectedTab', 'translucent']); export declare interface IonTabButton extends StencilComponents<'IonTabButton'> {} -@Component({ selector: 'ion-tab-button', changeDetection: 0, template: '', inputs: ['selected', 'mode', 'layout', 'href', 'tab', 'disabled'] }) +@Component({ selector: 'ion-tab-button', changeDetection: 0, template: '', inputs: ['mode', 'disabled', 'download', 'href', 'rel', 'layout', 'selected', 'tab', 'target'] }) export class IonTabButton { protected el: HTMLElement; constructor(c: ChangeDetectorRef, r: ElementRef) { @@ -843,7 +843,7 @@ export class IonTabButton { this.el = r.nativeElement; } } -proxyInputs(IonTabButton, ['selected', 'mode', 'layout', 'href', 'tab', 'disabled']); +proxyInputs(IonTabButton, ['mode', 'disabled', 'download', 'href', 'rel', 'layout', 'selected', 'tab', 'target']); export declare interface IonText extends StencilComponents<'IonText'> {} @Component({ selector: 'ion-text', changeDetection: 0, template: '', inputs: ['color', 'mode'] }) diff --git a/core/api.txt b/core/api.txt index 421dbe22d8..625698ca75 100644 --- a/core/api.txt +++ b/core/api.txt @@ -72,8 +72,11 @@ ion-alert,css-prop,--width ion-anchor,shadow ion-anchor,prop,color,string | undefined,undefined,false,false +ion-anchor,prop,download,string | undefined,undefined,false,false ion-anchor,prop,href,string | undefined,undefined,false,false +ion-anchor,prop,rel,string | undefined,undefined,false,false ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false +ion-anchor,prop,target,string | undefined,undefined,false,false ion-anchor,css-prop,--background ion-anchor,css-prop,--color @@ -85,9 +88,11 @@ ion-avatar,css-prop,--border-radius ion-back-button,scoped ion-back-button,prop,color,string | undefined,undefined,false,false ion-back-button,prop,defaultHref,string | undefined,undefined,false,false +ion-back-button,prop,disabled,boolean,false,false,true ion-back-button,prop,icon,null | string | undefined,undefined,false,false ion-back-button,prop,mode,"ios" | "md",undefined,false,false ion-back-button,prop,text,null | string | undefined,undefined,false,false +ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-back-button,css-prop,--background ion-back-button,css-prop,--background-focused ion-back-button,css-prop,--background-hover @@ -139,14 +144,17 @@ ion-button,shadow ion-button,prop,buttonType,string,'button',false,false ion-button,prop,color,string | undefined,undefined,false,false ion-button,prop,disabled,boolean,false,false,true +ion-button,prop,download,string | undefined,undefined,false,false ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undefined,false,true ion-button,prop,href,string | undefined,undefined,false,false ion-button,prop,mode,"ios" | "md",undefined,false,false +ion-button,prop,rel,string | undefined,undefined,false,false ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false ion-button,prop,shape,"round" | undefined,undefined,false,true ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true ion-button,prop,strong,boolean,false,false,false +ion-button,prop,target,string | undefined,undefined,false,false ion-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-button,event,ionBlur,void,true ion-button,event,ionFocus,void,true @@ -195,9 +203,12 @@ ion-card,scoped ion-card,prop,button,boolean,false,false,false ion-card,prop,color,string | undefined,undefined,false,false ion-card,prop,disabled,boolean,false,false,false +ion-card,prop,download,string | undefined,undefined,false,false ion-card,prop,href,string | undefined,undefined,false,false ion-card,prop,mode,"ios" | "md",undefined,false,false +ion-card,prop,rel,string | undefined,undefined,false,false ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false +ion-card,prop,target,string | undefined,undefined,false,false ion-card,prop,type,"button" | "reset" | "submit",'button',false,false ion-card,css-prop,--background ion-card,css-prop,--color @@ -327,11 +338,14 @@ ion-fab-button,shadow ion-fab-button,prop,activated,boolean,false,false,false ion-fab-button,prop,color,string | undefined,undefined,false,false ion-fab-button,prop,disabled,boolean,false,false,false +ion-fab-button,prop,download,string | undefined,undefined,false,false ion-fab-button,prop,href,string | undefined,undefined,false,false ion-fab-button,prop,mode,"ios" | "md",undefined,false,false +ion-fab-button,prop,rel,string | undefined,undefined,false,false ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false ion-fab-button,prop,show,boolean,false,false,false ion-fab-button,prop,size,"small" | undefined,undefined,false,false +ion-fab-button,prop,target,string | undefined,undefined,false,false ion-fab-button,prop,translucent,boolean,false,false,false ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-fab-button,event,ionBlur,void,true @@ -471,9 +485,13 @@ ion-item-group,none ion-item-option,shadow ion-item-option,prop,color,string | undefined,undefined,false,false ion-item-option,prop,disabled,boolean,false,false,false +ion-item-option,prop,download,string | undefined,undefined,false,false ion-item-option,prop,expandable,boolean,false,false,false ion-item-option,prop,href,string | undefined,undefined,false,false ion-item-option,prop,mode,"ios" | "md",undefined,false,false +ion-item-option,prop,rel,string | undefined,undefined,false,false +ion-item-option,prop,target,string | undefined,undefined,false,false +ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false ion-item-option,css-prop,--background ion-item-option,css-prop,--color @@ -496,10 +514,13 @@ ion-item,prop,color,string | undefined,undefined,false,false ion-item,prop,detail,boolean | undefined,undefined,false,false ion-item,prop,detailIcon,string,'ios-arrow-forward',false,false ion-item,prop,disabled,boolean,false,false,false +ion-item,prop,download,string | undefined,undefined,false,false ion-item,prop,href,string | undefined,undefined,false,false ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false ion-item,prop,mode,"ios" | "md",undefined,false,false +ion-item,prop,rel,string | undefined,undefined,false,false ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false +ion-item,prop,target,string | undefined,undefined,false,false ion-item,prop,type,"button" | "reset" | "submit",'button',false,false ion-item,css-prop,--background ion-item,css-prop,--background-activated @@ -586,8 +607,10 @@ ion-loading,css-prop,--width ion-menu-button,shadow ion-menu-button,prop,autoHide,boolean,true,false,false ion-menu-button,prop,color,string | undefined,undefined,false,false +ion-menu-button,prop,disabled,boolean,false,false,false ion-menu-button,prop,menu,string | undefined,undefined,false,false ion-menu-button,prop,mode,"ios" | "md",undefined,false,false +ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-menu-button,css-prop,--background ion-menu-button,css-prop,--background-focused ion-menu-button,css-prop,--background-hover @@ -944,6 +967,7 @@ ion-segment-button,prop,checked,boolean,false,false,false ion-segment-button,prop,disabled,boolean,false,false,false ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false ion-segment-button,prop,mode,"ios" | "md",undefined,false,false +ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false ion-segment-button,event,ionSelect,void,true ion-segment-button,css-prop,--background @@ -1081,11 +1105,14 @@ ion-tab-bar,css-prop,--color ion-tab-button,shadow ion-tab-button,prop,disabled,boolean,false,false,false +ion-tab-button,prop,download,string | undefined,undefined,false,false ion-tab-button,prop,href,string | undefined,undefined,false,false ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false,false ion-tab-button,prop,mode,"ios" | "md",undefined,false,false +ion-tab-button,prop,rel,string | undefined,undefined,false,false ion-tab-button,prop,selected,boolean,false,false,false ion-tab-button,prop,tab,string | undefined,undefined,false,false +ion-tab-button,prop,target,string | undefined,undefined,false,false ion-tab-button,css-prop,--background ion-tab-button,css-prop,--background-focused ion-tab-button,css-prop,--color diff --git a/core/src/components.d.ts b/core/src/components.d.ts index ecb5ac7c3e..4895762112 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -391,13 +391,25 @@ export namespace Components { */ 'color'?: Color; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download': string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href': string | undefined; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': RouterDirection; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; } interface IonAnchorAttributes extends StencilHTMLAttributes { /** @@ -405,13 +417,25 @@ export namespace Components { */ 'color'?: Color; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download'?: string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: RouterDirection; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; } interface IonApp {} @@ -430,6 +454,10 @@ export namespace Components { */ 'defaultHref'?: string; /** + * If `true`, the user cannot interact with the button. + */ + 'disabled': boolean; + /** * The icon name to use for the back button. */ 'icon'?: string | null; @@ -441,6 +469,10 @@ export namespace Components { * The text to display in the back button. */ 'text'?: string | null; + /** + * The type of the button. + */ + 'type': 'submit' | 'reset' | 'button'; } interface IonBackButtonAttributes extends StencilHTMLAttributes { /** @@ -452,6 +484,10 @@ export namespace Components { */ 'defaultHref'?: string; /** + * If `true`, the user cannot interact with the button. + */ + 'disabled'?: boolean; + /** * The icon name to use for the back button. */ 'icon'?: string | null; @@ -463,6 +499,10 @@ export namespace Components { * The text to display in the back button. */ 'text'?: string | null; + /** + * The type of the button. + */ + 'type'?: 'submit' | 'reset' | 'button'; } interface IonBackdrop { @@ -533,6 +573,10 @@ export namespace Components { */ 'disabled': boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download': string | undefined; + /** * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. */ 'expand'?: 'full' | 'block'; @@ -543,12 +587,16 @@ export namespace Components { /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href': string | undefined; /** * The mode determines which platform styles to use. */ 'mode': Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': RouterDirection; @@ -565,6 +613,10 @@ export namespace Components { */ 'strong': boolean; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; + /** * The type of the button. */ 'type': 'submit' | 'reset' | 'button'; @@ -583,6 +635,10 @@ export namespace Components { */ 'disabled'?: boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download'?: string | undefined; + /** * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. */ 'expand'?: 'full' | 'block'; @@ -593,7 +649,7 @@ export namespace Components { /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; /** * The mode determines which platform styles to use. */ @@ -607,6 +663,10 @@ export namespace Components { */ 'onIonFocus'?: (event: CustomEvent) => void; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: RouterDirection; @@ -623,6 +683,10 @@ export namespace Components { */ 'strong'?: boolean; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; + /** * The type of the button. */ 'type'?: 'submit' | 'reset' | 'button'; @@ -729,18 +793,30 @@ export namespace Components { */ 'disabled': boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download': string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href': string | undefined; /** * The mode determines which platform styles to use. */ 'mode': Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': RouterDirection; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; + /** * The type of the button. Only used when an `onclick` or `button` property is present. */ 'type': 'submit' | 'reset' | 'button'; @@ -759,18 +835,30 @@ export namespace Components { */ 'disabled'?: boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download'?: string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; /** * The mode determines which platform styles to use. */ 'mode'?: Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: RouterDirection; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; + /** * The type of the button. Only used when an `onclick` or `button` property is present. */ 'type'?: 'submit' | 'reset' | 'button'; @@ -1375,14 +1463,22 @@ export namespace Components { */ 'disabled': boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download': string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href': string | undefined; /** * The mode determines which platform styles to use. */ 'mode': Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': RouterDirection; @@ -1395,6 +1491,10 @@ export namespace Components { */ 'size'?: 'small'; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; + /** * If `true`, the fab button will be translucent. */ 'translucent': boolean; @@ -1417,9 +1517,13 @@ export namespace Components { */ 'disabled'?: boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download'?: string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; /** * The mode determines which platform styles to use. */ @@ -1433,6 +1537,10 @@ export namespace Components { */ 'onIonFocus'?: (event: CustomEvent) => void; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: RouterDirection; @@ -1445,6 +1553,10 @@ export namespace Components { */ 'size'?: 'small'; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; + /** * If `true`, the fab button will be translucent. */ 'translucent'?: boolean; @@ -1949,17 +2061,33 @@ export namespace Components { */ 'disabled': boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download': string | undefined; + /** * If `true`, the option will expand to take up the available width and cover any other options. */ 'expandable': boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href': string | undefined; /** * The mode determines which platform styles to use. */ 'mode': Mode; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; + /** + * The type of the button. + */ + 'type': 'submit' | 'reset' | 'button'; } interface IonItemOptionAttributes extends StencilHTMLAttributes { /** @@ -1971,17 +2099,33 @@ export namespace Components { */ 'disabled'?: boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download'?: string | undefined; + /** * If `true`, the option will expand to take up the available width and cover any other options. */ 'expandable'?: boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; /** * The mode determines which platform styles to use. */ 'mode'?: Mode; + /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; + /** + * The type of the button. + */ + 'type'?: 'submit' | 'reset' | 'button'; } interface IonItemOptions { @@ -2012,7 +2156,7 @@ export namespace Components { */ 'closeOpened': () => Promise; /** - * If `true`, the user cannot interact with the sliding-item. + * If `true`, the user cannot interact with the sliding item. */ 'disabled': boolean; /** @@ -2030,7 +2174,7 @@ export namespace Components { } interface IonItemSlidingAttributes extends StencilHTMLAttributes { /** - * If `true`, the user cannot interact with the sliding-item. + * If `true`, the user cannot interact with the sliding item. */ 'disabled'?: boolean; /** @@ -2061,9 +2205,13 @@ export namespace Components { */ 'disabled': boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download': string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href': string | undefined; /** * How the bottom border should be displayed on the item. */ @@ -2073,10 +2221,18 @@ export namespace Components { */ 'mode': Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection': RouterDirection; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; + /** * The type of the button. Only used when an `onclick` or `button` property is present. */ 'type': 'submit' | 'reset' | 'button'; @@ -2103,9 +2259,13 @@ export namespace Components { */ 'disabled'?: boolean; /** + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). + */ + 'download'?: string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ - 'href'?: string; + 'href'?: string | undefined; /** * How the bottom border should be displayed on the item. */ @@ -2115,10 +2275,18 @@ export namespace Components { */ 'mode'?: Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; + /** * When using a router, it specifies the transition direction when navigating to another page using `href`. */ 'routerDirection'?: RouterDirection; /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; + /** * The type of the button. Only used when an `onclick` or `button` property is present. */ 'type'?: 'submit' | 'reset' | 'button'; @@ -2367,6 +2535,10 @@ export namespace Components { */ 'color'?: Color; /** + * If `true`, the user cannot interact with the menu button. + */ + 'disabled': boolean; + /** * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle */ 'menu'?: string; @@ -2374,6 +2546,10 @@ export namespace Components { * The mode determines which platform styles to use. */ 'mode': Mode; + /** + * The type of the button. + */ + 'type': 'submit' | 'reset' | 'button'; } interface IonMenuButtonAttributes extends StencilHTMLAttributes { /** @@ -2385,6 +2561,10 @@ export namespace Components { */ 'color'?: Color; /** + * If `true`, the user cannot interact with the menu button. + */ + 'disabled'?: boolean; + /** * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle */ 'menu'?: string; @@ -2392,6 +2572,10 @@ export namespace Components { * The mode determines which platform styles to use. */ 'mode'?: Mode; + /** + * The type of the button. + */ + 'type'?: 'submit' | 'reset' | 'button'; } interface IonMenuController { @@ -3925,6 +4109,10 @@ export namespace Components { */ 'mode': Mode; /** + * The type of the button. + */ + 'type': 'submit' | 'reset' | 'button'; + /** * The value of the segment button. */ 'value': string; @@ -3951,6 +4139,10 @@ export namespace Components { */ 'onIonSelect'?: (event: CustomEvent) => void; /** + * The type of the button. + */ + 'type'?: 'submit' | 'reset' | 'button'; + /** * The value of the segment button. */ 'value'?: string; @@ -4484,13 +4676,17 @@ export namespace Components { interface IonTabButton { /** - * The selected tab component + * If `true`, the user cannot interact with the tab button. */ 'disabled': boolean; /** - * The URL which will be used as the `href` within this tab's button anchor. + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). */ - 'href'?: string; + 'download': string | undefined; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href': string | undefined; /** * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. */ @@ -4500,6 +4696,10 @@ export namespace Components { */ 'mode': Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel': string | undefined; + /** * The selected tab component */ 'selected': boolean; @@ -4507,16 +4707,24 @@ export namespace Components { * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. */ 'tab'?: string; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target': string | undefined; } interface IonTabButtonAttributes extends StencilHTMLAttributes { /** - * The selected tab component + * If `true`, the user cannot interact with the tab button. */ 'disabled'?: boolean; /** - * The URL which will be used as the `href` within this tab's button anchor. + * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). */ - 'href'?: string; + 'download'?: string | undefined; + /** + * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. + */ + 'href'?: string | undefined; /** * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. */ @@ -4526,6 +4734,10 @@ export namespace Components { */ 'mode'?: Mode; /** + * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + 'rel'?: string | undefined; + /** * The selected tab component */ 'selected'?: boolean; @@ -4533,6 +4745,10 @@ export namespace Components { * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. */ 'tab'?: string; + /** + * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + 'target'?: string | undefined; } interface IonTab { diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx index 83a4833114..ddac510ce1 100644 --- a/core/src/components/anchor/anchor.tsx +++ b/core/src/components/anchor/anchor.tsx @@ -1,6 +1,7 @@ import { Component, ComponentInterface, Listen, Prop } from '@stencil/core'; import { Color, Mode, RouterDirection } from '../../interface'; +import { AnchorInterface } from '../../utils/element-interface'; import { createColorClasses, openURL } from '../../utils/theme'; @Component({ @@ -8,7 +9,7 @@ import { createColorClasses, openURL } from '../../utils/theme'; styleUrl: 'anchor.scss', shadow: true }) -export class Anchor implements ComponentInterface { +export class Anchor implements ComponentInterface, AnchorInterface { mode!: Mode; @Prop({ context: 'window' }) win!: Window; @@ -20,11 +21,25 @@ export class Anchor implements ComponentInterface { */ @Prop() color?: Color; + /** + * This attribute instructs browsers to download a URL instead of navigating to + * it, so the user will be prompted to save it as a local file. If the attribute + * has a value, it is used as the pre-filled file name in the Save prompt + * (the user can still change the file name if they want). + */ + @Prop() download: string | undefined; + /** * Contains a URL or a URL fragment that the hyperlink points to. * If this property is set, an anchor tag will be rendered. */ - @Prop() href?: string; + @Prop() href: string | undefined; + + /** + * Specifies the relationship of the target object to the link object. + * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). + */ + @Prop() rel: string | undefined; /** * When using a router, it specifies the transition direction when navigating to @@ -32,6 +47,13 @@ export class Anchor implements ComponentInterface { */ @Prop() routerDirection: RouterDirection = 'forward'; + /** + * Specifies where to display the linked URL. + * Only applies when an `href` is provided. + * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. + */ + @Prop() target: string | undefined; + @Listen('click') onClick(ev: Event) { openURL(this.win, this.href, ev, this.routerDirection); @@ -48,8 +70,15 @@ export class Anchor implements ComponentInterface { } render() { + const attrs = { + download: this.download, + href: this.href, + rel: this.rel, + target: this.target + }; + return ( - + ); diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md index 5809bf07aa..d3e9dddc42 100644 --- a/core/src/components/anchor/readme.md +++ b/core/src/components/anchor/readme.md @@ -2,17 +2,21 @@ The Anchor component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation. +> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `` and `routerLink` with the Angular router. ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | -| `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` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | +| `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` | +| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | +| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | +| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | +| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | +| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | ## CSS Custom Properties diff --git a/core/src/components/anchor/test/basic/index.html b/core/src/components/anchor/test/basic/index.html index d8eec8e077..fbba0488e0 100644 --- a/core/src/components/anchor/test/basic/index.html +++ b/core/src/components/anchor/test/basic/index.html @@ -30,11 +30,11 @@

- Underline Anchor + Underline Anchor

- Custom Anchor + Custom Anchor

diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss index c9f7d0e001..4e4da235a4 100644 --- a/core/src/components/back-button/back-button.scss +++ b/core/src/components/back-button/back-button.scss @@ -107,6 +107,11 @@ display: block; } +:host(.back-button-disabled) { + cursor: default; + opacity: .5; + pointer-events: none; +} // Native Back Button // -------------------------------------------------- diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index b56484702b..8dc5291796 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -1,6 +1,7 @@ import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core'; import { Color, Config, Mode } from '../../interface'; +import { ButtonInterface } from '../../utils/element-interface'; import { createColorClasses, openURL } from '../../utils/theme'; @Component({ @@ -11,7 +12,7 @@ import { createColorClasses, openURL } from '../../utils/theme'; }, scoped: true }) -export class BackButton implements ComponentInterface { +export class BackButton implements ComponentInterface, ButtonInterface { @Element() el!: HTMLElement; @@ -35,6 +36,11 @@ export class BackButton implements ComponentInterface { */ @Prop() defaultHref?: string; + /** + * If `true`, the user cannot interact with the button. + */ + @Prop({ reflectToAttr: true }) disabled = false; + /** * The icon name to use for the back button. */ @@ -45,6 +51,11 @@ export class BackButton implements ComponentInterface { */ @Prop() text?: string | null; + /** + * The type of the button. + */ + @Prop() type: 'submit' | 'reset' | 'button' = 'button'; + @Listen('click') async onClick(ev: Event) { const nav = this.el.closest('ion-nav'); @@ -80,15 +91,19 @@ export class BackButton implements ComponentInterface { } hostData() { - const showBackButton = this.defaultHref !== undefined; + const { color, defaultHref, disabled, mode, hasIconOnly } = this; + + const showBackButton = defaultHref !== undefined; return { + 'aria-disabled': disabled ? 'true' : null, class: { - ...createColorClasses(this.color), - [`${this.mode}`]: true, + ...createColorClasses(color), + [`${mode}`]: true, 'button': true, // ion-buttons target .button - 'back-button-has-icon-only': this.hasIconOnly, + 'back-button-disabled': disabled, + 'back-button-has-icon-only': hasIconOnly, 'ion-activatable': true, 'ion-focusable': true, 'show-back-button': showBackButton @@ -99,8 +114,12 @@ export class BackButton implements ComponentInterface { render() { const { backButtonIcon, backButtonText } = this; + const attrs = { + type: this.type + }; + return ( -