@cnamts/synapse 1.0.14 → 1.0.16

package/src/components/Amelipro/AmeliproFilePreview/__tests__/__snapshots__/AmeliproFilePreview.spec.ts.snap

@@ -1,208 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproFilePreview > render correctly 1`] = `
-<div id="pdf-preview-unique-id-container">
-  <div
-    class="
-      amelipro-accordion
-      amelipro-accordion--opened
-      mb-4
-      w-100
-    "
+exports[`AmeliproFilePreview > Snapshots > renders the component with all properties filled in 1`] = `
+<div id="test-id-container">
+  <amelipro-accordion-stub
+    accordiontitle="The card title"
+    bordercolor="ap-grey-lighten-2"
+    bordered="true"
+    cardcolor="ap-white"
     classes="amelipro-file-preview"
-    id="pdf-preview-unique-id-container"
-    style="
-      background-color: #FFFFFF;
-      border: 1px solid #DDDEDE;
-    "
-  >
-    <div
-      class="
-        align-center
-        amelipro-accordion__header
-        d-flex
-        flex-column
-        flex-sm-row
-        w-100
-      "
-      id="pdf-preview-unique-id-header"
-    >
-      <div
-        class="btn-wrapper"
-        style="margin-right: 10px;"
-      >
-        <p
-          aria-level="2"
-          class="
-            font-weight-semibold
-            mb-0
-            text-h3
-          "
-          id="pdf-preview-unique-idtitle"
-          role="heading"
-        >
-          <button
-            aria-controls="pdf-preview-unique-id"
-            aria-expanded="true"
-            class="
-              accordion-btn
-              align-center
-              d-inline-flex
-              font-weight-semibold
-              text-ap-grey-darken-1
-              text-left
-            "
-            id="pdf-preview-unique-id-header-btn-open-close"
-            type="button"
-          >
-            <span
-              class="
-                accordion-icon
-                amelipro-icon
-                mr-2
-              "
-              id="pdf-preview-unique-id-icon"
-            >
-              <span
-                aria-hidden="true"
-                class="
-                  amelipro-custom-icon
-                  custom-color
-                "
-                focusable="false"
-                role="img"
-                style="
-                  color: #0C419A;
-                  height: 11px;
-                  width: 11px;
-                "
-              >
-                <span>
-                  <svg
-                    aria-hidden="true"
-                    style="enable-background:new 0 0 42 42;"
-                    version="1.1"
-                    viewBox="0 0 42 42"
-                    x="0px"
-                    xml:space="preserve"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    y="0px"
-                  >
-                    <polygon
-                      class="shape-color"
-                      points="21,2.8 0,39.2 42,39.2 "
-                    />
-                  </svg>
-                </span>
-              </span>
-            </span>
-            Modified card title
-          </button>
-        </p>
-      </div>
-      <div
-        class="right-slot"
-        style="
-          width: calc(50% - 10px);
-          margin-left: 10px;
-        "
-      >
-        <div
-          class="
-            amelipro-file-preview__header-right
-            d-flex
-            justify-end
-          "
-          id="pdf-preview-unique-id-header-right"
-        >
-          <a
-            class="
-              align-center
-              amelipro-file-preview__header__link
-              d-flex
-              font-weight-semibold
-              text-h6
-            "
-            download="file name"
-            href="file-src"
-            id="pdf-preview-unique-id-download-link"
-            title="Modified link title"
-          >Modified download btn text <span
-            class="
-              amelipro-icon
-              ml-2
-            "
-            id="pdf-preview-unique-id-icon-desktop"
-          ><span
-            aria-hidden="true"
-            class="
-              amelipro-custom-icon
-              custom-color
-              large
-            "
-            focusable="false"
-            role="img"
-            style="
-              color: #FFFFFF;
-              border-radius: 50%;
-              border: 1px solid #FFFFFF;
-            "
-          ><span>
-		<svg
-            aria-hidden="true"
-            style="enable-background:new 0 0 34 34;"
-            viewBox="0 0 34 34"
-            x="0px"
-            xml:space="preserve"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            y="0px"
-          >
-			<ellipse
-            class="circle-color"
-            cx="17"
-            cy="17"
-            rx="17"
-            ry="16.9"
-          />
-			<g class="shape-color">
-				<path d="M17.5,14.7h-1.9v4.7h1.9c0.5,0,0.9-0.4,0.9-0.9v-2.8C18.4,15.1,18,14.7,17.5,14.7z" />
-				<path d="M11.9,14.7H10v1.9h1.9c0.5,0,0.9-0.4,0.9-0.9C12.8,15.1,12.4,14.7,11.9,14.7z" />
-				<path d="M25,11.9H9c-1,0-1.9,0.8-1.9,1.9v6.5c0,1,0.9,1.9,1.9,1.9H25c1,0,1.9-0.8,1.9-1.9v-6.5 C26.9,12.7,26,11.9,25,11.9z M11.9,17.5H10v2.8H9v-4.7v-1.9h2.8c1,0,1.9,0.8,1.9,1.9C13.7,16.7,12.9,17.5,11.9,17.5z M19.4,18.4 c0,1-0.8,1.9-1.9,1.9h-2.8v-6.5h2.8c1,0,1.9,0.8,1.9,1.9V18.4z M25,14.7h-3.8v1.9H24v0.9h-2.8v2.8h-0.9v-6.5H25V14.7z" />
-			</g>
-		</svg></span></span></span></a>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-labelledby="pdf-preview-unique-idtitle"
-      class="amelipro-accordion__wrapper"
-      id="pdf-preview-unique-id"
-      role="region"
-    >
-      <div
-        class="
-          amelipro-accordion__content
-          text-ap-grey-darken-1
-          w-100
-        "
-        style="
-          border-top-width: 1px;
-          border-top-style: solid;
-          border-top-color: #DDDEDE;
-        "
-      >
-        <object
-          aria-label="Modified pdf display title"
-          data="file-src"
-          height="400"
-          id="pdf-preview-unique-id-pdf-display"
-          type="application/pdf"
-          width="100%"
-        ></object>
-      </div>
-    </div>
-  </div>
+    headerrightwidth="50%"
+    hideseparator="false"
+    isopen="true"
+    titlelevel="2"
+    titleuppercase="false"
+    uniqueid="test-id"
+  ></amelipro-accordion-stub>
+</div>
+`;
+
+exports[`AmeliproFilePreview > Snapshots > renders the component with only required properties filled in 1`] = `
+<div id="required-unique-id-container">
+  <amelipro-card-stub
+    bordercolor="ap-grey-lighten-2"
+    bordered="true"
+    cardcolor="ap-white"
+    cardtitle="Required card title"
+    classes="amelipro-file-preview"
+    divider="true"
+    headerrightwidth="50%"
+    id="required-unique-id"
+    nocardheader="false"
+    rightpart="false"
+    rightpartwidth="25%"
+    titlecolor="ap-grey-darken-1"
+    titlelevel="2"
+  ></amelipro-card-stub>
 </div>
 `;

