feat(toast): add hue property for the ionic theme (#30333)
Issue number: internal --------- ## What is the current behavior? The toast component does not support the `hue` property. ## What is the new behavior? Adds support for the `subtle` hue for the toast. Defaults to `subtle`. ## Does this introduce a breaking change? - [ ] Yes - [x] No
Brandy Smith
@ -2436,6 +2436,7 @@ ion-toast,prop,duration,number,config.getNumber('toastDuration', 0),false,false
|
|||||||
ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
|
||||||
ion-toast,prop,header,string | undefined,undefined,false,false
|
ion-toast,prop,header,string | undefined,undefined,false,false
|
||||||
ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
|
ion-toast,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
|
||||||
|
ion-toast,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
|
||||||
ion-toast,prop,icon,string | undefined,undefined,false,false
|
ion-toast,prop,icon,string | undefined,undefined,false,false
|
||||||
ion-toast,prop,isOpen,boolean,false,false,false
|
ion-toast,prop,isOpen,boolean,false,false,false
|
||||||
ion-toast,prop,keyboardClose,boolean,false,false,false
|
ion-toast,prop,keyboardClose,boolean,false,false,false
|
||||||
|
|||||||
8
core/src/components.d.ts
vendored
@ -3844,6 +3844,10 @@ export namespace Components {
|
|||||||
* Additional attributes to pass to the toast.
|
* Additional attributes to pass to the toast.
|
||||||
*/
|
*/
|
||||||
"htmlAttributes"?: { [key: string]: any };
|
"htmlAttributes"?: { [key: string]: any };
|
||||||
|
/**
|
||||||
|
* Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors. Only applies to the `ionic` theme.
|
||||||
|
*/
|
||||||
|
"hue"?: 'bold' | 'subtle';
|
||||||
/**
|
/**
|
||||||
* The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
|
* The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
|
||||||
*/
|
*/
|
||||||
@ -9384,6 +9388,10 @@ declare namespace LocalJSX {
|
|||||||
* Additional attributes to pass to the toast.
|
* Additional attributes to pass to the toast.
|
||||||
*/
|
*/
|
||||||
"htmlAttributes"?: { [key: string]: any };
|
"htmlAttributes"?: { [key: string]: any };
|
||||||
|
/**
|
||||||
|
* Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors. Only applies to the `ionic` theme.
|
||||||
|
*/
|
||||||
|
"hue"?: 'bold' | 'subtle';
|
||||||
/**
|
/**
|
||||||
* The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
|
* The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
|
||||||
*/
|
*/
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
123
core/src/components/toast/test/hue/index.html
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Toast - Hue</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Toast - Hue</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="ion-padding" id="content">
|
||||||
|
<p>
|
||||||
|
Toasts are presented indefinitely but can be closed by clicking the backdrop. The backdrop has been added for
|
||||||
|
demo purposes only.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button id="show-subtle-toasts" class="expand">Show All Subtle Toasts</button>
|
||||||
|
<button id="show-bold-toasts" class="expand">Show All Bold Toasts</button>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<div id="backdrop" class="backdrop"></div>
|
||||||
|
|
||||||
|
<ion-toast position="top"></ion-toast>
|
||||||
|
<ion-toast color="primary" position="top"></ion-toast>
|
||||||
|
<ion-toast color="secondary" position="top"></ion-toast>
|
||||||
|
<ion-toast color="tertiary" position="top"></ion-toast>
|
||||||
|
<ion-toast color="success" position="top"></ion-toast>
|
||||||
|
<ion-toast color="warning" position="top"></ion-toast>
|
||||||
|
<ion-toast color="danger" position="top"></ion-toast>
|
||||||
|
<ion-toast color="light" position="top"></ion-toast>
|
||||||
|
<ion-toast color="medium" position="top"></ion-toast>
|
||||||
|
<ion-toast color="dark" position="top"></ion-toast>
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
let lastToast = null;
|
||||||
|
let toastOffset = 10;
|
||||||
|
|
||||||
|
// Show all toasts when the button is clicked
|
||||||
|
function openAllToasts(isBold) {
|
||||||
|
toastOffset = 10;
|
||||||
|
|
||||||
|
const toasts = document.querySelectorAll('ion-toast');
|
||||||
|
|
||||||
|
toasts.forEach((toast, index) => {
|
||||||
|
toast.removeAttribute('hue');
|
||||||
|
toast.hue = isBold ? 'bold' : 'subtle';
|
||||||
|
const hue = toast.hue;
|
||||||
|
|
||||||
|
const color = toast.color || 'default';
|
||||||
|
toast.message = `This is a ${color} toast.`;
|
||||||
|
|
||||||
|
toast.icon = 'information-circle';
|
||||||
|
|
||||||
|
toast.buttons = [
|
||||||
|
{
|
||||||
|
text: 'Action',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'close',
|
||||||
|
role: 'cancel',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// Set dynamic position for each toast to ensure they don't overlap
|
||||||
|
toast.style.position = 'absolute';
|
||||||
|
toast.style.top = `${toastOffset}px`;
|
||||||
|
toast.style.left = '50%';
|
||||||
|
toast.style.transform = 'translateX(-50%)';
|
||||||
|
|
||||||
|
toast.present();
|
||||||
|
|
||||||
|
// Update the toastOffset for the next toast to ensure it's positioned below the previous one
|
||||||
|
toastOffset += 60;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('backdrop').style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dismiss all toasts when backdrop is clicked
|
||||||
|
function dismissAllToasts() {
|
||||||
|
const toasts = document.querySelectorAll('ion-toast');
|
||||||
|
toasts.forEach((toast) => toast.dismiss());
|
||||||
|
|
||||||
|
document.getElementById('backdrop').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
document.getElementById('show-subtle-toasts').addEventListener('click', () => openAllToasts(false));
|
||||||
|
document.getElementById('show-bold-toasts').addEventListener('click', () => openAllToasts(true));
|
||||||
|
|
||||||
|
document.getElementById('backdrop').addEventListener('click', dismissAllToasts);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
core/src/components/toast/test/hue/toast.e2e.ts
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import type { E2EPage, E2EPageOptions, ScreenshotFn, EventSpy } from '@utils/test/playwright';
|
||||||
|
import { configs, test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
class ToastFixture {
|
||||||
|
readonly page: E2EPage;
|
||||||
|
|
||||||
|
private ionToastDidPresent!: EventSpy;
|
||||||
|
|
||||||
|
constructor(page: E2EPage) {
|
||||||
|
this.page = page;
|
||||||
|
}
|
||||||
|
|
||||||
|
async goto(config: E2EPageOptions) {
|
||||||
|
const { page } = this;
|
||||||
|
await page.goto(`/src/components/toast/test/hue`, config);
|
||||||
|
this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
|
||||||
|
}
|
||||||
|
|
||||||
|
async openToast(selector: string) {
|
||||||
|
const { page, ionToastDidPresent } = this;
|
||||||
|
const button = page.locator(selector);
|
||||||
|
await button.click();
|
||||||
|
|
||||||
|
await ionToastDidPresent.next();
|
||||||
|
|
||||||
|
return {
|
||||||
|
toast: page.locator('ion-toast'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async screenshot(screenshotModifier: string, screenshot: ScreenshotFn) {
|
||||||
|
const { page } = this;
|
||||||
|
|
||||||
|
const screenshotString = screenshot(`toast-${screenshotModifier}`);
|
||||||
|
|
||||||
|
await expect(page).toHaveScreenshot(screenshotString);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
|
||||||
|
test.describe(title('toast: hue'), () => {
|
||||||
|
let toastFixture: ToastFixture;
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
toastFixture = new ToastFixture(page);
|
||||||
|
await toastFixture.goto(config);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show all subtle toasts', async () => {
|
||||||
|
await toastFixture.openToast('#show-subtle-toasts');
|
||||||
|
await toastFixture.screenshot('subtle', screenshot);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should show all bold toasts', async () => {
|
||||||
|
await toastFixture.openToast('#show-bold-toasts');
|
||||||
|
await toastFixture.screenshot('bold', screenshot);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
@ -5,10 +5,7 @@
|
|||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
--background: #{globals.$ion-primitives-neutral-1200};
|
|
||||||
--box-shadow: #{globals.$ion-elevation-4};
|
--box-shadow: #{globals.$ion-elevation-4};
|
||||||
--button-color: #{globals.$ion-primitives-base-white};
|
|
||||||
--color: #{globals.$ion-primitives-base-white};
|
|
||||||
--max-width: 343px;
|
--max-width: 343px;
|
||||||
--start: 8px;
|
--start: 8px;
|
||||||
--end: 8px;
|
--end: 8px;
|
||||||
@ -132,3 +129,41 @@
|
|||||||
.toast-button-icon {
|
.toast-button-icon {
|
||||||
font-size: globals.$ion-scale-600;
|
font-size: globals.$ion-scale-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bold Toast
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
:host(.toast-hue-bold) {
|
||||||
|
--background: #{globals.$ion-bg-neutral-boldest-default};
|
||||||
|
--background-activated: #{globals.$ion-bg-neutral-boldest-press};
|
||||||
|
--color: #{globals.$ion-text-inverse};
|
||||||
|
--button-color: #{globals.$ion-text-inverse};
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.toast-hue-bold.ion-color) .toast-wrapper {
|
||||||
|
background: globals.current-color(base);
|
||||||
|
color: globals.current-color(contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.toast-hue-bold.ion-color) .toast-button {
|
||||||
|
color: globals.current-color(contrast);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Subtle Toast
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
:host(.toast-hue-subtle) {
|
||||||
|
--background: #{globals.$ion-bg-neutral-subtlest-default};
|
||||||
|
--background-activated: #{globals.$ion-bg-neutral-subtlest-press};
|
||||||
|
--color: #{globals.$ion-text-default};
|
||||||
|
--button-color: #{globals.$ion-text-link-default};
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.toast-hue-subtle) .toast-button-cancel {
|
||||||
|
color: #{globals.$ion-icon-subtlest};
|
||||||
|
}
|
||||||
|
|
||||||
|
:host(.toast-hue-subtle.ion-color) .toast-wrapper {
|
||||||
|
background: globals.current-color(base, $subtle: true);
|
||||||
|
color: globals.current-color(contrast, $subtle: true);
|
||||||
|
}
|
||||||
|
|||||||
@ -135,6 +135,14 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
|||||||
*/
|
*/
|
||||||
@Prop() header?: string;
|
@Prop() header?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for
|
||||||
|
* a toast with muted, subtle colors.
|
||||||
|
*
|
||||||
|
* Only applies to the `ionic` theme.
|
||||||
|
*/
|
||||||
|
@Prop() hue?: 'bold' | 'subtle' = 'subtle';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Defines how the message and buttons are laid out in the toast.
|
* Defines how the message and buttons are laid out in the toast.
|
||||||
* 'baseline': The message and the buttons will appear on the same line.
|
* 'baseline': The message and the buttons will appear on the same line.
|
||||||
@ -715,7 +723,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { layout, el, revealContentToScreenReader, header, message } = this;
|
const { layout, el, revealContentToScreenReader, header, hue, message } = this;
|
||||||
const allButtons = this.getButtons();
|
const allButtons = this.getButtons();
|
||||||
const startButtons = allButtons.filter((b) => b.side === 'start');
|
const startButtons = allButtons.filter((b) => b.side === 'start');
|
||||||
const endButtons = allButtons.filter((b) => b.side !== 'start');
|
const endButtons = allButtons.filter((b) => b.side !== 'start');
|
||||||
@ -753,6 +761,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
|
|||||||
'overlay-hidden': true,
|
'overlay-hidden': true,
|
||||||
'toast-translucent': this.translucent,
|
'toast-translucent': this.translucent,
|
||||||
[`toast-shape-${shape}`]: shape !== undefined,
|
[`toast-shape-${shape}`]: shape !== undefined,
|
||||||
|
[`toast-hue-${hue}`]: hue !== undefined,
|
||||||
})}
|
})}
|
||||||
onIonToastWillDismiss={this.dispatchCancelHandler}
|
onIonToastWillDismiss={this.dispatchCancelHandler}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -2439,7 +2439,7 @@ export declare interface IonTitle extends Components.IonTitle {}
|
|||||||
|
|
||||||
|
|
||||||
@ProxyCmp({
|
@ProxyCmp({
|
||||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
||||||
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
|
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
|
||||||
})
|
})
|
||||||
@Component({
|
@Component({
|
||||||
@ -2447,7 +2447,7 @@ export declare interface IonTitle extends Components.IonTitle {}
|
|||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
template: '<ng-content></ng-content>',
|
template: '<ng-content></ng-content>',
|
||||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
||||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
||||||
})
|
})
|
||||||
export class IonToast {
|
export class IonToast {
|
||||||
protected el: HTMLIonToastElement;
|
protected el: HTMLIonToastElement;
|
||||||
|
|||||||
@ -2202,7 +2202,7 @@ export declare interface IonTitle extends Components.IonTitle {}
|
|||||||
|
|
||||||
@ProxyCmp({
|
@ProxyCmp({
|
||||||
defineCustomElementFn: defineIonToast,
|
defineCustomElementFn: defineIonToast,
|
||||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
||||||
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
|
methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss']
|
||||||
})
|
})
|
||||||
@Component({
|
@Component({
|
||||||
@ -2210,7 +2210,7 @@ export declare interface IonTitle extends Components.IonTitle {}
|
|||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
template: '<ng-content></ng-content>',
|
template: '<ng-content></ng-content>',
|
||||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
||||||
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
inputs: ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger'],
|
||||||
standalone: true
|
standalone: true
|
||||||
})
|
})
|
||||||
export class IonToast {
|
export class IonToast {
|
||||||
|
|||||||
@ -28,5 +28,5 @@ export const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicke
|
|||||||
|
|
||||||
export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'theme', 'translucent', 'trigger', 'triggerAction']);
|
export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'theme', 'translucent', 'trigger', 'triggerAction']);
|
||||||
|
|
||||||
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger']);
|
export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger']);
|
||||||
|
|
||||||
|
|||||||