From ac102cf52a238de1a60d87ccaa6a7a936bc914ca Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 16 Apr 2024 12:42:35 -0500
Subject: [PATCH] feat(input): add styles for clear action to ionic theme
 (#29337)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

For the `ionic` theme: Adjusted the size of the clear button to match
design specs, and updated the behavior so the button additionally only
shows if the native input *or* any other actions within the `ion-input`
are focused. (See code comments for details.)

The actual icon used has not been modified. The ticket says to "use the
material design clear icon as the reference icon for this feature," and
we've already added a feature allowing the icon to be customized at the
app level. Let me know if the intention was to use a different default
icon with the `ionic` theme.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
---
 core/src/components/input/input.ionic.scss    |  40 +++++++-
 core/src/components/input/input.tsx           |   6 +-
 .../components/input/test/basic/input.e2e.ts  |  89 ++++++++++++++++++
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 2261 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 2467 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 2018 bytes
 ...ionic-md-rtl-light-Mobile-Chrome-linux.png | Bin 0 -> 2272 bytes
 ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 0 -> 2512 bytes
 ...ionic-md-rtl-light-Mobile-Safari-linux.png | Bin 0 -> 2023 bytes
 ...ionic-md-ltr-light-Mobile-Chrome-linux.png | Bin 0 -> 1798 bytes
 ...onic-md-ltr-light-Mobile-Firefox-linux.png | Bin 0 -> 1934 bytes
 ...ionic-md-ltr-light-Mobile-Safari-linux.png | Bin 0 -> 1512 bytes
 ...ionic-md-rtl-light-Mobile-Chrome-linux.png | Bin 0 -> 1764 bytes
 ...onic-md-rtl-light-Mobile-Firefox-linux.png | Bin 0 -> 1966 bytes
 ...ionic-md-rtl-light-Mobile-Safari-linux.png | Bin 0 -> 1535 bytes
 15 files changed, 131 insertions(+), 4 deletions(-)
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png

diff --git a/core/src/components/input/input.ionic.scss b/core/src/components/input/input.ionic.scss
index 68a7f64e3f..3fd34df09b 100644
--- a/core/src/components/input/input.ionic.scss
+++ b/core/src/components/input/input.ionic.scss
@@ -21,6 +21,44 @@
   min-height: 48px;
 }
 
+// Input Clear Button
+// ----------------------------------------------------------------
+
+.input-clear-icon {
+  width: 16px;
+  height: 16px;
+
+  color: #{$ionic-color-neutral-500};
+}
+
+.input-clear-icon.ion-focused {
+  border-radius: #{$ionic-border-radius-rounded-small};
+
+  outline: #{$ionic-border-size-medium} solid #{$ionic-color-primary-100};
+
+  opacity: 1;
+}
+
+.input-clear-icon ion-icon {
+  width: 100%;
+  height: 100%;
+}
+
+/**
+ * The clear button should be visible if the native input
+ * OR any other interactive elements in the component (the
+ * clear button, slotted buttons, etc.) are focused. If we
+ * only looked at the native input, tabbing to the clear
+ * button would immediately hide it.
+ *
+ * Note that the clear button also requires the native input
+ * to have any value, but this is not specific to the ionic
+ * theme, so it is handled elsewhere.
+ */
+:host(:not(:focus-within)) .input-clear-icon {
+  display: none;
+}
+
 // Ionic Input Shapes
 // --------------------------------------------------
 
@@ -69,7 +107,7 @@
   // color for the text within the input
   --color: #{tokens.$ionic-color-neutral-400};
   --background: #{tokens.$ionic-color-neutral-10};