package/src/components/Amelipro/AmeliproFirstLogin/__tests__/__snapshots__/AmeliproFirstLogin.spec.ts.snap

@@ -109,29 +109,7 @@ exports[`AmeliproFirstLogin > render correctly 1`] = `
                   width: 40px;
                 "
               >
-                <span>
-                  <svg
-                    aria-hidden="true"
-                    style="enable-background:new 0 0 24 24;"
-                    viewBox="0 0 24 24"
-                    x="0px"
-                    xml:space="preserve"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    y="0px"
-                  >
-                    <circle
-                      class="circle-color"
-                      cx="12"
-                      cy="12"
-                      r="12"
-                    />
-                    <polygon
-                      class="shape-color"
-                      points="15.3,16.7 12,13.4 8.7,16.7 7.3,15.3 10.6,12 7.3,8.7 8.7,7.3 12,10.6 15.3,7.3 16.7,8.7 13.4,12 16.7,15.3 "
-                    />
-                  </svg>
-                </span>
+                <span></span>
               </span>
             </span>
           </span>
@@ -182,33 +160,7 @@ exports[`AmeliproFirstLogin > render correctly 1`] = `
                 width: 61px;
               "
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  style="enable-background:new 0 0 62.4 62.4;"
-                  viewBox="0 0 62.4 62.4"
-                  x="0px"
-                  xml:space="preserve"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                  y="0px"
-                >
-                  <circle
-                    class="circle-color"
-                    cx="31.2"
-                    cy="31.2"
-                    r="31.2"
-                  />
-                  <g
-                    class="shape-color"
-                    transform="translate(11 15.288)"
-                  >
-                    <path d="M3.3,21.5c-0.4,0-0.7,0.3-0.6,0.7c0,0,0,0,0,0c0,0.4,0.3,0.7,0.6,0.7c0.4,0,0.7-0.3,0.7-0.7c0,0,0,0,0,0C3.9,21.8,3.6,21.5,3.3,21.5C3.3,21.5,3.3,21.5,3.3,21.5" />
-                    <path d="M23.1,18.9h-1.3c-0.8,0-1.4-0.7-1.4-1.4v-2.1h-2c-0.8,0-1.4-0.7-1.4-1.5v-1.3c0-0.8,0.6-1.4,1.4-1.5h2V9.1c0-0.8,0.6-1.4,1.4-1.5h1.3c0.8,0,1.4,0.7,1.4,1.5v2.1h2c0.8,0,1.4,0.7,1.4,1.4c0,0,0,0,0,0v1.3c0,0.8-0.6,1.4-1.4,1.5c0,0,0,0,0,0h-2v2.1C24.5,18.2,23.9,18.9,23.1,18.9z M18.3,12.3c-0.2,0-0.3,0.1-0.3,0.3l0,0v1.3c0,0.2,0.1,0.3,0.3,0.3l0,0h2.6c0.3,0,0.6,0.3,0.6,0.6v2.6c0,0.2,0.1,0.3,0.3,0.3h0h1.3c0.2,0,0.3-0.1,0.3-0.3l0,0v-2.6c0-0.3,0.2-0.6,0.6-0.6h2.6c0.2,0,0.3-0.1,0.3-0.3l0,0v-1.3c0-0.2-0.1-0.3-0.3-0.3l0,0h-2.6c-0.3,0-0.6-0.3-0.6-0.6V9.1c0-0.2-0.1-0.3-0.3-0.3c0,0,0,0,0,0h-1.3c-0.2,0-0.3,0.1-0.3,0.3v0v2.6c0,0.3-0.2,0.6-0.6,0.6H18.3z" />
-                    <path d="M17.8,32.1L17.8,32.1c-4,0-8-0.6-11.9-1.8H1.3c-0.3,0-0.6-0.3-0.6-0.6V19.2c0-0.3,0.3-0.6,0.6-0.6h4.8c2.8-0.1,5.5,0.1,8.3,0.5c-3.6-3.8-5.4-7.4-5.4-10.7c0-4.3,3.4-7.8,7.6-7.8c2.4,0,4.6,1.2,6.1,3.1c1.4-1.9,3.7-3.1,6.1-3.1c4.3,0.1,7.7,3.6,7.6,7.8c-0.1,2.8-1.2,5.6-3,7.8c-1.7,2.3-3.7,4.3-5.9,6.1c1.4-0.4,2.7-1,4-1.6c1-0.5,2-0.9,3.1-1c0.3,0,0.6,0.1,0.8,0.3c0.6,0.4,0.9,1.1,0.7,1.9c0.2-0.1,0.5-0.1,0.7-0.1c0.3,0,0.7,0.1,0.9,0.3c0.5,0.4,0.7,0.9,0.7,1.5c-0.2,0.9-0.7,1.6-1.4,2.1c-2.8,2.3-6.1,4-9.6,5C24.2,31.7,21,32.1,17.8,32.1z M6.6,19.8v9.5c3.6,1.1,7.4,1.6,11.2,1.6c3.1,0,6.2-0.4,9.1-1.2c3.4-1,6.6-2.6,9.3-4.8c0.3-0.2,0.9-0.8,0.9-1.3c0-0.1,0-0.3-0.3-0.5c-0.1,0-0.1-0.1-0.2-0.1c-0.8,0.2-1.6,0.4-2.3,0.8l0,0c-2.9,1.3-5.9,2.3-9,2.9c-1.3,0.4-2.6,0.6-4,0.6c-1.7,0-3.4-0.2-5.1-0.4c-0.3,0-0.5-0.3-0.5-0.7c0-0.3,0.3-0.5,0.6-0.5c0,0,0,0,0.1,0c1.6,0.2,3.3,0.4,4.9,0.4c1.2,0.1,2.4-0.1,3.6-0.5h0c0,0,0,0,0,0c0,0,0,0,0,0c1-0.4,1-0.9,1-1.1c0.1-0.6-0.1-1.1-0.4-1.6c-0.3-0.3-0.7-0.4-1.1-0.4h0c-0.4,0-0.8,0-1.1,0c-4.6,0-5.6-0.6-6.7-1.2C15.7,20.6,14.4,19.8,6.6,19.8z M1.8,19.8v9.3h3.7v-9.3L1.8,19.8z M34.5,21c-0.9,0.2-1.8,0.5-2.6,0.9l0,0c-1.5,0.7-3.1,1.3-4.6,1.8c0,0.3,0.1,0.6,0,0.9c0,0.2,0,0.4-0.1,0.6c2.3-0.6,4.6-1.4,6.7-2.4h0c0.1-0.1,0.3-0.1,0.4-0.2c0.3-0.3,0.5-0.6,0.6-1.1c0-0.1,0-0.3-0.3-0.5C34.6,21,34.5,21,34.5,21L34.5,21z M24.6,21.4c0.6,0,1.1,0.2,1.6,0.5c2.2-1.7,4.2-3.7,5.9-5.9c2-2.7,3.1-5.2,3.1-7.5c0-3.6-2.9-6.6-6.5-6.6c-2.3,0-4.4,1.3-5.6,3.3c-0.2,0.3-0.5,0.4-0.8,0.2c-0.1-0.1-0.2-0.1-0.2-0.2c-1.1-2-3.3-3.3-5.6-3.3c-3.6,0.1-6.5,3-6.5,6.6c0.1,2.2,0.8,4.3,2.1,6.1c1.3,1.9,2.9,3.7,4.6,5.3c0.2,0.1,0.4,0.2,0.6,0.3l0,0c1,0.6,1.8,1.1,6,1.1C23.8,21.4,24.2,21.4,24.6,21.4L24.6,21.4z" />
-                  </g>
-                </svg>
-              </span>
+              <span></span>
             </span>
           </span>
           <span
