From 4c35f91b141ebe80994456376c28c3614527cbbf Mon Sep 17 00:00:00 2001
From: Jessica Mendes <jessica.mendes@outsystems.com>
Date: Fri, 5 Jul 2024 10:07:01 +0100
Subject: [PATCH] Updated dear developer for List

---
 core/package-lock.json                        |   9 +-
 .../test/assets/calendar-blank.svg            |   1 +
 core/src/theme-ionic/test/assets/trash.svg    |   1 +
 .../test/dear-designer-list/index.html        | 163 +++++++++++++++++-
 4 files changed, 168 insertions(+), 6 deletions(-)
 create mode 100644 core/src/theme-ionic/test/assets/calendar-blank.svg
 create mode 100644 core/src/theme-ionic/test/assets/trash.svg

diff --git a/core/package-lock.json b/core/package-lock.json
index fef0128c08..97d3561eef 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1794,8 +1794,9 @@
     },
     "node_modules/@phosphor-icons/core": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
-      "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
+      "resolved": "https://pkgs.dev.azure.com/OutSystemsRD/_packaging/ArtifactRepository/npm/registry/@phosphor-icons/core/-/core-2.1.1.tgz",
+      "integrity": "sha1-YqTPvsl3LxphOmR9ohT7uW86050=",
+      "license": "MIT"
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
@@ -12081,8 +12082,8 @@
     },
     "@phosphor-icons/core": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
-      "integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
+      "resolved": "https://pkgs.dev.azure.com/OutSystemsRD/_packaging/ArtifactRepository/npm/registry/@phosphor-icons/core/-/core-2.1.1.tgz",
+      "integrity": "sha1-YqTPvsl3LxphOmR9ohT7uW86050="
     },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
diff --git a/core/src/theme-ionic/test/assets/calendar-blank.svg b/core/src/theme-ionic/test/assets/calendar-blank.svg
new file mode 100644
index 0000000000..93d0645c8b
--- /dev/null
+++ b/core/src/theme-ionic/test/assets/calendar-blank.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
\ No newline at end of file
diff --git a/core/src/theme-ionic/test/assets/trash.svg b/core/src/theme-ionic/test/assets/trash.svg
new file mode 100644
index 0000000000..b2d5dfe182
--- /dev/null
+++ b/core/src/theme-ionic/test/assets/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
\ No newline at end of file
diff --git a/core/src/theme-ionic/test/dear-designer-list/index.html b/core/src/theme-ionic/test/dear-designer-list/index.html
index 8912c2ea37..daa60a1cb5 100644
--- a/core/src/theme-ionic/test/dear-designer-list/index.html
+++ b/core/src/theme-ionic/test/dear-designer-list/index.html
@@ -270,6 +270,165 @@
             <ion-col></ion-col>
           </ion-row>
 
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="10">
+              <h2 class="title">Placeholders</h2>
+              <ion-text class="subtitle">List Items can have placeholders so that developers can add content inside them: Start, End, Start and End and None. By default, List Items don’t have any placeholder.
+                </ion-text>
+              
+            </ion-col>
+            <ion-col></ion-col>
+
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              Start
+            </ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              End
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-icon slot="start" src="/src/theme-ionic/test/assets/calendar-blank.svg"></ion-icon>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                      <ion-icon slot="end" src="/src/theme-ionic/test/assets/trash.svg"></ion-icon>    
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              Start and End
+            </ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              None
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-icon slot="start" src="/src/theme-ionic/test/assets/calendar-blank.svg"></ion-icon>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                      <ion-icon slot="end" src="/src/theme-ionic/test/assets/trash.svg"></ion-icon>  
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+          
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="10">
+              <h2 class="title">Has Detail Icon</h2>
+              <ion-text class="subtitle">List Items can have details icons. By default, list items don’t have detail icons (False).</ion-text>
+              
+            </ion-col>
+            <ion-col></ion-col>
+
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              True
+            </ion-col>
+            <ion-col class="center ionic-body-md-bold" size="5">
+              False (Default)
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
+
+          <ion-row>
+            <ion-col></ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item detail="true">
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col size="5">
+              <ion-card shape="rectangular" class="preview2">
+                <ion-card-content>
+                  <ion-list style="width:400px;">
+                    <ion-item>
+                      <ion-label>
+                        <p><ion-text style="color:#242424" class="ionic-body-lg-medium">Title</ion-text></p>
+                        <p><ion-text style="color:#3B3B3B" class="ionic-body-md-regular">Subtitle</ion-text></p>
+                      </ion-label>
+                    </ion-item>
+                  </ion-list>
+                </ion-card-content>
+              </ion-card>
+            </ion-col>
+            <ion-col></ion-col>
+          </ion-row>
 
         
         </ion-grid>
@@ -309,7 +468,7 @@
 
   ion-card.preview{
     margin-top: 50px;
-    --background:#FAFAFA;
+    --background:#F2F2F2;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -318,7 +477,7 @@
   }
 
   ion-card.preview2{
-    --background:#FAFAFA;
+    --background:#F2F2F2;
     display: flex;
     align-items: center;
     justify-content: center;