@@ -138,7 +172,7 @@ No Fill / Floating Label
Solid / Floating Label
-
+
@@ -148,20 +182,186 @@ Solid / Floating Label
Outline / Floating Label
-
+
+
+
+
+
+
+
+
+
+
No Fill / Stacked Label
+
+
+
+
+
+
+
+
+
+
Solid / Stacked Label
+
+
+
+
+
+
+
+
+
+
Outline / Stacked Label
+
+
+
+
+
+
+
+
+
+ Overflowing Slots
+
+
+
No Fill / Start Label / No Slot
+
+
+
+
+
+
No Fill / Start Label / Start Slot
+
+
+
+
+
+
+
No Fill / Start Label / End Slot
+
+
+
+
+
+
+
Outline / Start Label / No Slot
+
+
+
+
+
+
Outline / Start Label / Start Slot
+
+
+
+
+
+
+
Outline / Start Label / End Slot
+
+
+
+
+
+
+
Outline / Floating Label / No Slot
+
+
+
+
+
+
Outline / Floating Label / Start Slot
+
+
+
+
+
+
+
Outline / Floating Label / End Slot
+
+
+
+
+
Click Propagation
+
+ Each click on the host is counted, and the target of each is logged to the console. One physical click should
+ count once. Click the padding strip (the gap between the border and the text), the label, the input text, and
+ the slotted button, and compare.
+
+
+
+
No Fill
+
+
+
+
+
+
+
host: 0
+
+
+
+
Solid (16px padding)
+
+
+
+
+
+
+
host: 0
+
+
+
+
Outline (16px padding)
+
+
host: 0
Async Slot Content
Outline / Async Label
-
+
@@ -173,6 +373,7 @@
Outline / Async Decorations
Add Slotted Content
Update Slotted Content
Remove Slotted Content
+ Add Value to All
@@ -242,6 +443,29 @@ Outline / Async Decorations
slottedContent.textContent = 'This is my really really really long text';
}
};
+
+ document.querySelectorAll('ion-input.propagation').forEach((input) => {
+ const count = input.closest('.grid-item').querySelector('.host-count');
+
+ input.addEventListener('click', (ev) => {
+ count.textContent = Number(count.textContent) + 1;
+
+ // The deepest target crosses shadow boundaries, so log it from the composed path
+ console.log(`host (${input.getAttribute('fill') ?? 'none'})`, ev.composedPath()[0]);
+ });
+ });
+
+ const resetClickCounts = () => {
+ document.querySelectorAll('.host-count').forEach((el) => (el.textContent = '0'));
+ console.clear();
+ };
+
+ const addValueToAll = () => {
+ const inputs = document.querySelectorAll('ion-input');
+ inputs.forEach((input) => {
+ input.value = 'hi@ionic.io';
+ });
+ };