@@ -652,28 +604,7 @@ exports[`AmeliproFirstLogin > render correctly 1`] = `
                       border: 1px solid #00516D;
                     "
                   >
-                    <span>
-                      <svg
-                        aria-hidden="true"
-                        style="enable-background:new 0 0 34 34;"
-                        viewBox="0 0 34 34"
-                        x="0px"
-                        xml:space="preserve"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        y="0px"
-                      >
-                        <path
-                          class="circle-color"
-                          d="M17,0C7.6,0,0,7.6,0,17c0,9.4,7.6,17,17,17c9.4,0,17-7.6,17-17C34,7.6,26.4,0,17,0z"
-                        />
-                        <g class="shape-color">
-                          <path d="M10.2,20.7c0.5,3.3,3.4,5.7,6.8,5.7c3.4,0,6.3-2.5,6.8-5.7c-1.3,2.4-3.9,4-6.8,4 C14.1,24.8,11.5,23.1,10.2,20.7L10.2,20.7z" />
-                          <path d="M10.2,18.2c0.5,3.3,3.4,5.7,6.8,5.7c3.4,0,6.3-2.5,6.8-5.7c-1.3,2.4-3.9,4-6.8,4 C14.1,22.2,11.5,20.6,10.2,18.2L10.2,18.2z" />
-                          <path d="M17,7.5c-3.8,0-6.9,3.1-6.9,6.9c0,3.8,3.1,6.9,6.9,6.9c3.8,0,6.9-3.1,6.9-6.9C23.9,10.6,20.8,7.5,17,7.5z M18.9,12c-0.3-0.3-0.7-0.4-1.2-0.4c-0.5,0-0.9,0.1-1.2,0.3c-0.2,0.1-0.4,0.3-0.5,0.6c-0.2,0.3-0.3,0.5-0.3,0.8h3l-0.1,0.6h-2.9 c0,0.1,0,0.1,0,0.2c0,0.2,0,0.4,0,0.4h2.8L18.3,15h-2.6c0.1,0.7,0.4,1.1,0.9,1.4c0.3,0.2,0.7,0.3,1.1,0.3c0.5,0,1-0.1,1.3-0.4v0.9 c-0.4,0.2-0.8,0.3-1.2,0.3c-1.3,0-2.2-0.5-2.6-1.6c-0.1-0.2-0.2-0.5-0.2-0.8h-0.7l0.1-0.6h0.5c0-0.1,0-0.3,0-0.4c0-0.1,0-0.1,0-0.2 h-0.6l0.1-0.6h0.5c0.2-0.9,0.7-1.6,1.4-2c0.5-0.3,1-0.4,1.5-0.4c0.5,0,1,0.1,1.3,0.3L18.9,12z" />
-                        </g>
-                      </svg>
-                    </span>
+                    <span></span>
                   </span>
                 </span>
                 <div>
@@ -730,24 +661,7 @@ exports[`AmeliproFirstLogin > render correctly 1`] = `
                       border: 1px solid #00516D;
                     "
                   >