-  
+
   pointer-events: none;
 }
 
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 8c76d54c03..b6263e30ae 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -729,7 +729,7 @@ export class Input implements ComponentInterface {
   }
 
   render() {
-    const { disabled, fill, readonly, shape, inputId, el, hasFocus, clearInputIcon } = this;
+    const { disabled, fill, readonly, shape, inputId, el, hasFocus, clearInput, clearInputIcon } = this;
     const theme = getIonTheme(this);
     const value = this.getValue();
     const size = this.getSize();
@@ -835,11 +835,11 @@ export class Input implements ComponentInterface {
               onCompositionend={this.onCompositionEnd}
               {...this.inheritedAttributes}
             />
-            {this.clearInput && !readonly && !disabled && (
+            {clearInput && !readonly && !disabled && (
               <button
                 aria-label="reset"
                 type="button"
-                class="input-clear-icon"
+                class="input-clear-icon ion-focusable"
                 onPointerDown={(ev) => {
                   /**
                    * This prevents mobile browsers from
diff --git a/core/src/components/input/test/basic/input.e2e.ts b/core/src/components/input/test/basic/input.e2e.ts
index 86b171e240..56f8929745 100644
--- a/core/src/components/input/test/basic/input.e2e.ts
+++ b/core/src/components/input/test/basic/input.e2e.ts
@@ -131,3 +131,92 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: clear button in ionic theme, visual checks'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            label="Label"
+            label-placement="stacked"
+            clear-input="true"
+            value="Text"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await page.waitForChanges();
+
+      await expect(input).toHaveScreenshot(screenshot(`input-with-clear-button`));
+    });
+
+    test('should not have visual regressions when clear button is focused', async ({ page }) => {
+      // extra padding around input ensures focus ring doesn't get cut off at screenshot edges
+      await page.setContent(
+        `
+          <style>
+            #container {
+              padding: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-input
+              label="Label"
+              label-placement="stacked"
+              clear-input="true"
+              value="Text"
+            ></ion-input>
+          </div>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await page.waitForChanges();
+
+      const clearButton = input.locator('.input-clear-icon');
+      clearButton.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
+      await page.waitForChanges();
+
+      const container = page.locator('#container');
+      await expect(container).toHaveScreenshot(screenshot(`input-clear-button-focused`));
+    });
+  });
+});
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('input: clear button in ionic theme, functionality checks'), () => {
+    test('should show clear button when any part of input is focused', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input
+            label="Label"
+            label-placement="stacked"
+            clear-input="true"
+            value="Text"
+          ></ion-input>
+        `,
+        config
+      );
+
+      const input = page.locator('ion-input');
+      const clearButton = input.locator('.input-clear-icon');
+
+      await expect(clearButton).not.toBeVisible();
+
+      await input.evaluate((el: HTMLIonInputElement) => el.setFocus());
+      await expect(clearButton).toBeVisible();
+
+      // ensure blurring native input doesn't immediately hide clear button
+      await page.keyboard.press('Tab');
+      await expect(clearButton).toBeFocused();
+      await expect(clearButton).toBeVisible();
+    });
+  });
+});
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bb24e96312329a314965215a452aa4721cf4a17
GIT binary patch
literal 2261
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
Q2K`e2!q(BI#u|6$UlzqP&j0`b

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..70cd9191b21bbc7857a31b2ad47aa0f2c6cf0b75
GIT binary patch
literal 2467
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
PhCv`iBQrb)=NS1v#wa`}

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..321e4232f7c430c0a86c99dc0f15ecdc0bdd4690
GIT binary patch
literal 2018
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

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2d129f4dff8fdd1f4172d462012beef2dde0129
GIT binary patch
literal 2272
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
aIr8IcS!1vEjFdoM7JxLjHKUul-~9&$|1}8!

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca91dfa9313a2d322c7c4e3e78a9c5146bb39456
GIT binary patch
literal 2512
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

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-clear-button-focused-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..066eac78723f0894d4e5ab20b81df6f6e33bb138
GIT binary patch
literal 2023
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
F{1=f*u1Np@

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..2039a72fa0f2be349dead73b43f89215a35a8abf
GIT binary patch
literal 1798
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

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..b25ff249c62c21ed8b394a90e80d6b98383b2a67
GIT binary patch
literal 1934
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

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..e792edb0bb0be58813f5be782c627dbe5115b609
GIT binary patch
literal 1512
zcmZ{kc~p{F7{))%j4adCDN{5xGCQSt)KM!^V=y3>QIlLIlyDiNFqgzF#md~07&3Rk
zMzh?>1+C0|)Z8+&bdVvJ2F(pza0i{Q`FEys&$;)W=bU@)d*0vkyonC>D0w+GIRF6U
zF=(U{07%7wcXNm|xRbGOcYud1!3Ko{w!f_>_0LlPU?&5EJntNqGsp8pUy6cuER1Ak
zy}L}JyAlo(oez{-BF((+As*;Ksap<m`(NouA9B77L9}b>6_#k})j_&vpW$1*$MEkh
zTZ*(wpQIhFRLl46mE*zt+QK!fjQHWqO3#gG9Ak;!y~fN|m=u%OG_0{$DIn;*L?8u>
z?$OyDgG_({O4^SAbSzq0YybZWTh_3U(9phIONyB3dh(fG*S7lZCQ*TnZc0*~NF)*q
zFhI;MGr(y5Dr{Y{)%M_Ewyka*Z)-~uS(b6JV4ubrZ==k?Qa5F}`>~2N&2#Rrf(rWm
zN(&2BRaG;d7D?GUdZC<5)Y#lPJ3Bj;XQMq#Y4ROoV7kJ!hfpC}SxHMxo#WN5w#F;)
z`TUTO5IWl1&+n^fY9Ph@bj)$TS+tSrUWLOJSL!1|e0?XL*<~}~;d!5egM&kbpGk(Q
z)6>(#TrLY&ciF*VG{9UGQQys941@psSTCxFNG6j}sQ7^?TbL5~Bat0F@MLJlPWKWD
zg)&q%QKKRtSS))7u-4b!U?V4ckIiQH_V(g%I227&(lGX=gLZSI0arn2dmS<}z7Pi2
z6bglu^+o<E=7A=a)mAnPi;a(u&$Wme{`m3n#e(XMY_pqc>gu~>Wv6FmhRShu!ISUs
zhG8><W!^@d;o*pho=i**v`Ix23j0AtMQ{77K=Ap+)t}tlIE(!5S`yc{iW3(XS6!2r
zmlwGz;7?9&-flSIQr^QjySg&ReQwV%Qlo-378DdT3K4+qPPyD2fR=(ss?2xb{s;dp
zEEe0PaEnad5-b3=r!Km<43)UBs+Hqguhw!`XF2(d;Ttuas$aKDa_eqQJsOz0y(-X%
zJSMev!5nIE@+7n|!{0Q!*SCtCH!ziylvHzrV-#*IouSz>HV;~ZWXhfB%|<18u*?)8
zQ1bvhELGRThUo8aaQt{@SC>(CufD!MA|Wm9fVE?}M}6^+FL{FM>gtu1mGGsB(+qp<
z*iP@_(o*sIkjy9z>+1S4TC!oKWmtJ+g>g1i`cBLzqGWmyqjA*Oc<Ijyuly5KDm5wZ
z<rM?g&@YaTbUMAC!zn7B20OL1xTutf^z<C*$uur0DZygp?<0==%v3@A)ktZqt##QM
z!wQEpv$E7^9mYZPcC9X(M}2&JUR^1tD^LrIUk8jK9<&90X_wdjV}3p$FtDPHaLvyz
z0jXn?ZctWUE|{8H*p&S4;0OBtE*l0YUn7x7*RLxhT+0T9>51)I&=_46x#i_$67Ti$
z(qx}|8=(RoEp~-e;G3muxlw<=r8hS>gH|Di%K*ww9X!*ZH|V4b`G^Eu9hqt{!RKGw
z1#&uOpYyh}GteBm9f<}8?$$6#Rh(GGJ62YXkNZn_1o5|MAQJW*G$?gv6Q7!UweOu9
zo#j-WVHl`UO-)Q@xwXQ{zI}M&A-BFkg5J4v^<`yt*iZemn_sM*FqqDq)4?8Z!UE?<
z&zC9DI+i2q6~{sF{<YjWGD?S@m6f%)xR{dz)sD4)uB^<<kjjW_8GA7zJS<UaYNx8F
zbb4zkx`O=EEqNDMA(U+zcYSGc;KPS~hb=(Q@MeZsr`)U2*Y))Eah2Ykqoa5Vh2rn;
z@8eT2C|p{PRRr6kpb1~IKCuF9Ie_CQ_l5a+SW$5Vn6B~h@#N%Wu~-b|kFp`cL>}p!
zS$=2&(Y|ewTU=b^Oze25!QpT=SB2Y|>C*U!(R>U5Yq19a7y>5s8-y-nrGr!g5*0!9
b`vOG@9x%jnu1Hn~M>l}6wnvsD@OS?KuP@}C

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..a87ca5e6ef0efdc10b0ca45fa0e2433f88ec7054
GIT binary patch
literal 1764
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
T`I-v&Z9%>#aM&u3i1hyh3wuyG

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f355e7a6192dab19f3211fbf2665fb89e74d312c
GIT binary patch
literal 1966
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
L)|F6!^H2B>7*m6W

literal 0
HcmV?d00001

diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0d396307cfabe9780ff283776a3c1ff31406432
GIT binary patch
literal 1535
zcma)6XH=7C6#l{%wX$j<P>3-`t87Jr5QQ2>1j4FRR*+!?gb0=}%aAyTG9&~L8P<S6
z1d~Dth$#g0FcbnJG9n<Mfb1oE#eO}<ditxU=RN1X?~i+*_m1a26nmWIURkIt004Wj
zRv1SBfZPJ#C>b%(hMjK_2QMjaYfB99`S0^vZE-pPNLFGoW<N#b&JM;|DaNTaFRlf#
zjXXG|WlCFTrKvXy;76gVO6<fJ!xPd)a%sol_jVkdWvJbzx)Wy(9NCT0-Lmw0c}pmS
zO-gI;_LB5|kTj-uMNrnl?^sJMu-4)Y&2V*MCbpusR~FgaeOuG71|zwO%03c6y)=Jb
z1SU2F!vgj4h+P0G0RaIl?;!x83{?V9Gou3W2dxx<U<s@kkn)d{=q#B`zS7IwY36&E
z--pTEKtSqQSY&zvEGa3eFx=$}j_D~$as!<XcTmd1jgO8Z<R3dSj$dw1q(37~_XMNL
z0#_$G3v6>vX4@3Ke*K!k_<<A-M!vPkyj0vJ`0zpWk)MNshwN;U;CC9mol8l9fn}AI
z%j=6HnC0P@w<{_tHa9o@PMkuc2mAU;nDGdR>3ikmrrY~8h=K}pR_}a&^?c*q?=Y1F
z{(}O`RA_P&=r0n9C=`k*%--H!c&%oS6uEh1apTu1+2=!RV-TTTdPc^|@}yIBf1VWr
zER9dd*<mzXlrwk89J4|w$lkO;D$46M(XNYGVu5=nAK8~MnaqNM5dr)1cza&X+GKO8
z#!y`hH)>^SU|_(58`e0o7-1q3?QC^+I*?SqRM*tk*4EaVrPJTv@5E4&Pfks(=5TCn
zZ9VFKjqI-qI`%U&6r~1Yv)RY9ZKTAm7Zo8%l3;AChnd;+g>Ioxn2(M=XKigr9EeyD
znsEnDqtUh)0(+x@EWNR@fkvaNuMQ#U-yU-gC6PR8t~L7VcXxLiseMB-gRnsQ#R`x7
z&q04>!-dMJsQ@pCxVZRd!k7^+L{(i~TT?T)x^drOi172w#?m;;ljq!|oz*%Ss%{)+
zv(ZJY)^V!}bSNGCBeH8Yj2FGu?yDaYeWQP2VIf)7a3*XEY)UtlH>87o%Wx{TKLpsj
zXzst;NKZ0=CJO>j2MbMIokd}PI$yZ(EP9QIrM|n3`@oCyq#|<ox6~o^^w7{y8ja>l
zAh>E~&dm|wQ*(3sB_44&=LPlCD*>GM;GoZ!I@b&m;R@#EPoCWAb3gr%RaMn9zQhoh
z0)E%6#m9-ZHw4Fnf`SrY5hm)qAx{^V?6fpJUEO+R<Io9vJRT2EOT@qh0)c^nK~i}z
zYT(TqQ%p=ujE|4cnFzciOm1R!_7FUWpUEWa0qahe2!tpT^%bpyN#!8FU7q%E!{-$`
z+uCeGLdv@Xg8cm{76sG2EEa>IqN1`(iaZ<~G5Pj!<r@y7do4{2SjP?rqZBB#tSm4w
zm+W%ar*`=!2j~L>?yTPE)fs_~XWald+-|bdWGTJSy`!ps7K6Z2VKQu1m^iSFcFCla
z(COZ*zIc4TK1j>Dh(&K4E~RyBb9n9-Y9YSES--GrGAcS+#RnB59{<qy1e8)zQxm!L
zkv}y`J!DO5;9TiF0ZrCy)zZ>BjLTh*T{AL-NRS%@hLD*-u3@&#IclZXOR4Ryy+Eu5
z7W?YcSgU7k6lrtW{}NI?RdtUP914YgimJu4457(AJw2Hj8DpcPa%mO?k62krm08*z
zj$w-Coq;E>f*Z0rWo~XxV5^|T;%~ZxD9tI~Pq|ryp2};u=;!BmKR5SX04G)B46~#}
zSwkZnrDmC;CNDAEo@Z<vJ{L$NszafUxFIAG>FVajX0unKcD8dsS=~Rjl>;dIR1*h}
zYHPQ*w6t_|@Pdb56x%(d8B@1odCwv8E6dBeO^%Frpn$L|DscHGlq@7DcnfT||5UuM
di|{X5jDv9fX&Uv3Mjyei0jxO=!~F4L!e909+~fcN

literal 0
HcmV?d00001