@tiddh/brave-vue 1.9.21 → 1.9.24

package/src/components/Preview/PreviewTools.vue

@@ -1,1171 +1,2155 @@
 <template>
- 
-  <div class="custom-properties" :class="modalIsOpen() ? 'active': ''">
-      <div class="list-properties">
-        <div class="title-custom-properties">
-          <!-- <Heading kind="h4" size="Medium" :value="'Área de edição'" />  -->
-          <span>{{lang.editArea}}</span>
-        </div>
-
-        <div class="itens-properties">
-          <div class="item" @click="showModalName()" v-if="have_name">
-            <label>{{lang.name}}</label>
-            <span>{{ current_character_name }}</span>
-            <svg data-v-3a786fa4="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path data-v-3a786fa4="" fill="#01DFA1" d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"></path></svg>
-          
-          </div>
-
-          <div class="item" @click="showModalDedication()">
-            <label>{{lang.dedication}}</label>
-            <span>{{dedication_text ? dedicationText : lang.writeDedication }}</span>
-            <svg data-v-3a786fa4="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path data-v-3a786fa4="" fill="#01DFA1" d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"></path></svg>
-          </div>
-
-          <div
-            class="item"
-            @click="showModalShirtNumber()"
-            v-if="have_shirt_number"
-          >
-            <label>{{lang.shirtNumber}}</label>
-            <span>{{ currentShirtNumber }}</span>
-           <svg data-v-3a786fa4="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path data-v-3a786fa4="" fill="#01DFA1" d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"></path></svg>
-          </div>
-
-          <div class="item" @click="showModalScript()" v-if="availableLayouts[currentLayout] && have_layout">
-            <label>{{lang.bookScript}}</label>
-            <span>{{ availableLayouts[currentLayout].name }}</span>
-            <svg data-v-3a786fa4="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path data-v-3a786fa4="" fill="#01DFA1" d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"></path></svg>
-          </div>
-
-          <div
-            class="item"
-            @click="showModalBirthdate()"
-            v-if="have_birth_date"
-          >
-            <label>{{lang.dateBirth}}</label>
-            <span>{{ selectedBirthDay }} de {{ months[selectedBirthMonth].value }}</span>
-            <svg data-v-3a786fa4="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path data-v-3a786fa4="" fill="#01DFA1" d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"></path></svg>
-          </div>
-
-          <div class="item" @click="showModalPet()" v-if="have_pet">
-            <label>{{lang.pet}}</label>
-            <span>BETE</span>
-            <svg data-v-3a786fa4="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path data-v-3a786fa4="" fill="#01DFA1" d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"></path></svg>
-          </div>
-
-        </div>
-      </div>
-
-      <Modal :heading="lang.editName" v-if="modalName" @closeModal="closeModal">
-        <Input 
-        :type="'text'" 
-        :numeric="false" 
-        name="name" 
-        :label="lang.kidName" 
-        :placeholder="''" 
-        :helper="lang.recommendName" 
-        :value="current_character_name"  
-        :disabled="false" 
-        @update="updateName" />
-
-        <div slot="footer">
-          <Button kind="secondary" size="md" width="liquid" :disabled="false" :inverted="false" @click="changeLayout()">
-            {{lang.update}}
-          </Button>
-        
-          <Button kind="ghost" size="md" width="liquid" :disabled="false" :inverted="false" @click="closeModal">
-            {{lang.cancel}}
-          </Button>
-        </div>
-      </Modal>
-
-      <Modal :heading="lang.dedicationFree" :paragraph="lang.cusutomDedication" v-if="modalDedication" @closeModal="closeModal">
-
-        <TextArea 
-        name="dedication" 
-        :value="dedicationText" 
-        :label="lang.messageDedication" 
-        :placeholder="lang.dedcationPlaceholder" 
-        @keydown.enter.exact.prevent
-        
-        :maxlength="300" 
-        :counter="true" 
-        :disabled="false"
-        @update="updateDedicationText" />
-
-        <div slot="footer">
-          <Button kind="secondary" size="md" width="liquid" :disabled="false" :inverted="false" @click="changeDedication()">
-            {{lang.update}}
-          </Button>
-        
-          <Button kind="ghost" size="md" width="liquid" :disabled="false" :inverted="false" @click="closeModal">
-            {{lang.cancel}}
-          </Button>
-        </div>
-
-      </Modal>
-
-
-      <Modal :heading="lang.editShirt" v-if="modalShirtNumber" @closeModal="closeModal">
-        <Input 
-        :type="'text'" 
-        :numeric="false" 
-        name="number" 
-        :label="lang.shirtNumber" 
-        :placeholder="''" 
-        :helper="reccomendName" 
-        :value="currentShirtNumber"  
-        :disabled="false" 
-        @change="updateShirtNumber" />
-
-        <div slot="footer">
-          <Button kind="secondary" size="md" width="liquid" :disabled="false" :inverted="false" @click="changeLayout()">
-            {{lang.update}}
-          </Button>
-        
-          <Button kind="ghost" size="md" width="liquid" :disabled="false" :inverted="false" @click="closeModal">
-            {{lang.cancel}}
-          </Button>
-        </div>
-      </Modal>
-
-      <Modal :heading="lang.chooseScript" :paragraph="lang.choosePetLabel1 + ' <b>' + current_character_name + '</b> ' + lang.choosePetLabel1" v-if="modalScript" @closeModal="closeModal">
-        <div class="layout-boxes">
-          <div
-            v-for="(item, index) in availableLayouts"
-            :key="index"
-            class="layout-option"
-            :class="currentLayout == index ? 'active' : 'inactive'"
-            @click="setCurrentLayout(index)"
-          >
-            <div class="imagem">
-              <img
-                width="100%"
-                src="https://doo8f8ypwd7it.cloudfront.net/brasilprevjunior/img/capitao@2x.890754be.png"
-                alt=""
-              />
-            </div>
-
-            <div class="panel-title">
-              <div class="title">{{ item.name }}</div>
-
-              <div class="flag" :class="currentLayout == index ? 'active' : 'inactive'">
-                <Icon name="check" />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div slot="footer">
-          <Button kind="secondary" size="md" width="liquid" :disabled="false" :inverted="false" @click="changeLayout()">
-            {{lang.update}}
-          </Button>
-        
-          <Button kind="ghost" size="md" width="liquid" :disabled="false" :inverted="false" @click="closeModal">
-            {{lang.cancel}}
-          </Button>
-        </div>
-      </Modal>
-
-      <Modal :heading="lang.editDateBirth" v-if="modalBirthdate" @closeModal="closeModal">
-
-        <div class="box-dates-columns">
-          <div class="day">
-
-            <Select 
-              :selected="selectedBirthDay" 
-              name="day" 
-              label="Dia" 
-              placeholder="Dia" 
-              :options="days" 
-              @change="onChangeDay" />
-
-          </div>
-          <div class="month">
-
-            <Select 
-              :selected="selectedBirthMonth" 
-              name="month" 
-              label="Mês" 
-              placeholder="Mês" 
-              :options="months" 
-              @change="onChangeMonth" />
-
-          </div>
-        </div>
-
-        <div slot="footer">
-          <Button kind="secondary" size="md" width="liquid" :disabled="false" :inverted="false" @click="changeLayout()">
-            {{lang.update}}
-          </Button>
-        
-          <Button kind="ghost" size="md" width="liquid" :disabled="false" :inverted="false" @click="closeModal">
-            {{lang.cancel}}
-          </Button>
-        </div>
-      </Modal>
-
-
-      <Modal heading="Altere o bichinho da história" :paragraph="'Esse bichinho acompanhará '+ currentName +' em toda a história.'" v-if="modalPet" @closeModal="closeModal">
-
-        <div class="pet-view">
-          <div class="pet-selectors" :style="currentPetColor ? 'width: 70%;' : ''">
-           
-            <div class>
-              <Input
-                :value="currentPetName"
-                error
-                helper
-                :label="lang.typePetname"
-                name="currentPetName"
-                @input="currentPetName = $event.target.value"
-              />
-            </div>
-
-            <label class="pet-label">{{lang.selectPet}}</label>
-
-            <div class="pet-list" v-if="listPet && listPet.assets">
-              <div
-                :class="currentPet === pet ? 'active' : 'inactive'"
-                @click="setPet(pet)"
-                v-for="(pet, index) in listPet.assets.subcategories"
-                :key="index"
-              >
-                <img :src="pet.assets.icon" alt />
-                <br />
-              </div>
-            </div>
-
-            <div class="color-list" v-if="currentPet && currentPet.assets">
-              <div
-                v-for="(color, indexColor) in currentPet.assets.colors"
-                :key="indexColor"
-                @click="setColor(color)"
-              >
-                <div>
-                  <div
-                    class="color"
-                    :style="'background-color:' + color.hexa"
-                    :class="currentPetColor === color ? 'is-selected' : 'inactive'"
-                  >
-                    <span
-                      class="secondary-color"
-                      v-if="color.auxiliary"
-                      :style="'background-color:' + color.auxiliary"
-                    ></span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div
-            class="pet-avatar"
-            v-if="currentPetColor.assets"
-            :style="currentPetColor ? 'width: 30%;' : ''"
-          >
-            <img :src="currentPetColor.assets.asset" alt />
-            <br />
-          </div>
-        </div>
-
-        <div slot="footer">
-          <Button kind="secondary" size="md" width="liquid" :disabled="false" :inverted="false" @click="changeLayout">
-            {{lang.update}}
-          </Button>
-        
-          <Button kind="ghost" size="md" width="liquid" :disabled="false" :inverted="false" @click="closeModal">
-            {{lang.cancel}}
-          </Button>
-        </div>
-      </Modal>
-
-    </div>
-
+	<div
+		class="main-tool"
+		:class="[
+			modalIsOpen() ? 'active' : '',
+			sidebarOpen ? 'active' : 'inactive',
+		]"
+	>
+		<div class="backdrop" @click="toggleSidebar()"></div>
+
+		<div
+			class="custom-properties"
+			:class="[
+				modalIsOpen() ? 'active' : '',
+				sidebarOpen ? 'active' : 'inactive',
+			]"
+		>
+			<div class="box-close" :style="cssProps" @click="toggleSidebar()">
+				<Icon name="close" :fill="preview_color" stroke="transparent" />
+				<Icon name="edit" fill="#fff" stroke="transparent" />
+			</div>
+
+			<div class="list-properties">
+				<div class="title-custom-properties">
+					<!-- <Heading kind="h4" size="Medium" :value="'Área de edição'" />  -->
+					<Heading kind="h4" size="sm" :color="'#68596E'">{{
+						lang.editArea
+					}}</Heading>
+					<!-- <span>{{ lang.editArea }}</span> -->
+				</div>
+
+				<HR height="1px" :color="preview_color" />
+
+				<div class="itens-properties" v-if="extras">
+					<div
+						class="item"
+						@click="showModal(property.code)"
+						v-for="(property, index) in extras"
+						:key="index"
+					>
+						<!-- <label>{{ lang.name }}</label> -->
+						<div>
+							<label v-if="property.code == 'nome'">{{ lang.name }}</label>
+							<label v-if="property.code == 'dedicatoria'">{{
+								lang.dedication
+							}}</label>
+							<label v-if="property.code == 'nome-do-mooner'">{{
+								lang.moonerLabelSidebar
+							}}</label>
+							<!-- <label v-if="property.type == 'pet'">{{ lang.pet }}</label> -->
+							<label v-if="property.code == 'number'">{{
+								lang.shirtNumber
+							}}</label>
+
+							<span v-if="property.code == 'nome'">{{ property.value }}</span>
+							<span v-if="property.code == 'dedicatoria'">{{
+								property.value
+							}}</span>
+							<span v-if="property.code == 'nome-do-mooner'">{{
+								property.value
+							}}</span>
+							<span v-if="property.code == 'pet'">{{
+								property.value.name
+							}}</span>
+
+							<span v-if="property.code == 'number'">{{ property.value }}</span>
+
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="32"
+								height="32"
+								viewBox="0 0 32 32"
+							>
+								<path
+									:fill="preview_color"
+									d="M14.584 7.33l-.01.009 2.659 2.658.01-.01a1.88 1.88 0 1 0-2.658-2.658l-.001.001zm-.454.454L8.163 13.75l2.658 2.659 5.967-5.967-2.658-2.658zm-6.373 6.45L7 17.572l3.338-.757-2.58-2.58-.001-.001z"
+								></path>
+							</svg>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<Modal
+			:heading="lang.kidName"
+			:headingColor="preview_color"
+			paragraph="Para deixar o livro mais legal use apenas o primeiro nome"
+			v-if="modalName"
+			@closeModal="closeModal"
+		>
+			<Input
+				:type="'text'"
+				:numeric="false"
+				name="name"
+				:label="lang.kidName"
+				:placeholder="''"
+				:helper="lang.recommendName"
+				:value="current_character_name"
+				:disabled="false"
+				@update="updateName"
+			/>
+
+			<div slot="footer" class="name-footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="updateNameAndDedicationCustomCharacter()"
+				>
+					{{ lang.update }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+
+		<Modal
+			:heading="lang.dedicationFree"
+			:paragraph="lang.cusutomDedication"
+			v-if="modalDedication"
+			@closeModal="closeModal"
+		>
+			<TextArea
+				name="dedication"
+				:value="dedicationText"
+				:label="lang.messageDedication"
+				:placeholder="lang.dedcationPlaceholder"
+				@keydown.enter.exact.prevent
+				:maxlength="300"
+				:counter="true"
+				:disabled="false"
+				@update="updateDedicationText"
+			/>
+
+			<div slot="footer" class="dedication-footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="updateNameAndDedicationCustomCharacter()"
+				>
+					{{ lang.update }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+
+		<Modal
+			:heading="lang.editShirt"
+			v-if="modalShirtNumber"
+			@closeModal="closeModal"
+		>
+			<Input
+				:type="'text'"
+				:numeric="false"
+				name="number"
+				:label="lang.shirtNumber"
+				:placeholder="''"
+				:helper="reccomendName"
+				:value="currentShirtNumber"
+				:disabled="false"
+				@change="updateShirtNumber"
+			/>
+
+			<div slot="footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="changeLayout()"
+				>
+					{{ lang.update }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+
+		<Modal
+			:heading="lang.chooseScript"
+			:paragraph="
+				lang.choosePetLabel1 +
+					' <b>' +
+					current_character_name +
+					'</b> ' +
+					lang.choosePetLabel1
+			"
+			v-if="modalScript"
+			@closeModal="closeModal"
+		>
+			<div class="layout-boxes">
+				<div
+					v-for="(item, index) in availableLayouts"
+					:key="index"
+					class="layout-option"
+					:class="currentLayout == index ? 'active' : 'inactive'"
+					@click="setCurrentLayout(index)"
+				>
+					<div class="imagem">
+						<img
+							width="100%"
+							src="https://doo8f8ypwd7it.cloudfront.net/brasilprevjunior/img/capitao@2x.890754be.png"
+							alt=""
+						/>
+					</div>
+
+					<div class="panel-title">
+						<div class="title">{{ item.name }}</div>
+
+						<div
+							class="flag"
+							:class="currentLayout == index ? 'active' : 'inactive'"
+						>
+							<Icon name="check" />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div slot="footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="changeLayout()"
+				>
+					{{ lang.update }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+
+		<Modal
+			:heading="lang.editDateBirth"
+			v-if="modalBirthdate"
+			@closeModal="closeModal"
+		>
+			<div class="box-dates-columns">
+				<div class="day">
+					<Select
+						:selected="selectedBirthDay"
+						name="day"
+						label="Dia"
+						placeholder="Dia"
+						:options="days"
+						@change="onChangeDay"
+					/>
+				</div>
+				<div class="month">
+					<Select
+						:selected="selectedBirthMonth"
+						name="month"
+						label="Mês"
+						placeholder="Mês"
+						:options="months"
+						@change="onChangeMonth"
+					/>
+				</div>
+			</div>
+
+			<div slot="footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="changeLayout()"
+				>
+					{{ lang.update }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+
+		<Modal
+			heading="Altere o bichinho da história"
+			class="modal-pet"
+			:headingColor="preview_color"
+			:paragraph="
+				'Esse bichinho acompanhará <span>' +
+					searchExtraProperty('name').value +
+					'</span> em toda a história.'
+			"
+			v-if="modalPet"
+			@closeModal="closeModal"
+		>
+			<div class="pet-view">
+				<div
+					class="pet-selectors"
+					:style="currentPetColor ? 'width: 70%;' : ''"
+				>
+					<div class>
+						<Input
+							:value="searchExtraProperty('nome-do-mooner').value.name"
+							error
+							helper
+							:label="lang.typePetname"
+							name="currentPetName"
+							@input="
+								searchExtraProperty('nome-do-mooner').value.name =
+									$event.target.value
+							"
+						/>
+					</div>
+
+					<label class="pet-label">{{ lang.selectPet }}</label>
+
+					<div class="pet-combo-list">
+						<div
+							class="selected-pet"
+							:class="[
+								!currentPet ? 'inactive' : 'active',
+								petAnimation ? 'fade-in-image' : 'inactive-pet',
+							]"
+						>
+							<div
+								v-if="
+									currentPet && currentPet.assets && currentPet.assets.asset
+								"
+							>
+								<img
+									:class="petInitAnimation ? 'fade-in-image-init' : ''"
+									v-if="currentPet.assets.asset"
+									:src="currentPet.assets.asset"
+									alt=""
+								/>
+							</div>
+						</div>
+
+						<div
+							class="pet-list"
+							:class="!currentPet ? 'inactive' : 'active'"
+							v-if="listPet"
+						>
+							<div
+								:class="currentPet === pet ? 'active' : 'inactive'"
+								@click="setPet(pet)"
+								v-for="(pet, index) in listPet.assets.subcategories"
+								:key="index"
+							>
+								<img :src="pet.assets.icon" alt />
+								<br />
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div
+					class="pet-avatar"
+					v-if="searchExtraProperty('nome-do-mooner').value.newPet"
+					:style="
+						searchExtraProperty('nome-do-mooner').value.newPet
+							? 'width: 30%;'
+							: ''
+					"
+				>
+					<img
+						:src="
+							searchExtraProperty('nome-do-mooner').value.newPet.assets.asset
+						"
+						alt
+					/>
+					<br />
+				</div>
+			</div>
+
+			<div slot="footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="changeMoonerLayout()"
+				>
+					{{ lang.update }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+
+		<Modal
+			:heading="lang.moonerTitleFirstOpen"
+			class="modal-pet"
+			:headingColor="preview_color"
+			:paragraph="
+				lang.moonerDescriptionOne +
+					current_character_name +
+					lang.moonerDescriptionTwo
+			"
+			:haveClose="modalMoonerFirstOpen"
+			v-if="modalMooner"
+			@closeModal="closeModal"
+		>
+			<div class="pet-view">
+				<div class="pet-selectors" :style="currentMooner ? 'width: 100%;' : ''">
+					<div class>
+						<Input
+							:value="currentMoonerName"
+							error
+							helper
+							:label="lang.moonerLabel"
+							name="currentPetName"
+							@input="currentMoonerName = $event.target.value"
+						/>
+					</div>
+
+					<label class="pet-label">{{ lang.moonerLabelSelector }}</label>
+
+					<div class="pet-combo-list">
+						<div
+							class="selected-pet"
+							:class="[
+								!currentMooner ? 'inactive' : 'active',
+								moonerAnimation ? 'fade-in-image' : 'inactive-pet',
+							]"
+						>
+							<div
+								v-if="
+									currentMooner &&
+										currentMooner.assets &&
+										currentMooner.assets.asset
+								"
+								class="clip-mooney"
+							>
+								<img
+									:class="moonerInitAnimation ? 'fade-in-image-init' : ''"
+									v-if="currentMooner.assets.asset"
+									:src="currentMooner.assets.asset"
+									alt=""
+								/>
+							</div>
+						</div>
+
+						<!-- {{ listMooner }} -->
+						<div
+							class="pet-list"
+							:class="!currentMooner ? 'inactive' : 'active'"
+							v-if="listMooner"
+						>
+							<div
+								:class="currentMooner === mooner ? 'active' : 'inactive'"
+								v-for="(mooner, index) in listMooner.assets.subcategories"
+								:key="index"
+								@click="setMooner(mooner)"
+							>
+								<img :src="mooner.assets.icon" alt />
+								<br />
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- <div
+					class="pet-avatar"
+					v-if="currentMooner"
+					:style="currentMooner ? 'width: 30%;' : ''"
+				>
+					<img :src="currentMooner.assets.asset" alt />
+					<br />
+				</div> -->
+			</div>
+
+			<div slot="footer" class="mooner-footer">
+				<Button
+					kind="secondary"
+					size="md"
+					width="liquid"
+					:disabled="!currentMoonerName || !currentMooner"
+					:inverted="false"
+					@click="changeMoonerLayout()"
+				>
+					{{ modalMoonerFirstOpen ? lang.moonerCta : lang.moonerCtaFirstOpen }}
+				</Button>
+
+				<Button
+					kind="ghost"
+					size="md"
+					width="liquid"
+					:disabled="false"
+					:inverted="false"
+					@click="closeModal"
+					v-if="modalMoonerFirstOpen"
+				>
+					{{ lang.cancel }}
+				</Button>
+			</div>
+		</Modal>
+	</div>
 </template>
 
 <script>
-
-import Vue from 'vue';
-
-import Language from "./js/language.json"
-
-import Heading from '../Typography/Heading.vue';
-import Paragraph from '../Typography/Paragraph.vue';
-import Icon from '../Icons/Icon.vue';
-import Modal from '../Modal/Modal.vue';
-import Input from '../Form/Input.vue';
-import TextArea from '../Form/TextArea.vue';
-import Button from '../Buttons/Button.vue';
-import Select from '../Form/Select.vue';
-
-
-const axios = require("axios")
-
-export default {
-  name: 'PreviewTools',
-  components: { Vue, Heading, Paragraph, Icon, Modal, Input, Button, TextArea, Select },
-  props: {
-    /** Name of protagonist. `Diego` */
-    current_name: {
-      type: String,
-      required: true,
-    },
-    /** Product id of Builder. `595` */
-    product_id: {
-      type: Number,
-      required: true,
-    },
-    /** Character id of Builder. `57` */
-    character_id: {
-      type: Number,
-      required: true,
-    },
-    dedication_text: {
-      type: String,
-      required: false
-    },
-    /** Type id of Gender. `89` */
-    gender: {
-      type: String,
-      required: true,
-    },
-    /** Slug of product on builder `bb-a-grande-viagem` */
-    slug: {
-      type: String,
-      required: true,
-    },
-    /** Character uuid. `ddh5e177ff920f15` */
-    uuid: {
-      type: String,
-      required: true,
-    },
-
-    /** Show edit name. */
-    have_name: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show number at shirt. */
-    have_shirt_number: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show layout changes. */
-    have_layout: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show Birth date. */
-    have_birth_date: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    /** Show Pet. */
-    have_pet: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    typeLanguage: {
-      type: String,
-      required: false,
-      default: "br"
-    },
-
-  },
-  data() {
-    const months = [
-      {
-        value: "Janeiro",
-        key: 1,
-      },
-      {
-        value: "Fevereiro",
-        key: 2,
-      },
-      {
-        value: "Março",
-        key: 3,
-      },
-      {
-        value: "Abril",
-        key: 4,
-      },
-      {
-        value: "Maio",
-        key: 5,
-      },
-      {
-        value: "Junho",
-        key: 6,
-      },
-      {
-        value: "Julho",
-        key: 7,
-      },
-      {
-        value: "Agosto",
-        key: 8,
-      },
-      {
-        value: "Setembro",
-        key: 9,
-      },
-      {
-        value: "Outubro",
-        key: 10,
-      },
-      {
-        value: "Novembro",
-        key: 11,
-      },
-      {
-        value: "Dezembro",
-        key: 12,
-      },
-    ]
-
-    const maxAgeAllowed = 16
-
-    const days = []
-    const years = []
-    const currentYear = new Date().getFullYear()
-
-    for (let day = 1; day <= 31; day++) days.push({ key: day, value: day })
-    for (let i = 0; i < maxAgeAllowed; i++) {
-      years.push({ key: currentYear - i, value: currentYear - i })
-    }
-    years.push({ key: "outro", value: "Outro" })
-
-    return {
-      lang: Language[this.typeLanguage],
-
-      modalScript: false,
-      modalName: false,
-      modalDedication: false,
-      modalShirtNumber: false,
-      modalPet: false,
-      modalBirthdate: false,
-
-      days: days,
-      months: months,
-      years: years,
-
-      pages: [],
-      counter: 0,
-      pageNum: 36,
-
-      isCover: 0,
-      currentPage: 3,
-      loadedPages: 3,
-
-      numberPositions: 0,
-      mobilePagePosition: 0,
-
-      isMobile: false,
-      isLoaded: false,
-
-      isPagesNumLoaded: false,
-
-      loadedMobile: false,
-      loadedDesktop: false,
-
-      mobileStopped: true,
-      isLoading: true,
-      custom_character: null,
-
-      productSelected: null,
-
-      availableLayouts: [],
-
-      currentLayout: 0,
-
-      callingLayout: false,
-      callingDedication: false,
-      callingName: false,
-
-      current_character_name: "",
-
-      dedicationText: "",
-
-      haveDedication: false,
-
-      currentShirtNumber: 7,
-
-      listPet: [],
-      currentPetName: "",
-      currentPet: [],
-      currentPetColor: "",
-
-      selectedBirthDay: 0,
-      selectedBirthMonth: 0,
-
-      modalFirstOpen: true,
-      firstBookSelected: false,
-
-      type_id: '',
-
-      sizeList:'0px',
-
-      
-    }
-  },
-
-  computed: {},
-
-  mounted() {
-    this.current_character_name = this.current_name
-    this.dedicationText = this.dedication_text ? this.dedication_text : "" 
-    this.initMounted()
-  },
-
-  methods: {
-    modalIsOpen(){
-      if(
-        this.modalScript ||
-        this.modalName ||
-        this.modalDedication ||
-        this.modalShirtNumber ||
-        this.modalPet ||
-        this.modalBirthdate
-      ) {
-        return true
-      } else {
-        return false
-      }
-      
-      
-    },
-
-    updateName(payload) {
-      console.log(this.current_character_name)
-      this.current_character_name = payload.value
-      console.log(payload)
-    },
-
-    updateDedicationText(payload) {
-      this.dedicationText = payload.value
-    },
-
-    updateShirtNumber(payload) {
-      this.currentShirtNumber = payload.value
-    },
-
-    onChangeDay(payload) {
-      this.selectedBirthDay = payload.value
-
-      this.validateDays({
-        year: payload.value,
-      })
-    },
-
-    onChangeMonth(payload) {
-      console.log(payload);
-
-      this.selectedBirthMonth = (payload.key - 1)
-
-      this.validateDays({
-        month: (payload.key - 1),
-      })
-    },
-
-    updateHaveDedication(value) {
-      this.haveDedication = value
-    },
-
-    
-    setPet(selectedPet) {
-      this.currentPet = selectedPet
-      this.setColor(this.currentPet.assets.colors[0])
-    },
-
-    setColor(selectedColor) {
-      this.currentPetColor = selectedColor
-    },
-
-    showModalScript() {
-      this.modalScript = true
-    },
-
-    showModalName() {
-      this.modalName = true
-    },
-
-    showModalDedication() {
-      this.modalDedication = true
-    },
-
-    showModalShirtNumber() {
-      this.modalShirtNumber = true
-    },
-
-    showModalBirthdate() {
-      this.modalBirthdate = true
-    },
-
-    showModalPet() {
-      const self = this
-
-      axios
-        .get(
-          this.lang.urlBuilder + "/api/characters/46/categories/assets/treelist?character_type_id=67&product_id=111&character_position_id=377"
-        )
-        .then(function(response) {
-          console.log(response)
-          self.listPet = response.data.character_categories_assets[0].categories[5]
-        })
-
-        .catch(function(error) {
-          console.log(error)
-        })
-
-      this.modalPet = true
-    },
-
-    closeModal() {
-      this.modalScript = false
-      this.modalName = false
-      this.modalDedication = false
-      this.modalShirtNumber = false
-      this.modalPet = false
-      this.modalBirthdate = false
-    },
-
-    setCurrentLayout(layoutId) {
-      this.currentLayout = layoutId
-      this.firstBookSelected = true
-    },
-
-    initMounted() {
-      const self = this
-
-      axios
-        .get(this.lang.urlBuilder + "/api/products/info/" + self.product_id)
-        .then(function(response) {
-          self.pageNum = response.data.product.pages
-          self.isPagesNumLoaded = true
-          self.availableLayouts = response.data.product.layout
-
-       
-          // Gender
-          if (self.gender) {
-              self.type_id = response.data.product.type.filter((el) => {
-                return el.code === self.gender
-              })
-          }
-
-          self.type_id = self.type_id[0].id
-
-        })
-
-        .catch(function(error) {
-          console.log(error)
-        })
-    },
-
-    changeDedication() {
-      const self = this;
-      self.callingLayout = true
-      self.closeModal()
-      self.isLoadingMethod(false)
-      
-      let request = {
-        uuid: self.uuid,
-        dedication: self.dedicationText
-      };
-
-      axios
-        .post(
-          this.lang.urlBuilder +
-            "/api/customs_characters/updateDedication",
-          request
-          // {
-          //   headers: {
-          //     // remove headers
-          //   }
-          // }
-        )
-        .then(function(response) {
-          //alert(response.data.custom.uuid);
-          
-          self.changeUuid(response.data.custom.uuid)
-          // self.callingLayout = true
-          //self.closeModal()
-          // self.isLoadingMethod(false)
-        })
-        .catch(function(error) {
-          //self.isCallingAll = false;
-          alert("Erro ao atualizar a dedicatória");
-          //self.closeModal();
-        });
-    },
-
-    changeLayout() {
-      const self = this
-      self.callingLayout = true
-      self.closeModal()
-      self.isLoadingMethod(false)
-
-      let request = {
-        custom_character: {
-          character_id: self.character_id,
-          product_id: self.product_id,
-          type_id: self.type_id,
-          user_data: {
-            type: self.type_id,
-            properties: {
-              nome: {
-                code: "nome",
-                property_id: 24,
-                value: self.current_character_name,
-              },
-              dedicatoria: {
-                code: "dedicatoria",
-                property_id: 26,
-                value: self.dedicationText,
-              },
-            },
-          },
-          uuid: self.uuid,
-        },
-      }
-
-      if (self.have_layout) {
-        Vue.set(request.custom_character, "layout_id", self.availableLayouts[self.currentLayout].id)
-      }
-
-      if (self.have_pet) {
-        Vue.set(request.custom_character.user_data.properties, "nome-pet", itemProperty)
-      }
-
-      if (self.have_birth_date) {
-        var itemPropertyBirth1 = {
-          property_id: 29,
-          value: self.currentShirtNumber,
-          code: "numero",
-        }
-
-        Vue.set(request.custom_character.user_data.properties, "numero", itemPropertyBirth1)
-
-        var itemPropertyBirth2 = {
-          property_id: 38,
-          value: self.months[self.selectedBirthMonth - 1].value,
-          code: "mes",
-        }
-
-        Vue.set(request.custom_character.user_data.properties, "mes", itemPropertyBirth2)
-      }
-
-      if (self.have_shirt_number) {
-        var itemPropertyShirt = {
-          property_id: 29,
-          value: self.currentShirtNumber,
-          code: "numero",
-        }
-
-        Vue.set(request.custom_character.user_data.properties, "numero", itemPropertyShirt)
-      }
-
-      axios
-        .post(
-          this.lang.urlBuilder + "/api/customs_characters/changePropertiesDynamic",
-          request
-        )
-        .then(function(response) {
-          self.changeUuid(response.data.custom.uuid)
-        })
-        .catch(function(error) {
-          console.log(error)
-        })
-    },
-    
-    changeUuid(payload) {
-      this.$emit("changeUuid", payload)
-    },
-
-    isLoadingMethod(payload) {
-      this.$emit("isLoadingMethod", payload)
-    },
-
-    validateDays(payload) {
-      const self = this
-
-      let month = payload.month ? payload.month : this.selectedBirthMonth
-      const year = payload.year ? payload.year : this.selectedBirthYear
-
-      if (!month) month = 13
-
-      let daysMonth
-      const newDays = []
-
-      if (
-        month === 1 ||
-        month === 3 ||
-        month === 5 ||
-        month === 7 ||
-        month === 8 ||
-        month === 10 ||
-        month === 12 ||
-        month === 13
-      ) {
-        daysMonth = 31
-      } else if (month === 4 || month === 6 || month === 9 || month === 11) {
-        daysMonth = 30
-      } else {
-        if ((year % 4 === 0 && year % 100 > 0) || year % 400 === 0) {
-          daysMonth = 29
-        } else {
-          daysMonth = 28
-        }
-      }
-
-      if (!month && !year) daysMonth = 31
-
-      for (let day = 1; day <= daysMonth; day++) newDays.push({ key: day, value: day })
-
-      self.days = newDays
-    },
-  },
-
-};
+	import Vue from "vue";
+
+	import Language from "./js/language.json";
+
+	import Heading from "../Typography/Heading.vue";
+	import Paragraph from "../Typography/Paragraph.vue";
+	import Icon from "../Icons/Icon.vue";
+	import Modal from "../Modal/Modal.vue";
+	import Input from "../Form/Input.vue";
+	import TextArea from "../Form/TextArea.vue";
+	import Button from "../Buttons/Button.vue";
+	import Select from "../Form/Select.vue";
+
+	const axios = require("axios");
+
+	export default {
+		name: "PreviewTools",
+		components: {
+			Vue,
+			Heading,
+			Paragraph,
+			Icon,
+			Modal,
+			Input,
+			Button,
+			TextArea,
+			Select,
+		},
+		props: {
+			/** Name of protagonist. `Diego` */
+			current_name: {
+				type: String,
+				required: true,
+			},
+			/** Product id of Builder. `595` */
+			product_id: {
+				type: Number,
+				required: true,
+			},
+			/** Character id of Builder. `57` */
+			character_id: {
+				type: Number,
+				required: true,
+			},
+
+			/** Character id of Builder. `906` */
+			character_position_id: {
+				type: Number,
+				required: true,
+			},
+
+			dedication_text: {
+				type: String,
+				required: false,
+			},
+			/** Type id of Gender. `89` */
+			gender: {
+				type: String,
+				required: true,
+			},
+			/** Slug of product on builder `bb-a-grande-viagem` */
+			slug: {
+				type: String,
+				required: true,
+			},
+			/** Character uuid. `ddh5e177ff920f15` */
+			uuid: {
+				type: String,
+				required: true,
+			},
+			/** Preview external color. `#000` */
+			preview_color: {
+				type: String,
+				default: "#68596e",
+				required: true,
+			},
+
+			typeLanguage: {
+				type: String,
+				required: false,
+				default: "br",
+			},
+		},
+
+		computed: {
+			colorsVar() {
+				return {
+					"--preview-color": this.preview_color,
+				};
+			},
+		},
+
+		data() {
+			const months = [
+				{
+					value: "Janeiro",
+					key: 1,
+				},
+				{
+					value: "Fevereiro",
+					key: 2,
+				},
+				{
+					value: "Março",
+					key: 3,
+				},
+				{
+					value: "Abril",
+					key: 4,
+				},
+				{
+					value: "Maio",
+					key: 5,
+				},
+				{
+					value: "Junho",
+					key: 6,
+				},
+				{
+					value: "Julho",
+					key: 7,
+				},
+				{
+					value: "Agosto",
+					key: 8,
+				},
+				{
+					value: "Setembro",
+					key: 9,
+				},
+				{
+					value: "Outubro",
+					key: 10,
+				},
+				{
+					value: "Novembro",
+					key: 11,
+				},
+				{
+					value: "Dezembro",
+					key: 12,
+				},
+			];
+
+			const maxAgeAllowed = 16;
+
+			const days = [];
+			const years = [];
+			const currentYear = new Date().getFullYear();
+
+			for (let day = 1; day <= 31; day++) days.push({ key: day, value: day });
+			for (let i = 0; i < maxAgeAllowed; i++) {
+				years.push({ key: currentYear - i, value: currentYear - i });
+			}
+			years.push({ key: "outro", value: "Outro" });
+
+			return {
+				lang: Language[this.typeLanguage],
+
+				// Sidebar
+				sidebarOpen: false,
+
+				have_shirt_number: false,
+				have_layout: false,
+				have_birth_date: false,
+				haveDedication: false,
+
+				//
+				//default_value_name: "",
+				default_value_dedication: "",
+				default_value_pet: "",
+
+				// Variaveis de modais
+				modalScript: false,
+				modalName: false,
+				modalDedication: false,
+				modalShirtNumber: false,
+				modalMooner: false,
+				modalPet: false,
+				modalBirthdate: false,
+
+				// Propriedades da sidebar
+				extras: null,
+
+				// Nome customizado
+				current_character_name: "",
+				dedicationText: "",
+
+				// Pet
+				listMooner: [],
+				moonerAnimation: false,
+				moonerInitAnimation: false,
+				currentMoonerName: null,
+				currentMooner: null,
+				currentMoonerColor: "",
+
+				// Pet
+				listPet: [],
+				petAnimation: false,
+				petInitAnimation: false,
+				currentPetName: "",
+				currentPet: null,
+				currentPetColor: "",
+
+				days: days,
+				months: months,
+				years: years,
+
+				pages: [],
+				counter: 0,
+				pageNum: 36,
+
+				isCover: 0,
+				currentPage: 3,
+				loadedPages: 3,
+
+				numberPositions: 0,
+				mobilePagePosition: 0,
+
+				isMobile: false,
+				isLoaded: false,
+
+				isPagesNumLoaded: false,
+
+				loadedMobile: false,
+				loadedDesktop: false,
+
+				mobileStopped: true,
+				isLoading: true,
+				custom_character: null,
+				custom: null,
+
+				availableLayouts: [],
+				currentLayout: 0,
+
+				callingLayout: false,
+				callingDedication: false,
+				callingName: false,
+
+				currentShirtNumber: 7,
+
+				// Aniversário
+				selectedBirthDay: 0,
+				selectedBirthMonth: 0,
+
+				modalMoonerFirstOpen: false,
+				firstBookSelected: false,
+
+				type_id: "",
+			};
+		},
+
+		computed: {
+			cssProps() {
+				return {
+					"--preview_color": this.preview_color,
+				};
+			},
+		},
+
+		mounted() {
+			const self = this;
+
+			this.current_character_name = this.current_name;
+			this.dedicationText = this.dedication_text ? this.dedication_text : "";
+			this.initMounted();
+
+			self.isMobile = self.detectSize();
+
+			window.addEventListener("resize", function(e) {
+				self.isMobile = self.detectSize();
+			});
+		},
+
+		methods: {
+			detectSize() {
+				var menuStatus = false;
+				if (window.innerWidth < 990) {
+					menuStatus = true;
+				}
+				return menuStatus;
+			},
+
+			toggleSidebar() {
+				const self = this;
+
+				self.sidebarOpen = !self.sidebarOpen;
+			},
+
+			modalIsOpen() {
+				if (
+					this.modalScript ||
+					this.modalName ||
+					this.modalDedication ||
+					this.modalShirtNumber ||
+					this.modalPet ||
+					this.modalMooner ||
+					this.modalBirthdate
+				) {
+					return true;
+				} else {
+					return false;
+				}
+			},
+
+			updateName(payload) {
+				console.log(this.current_character_name);
+				this.current_character_name = payload.value;
+				console.log(payload);
+			},
+
+			updateDedicationText(payload) {
+				this.dedicationText = payload.value;
+			},
+
+			updateShirtNumber(payload) {
+				this.currentShirtNumber = payload.value;
+			},
+
+			onChangeDay(payload) {
+				this.selectedBirthDay = payload.value;
+
+				this.validateDays({
+					year: payload.value,
+				});
+			},
+
+			onChangeMonth(payload) {
+				console.log(payload);
+
+				this.selectedBirthMonth = payload.key - 1;
+
+				this.validateDays({
+					month: payload.key - 1,
+				});
+			},
+
+			updateHaveDedication(value) {
+				this.haveDedication = value;
+			},
+
+			setMooner(selectedPet) {
+				const self = this;
+
+				self.moonerAnimation = false;
+				//console.log(selectedPet)
+				//self.currentMoonerName = selectedPet.name.toUpperCase()
+
+				setTimeout(() => {
+					self.moonerAnimation = true;
+					this.currentMooner = selectedPet;
+
+					setTimeout(() => {
+						self.moonerInitAnimation = true;
+					}, "500");
+				}, "500");
+			},
+
+			setPet(selectedPet) {
+				const self = this;
+
+				self.petAnimation = false;
+				//self.currentMoonerName =
+
+				setTimeout(() => {
+					self.petAnimation = true;
+					this.currentPet = selectedPet;
+
+					setTimeout(() => {
+						self.petInitAnimation = true;
+					}, "500");
+				}, "500");
+			},
+
+			setColor(selectedColor) {
+				//this.currentPetColor = selectedColor;
+				this.searchExtraProperty("pet").value.newPetColor = selectedColor;
+			},
+
+			showModal(modalName) {
+				const self = this;
+				// alert(key);
+
+				//var modalName = Object.keys(key)[0];
+				// console.log(modalName);
+
+				if (modalName === "nome") {
+					this.modalName = true;
+				}
+
+				if (modalName.includes("dedicatoria")) {
+					this.modalDedication = true;
+				}
+
+				if (modalName.includes("nome-do-mooner")) {
+					this.modalMooner = true;
+				}
+
+				if (modalName.includes("pet")) {
+					this.modalPet = true;
+				}
+
+				if (modalName.includes("script")) {
+					this.modalScript = true;
+				}
+
+				if (modalName.includes("camisa")) {
+					this.modalShirtNumber = true;
+				}
+				if (modalName.includes("aniversario")) {
+					this.modalBirthdate = true;
+				}
+			},
+
+			showModalName() {
+				this.modalName = true;
+			},
+
+			showModalScript() {
+				this.modalScript = true;
+			},
+
+			showModalDedication() {
+				this.modalDedication = true;
+			},
+
+			showModalShirtNumber() {
+				this.modalShirtNumber = true;
+			},
+
+			showModalBirthdate() {
+				this.modalBirthdate = true;
+			},
+
+			showModalPet() {
+				const self = this;
+
+				//
+			},
+
+			searchExtraProperty(propertyName) {
+				const self = this;
+				var returnProperty = null;
+
+				Object.keys(self.extras).forEach(function(property) {
+					//if()
+					// if (self.extras[property].type.includes(propertyName)) {
+					// 	returnProperty = self.extras.properties[property];
+					// }
+					//console.log(property + " - " + self.extras.properties[property]);
+				});
+
+				return returnProperty;
+			},
+
+			searchCategoryProperty(categories, propertyName) {
+				const self = this;
+				var returnProperty = null;
+
+				Object.keys(categories).forEach(function(category) {
+					if (categories[category].code.includes(propertyName)) {
+						returnProperty = categories[category];
+					}
+					console.log(category + " - " + categories[category]);
+				});
+
+				return returnProperty;
+			},
+
+			async getTreeList() {
+				const self = this;
+
+				// Todo Guto
+				return axios
+					.get(
+						this.lang.urlBuilder +
+							"/api/characters/" +
+							self.character_id +
+							"/categories/assets/treelist?character_type_id=" +
+							self.type_id +
+							"&product_id=" +
+							parseInt(self.product_id) +
+							"&character_position_id=" +
+							parseInt(self.character_position_id)
+					)
+					.then(function(response) {
+						//console.log(response);
+
+						// self.listPet =
+						// 	response.data.character_categories_assets[0].categories[5];
+						var customList = null;
+
+						response.data.character_categories_assets[0].categories.forEach(
+							(itemCategory) => {
+								if (itemCategory.code.includes("mooner")) {
+									customList = itemCategory;
+									self.modalMooner = true;
+								}
+							}
+						);
+
+						self.extras.forEach((itemProperty) => {
+							if (itemProperty.code.includes("nome-do-mooner")) {
+								self.listMooner = customList;
+							}
+
+							if (itemProperty.code.includes("pet")) {
+								self.listPet = customList;
+							}
+						});
+					})
+
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			closeModal() {
+				this.modalScript = false;
+				this.modalName = false;
+				this.modalDedication = false;
+				this.modalShirtNumber = false;
+				this.modalPet = false;
+				this.modalMooner = false;
+				this.modalBirthdate = false;
+			},
+
+			setCurrentLayout(layoutId) {
+				this.currentLayout = layoutId;
+				this.firstBookSelected = true;
+			},
+
+			initMounted() {
+				const self = this;
+
+				axios
+					.get(this.lang.urlBuilder + "/api/products/info/" + self.product_id)
+					.then(function(response) {
+						self.pageNum = response.data.product.pages;
+						self.isPagesNumLoaded = true;
+						self.availableLayouts = response.data.product.layout;
+
+						// Gender
+						if (self.gender) {
+							self.type_id = response.data.product.type.filter((el) => {
+								return el.code === self.gender;
+							});
+						}
+
+						var properties = response.data.product.properties;
+						self.extras = []; //response.data.product.extra;
+
+						properties.forEach((itemProperty) => {
+							if (itemProperty.property.code === "nome") {
+								itemProperty.property.value = self.current_name;
+							}
+
+							if (itemProperty.property.code === "dedicatoria") {
+								itemProperty.property.value = self.dedication_text;
+							}
+
+							self.extras.push(itemProperty.property);
+						});
+
+						self.type_id = self.type_id[0].id;
+
+						self.getTreeList();
+					})
+
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			// changeDedication() {
+			// 	const self = this;
+			// 	self.callingLayout = true;
+			// 	self.closeModal();
+			// 	self.isLoadingMethod(false);
+
+			// 	let request = {
+			// 		uuid: self.uuid,
+			// 		dedication: self.dedicationText,
+			// 	};
+
+			// 	axios
+			// 		.post(
+			// 			this.lang.urlBuilder + "/api/customs_characters/updateDedication",
+			// 			request
+			// 			// {
+			// 			//   headers: {
+			// 			//     // remove headers
+			// 			//   }
+			// 			// }
+			// 		)
+			// 		.then(function(response) {
+			// 			//alert(response.data.custom.uuid);
+
+			// 			self.changeUuid(response.data.custom.uuid);
+			// 			// self.callingLayout = true
+			// 			//self.closeModal()
+			// 			// self.isLoadingMethod(false)
+			// 		})
+			// 		.catch(function(error) {
+			// 			//self.isCallingAll = false;
+			// 			alert("Erro ao atualizar a dedicatória");
+			// 			//self.closeModal();
+			// 		});
+			// },
+
+			changeMoonerLayout() {
+				const self = this;
+				self.callingLayout = true;
+				self.closeModal();
+				self.isLoadingMethod(false);
+
+				let request = {
+					custom_character: {
+						character_id: self.character_id,
+						product_id: self.product_id,
+						type_id: self.type_id,
+						user_data: {
+							type: self.type_id,
+							properties: {
+								nome: {
+									code: "nome",
+									property_id: 24,
+									value: self.current_character_name,
+								},
+								dedicatoria: {
+									code: "dedicatoria",
+									property_id: 26,
+									value: self.dedicationText,
+								},
+							},
+						},
+						uuid: self.uuid,
+					},
+				};
+
+				if (self.currentMooner) {
+					///var property = self.searchExtraProperty("nome-do-mooner");
+					self.extras.forEach((itemProperty) => {
+						if (itemProperty.code.includes("nome-do-mooner")) {
+							var itemNovo = {
+								property_id: itemProperty.id,
+								value: self.currentMoonerName,
+								code: itemProperty.code,
+							};
+
+							itemProperty.value = self.currentMoonerName;
+
+							request.custom_character.user_data.properties[
+								itemProperty.code
+							] = itemNovo;
+						}
+					});
+				}
+
+				//var data_custom;
+
+				// Envio da custom porperties dynamic
+				axios
+					.post(
+						this.lang.urlBuilder +
+							"/api/customs_characters/changePropertiesDynamic",
+						request
+					)
+					.then(function(response) {
+						self.custom = JSON.parse(response.data.custom.customCharacter.data);
+
+						var haveMooney = false;
+						var petProperty = null;
+
+						self.custom.categories.forEach((itemProperty) => {
+							if (itemProperty.parent_id === self.currentMooner.parent_id) {
+								haveMooney = true;
+
+								var indexOfCategory = self.custom.categories.indexOf(
+									itemProperty
+								);
+
+								self.custom.categories[indexOfCategory] = {
+									parent_id: self.currentMooner.parent_id,
+									id: self.currentMooner.id,
+								};
+							}
+						});
+
+						if (haveMooney === false) {
+							petProperty = {
+								parent_id: self.currentMooner.parent_id,
+								id: self.currentMooner.id,
+							};
+
+							self.custom.categories.push(petProperty);
+						}
+
+						self.modalMoonerFirstOpen = true;
+						self.sidebarOpen = false;
+
+						self.sendCustomCharacter();
+						//self.changeUuid(response.data.custom.uuid);
+					})
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			updateNameAndDedicationCustomCharacter() {
+				const self = this;
+				self.callingLayout = true;
+				self.closeModal();
+				self.isLoadingMethod(false);
+
+				let request = {
+					custom_character: {
+						character_id: self.character_id,
+						product_id: self.product_id,
+						type_id: self.type_id,
+						user_data: {
+							type: self.type_id,
+							properties: {
+								nome: {
+									code: "nome",
+									property_id: 24,
+									value: self.current_character_name,
+								},
+								dedicatoria: {
+									code: "dedicatoria",
+									property_id: 26,
+									value: self.dedicationText,
+								},
+							},
+						},
+						uuid: self.uuid,
+					},
+				};
+
+				if (self.currentMooner) {
+					///var property = self.searchExtraProperty("nome-do-mooner");
+					self.extras.forEach((itemProperty) => {
+						if (itemProperty.code.includes("nome-do-mooner")) {
+							var itemNovo = {
+								property_id: itemProperty.id,
+								value: self.currentMoonerName,
+								code: itemProperty.code,
+							};
+
+							itemProperty.value = self.currentMoonerName;
+
+							request.custom_character.user_data.properties[
+								itemProperty.code
+							] = itemNovo;
+						}
+					});
+				}
+
+				axios
+					.post(
+						this.lang.urlBuilder +
+							"/api/customs_characters/changePropertiesDynamic",
+						request
+					)
+					.then(function(response) {
+						self.custom = JSON.parse(response.data.custom.customCharacter.data);
+
+						self.extras.forEach((itemProperty) => {
+							if (itemProperty.code === "nome") {
+								itemProperty.value = self.current_character_name;
+							}
+						});
+
+						self.changeUuid(response.data.custom.uuid);
+					})
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			updateDedicationCustomCharacter() {
+				const self = this;
+				self.callingLayout = true;
+				self.closeModal();
+				self.isLoadingMethod(false);
+
+				let request = {
+					custom_character: {
+						character_id: self.character_id,
+						product_id: self.product_id,
+						type_id: self.type_id,
+						user_data: {
+							type: self.type_id,
+							properties: {
+								dedicatoria: {
+									code: "dedicatoria",
+									property_id: 26,
+									value: self.dedicationText,
+								},
+							},
+						},
+						uuid: self.uuid,
+					},
+				};
+
+				axios
+					.post(
+						this.lang.urlBuilder +
+							"/api/customs_characters/changePropertiesDynamic",
+						request
+					)
+					.then(function(response) {
+						self.custom = JSON.parse(response.data.custom.customCharacter.data);
+
+						self.extras.forEach((itemProperty) => {
+							if (itemProperty.code === "dedicatoria") {
+								itemProperty.value = self.dedicationText;
+							}
+						});
+
+						self.changeUuid(response.data.custom.uuid);
+					})
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			changeLayout() {
+				const self = this;
+				self.callingLayout = true;
+				self.closeModal();
+				self.isLoadingMethod(false);
+
+				let request = {
+					custom_character: {
+						character_id: self.character_id,
+						product_id: self.product_id,
+						type_id: self.type_id,
+						user_data: {
+							type: self.type_id,
+							properties: {
+								nome: {
+									code: "nome",
+									property_id: 24,
+									value: self.current_character_name,
+								},
+								dedicatoria: {
+									code: "dedicatoria",
+									property_id: 26,
+									value: self.dedicationText,
+								},
+							},
+						},
+						uuid: self.uuid,
+					},
+				};
+
+				if (self.searchExtraProperty("nome-do-mooner")) {
+					var property = self.searchExtraProperty("nome-do-mooner");
+
+					var itemProperty = {
+						property_id: property.id,
+						value: property.value,
+						code: property.code,
+					};
+					request.custom_character.user_data.properties[
+						property.code
+					] = itemProperty;
+				}
+
+				var petProperty;
+				var data_custom;
+
+				// Envio da custom porperties dynamic
+				axios
+					.post(
+						this.lang.urlBuilder +
+							"/api/customs_characters/changePropertiesDynamic",
+						request
+					)
+					.then(function(response) {
+						self.custom = JSON.parse(response.data.custom.customCharacter.data);
+
+						petProperty = {
+							parent_id: self.currentPet.parent_id,
+							id: self.currentPetColor.id,
+						};
+
+						self.custom.categories.push(petProperty);
+						//data_custom = self.custom;
+
+						self.sendCustomCharacter();
+						//self.changeUuid(response.data.custom.uuid);
+					})
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			sendCustomCharacter() {
+				const self = this;
+
+				axios // Salvar o custom character
+					.post(this.lang.urlBuilder + "/api/customs_characters", {
+						custom_character: self.custom,
+					})
+					.then(function(response) {
+						//self.custom = JSON.parse(response.data.custom.customCharacter.data);
+						//alert("salvou catiolo");
+						self.changeUuid(response.data.custom.uuid);
+					})
+					.catch(function(error) {
+						console.log(error);
+					});
+			},
+
+			changeUuid(payload) {
+				this.$emit("changeUuid", payload);
+			},
+
+			isLoadingMethod(payload) {
+				this.$emit("isLoadingMethod", payload);
+			},
+
+			validateDays(payload) {
+				const self = this;
+
+				let month = payload.month ? payload.month : this.selectedBirthMonth;
+				const year = payload.year ? payload.year : this.selectedBirthYear;
+
+				if (!month) month = 13;
+
+				let daysMonth;
+				const newDays = [];
+
+				if (
+					month === 1 ||
+					month === 3 ||
+					month === 5 ||
+					month === 7 ||
+					month === 8 ||
+					month === 10 ||
+					month === 12 ||
+					month === 13
+				) {
+					daysMonth = 31;
+				} else if (month === 4 || month === 6 || month === 9 || month === 11) {
+					daysMonth = 30;
+				} else {
+					if ((year % 4 === 0 && year % 100 > 0) || year % 400 === 0) {
+						daysMonth = 29;
+					} else {
+						daysMonth = 28;
+					}
+				}
+
+				if (!month && !year) daysMonth = 31;
+
+				for (let day = 1; day <= daysMonth; day++)
+					newDays.push({ key: day, value: day });
+
+				self.days = newDays;
+			},
+		},
+	};
 </script>
 
-
-<style lang='scss' scoped>
-  @import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
-
-.custom-properties {
-  right: 60px;
-  text-align: left;
-  top: px-size('lg', 120px);
-  max-width: 240px;
-  font-family: $font-family-02;
-  width: 100%;
-  position: absolute;
-  z-index: 3;
-  overflow:initial;
-
-  &.active{
-    z-index: 10;
-  }
-
-  @media (max-width: 990px) {
-    max-width: 100%;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    border-radius: 0;
-    top: 0px;
-    background: transparent;
-    height: 100vh;
-  }
-
-  .list-properties{
-    background-color: #fff;
-    box-shadow: $shadow-level-03;
-    width:100%;
-    background-color: white;
-    border-radius:$border-radius-md;
-    // display: flex;
-    // flex:
-
-    @media(max-width:990px){
-      width: 100%;
-      background-color: white;
-      position: relative;
-      // bottom: 10%;
-      border-radius:0;
-    }
-
-  }
-  .title-custom-properties {
-    padding: px-size('lg', $spacing-inset-xs);
-    border-bottom: $border-width-md solid $color-brand-secondary-medium;
-    width:100%;
-    line-height: 15px;
-
-    span{
-      font-family: $font-family-01;
-      font-size: $font-size-xxs;
-      color:$color-neutral-darkest;
-      // line-height: 14px;
-    }
-  }
-
-  
-
-  .itens-properties {
-    
-    .item {
-      position: relative;
-      padding: px-size('lg', $spacing-inset-xs);
-      border-bottom: 1px solid #dfdae4;
-      cursor: pointer;
-      width:100%;
-
-      svg{
-        position: absolute;
-        right: px-size('lg', $spacing-inset-xxs);
-        top: px-size('lg', 22px);
-        width: 36px;
-      }
-
-      &:last-child {
-        border-bottom: 0px;
-      }
-    }
-
-    label {
-      display: block;
-      width: 100%;
-
-      color: #afa2ba !important;
-      font-size: 12px;
-      margin-bottom: 0px !important;
-    }
-
-    span {
-      display: block;
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden !important;
-      text-overflow: ellipsis;
-      font-size: 14px;
-      color: #68596e;
-    }
-
-    hr {
-      margin: 0 !important;
-      margin-bottom: 10px !important;
-      margin-top: 10px !important;
-    }
-
-    .flex {
-      cursor: pointer;
-      position: relative;
-
-      svg {
-        position: absolute;
-        right: px-size("lg", 0px);
-        top: px-size("lg", 18px);
-      }
-    }
-  }
-}
-
-.layout-boxes {
-  display: flex;
-}
-.layout-option {
-  background: #ffffff;
-  border-radius: px-size("lg", 10px);
-  border: 2px solid transparent;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  position: relative;
-  flex-basis: 100%;
-
-  -webkit-box-shadow: -1px 2px 22px -14px rgba(0, 0, 0, 0.75);
-  -moz-box-shadow: -1px 2px 22px -14px rgba(0, 0, 0, 0.75);
-  box-shadow: -1px 2px 22px -14px rgba(0, 0, 0, 0.75);
-  margin: 1%;
-  overflow: hidden;
-
-  .panel-title {
-    display: flex;
-    padding-bottom: px-size("lg", 10px);
-
-    .title {
-      font-family: $font-family-02;
-      color: $color-neutral-darkest;
-      width: columns("lg", 3);
-
-      justify-content: center;
-      align-self: center;
-      align-items: center;
-      font-size: px-size("lg", $font-size-xxs);
-      padding-left: px-size("lg", 10px);
-    }
-
-    .flag {
-      text-align: center;
-      width: columns("lg", 1);
-
-      .icon {
-        border-radius: 5px;
-        border: solid 2px #e9eaed;
-        background-color: #ffffff;
-        width: px-size("lg", 30px);
-        height: px-size("lg", 30px);
-        display: flex;
-        justify-content: center;
-        align-self: center;
-        align-items: center;
-
-        >>> svg {
-          width: px-size("lg", 30px);
-          height: px-size("lg", 30px);
-
-          path {
-            fill: #e9eaed !important;
-          }
-        }
-      }
-    }
-  }
-
-  &.active {
-    border: 2px solid #01dfa1;
-
-    .panel-title {
-      .title {
-        color: #68596e;
-      }
-
-      .flag {
-        span {
-          border: solid 2px #2dd3d8;
-          background-color: #2dd3d8;
-        }
-
-        >>> svg {
-          path {
-            fill: #fff !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-.pet-view {
-  width: 100%;
-  display: flex;
-
-  //LABEL
-    .pet-label {
-      font-family: $font-family-comp-02;
-      color: $color-neutral-darkest;
-      line-height: $line-height-md;
-      font-size: px-size('lg', $font-size-xs);
-      text-align: left;
-      @include media-breakpoint-down('sm') {
-        font-size: px-size('sm', $font-size-xxs);
-      }
-    }
-}
-
-.pet-selectors {
-  width: 100%;
-  // transition: all 1s ease;
-
-  p {
-    margin: 0px;
-    font-size: px-size("lg", 16px);
-  }
-
-  .input-text-group {
-    padding-bottom: 0px;
-  }
-}
-
-// .pet-avatar {
-//   transition: all 1s ease;
-// }
-
-.pet-list {
-  width: 100%;
-  display: flex;
-  // justify-content: space-between;
-
-  div {
-    margin: px-size("lg", 5px);
-    cursor: pointer;
-    // transition: all 1s ease;
-
-    // &.inactive {
-    //   opacity: 0.5;
-    // }
-  }
-  img {
-    width: 100%;
-  }
-}
-
-.color-list {
-  width: 100%;
-  display: flex;
-}
-
-.color {
-  height: px-size("lg", 40px);
-  width: px-size("lg", 40px);
-  display: block;
-  border-radius: 100%;
-  margin-left: px-size("lg", 6px);
-  margin-right: px-size("lg", 6px);
-  padding: px-size("lg", 3px);
-  border: px-size("lg", 2px) solid #efefef;
-  -webkit-transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-
-  &.is-selected {
-    border-color: #01dfa1;
-  }
-
-  .secondary-color {
-    width: 50%;
-    position: absolute;
-    right: 0px;
-    height: 100%;
-    top: 0px;
-  }
-}
-
-.footer-pet {
-  width: 100%;
-  display: flex;
-
-  .cancel {
-    margin-left: 20px;
-    background-color: none;
-    background-image: none;
-    box-shadow: none;
-    padding: 0px;
-    border-radius: 0px;
-    color: #68596e;
-    background: transparent;
-  }
-}
-
-
-
-.box-dates-columns {
-  display: flex;
-
-  .day {
-    width: columns("lg", 4);
-  }
-
-  .month {
-    padding-left: px-size("lg", $spacing-inset-xs);
-    width: columns("lg", 8);
-  }
-
-}
-  
+<style lang="scss" scoped>
+	@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+
+	::v-deep .modal-pet {
+		background-color: black;
+		.paragraph {
+			span {
+				color: var(--preview-color);
+				font-weight: bold;
+			}
+		}
+	}
+	.main-tool {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+
+		@media (max-width: 990px) {
+			position: relative;
+			width: 100% !important;
+			max-width: 100% !important;
+		}
+
+		.backdrop {
+			//display: none;
+			content: "";
+			width: 100vw;
+			height: 100vh;
+			background: rgba(104, 89, 110, 0);
+			backdrop-filter: blur(0px);
+			position: fixed;
+			transition: all 1s ease;
+			opacity: 0;
+			top: 0px;
+		}
+
+		&.active {
+			z-index: 5;
+			max-width: 100%;
+
+			.backdrop {
+				//display: block;
+				background: rgba(104, 89, 110, 0.8);
+				backdrop-filter: blur(8px);
+				cursor: pointer;
+				opacity: 1;
+
+				@media (max-width: 990px) {
+					display: none;
+				}
+			}
+		}
+
+		&.inactive {
+			z-index: 5;
+			top: 0px;
+			max-width: 48px;
+			right: 0px;
+		}
+	}
+
+	.custom-properties {
+		right: 0px;
+		text-align: left;
+		top: 0;
+		max-width: px-size("lg", 340px);
+		font-family: "Roboto";
+		width: 100%;
+		position: fixed;
+		z-index: 3;
+		overflow: initial;
+		height: 100vh;
+		transition: all 1s ease;
+		transform: translateX(100%);
+
+		@media (max-width: 990px) {
+			max-width: 100%;
+			width: 100%;
+			left: 0;
+			bottom: 0;
+			border-radius: 0;
+			top: 0px;
+			background: transparent;
+			height: 100vh;
+			transform: translateX(0%);
+			position: relative;
+		}
+
+		&.inactive {
+			.icon-close {
+				opacity: 0;
+			}
+
+			.icon-edit {
+				opacity: 1;
+				transform: rotate(0deg);
+			}
+		}
+
+		&.active {
+			z-index: 10;
+			transform: translateX(0%);
+
+			.icon-close {
+				opacity: 1;
+			}
+
+			.icon-edit {
+				opacity: 0;
+				transform: rotate(-180deg);
+			}
+
+			.box-close {
+				background: #fff;
+			}
+		}
+
+		// &:before {
+		// 	content: "";
+		// 	display: block;
+		// 	width: 100vh;
+		// 	height: 100vh;
+		// 	position: fixed;
+		// 	left: 0px;
+		// 	top: 0px;
+		// }
+
+		.list-properties {
+			background-color: #fff;
+			box-shadow: $shadow-level-02;
+			width: 100%;
+			background-color: white;
+			position: relative;
+			// border-radius: $border-radius-md;
+			height: 100vh;
+			z-index: 3;
+			// display: flex;
+			// flex:
+			padding: px-size("lg", $spacing-stack-md) columns("lg", 1);
+
+			@media (max-width: 990px) {
+				width: 100%;
+				background-color: white;
+				position: relative;
+				// bottom: 10%;
+				border-radius: 0;
+			}
+		}
+		.title-custom-properties {
+			padding-bottom: px-size("lg", $spacing-inset-xs) 0px;
+			// border-bottom: $border-width-md solid $color-brand-secondary-medium;
+			width: 100%;
+			line-height: 15px;
+
+			span {
+				font-family: $font-family-01;
+				font-size: $font-size-xxs;
+				color: $color-neutral-darkest;
+				// line-height: 14px;
+			}
+		}
+
+		.itens-properties {
+			.item {
+				position: relative;
+				padding: px-size("lg", $spacing-inset-xs) 0px;
+				border-bottom: 1px solid #dfdae4;
+				cursor: pointer;
+				width: 100%;
+
+				svg {
+					position: absolute;
+					right: px-size("lg", $spacing-inset-xxs);
+					top: px-size("lg", 22px);
+					width: 36px;
+				}
+
+				&:last-child {
+					border-bottom: 0px;
+				}
+			}
+
+			label {
+				display: block;
+				width: 100%;
+
+				color: #afa2ba !important;
+				font-size: 12px;
+				margin-bottom: 0px !important;
+			}
+
+			span {
+				display: block;
+				width: 100%;
+				white-space: nowrap;
+				overflow: hidden !important;
+				text-overflow: ellipsis;
+				font-size: 14px;
+				color: #68596e;
+			}
+
+			hr {
+				margin: 0 !important;
+				margin-bottom: 10px !important;
+				margin-top: 10px !important;
+			}
+
+			.flex {
+				cursor: pointer;
+				position: relative;
+
+				svg {
+					position: absolute;
+					right: px-size("lg", 0px);
+					top: px-size("lg", 18px);
+				}
+			}
+		}
+	}
+
+	.layout-boxes {
+		display: flex;
+	}
+	.layout-option {
+		background: #ffffff;
+		border-radius: px-size("lg", 10px);
+		border: 2px solid transparent;
+		margin-top: 5px;
+		margin-bottom: 5px;
+		cursor: pointer;
+		position: relative;
+		flex-basis: 100%;
+
+		-webkit-box-shadow: -1px 2px 22px -14px rgba(0, 0, 0, 0.75);
+		-moz-box-shadow: -1px 2px 22px -14px rgba(0, 0, 0, 0.75);
+		box-shadow: -1px 2px 22px -14px rgba(0, 0, 0, 0.75);
+		margin: 1%;
+		overflow: hidden;
+
+		.panel-title {
+			display: flex;
+			padding-bottom: px-size("lg", 10px);
+
+			.title {
+				font-family: $font-family-02;
+				color: $color-neutral-darkest;
+				width: columns("lg", 3);
+
+				justify-content: center;
+				align-self: center;
+				align-items: center;
+				font-size: px-size("lg", $font-size-xxs);
+				padding-left: px-size("lg", 10px);
+			}
+
+			.flag {
+				text-align: center;
+				width: columns("lg", 1);
+
+				.icon {
+					border-radius: 5px;
+					border: solid 2px #e9eaed;
+					background-color: #ffffff;
+					width: px-size("lg", 30px);
+					height: px-size("lg", 30px);
+					display: flex;
+					justify-content: center;
+					align-self: center;
+					align-items: center;
+
+					>>> svg {
+						width: px-size("lg", 30px);
+						height: px-size("lg", 30px);
+
+						path {
+							fill: #e9eaed !important;
+						}
+					}
+				}
+			}
+		}
+
+		&.active {
+			border: 2px solid #01dfa1;
+
+			.panel-title {
+				.title {
+					color: #68596e;
+				}
+
+				.flag {
+					span {
+						border: solid 2px #2dd3d8;
+						background-color: #2dd3d8;
+					}
+
+					>>> svg {
+						path {
+							fill: #fff !important;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.pet-view {
+		width: 100%;
+		display: flex;
+
+		//LABEL
+		.pet-label {
+			font-family: $font-family-comp-02;
+			color: $color-neutral-darkest;
+			line-height: $line-height-md;
+			font-size: px-size("lg", $font-size-xs);
+			text-align: left;
+			margin-top: px-size("lg", $spacing-stack-md);
+			display: block;
+			@include media-breakpoint-down("sm") {
+				font-size: px-size("sm", $font-size-xxs);
+			}
+		}
+	}
+
+	.pet-selectors {
+		width: 100%;
+		// transition: all 1s ease;
+
+		p {
+			margin: 0px;
+			font-size: px-size("lg", 16px);
+		}
+
+		.input-text-group {
+			padding-bottom: 0px;
+		}
+	}
+
+	// .pet-avatar {
+	//   transition: all 1s ease;
+	// }
+
+	.pet-list {
+		width: 100%;
+		display: flex;
+		// justify-content: space-between;
+
+		div {
+			margin: px-size("lg", 5px);
+			cursor: pointer;
+			// transition: all 1s ease;
+
+			// &.inactive {
+			//   opacity: 0.5;
+			// }
+		}
+
+		.inactive {
+			opacity: 0.3;
+		}
+		img {
+			width: 100%;
+		}
+	}
+
+	.color-list {
+		width: 100%;
+		display: flex;
+	}
+
+	.color {
+		height: px-size("lg", 40px);
+		width: px-size("lg", 40px);
+		display: block;
+		border-radius: 100%;
+		margin-left: px-size("lg", 6px);
+		margin-right: px-size("lg", 6px);
+		padding: px-size("lg", 3px);
+		border: px-size("lg", 2px) solid #efefef;
+		-webkit-transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		position: relative;
+		overflow: hidden;
+		cursor: pointer;
+
+		&.is-selected {
+			border-color: #01dfa1;
+		}
+
+		.secondary-color {
+			width: 50%;
+			position: absolute;
+			right: 0px;
+			height: 100%;
+			top: 0px;
+		}
+	}
+
+	.footer-pet {
+		width: 100%;
+		display: flex;
+
+		.cancel {
+			margin-left: 20px;
+			background-color: none;
+			background-image: none;
+			box-shadow: none;
+			padding: 0px;
+			border-radius: 0px;
+			color: #68596e;
+			background: transparent;
+		}
+	}
+
+	.box-dates-columns {
+		display: flex;
+
+		.day {
+			width: columns("lg", 4);
+		}
+
+		.month {
+			padding-left: px-size("lg", $spacing-inset-xs);
+			width: columns("lg", 8);
+		}
+	}
+
+	.box-close {
+		width: px-size("lg", 52px);
+		height: px-size("lg", 48px);
+		top: px-size("lg", $spacing-stack-sm);
+		background: var(--preview_color);
+		box-shadow: $shadow-level-02;
+		position: absolute;
+		left: px-size("lg", -48px);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 2;
+		border-radius: 50% 0px 0px 50%;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		animation-delay: 0.5s;
+
+		@include media-breakpoint-down("sm") {
+			display: none;
+		}
+
+		.icon {
+			width: px-size("lg", $icon-size-lg);
+			height: px-size("lg", $icon-size-lg);
+			position: absolute;
+			transition: all 0.5s ease;
+			animation-delay: 0.5s;
+		}
+	}
+
+	::v-deep .mooner-footer {
+		button {
+			@media (max-width: 990px) {
+				width: 100% !important;
+				text-align: center;
+
+				div {
+					width: 100%;
+					text-align: center !important;
+					display: block !important;
+				}
+			}
+		}
+	}
+
+	::v-deep .name-footer {
+		@media (max-width: 990px) {
+			button {
+				width: 100% !important;
+				text-align: center;
+
+				div {
+					width: 100%;
+					text-align: center !important;
+					display: block !important;
+				}
+			}
+		}
+	}
+
+	::v-deep .dedication-footer {
+		@media (max-width: 990px) {
+			button {
+				width: 100% !important;
+				text-align: center;
+
+				div {
+					width: 100%;
+					text-align: center !important;
+					display: block !important;
+				}
+			}
+		}
+	}
+
+	.pet-combo-list {
+		display: flex;
+		flex-wrap: wrap;
+
+		@media (max-width: 990px) {
+			flex-direction: column-reverse;
+		}
+
+		.selected-pet {
+			width: 0%;
+			// height: 320px;
+			transition: width 0.5s;
+			max-height: px-size("lg", 200px);
+			.clip-mooney {
+				max-height: px-size("lg", 244px);
+				overflow: hidden;
+				display: block;
+
+				@media (max-width: 990px) {
+					max-height: px-size("sm", 244px);
+					overflow: hidden;
+					display: flex;
+				}
+
+				img {
+					@media (max-width: 990px) {
+						max-width: 80%;
+						margin: 0 auto;
+						margin-top: -(px-size("lg", 20px));
+					}
+				}
+			}
+
+			img {
+				margin-top: -(px-size("lg", 20px));
+				opacity: 0;
+			}
+
+			&.active {
+				width: 40%;
+
+				@media (max-width: 990px) {
+					width: 100%;
+				}
+			}
+		}
+
+		.pet-list {
+			transition: all 0.5s;
+			width: 60%;
+			align-items: center;
+			display: flex;
+
+			@media (max-width: 990px) {
+				width: 100%;
+			}
+
+			&.inactive {
+				width: 100%;
+			}
+		}
+	}
+
+	.fade-in-image-init {
+		transition: all 0.5s;
+		opacity: 1 !important;
+	}
+
+	.fade-in-image {
+		animation: fadeIn 0.5s;
+		-webkit-animation: fadeIn 0.5s;
+		-moz-animation: fadeIn 0.5s;
+		-o-animation: fadeIn 0.5s;
+		-ms-animation: fadeIn 0.5s;
+
+		// img {
+		// 	opacity: 1 !important;
+		// }
+	}
+
+	@keyframes fadeIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-moz-keyframes fadeIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-webkit-keyframes fadeIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-o-keyframes fadeIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-ms-keyframes fadeIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
 </style>