-                    <span>
-                      <svg
-                        aria-hidden="true"
-                        style="enable-background:new 0 0 34 34"
-                        viewBox="0 0 34 34"
-                        xml:space="preserve"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          class="circle-color"
-                          d="M17 0C7.6 0 0 7.6 0 17s7.6 17 17 17 17-7.6 17-17S26.4 0 17 0z"
-                        />
-                        <path
-                          class="shape-color"
-                          d="M11.8 24.4h2.1V17l-2.1 2.1v5.3zM9 22v2.5h2v-4.6l-1.4 1.4-.6.7zm5.7 2.4h2.1v-5.8l-2.1-2.1v7.9zm2.9-5.5v5.5h2.1v-7.6l-1.6 1.6-.5.5zm2.9 5.5h2.1V13.9L20.5 16v8.4zm-.8-14.7 1.4 1.4-3.7 3.7-2.9-2.8-7.1 7.1 1.5 1.5 5.6-5.7 2.8 2.8 5.2-5.2 1.4 1.4.5-4.7-4.7.5z"
-                        />
-                      </svg>
-                    </span>
+                    <span></span>
                   </span>
                 </span>
                 <div>
@@ -804,27 +718,7 @@ exports[`AmeliproFirstLogin > render correctly 1`] = `
                       border: 1px solid #00516D;
                     "
                   >
-                    <span>
-                      <svg
-                        aria-hidden="true"
-                        style="enable-background:new 0 0 34 34;"
-                        viewBox="0 0 34 34"
-                        x="0px"
-                        xml:space="preserve"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        y="0px"
-                      >
-                        <path
-                          class="circle-color"
-                          d="M17,0C7.6,0,0,7.6,0,17s7.6,17,17,17c9.4,0,17-7.6,17-17C34,7.6,26.4,0,17,0z"
-                        />
-                        <path
-                          class="shape-color"
-                          d="M20.2,17.3L20.2,17.3c0.2,0.1,0.3,0.3,0.4,0.6l1.4,5c-0.6,0.5-1.2,0.8-1.8,1.1l-0.5-2v2.2c-1.7,0.6-3.5,0.6-5.1,0V22l-0.5,2c-0.7-0.3-1.3-0.7-1.8-1.1l1.3-5c0.1-0.5,0.5-0.8,1-0.8H16l0.9,1.7l0.9-1.7h1.7C19.8,17,20,17.1,20.2,17.3L20.2,17.3z M27,19.9c-0.6,0.5-1.2,0.8-1.8,1.1l-0.5-2v2.2c-0.8,0.3-1.6,0.4-2.5,0.4l-1.1-4c-0.1-0.3-0.3-0.6-0.5-0.8c0,0,0,0,0,0l0,0c-0.3-0.2-0.6-0.3-0.9-0.3h-1.4c0.2-0.1,0.4-0.3,0.6-0.5c0.5-0.5,0.8-1.2,0.8-1.9v-0.1h1.5l0.9,1.7l0.9-1.7h1.7c0.5,0,0.9,0.3,1,0.8L27,19.9z M7,19.9c0.6,0.5,1.2,0.8,1.8,1.1l0.5-2v2.2c0.8,0.3,1.6,0.4,2.5,0.4l1.1-4c0.1-0.3,0.3-0.6,0.6-0.8l0.3,0.4l-0.3-0.4c0,0,0,0,0,0c0.3-0.2,0.6-0.3,0.9-0.3h1.2c-0.2-0.1-0.4-0.3-0.6-0.5c-0.5-0.5-0.8-1.2-0.8-1.9v-0.1h-1.3L12,15.8l-0.9-1.7H9.4c-0.5,0-0.9,0.3-1,0.8L7,19.9z M12.1,9c-1.2,0-2.2,1-2.2,2.2c0,1.2,1,2.2,2.2,2.2s2.2-1,2.2-2.2l0,0C14.3,10,13.3,9,12.1,9z M21.9,9c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2l0,0C19.7,10,20.7,9,21.9,9z M16.9,12c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C14.7,13,15.6,12,16.9,12C16.9,12,16.9,12,16.9,12z"
-                        />
-                      </svg>
-                    </span>
+                    <span></span>
                   </span>
                 </span>
                 <div>
@@ -881,39 +775,7 @@ exports[`AmeliproFirstLogin > render correctly 1`] = `
                       border: 1px solid #00516D;
                     "
                   >
