fix: switch from scoped to shadow: true

so all components work with CSP rules

Author: OS-martacarlos

core/api.txt

@@ -504,7 +504,7 @@ ion-card,css-prop,--color,ios
 ion-card,css-prop,--color,md
 ion-card,part,native
 
-ion-card-content,none
+ion-card-content,shadow
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 ion-card-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
@@ -931,7 +931,7 @@ ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefine
 ion-infinite-scroll-content,prop,mode,"ios" | "md",undefined,false,false
 ion-infinite-scroll-content,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
-ion-input,scoped
+ion-input,shadow
 ion-input,prop,autocapitalize,string,'off',false,false
 ion-input,prop,autocomplete,"name" | "url" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "nickname" | "organization-title" | "cc-additional-name" | "language" | "bday" | "sex" | "impp" | "photo",'off',false,false
 ion-input,prop,autocorrect,"off" | "on",'off',false,false
@@ -1028,7 +1028,7 @@ ion-input,css-prop,--placeholder-opacity,ionic
 ion-input,css-prop,--placeholder-opacity,ios
 ion-input,css-prop,--placeholder-opacity,md
 
-ion-input-otp,scoped
+ion-input-otp,shadow
 ion-input-otp,prop,autocapitalize,string,'off',false,false
 ion-input-otp,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-input-otp,prop,disabled,boolean,false,false,true
@@ -2415,7 +2415,7 @@ ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 ion-text,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 
-ion-textarea,scoped
+ion-textarea,shadow
 ion-textarea,prop,autoGrow,boolean,false,false,true
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false

core/src/components/card-content/card-content.tsx

@@ -14,6 +14,7 @@ import { getIonTheme } from '../../global/ionic-global';
     md: 'card-content.md.scss',
     ionic: 'card-content.ionic.scss',
   },
+  shadow: true,
 })
 export class CardContent implements ComponentInterface {
   render() {

core/src/components/datetime/datetime.tsx

@@ -2111,6 +2111,35 @@ export class Datetime implements ComponentInterface {
     );
   }
 
+  private asBlob= (icon: string) => new Blob(
+    [Uint8Array.from(
+        icon.split("").map(function(c) {
+            return c.charCodeAt(0);
+        })
+    )],
+    {type: "image/svg+xml"}
+  );
+
+  private getIconProps(icon: string | undefined) {
+    if (typeof icon === 'string' && icon.trim().startsWith('data:image/svg+xml')) {
+      // Extract and decode the SVG string from the data URL
+      const svgString = decodeURIComponent(
+        atob(icon.split(',')[1])
+          .split('')
+          .map(function(c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+          })
+          .join('')
+      );
+      const url = URL.createObjectURL(this.asBlob(svgString));
+      console.log(url)
+      return { src:  url};
+    }
+    // Ionicons icon name/object or undefined
+    return { icon };
+}
+
+
   /**
    * Grid Render Methods
    */
@@ -2122,7 +2151,7 @@ export class Datetime implements ComponentInterface {
     const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
 
     // don't use the inheritAttributes util because it removes dir from the host, and we still need that
-    const hostDir = this.el.getAttribute('dir') || undefined;
+
 
     return (
       <div class="calendar-header">
@@ -2158,22 +2187,22 @@ export class Datetime implements ComponentInterface {
             <ion-buttons>
               <ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
                 <ion-icon
-                  dir={hostDir}
+                  //dir={hostDir}
                   aria-hidden="true"
                   slot="icon-only"
-                  icon={datetimePreviousIcon}
                   lazy={false}
                   flipRtl
+                  {...this.getIconProps(datetimePreviousIcon)}
                 ></ion-icon>
               </ion-button>
               <ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
                 <ion-icon
-                  dir={hostDir}
+                  //dir={hostDir}
                   aria-hidden="true"
                   slot="icon-only"
-                  icon={datetimeNextIcon}
                   lazy={false}
                   flipRtl
+                  {...this.getIconProps(datetimeNextIcon)}
                 ></ion-icon>
               </ion-button>
             </ion-buttons>

core/src/components/input-otp/input-otp.tsx

@@ -23,7 +23,7 @@ import type {
     md: 'input-otp.md.scss',
     ionic: 'input-otp.ionic.scss',
   },
-  scoped: true,
+  shadow: true,
 })
 export class InputOTP implements ComponentInterface {
   private inheritedAttributes: Attributes = {};

core/src/components/input/input.tsx

@@ -46,7 +46,7 @@ import { getCounterText } from './input.utils';
     md: 'input.md.scss',
     ionic: 'input.ionic.scss',
   },
-  scoped: true,
+  shadow: true,
 })
 export class Input implements ComponentInterface {
   private nativeInput?: HTMLInputElement;

core/src/components/textarea/textarea.tsx

@@ -43,7 +43,7 @@ import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './text
     md: 'textarea.md.scss',
     ionic: 'textarea.ionic.scss',
   },
-  scoped: true,
+  shadow: true,
 })
 export class Textarea implements ComponentInterface {
   private nativeInput?: HTMLTextAreaElement;