@cnamts/synapse 1.0.5 → 1.0.7

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

@@ -0,0 +1,1593 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproAccordionResultList > render correctly 1`] = `
+<div
+  class="amelipro-accordion-result-list"
+  id="amelipro-accordion-list-unique-id-container"
+>
+  <div
+    class="
+      align-end
+      amelipro-accordion-result-list__headings
+      d-flex
+      justify-space-between
+      mb-6
+    "
+    id="amelipro-accordion-list-unique-id-header"
+  >
+    <p
+      class="
+        d-inline-block
+        font-weight-semibold
+        mb-0
+        total-counter
+      "
+      id="amelipro-accordion-list-unique-id-result-counter"
+    >
+      <span class="d-sr-only">
+        Nombre de lignes dans la liste ci-après :
+      </span>
+      12 résultat(s)
+    </p>
+    <div class="
+      align-center
+      amelipro-accordion-result-list__selects
+      d-inline-flex
+    ">
+      <!-- v-if -->
+      <div
+        class="
+          amelipro-accordion-result-list__pagination-select
+          mb-0
+          ml-2
+          pt-0
+        "
+        id="amelipro-accordion-list-unique-id-pagination-select-container"
+        style="
+          margin-bottom: 12px;
+          max-width: 170px;
+        "
+      >
+        <div class="
+          amelipro-select__wrapper
+          d-flex
+          flex-column
+          w-100
+        ">
+          <div class="
+            align-start
+            d-inline-flex
+          ">
+            <label
+              class="
+                amelipro-select__label
+                mr-2
+              "
+              for="amelipro-accordion-list-unique-id-pagination-select"
+              id="amelipro-accordion-list-unique-id-pagination-select-label"
+            >
+              Nb lignes/page :
+              <!-- v-if -->
+            </label>
+          </div>
+          <div class="
+            amelipro-accordion-result-list__pagination-select
+            amelipro-select
+            mb-0
+            ml-2
+            pt-0
+            pt-0
+            v-input
+            v-input--center-affix
+            v-input--density-compact
+            v-input--dirty
+            v-input--horizontal
+            v-locale--is-ltr
+            v-select
+            v-select--selected
+            v-select--single
+            v-text-field
+            v-theme--light
+          ">
+            <!---->
+            <div class="v-input__control">
+              <div
+                class="
+                  bg-ap-white
+                  v-field
+                  v-field--active
+                  v-field--appended
+                  v-field--center-affix
+                  v-field--dirty
+                  v-field--has-background
+                  v-field--no-label
+                  v-field--variant-outlined
+                  v-locale--is-ltr
+                  v-theme--light
+                "
+                role="combobox"
+              >
+                <div class="v-field__overlay"></div>
+                <div class="v-field__loader">
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="
+                      v-locale--is-ltr
+                      v-progress-linear
+                      v-theme--light
+                    "
+                    role="progressbar"
+                    style="
+                      top: 0px;
+                      height: 0px;
+                      --v-progress-linear-height: 2px;
+                    "
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="opacity: NaN;"
+                    ></div>
+                    <div
+                      class="v-progress-linear__buffer"
+                      style="
+                        opacity: NaN;
+                        width: 0%;
+                      "
+                    ></div>
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div class="v-progress-linear__indeterminate">
+                        <div class="
+                          long
+                          v-progress-linear__indeterminate
+                        "></div>
+                        <div class="
+                          short
+                          v-progress-linear__indeterminate
+                        "></div>
+                      </div>
+                    </transition-stub>
+                    <!---->
+                  </div>
+                </div>
+                <!---->
+                <div
+                  class="v-field__field"
+                  data-no-activator=""
+                >
+                  <!---->
+                  <!---->
+                  <!---->
+                  <div
+                    class="v-field__input"
+                    data-no-activator=""
+                  >
+                    <!---->
+                    <!---->
+                    <div class="v-select__selection">
+                      <span class="v-select__selection-text">
+                        10
+                        <!---->
+                      </span>
+                    </div>
+                    <input
+                      aria-label="Open"
+                      aria-required="false"
+                      id="amelipro-accordion-list-unique-id-pagination-select"
+                      inputmode="none"
+                      size="1"
+                      title="Open"
+                      type="text"
+                      value="10"
+                    />
+                  </div>
+                  <!---->
+                </div>
+                <!---->
+                <div class="v-field__append-inner">
+                  <!---->
+                  <i
+                    aria-hidden="true"
+                    class="
+                      mdi
+                      mdi-menu-down
+                      notranslate
+                      v-icon
+                      v-icon--size-default
+                      v-select__menu-icon
+                      v-theme--light
+                    "
+                  ></i>
+                  <!---->
+                </div>
+                <div class="v-field__outline">
+                  <div class="v-field__outline__start"></div>
+                  <!---->
+                  <div class="v-field__outline__end"></div>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <!---->
+            <!---->
+          </div>
+        </div>
+        <!-- v-if -->
+      </div>
+    </div>
+  </div>
+  <div class="amelipro-accordion-result-list__list-wrapper">
+    <ul
+      aria-label="Exemple de liste de résultats"
+      class="
+        amelipro-accordion-result-list__list
+        list-style-none
+      "
+      id="amelipro-accordion-list-unique-id-list"
+    >
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-0-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-0-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-0"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-0-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-0-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-0-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-0title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-0"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-1-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-1-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-1"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-1-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-1-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-1-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-1title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-1"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-2-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-2-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-2"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-2-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-2-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-2-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-2title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-2"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-3-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-3-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-3"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-3-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-3-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-3-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-3title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-3"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-4-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-4-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-4"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-4-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-4-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-4-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-4title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-4"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-5-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-5-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-5"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-5-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-5-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-5-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-5title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-5"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-6-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-6-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-6"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-6-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-6-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-6-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-6title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-6"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-7-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-7-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-7"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-7-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-7-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-7-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-7title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-7"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-8-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-8-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-8"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-8-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-8-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-8-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-8title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-8"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+      <li class="amelipro-accordion-result-list__item">
+        <div
+          class="
+            amelipro-accordion-result
+            mb-4
+            w-100
+          "
+          id="accordion-result-9-container"
+          style="
+            background-color: #FFFFFF;
+            border: 1px solid #545859;
+          "
+        >
+          <div
+            class="
+              align-center
+              amelipro-accordion-result__header
+              d-flex
+              flex-column
+              flex-md-row
+              justify-md-space-between
+            "
+            id="accordion-result-9-header"
+          >
+            <div class="heading-content">
+              <h3>
+                Titre du dépliant
+              </h3>
+            </div>
+            <button
+              aria-controls="accordion-result-9"
+              aria-expanded="false"
+              class="
+                btn--icon
+                elevation-0
+                heading-content-btn
+                rounded-0
+                v-btn
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--icon
+                v-btn--size-default
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              id="accordion-result-9-header-btn-open-close"
+              plain=""
+              style="
+                height: auto;
+                width: auto;
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                <span
+                  class="d-sr-only"
+                  id="accordion-result-9-header-btn-open-close-btn-label"
+                >
+                  Déplier
+                </span>
+                <span
+                  class="
+                    amelipro-icon
+                    icon-custom
+                  "
+                  id="accordion-result-9-header-btn-open-close-icon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #00749C;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 24.1 14.9;"
+                        version="1.1"
+                        viewBox="0 0 24.1 14.9"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <path
+                          class="shape-color"
+                          d="M21.2,0.1L12,9.2L2.8,0L0,2.9l12,12l12-12L21.2,0.1z"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+              </span>
+              <!---->
+              <!---->
+            </button>
+          </div>
+          <div
+            aria-labelledby="accordion-result-9title"
+            class="
+              amelipro-accordion-result__content
+              text-ap-grey-darken-1
+            "
+            id="accordion-result-9"
+            role="region"
+            style="display: none;"
+          >
+            <p>
+              Contenu du dépliant
+            </p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <nav
+    aria-label="pagination"
+    class="
+      align-center
+      amelipro-pagination
+      d-flex
+      justify-center
+      mt-2
+    "
+    id="amelipro-accordion-list-unique-id-pagination-container"
+  >
+    <ol
+      class="
+        amelipro-pagination__list
+        d-flex
+        list-style-none
+      "
+      id="amelipro-accordion-list-unique-id-pagination-list"
+    >
+      <li class="amelipro-pagination__item">
+        <button
+          aria-current="page"
+          class="
+            amelipro-btn
+            amelipro-btn--style
+            amelipro-pagination__btn
+            bg-ap-blue-darken-1
+            elevation-0
+            v-btn
+            v-btn--density-default
+            v-btn--flat
+            v-btn--size-default
+            v-btn--variant-flat
+            v-theme--light
+          "
+          id="amelipro-accordion-list-unique-id-pagination-first"
+          style="
+            height: auto;
+            min-height: 2.5rem;
+            color: #FFFFFF !important;
+          "
+          title="page active"
+          type="button"
+        >
+          <span class="v-btn__overlay"></span>
+          <span class="v-btn__underlay"></span>
+          <!---->
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            <span class="
+              align-center
+              amelipro-custom-btn
+              d-flex
+              flex-row
+            ">
+              1
+              <!-- v-if -->
+              <!-- v-if -->
+            </span>
+          </span>
+          <!---->
+          <!---->
+        </button>
+      </li>
+      <!-- v-if -->
+      <!-- v-if -->
+      <li class="amelipro-pagination__item">
+        <button
+          class="
+            amelipro-btn
+            amelipro-btn--style
+            amelipro-pagination__btn
+            bg-ap-white
+            elevation-0
+            v-btn
+            v-btn--density-default
+            v-btn--flat
+            v-btn--size-default
+            v-btn--variant-flat
+            v-theme--light
+          "
+          id="amelipro-accordion-list-unique-id-pagination-last"
+          style="
+            height: auto;
+            min-height: 2.5rem;
+            color: #00749C !important;
+          "
+          type="button"
+        >
+          <span class="v-btn__overlay"></span>
+          <span class="v-btn__underlay"></span>
+          <!---->
+          <span
+            class="v-btn__content"
+            data-no-activator=""
+          >
+            <span class="
+              align-center
+              amelipro-custom-btn
+              d-flex
+              flex-row
+            ">
+              2
+              <!-- v-if -->
+              <!-- v-if -->
+            </span>
+          </span>
+          <!---->
+          <!---->
+        </button>
+      </li>
+    </ol>
+  </nav>
+</div>
+`;