-                    <span>
-                      <svg
-                        aria-hidden="true"
-                        style="enable-background:new 0 0 34 34;"
-                        viewBox="0 0 34 34"
-                        x="0px"
-                        xml:space="preserve"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        y="0px"
-                      >
-                        <path
-                          class="circle-color"
-                          d="M17,0C7.6,0,0,7.6,0,17s7.6,17,17,17c9.4,0,17-7.6,17-17C34,7.6,26.4,0,17,0z"
-                        />
-                        <g
-                          class="shape-color"
-                          transform="translate(0.754 51.247)"
-                        >
-                          <path d="M12.4-35.8c0.5,0.1,1-0.2,1.2-0.7c0.1-0.5-0.2-1-0.7-1.2c0,0,0,0,0,0c-0.5-0.1-1,0.2-1.2,0.7C11.6-36.5,11.9-35.9,12.4-35.8" />
-                          <path d="M12.9-37.8c0.2,0,0.3,0.1,0.4,0.2l0.7-2.6c-0.1,0-0.1,0-0.2,0c-0.1,0-0.2,0-0.3,0c-0.2,0-0.3-0.1-0.4-0.2l-0.7,2.6c0.1,0,0.1,0,0.2,0C12.7-37.9,12.8-37.8,12.9-37.8" />
-                          <path d="M13.4-35.9h5C18.1-36,18-36.2,18-36.5c0-0.2,0-0.3,0-0.5h-4.2c0,0.2,0,0.3,0,0.5C13.7-36.2,13.5-36,13.4-35.9" />
-                          <path d="M11.5-37H7.5c-0.1,0-0.2,0.1-0.2,0.2v0.6c0,0.1,0.1,0.2,0.2,0.2c0,0,0,0,0,0h4.4C11.6-36.2,11.5-36.6,11.5-37" />
-                          <path d="M19.8-35.9h4.4c0.1,0,0.2-0.1,0.2-0.2v-0.6c0-0.1-0.1-0.2-0.2-0.2h-4.1c0,0.1,0,0.1,0,0.2C20.2-36.4,20-36.1,19.8-35.9" />
-                          <path d="M19.7-37.5C19.6-37.5,19.6-37.5,19.7-37.5c-0.1-0.1-0.1-0.1-0.1-0.1c0,0-0.1,0-0.1-0.1c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0h0h0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0.1l0,0c0,0-0.1,0-0.1,0.1l0,0c0,0-0.1,0.1-0.1,0.1l0,0c-0.2,0.2-0.3,0.6-0.2,0.9c0.1,0.5,0.7,0.8,1.2,0.7c0,0,0,0,0,0c0.4-0.1,0.7-0.5,0.7-1l0,0l0,0c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1-0.1-0.2c0,0,0,0,0,0c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0C19.8-37.4,19.7-37.4,19.7-37.5C19.7-37.5,19.7-37.5,19.7-37.5" />
-                          <path d="M17.3-28.6h-0.6c-0.2,0-0.3-0.1-0.3-0.3l-0.1-0.3L15-34.1c0-0.1,0-0.2,0.1-0.3c0,0,0.1,0,0.1,0h0.6c0.2,0,0.3,0.1,0.3,0.3l1.4,5.2l0,0C17.6-28.8,17.5-28.7,17.3-28.6C17.4-28.6,17.4-28.6,17.3-28.6z M15.4-28.6h-0.6c-0.2,0-0.3-0.1-0.3-0.3l-0.2-0.6l-1.2-4.6c0-0.1,0-0.2,0.1-0.3c0,0,0.1,0,0.1,0h0.6c0.2,0,0.3,0.1,0.3,0.3l1.3,4.7l0.1,0.4C15.7-28.8,15.6-28.7,15.4-28.6C15.5-28.6,15.5-28.6,15.4-28.6L15.4-28.6z M13.5-28.6h-0.6c-0.2,0-0.3-0.1-0.3-0.3l-0.2-0.7l-1.2-4.5c0-0.1,0-0.2,0.1-0.3c0,0,0.1,0,0.1,0H12c0.2,0,0.3,0.1,0.3,0.3l1.2,4.5l0.2,0.7C13.8-28.8,13.7-28.7,13.5-28.6C13.6-28.6,13.6-28.6,13.5-28.6L13.5-28.6z M11.6-28.6H11c-0.2,0-0.3-0.1-0.3-0.3l-0.2-0.6l-1.2-4.6c0-0.1,0-0.2,0.1-0.3c0,0,0.1,0,0.1,0h0.6c0.2,0,0.3,0.1,0.3,0.3l1.2,4.5l0.2,0.7C11.9-28.8,11.8-28.7,11.6-28.6C11.7-28.6,11.7-28.6,11.6-28.6L11.6-28.6z M19.2-28.6h-0.6c-0.1,0-0.2,0-0.3-0.1c0,0-0.1-0.1-0.1-0.1l-1.4-5.2c0-0.1,0-0.2,0.1-0.3c0,0,0.1,0,0.1,0h0.6c0.2,0,0.3,0.1,0.3,0.3l0.3,1.2c0.1-0.3,0.3-0.7,0.5-1l-0.1-0.2c0-0.1,0-0.2,0.1-0.3c0,0,0,0,0.1,0h0.2c0.5-0.5,1.1-1,1.8-1.2h-13l1.5,6.2l0.1,0.6c0.3,1.1,0.6,1.2,1.2,1.2h10.1C20.3-27.7,19.7-28.1,19.2-28.6L19.2-28.6z" />
-                          <path d="M25.3-31.2c0,0.4-0.3,0.7-0.7,0.7h-1.1v1.1c0,0.4-0.3,0.7-0.7,0.7c0,0,0,0,0,0h-0.7c-0.4,0-0.7-0.3-0.7-0.7c0,0,0,0,0,0v-1.1h-1.1c-0.4,0-0.7-0.3-0.7-0.7v-0.7c0-0.4,0.3-0.7,0.7-0.7c0,0,0,0,0,0h1.1v-1.1c0-0.4,0.3-0.7,0.7-0.7c0,0,0,0,0,0h0.7c0.4,0,0.7,0.3,0.7,0.7v1.1h1.1c0.4,0,0.7,0.3,0.7,0.7L25.3-31.2z M22.5-35.5c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4l0,0c2.2,0,4-1.8,4-4C26.5-33.7,24.7-35.5,22.5-35.5L22.5-35.5z" />
-                          <path d="M13.6-40.3c0.1,0,0.1,0,0.2,0h0h0c0,0,0.1,0,0.1,0H14c0.1,0,0.1,0,0.2,0l0,0c0,0,0.1,0,0.1-0.1c0,0,0,0,0,0c0,0,0.1,0,0.1-0.1c0,0,0,0,0,0c0,0,0.1-0.1,0.1-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0.1-0.1c0,0,0,0,0-0.1c0-0.1,0-0.1,0.1-0.2c0.1-0.5-0.2-1-0.7-1.2c-0.1,0-0.1,0-0.2,0h0h0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0l0,0c0,0-0.1,0-0.1,0.1c0,0,0,0,0,0c0,0-0.1,0-0.1,0.1l0,0c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0c0,0,0,0.1-0.1,0.1c0,0,0,0,0,0c0,0.1,0,0.1-0.1,0.2C12.8-41,13.1-40.5,13.6-40.3" />
-                          <path d="M18.1-40.2c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.2,0l0.7,2.6c0.1-0.1,0.3-0.2,0.4-0.2c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0l-0.7-2.6C18.4-40.3,18.3-40.2,18.1-40.2" />
-                          <path d="M16.9-40.8C16.9-40.8,16.9-40.8,16.9-40.8c0,0.1,0.1,0.1,0.1,0.1c0,0,0,0,0,0s0,0.1,0.1,0.1s0,0,0,0c0,0,0.1,0,0.1,0.1c0,0,0,0,0,0c0,0,0.1,0,0.1,0.1l0,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0h0h0c0.1,0,0.1,0,0.2,0c0.5-0.1,0.8-0.7,0.7-1.2c0-0.1,0-0.1-0.1-0.2c0,0,0,0,0,0c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1l0,0c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0h0h0c-0.1,0-0.1,0-0.2,0C17-42,16.7-41.5,16.8-41c0,0,0,0,0,0C16.9-40.9,16.9-40.9,16.9-40.8" />
-                        </g>
-                      </svg>
-                    </span>
+                    <span></span>
                   </span>
                 </span>
                 <div>

package/src/components/Amelipro/AmeliproIcon/AmeliproIcon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import type { IndexedObject } from '../types'
-	import { computed } from 'vue'
+	import { computed, ref, watchEffect } from 'vue'
 	import { convertToHex } from '@/utils/functions/convertToHex'
 	import { icons } from '@/assets/amelipro/icons'
 
@@ -64,6 +64,7 @@
 	})
 
 	const themeIcon = computed<string | undefined>(() => (props.icon ? icons[props.icon] : undefined))
+	const themeIconContainerRef = ref<HTMLElement | null>(null)
 
 	const currentIconColor = computed<string>(() => convertToHex(props.iconColor))
 	const currentIconBgColor = computed<string>(() => convertToHex(props.iconBgColor))
@@ -130,6 +131,23 @@
 
 		return '2px'
 	})
+
+	function stringToSvgNode(svgString: string): SVGElement | null {
+		const parser = new DOMParser()
+		const doc = parser.parseFromString(svgString, 'image/svg+xml')
+		const svg = doc.querySelector('svg')
+		return svg ? svg.cloneNode(true) as SVGElement : null
+	}
+
+	watchEffect(() => {
+		if (!themeIcon.value || !themeIconContainerRef.value) return
+		// Nettoyer l'ancien contenu
+		themeIconContainerRef.value.innerHTML = ''
+		const svgNode = stringToSvgNode(themeIcon.value)
+		if (svgNode) {
+			themeIconContainerRef.value.appendChild(svgNode)
+		}
+	})
 </script>
 
 <template>
@@ -154,7 +172,7 @@
 		>
 			<span
 				v-if="themeIcon"
-				v-html="themeIcon"
+				ref="themeIconContainerRef"
 			/>
 		</span>
 

package/src/components/Amelipro/AmeliproIcon/__tests__/__snapshots__/AmeliproIcon.spec.ts.snap

@@ -26,31 +26,7 @@ exports[`AmeliproIcon > Snapshots > renders the component with all properties fi
       width: auto;
     "
   >
-    <span>
-      <svg
-        aria-hidden="true"
-        clip-rule="evenodd"
-        fill-rule="evenodd"
-        height="34"
-        image-rendering="optimizeQuality"
-        shape-rendering="geometricPrecision"
-        text-rendering="geometricPrecision"
-        viewBox="0 0 1823 1823"
-        width="34"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          class="circle-color"
-          cx="912"
-          cy="912"
-          r="912"
-        />
-        <path
-          class="shape-color"
-          d="M962 454c117 0 125 154 125 154v145s1 111-73 152c-2 10-3 20-1 30 4-2-21 146 106 165 92 15 178 57 247 120 23 23 40 186 40 186H418s-2-132 40-186c73-62 162-104 257-120 128-19 85-160 89-158 2-10 1-21-1-31 0 0-69-89-68-169 1-81 0-134 0-134s-4-190 126-190l101 36z"
-        />
-      </svg>
-    </span>
+    <span></span>
   </span>
 </span>
 `;

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.stories.ts

@@ -6,7 +6,7 @@ import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
 
 const meta = {
 	argTypes: {
-		'ariaRequired': { description: 'Permet de rendre la selection obligatoire' },
+		'required': { description: 'Permet de rendre la selection obligatoire' },
 		'change:selected': { description: 'Événement émis au click sur un bouton radio retourne la valeur sélectionnée' },
 		'disabled': { description: 'Permet de désactiver le groupe de boutons radios' },
 		'error': { description: 'Permet de mettre le champ en erreur' },
@@ -213,7 +213,7 @@ export const Required: Story = {
 		groupLabel: 'Sélection obligatoire',
 		modelValue: items,
 		uniqueId: 'illustrated-radio-required',
-		ariaRequired: true,
+		required: true,
 		error: true,
 	},
 	parameters: {
@@ -221,12 +221,12 @@ export const Required: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-  <p>La sélection d’un bouton est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+  <p>La sélection d’un bouton est obligatoire grâce à la prop <code>required</code>.</p>
   <AmeliproIllustratedRadioGroup
     v-model="value"
     group-label="Sélection obligatoire"
     unique-id="illustrated-radio-required"
-    aria-required
+    required
     error
   />
 </template>`,
@@ -256,7 +256,7 @@ export const Required: Story = {
 			}
 			return { args, model, deselect }
 		},
-		template: `<p class="mb-2">La sélection d’un bouton est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+		template: `<p class="mb-2">La sélection d’un bouton est obligatoire grâce à la prop <code>required</code>.</p>
         <AmeliproIllustratedRadioGroup v-bind="args" v-model="model"/>
         <AmeliproBtn class="mt-4" @click="deselect">Tout désélectionner</AmeliproBtn>`,
 	}),

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.vue

@@ -6,7 +6,7 @@
 	import { locales } from './locales'
 
 	const props = defineProps({
-		ariaRequired: {
+		required: {
 			type: Boolean,
 			default: false,
 		},
@@ -63,7 +63,7 @@
 		emit('change:selected', item.value)
 	}
 
-	const checkErrorCondition = computed<boolean>(() => props.ariaRequired && selectedValue.value === null && props.error)
+	const checkErrorCondition = computed<boolean>(() => props.required && selectedValue.value === null && props.error)
 </script>
 
 <template>
@@ -83,14 +83,14 @@
 					{{ groupLabel }}
 
 					<span
-						v-if="ariaRequired"
+						v-if="required"
 						aria-hidden="true"
 						class="d-inline-flex"
 					>
 						&nbsp;*
 					</span>
 					<span
-						v-if="ariaRequired"
+						v-if="required"
 						class="d-sr-only"
 					>
 						&nbsp;Champ obligatoire
@@ -102,7 +102,7 @@
 
 			<div
 				:aria-labelledby="uniqueId"
-				:aria-required="ariaRequired"
+				:required="required"
 				class="mt-2 amelipro-illustrated-radio-group__group"
 				role="radiogroup"
 			>
@@ -128,7 +128,7 @@
 								:checked="item.isChecked"
 								:disabled="item.disabled || disabled"
 								:name="`${uniqueId}-name`"
-								:required="ariaRequired"
+								:required="required"
 								type="radio"
 								:value="item.value"
 								@input="emitChangeEvent(item)"