@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

package/src/components/PasswordField/PasswordField.stories.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import PasswordField from './PasswordField.vue'
 
 const meta = {
-	title: 'Composants/Formulaires/Passwordfield',
+	title: 'Composants/Formulaires/PasswordField',
 	component: PasswordField,
 	decorators: [
 		() => ({
@@ -53,11 +53,11 @@ const meta = {
 			control: 'object',
 			description: 'Messages de succès à afficher',
 		},
-		isReadOnly: {
+		readOnly: {
 			control: 'boolean',
 			description: 'Indique si le champ est en lecture seule',
 		},
-		isDisabled: {
+		disabled: {
 			control: 'boolean',
 			description: 'Indique si le champ est désactivé',
 		},
@@ -99,8 +99,8 @@ const meta = {
 		errorMessages: null,
 		warningMessages: null,
 		successMessages: null,
-		isReadOnly: false,
-		isDisabled: false,
+		readOnly: false,
+		disabled: false,
 		placeholder: 'Entrez votre mot de passe',
 		customRules: [],
 		customWarningRules: [],
@@ -162,8 +162,8 @@ export const Default: Story = {
 				:error-messages="args.errorMessages"
 				:warning-messages="args.warningMessages"
 				:success-messages="args.successMessages"
-				:is-read-only="args.isReadOnly"
-				:is-disabled="args.isDisabled"
+				:read-only="args.readOnly"
+				:disabled="args.disabled"
 				:placeholder="args.placeholder"
 				:custom-rules="args.customRules"
 				:custom-warning-rules="args.customWarningRules"
@@ -264,7 +264,7 @@ export const Disabled: Story = {
 					<PasswordField
 						v-model="password"
 						label="Mot de passe"
-						:is-disabled="true"
+						:disabled="true"
 					/>
 				</template>
 				`,
@@ -283,7 +283,7 @@ export const Disabled: Story = {
 		],
 	},
 	args: {
-		isDisabled: true,
+		disabled: true,
 		modelValue: 'MonMotDePasse123',
 	},
 }
@@ -301,7 +301,7 @@ export const ReadOnly: Story = {
 					<PasswordField
 						v-model="password"
 						label="Mot de passe"
-						:is-read-only="true"
+						:read-only="true"
 					/>
 				</template>
 				`,
@@ -320,7 +320,7 @@ export const ReadOnly: Story = {
 		],
 	},
 	args: {
-		isReadOnly: true,
+		readOnly: true,
 		modelValue: 'MonMotDePasse123',
 	},
 }
@@ -832,8 +832,8 @@ export const WithCustomRules: Story = {
 				:color="args.color"
 				:label="args.label"
 				:required="args.required"
-				:is-read-only="args.isReadOnly"
-				:is-disabled="args.isDisabled"
+				:read-only="args.readOnly"
+				:disabled="args.disabled"
 				:placeholder="args.placeholder"
 				:custom-rules="customRules"
 				:show-success-messages="args.showSuccessMessages"

package/src/components/PasswordField/PasswordField.vue

@@ -23,8 +23,8 @@
 		errorMessages?: string[] | null
 		warningMessages?: string[] | null
 		successMessages?: string[] | null
-		isReadOnly?: boolean
-		isDisabled?: boolean
+		readOnly?: boolean
+		disabled?: boolean
 		placeholder?: string
 		customRules?: ValidationRule[]
 		customWarningRules?: ValidationRule[]
@@ -42,8 +42,8 @@
 		errorMessages: null,
 		warningMessages: null,
 		successMessages: null,
-		isReadOnly: false,
-		isDisabled: false,
+		readOnly: false,
+		disabled: false,
 		placeholder: undefined,
 		customRules: () => [],
 		customWarningRules: () => [],
@@ -191,8 +191,8 @@
 		:error-messages="errors"
 		:warning-messages="warnings"
 		:success-messages="successes"
-		:is-read-only="props.isReadOnly"
-		:is-disabled="props.isDisabled"
+		:read-only="props.readOnly"
+		:disabled="props.disabled"
 		:placeholder="props.placeholder"
 		:type="showEyeIcon ? 'text' : 'password'"
 		:display-asterisk="props.displayAsterisk"

package/src/components/PeriodField/PeriodField.stories.ts

@@ -58,7 +58,7 @@ const meta: Meta<typeof PeriodField> = {
 			control: 'boolean',
 			description: 'Icône à la fin du champ',
 		},
-		isDisabled: {
+		disabled: {
 			control: 'boolean',
 			description: 'Désactive le champ',
 		},
@@ -126,7 +126,7 @@ export const Default: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
@@ -182,7 +182,7 @@ export const CustomPlaceholders: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
@@ -210,7 +210,7 @@ export const Disabled: Story = {
 				<template>
 					<PeriodField 
 						v-model="selectedPeriod" 
-						is-disabled
+						disabled
 					/>
 				</template>
 				`,
@@ -236,7 +236,7 @@ export const Disabled: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: true,
+		disabled: true,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
@@ -290,7 +290,7 @@ export const Required: Story = {
 		required: true,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
@@ -344,7 +344,7 @@ export const AppendIcon: Story = {
 		required: true,
 		displayIcon: true,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
@@ -399,7 +399,7 @@ export const WithoutIcon: Story = {
 		required: true,
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},
@@ -456,7 +456,7 @@ export const WithError: Story = {
 		required: true,
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '01/01/2100', to: '05/01/2100' },
 		customRules: [
@@ -521,7 +521,7 @@ export const WithWarning: Story = {
 		required: true,
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '20/12/2023', to: '21/12/2023' },
 		customWarningRules: [
@@ -586,7 +586,7 @@ export const WithSuccess: Story = {
 		dateFormatReturn: '',
 		displayIcon: false,
 		displayAppendIcon: true,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '22/01/2024', to: '23/01/2024' },
 		customRules: [
@@ -669,7 +669,7 @@ export const DifferentFormats: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: '12/10/2023', to: '15/10/2023' },
 	},
@@ -747,7 +747,7 @@ export const WithDateFormatReturn: Story = {
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		modelValue: { from: null, to: null },
 	},

package/src/components/PeriodField/PeriodField.vue

@@ -20,7 +20,7 @@
 		required?: boolean
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
-		isDisabled?: boolean
+		disabled?: boolean
 		noIcon?: boolean
 		noCalendar?: boolean
 		isOutlined?: boolean
@@ -28,6 +28,7 @@
 		customRules?: ValidationRule[]
 		customWarningRules?: ValidationRule[]
 		disableErrorHandling?: boolean
+		readOnly?: boolean
 	}>(), {
 		modelValue: () => ({ from: null, to: null }),
 		placeholderFrom: 'Début',
@@ -38,7 +39,7 @@
 		required: false,
 		displayIcon: true,
 		displayAppendIcon: false,
-		isDisabled: false,
+		disabled: false,
 		noIcon: false,
 		noCalendar: false,
 		isOutlined: true,
@@ -46,6 +47,7 @@
 		customRules: () => [],
 		customWarningRules: () => [],
 		disableErrorHandling: false,
+		readOnly: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -336,7 +338,7 @@
 				:display-icon="props.displayIcon"
 				:error-message="fromDateValidation.hasError"
 				:format="props.format"
-				:is-disabled="props.isDisabled"
+				:disabled="props.disabled"
 				:is-outlined="props.isOutlined"
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
@@ -345,6 +347,7 @@
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
 				:success-message="fromDateValidation.hasSuccess"
+				:read-only="props.readOnly"
 				@closed="handleFromDateClosed"
 			/>
 		</div>
@@ -359,7 +362,7 @@
 				:display-icon="props.displayIcon"
 				:error-message="toDateValidation.hasError"
 				:format="props.format"
-				:is-disabled="props.isDisabled"
+				:disabled="props.disabled"
 				:is-outlined="props.isOutlined"
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
@@ -368,6 +371,7 @@
 				:show-week-number="props.showWeekNumber"
 				:show-success-messages="showSuccessMessagesActual"
 				:success-message="toDateValidation.hasSuccess"
+				:read-only="props.readOnly"
 				@closed="handleToDateClosed"
 			/>
 		</div>

package/src/components/PhoneField/PhoneField.stories.ts

@@ -32,6 +32,7 @@ const meta = {
 		isValidatedOnBlur: { control: 'boolean' },
 		displayAsterisk: { control: 'boolean' },
 		disableErrorHandling: { control: 'boolean' },
+		disabled: { control: 'boolean' },
 	},
 } satisfies Meta<typeof PhoneField>
 
@@ -89,6 +90,9 @@ export const Default: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readOnly: false,
+		disabled: false,
 	},
 	render: (args) => {
 		return {
@@ -109,6 +113,9 @@ export const Default: Story = {
 					:customIndicatifs="args.customIndicatifs"
 					:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 					:isValidatedOnBlur="args.isValidatedOnBlur"
+					:bg-color="args.bgColor"
+					:readOnly="args.readOnly"
+					:disabled="args.disabled"
 				/>
 				</div>
 				<br><br><br><br><br>
@@ -167,6 +174,9 @@ export const Required: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readOnly: false,
+		disabled: false,
 	},
 	render: (args) => {
 		return {
@@ -187,6 +197,9 @@ export const Required: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+     :bg-color="args.bgColor"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
     />
 				</div>
    `,
@@ -202,6 +215,7 @@ export const RequiredWithAsterisk: Story = {
 		...Default.args,
 		required: true,
 		displayAsterisk: true,
+		bgColor: undefined,
 	},
 	parameters: {
 		docs: {
@@ -255,6 +269,9 @@ const phoneNumber = ref('')
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
 						:display-asterisk="args.displayAsterisk"
+						:readOnly="args.readOnly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
 					/>
 				</div>
 			`,
@@ -322,6 +339,9 @@ export const CustomIndicatifs: Story = {
 		],
 		useCustomIndicatifsOnly: true,
 		isValidatedOnBlur: true,
+		bgColor: undefined,
+		readOnly: false,
+		disabled: false,
 	},
 	render: (args) => {
 		return {
@@ -342,6 +362,9 @@ export const CustomIndicatifs: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -399,6 +422,9 @@ export const NotValidatedOnBlur: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -419,6 +445,9 @@ export const NotValidatedOnBlur: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -476,6 +505,9 @@ export const DisplayFormatCode: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -496,6 +528,9 @@ export const DisplayFormatCode: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -553,6 +588,9 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -573,6 +611,9 @@ export const DisplayFormatCodeAbbreviation: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -630,6 +671,9 @@ export const DisplayFormatCodeCountry: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -650,6 +694,9 @@ export const DisplayFormatCodeCountry: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -707,6 +754,9 @@ export const DisplayFormatCountry: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -727,6 +777,9 @@ export const DisplayFormatCountry: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 				</div>
    `,
@@ -784,6 +837,9 @@ export const DisplayFormatAbbreviation: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -804,6 +860,9 @@ export const DisplayFormatAbbreviation: Story = {
      :customIndicatifs="args.customIndicatifs"
      :useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
      :isValidatedOnBlur="args.isValidatedOnBlur"
+	 :readOnly="args.readOnly"
+	 :disabled="args.disabled"
+     :bg-color="args.bgColor"
     />
 							</div>
    `,
@@ -867,6 +926,8 @@ export const DisplayModels: Story = {
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: false,
+		readOnly: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -891,6 +952,9 @@ export const DisplayModels: Story = {
 						:customIndicatifs="args.customIndicatifs"
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
+						:readOnly="args.readOnly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
 					/>
 				</div>
 			`,
@@ -951,6 +1015,9 @@ export const DisabledErrorHandling: Story = {
 		useCustomIndicatifsOnly: false,
 		isValidatedOnBlur: true,
 		disableErrorHandling: true,
+		readOnly: false,
+		disabled: false,
+		bgColor: undefined,
 	},
 	render: (args) => {
 		return {
@@ -974,6 +1041,9 @@ export const DisabledErrorHandling: Story = {
 						:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 						:isValidatedOnBlur="args.isValidatedOnBlur"
 						:disableErrorHandling="args.disableErrorHandling"
+						:readOnly="args.readOnly"
+						:disabled="args.disabled"
+						:bg-color="args.bgColor"
 					/>
 					<div class="mt-6">
 						<h3>Comparaison avec gestion des erreurs activée</h3>
@@ -990,6 +1060,9 @@ export const DisabledErrorHandling: Story = {
 							:useCustomIndicatifsOnly="args.useCustomIndicatifsOnly"
 							:isValidatedOnBlur="args.isValidatedOnBlur"
 							:disableErrorHandling="false"
+							:readOnly="args.readOnly"
+							:disabled="args.disabled"
+							:bg-color="args.bgColor"
 						/>
 					</div>
 				</div>

package/src/components/PhoneField/PhoneField.vue

@@ -33,6 +33,9 @@
 		isValidatedOnBlur: { type: Boolean, default: true },
 		displayAsterisk: { type: Boolean, default: false },
 		disableErrorHandling: { type: Boolean, default: false },
+		bgColor: { type: String, default: undefined },
+		readOnly: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
 	})
 
 	const emit = defineEmits(['update:modelValue', 'update:selectedDialCode', 'change'])
@@ -186,6 +189,9 @@
 			:display-asterisk="props.displayAsterisk"
 			:disable-error-handling="props.disableErrorHandling"
 			:return-object="true"
+			:bg-color="props.bgColor"
+			:read-only="props.readOnly"
+			:disabled="props.disabled"
 			class="custom-select"
 			text-key="displayText"
 			value-key="code"
@@ -203,6 +209,8 @@
 			:success-messages="successes"
 			:variant="outlined ? 'outlined' : 'underlined'"
 			:display-asterisk="props.displayAsterisk"
+			:bg-color="props.bgColor"
+			:disabled="props.disabled"
 			:class="{
 				'phone-field': true,
 				'error-field': hasError,

package/src/components/RangeField/RangeSlider/tests/__snapshots__/rangeSlider.spec.ts.snap

@@ -1,27 +1,90 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`RangeField component > should render the component 1`] = `
-"<div data-v-cfbfc2ef="" class="wrapper">
-  <div data-v-cfbfc2ef="" class="track"><button data-v-cfbfc2ef="" class="thumb-min" style="left: 25%;" role="slider" aria-valuenow="25" tabindex="0" aria-valuemin="0" aria-valuemax="75" aria-orientation="horizontal" aria-label="Minimum" title="Minimum">
-      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
-        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">25</div>
-      </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
-    </button><button data-v-cfbfc2ef="" role="slider" class="thumb-max" style="left: 75%;" aria-valuenow="75" tabindex="0" aria-valuemin="25" aria-valuemax="100" aria-orientation="horizontal" aria-label="Maximum" title="Maximum">
-      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
-        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;">75</div>
-      </div><span data-v-cfbfc2ef="" class="inner-thumb"></span>
+<div class="wrapper">
+  <div class="track">
+    <button
+      aria-label="Minimum"
+      aria-orientation="horizontal"
+      aria-valuemax="75"
+      aria-valuemin="0"
+      aria-valuenow="25"
+      class="thumb-min"
+      role="slider"
+      style="left: 25%;"
+      tabindex="0"
+      title="Minimum"
+    >
+      <div class="tooltip-wrapper">
+        <div
+          class="tooltip"
+          style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;"
+        >
+          25
+        </div>
+      </div>
+      <span class="inner-thumb"></span>
+    </button>
+    <button
+      aria-label="Maximum"
+      aria-orientation="horizontal"
+      aria-valuemax="100"
+      aria-valuemin="25"
+      aria-valuenow="75"
+      class="thumb-max"
+      role="slider"
+      style="left: 75%;"
+      tabindex="0"
+      title="Maximum"
+    >
+      <div class="tooltip-wrapper">
+        <div
+          class="tooltip"
+          style="transform: translateX(calc(-50% + 0px)); transition: transform 0.1s;"
+        >
+          75
+        </div>
+      </div>
+      <span class="inner-thumb"></span>
     </button>
-    <div data-v-cfbfc2ef="" class="fake-thumb thumb-min" aria-hidden="true" style="left: 25%;">
-      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
-        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">25</div>
+    <div
+      aria-hidden="true"
+      class="
+        fake-thumb
+        thumb-min
+      "
+      style="left: 25%;"
+    >
+      <div class="tooltip-wrapper">
+        <div
+          class="tooltip"
+          style="transform: translateX(calc(-50% + 0px));"
+        >
+          25
+        </div>
       </div>
     </div>
-    <div data-v-cfbfc2ef="" class="fake-thumb thumb-max" aria-hidden="true" style="left: 75%;">
-      <div data-v-24e1b71f="" data-v-cfbfc2ef="" class="tooltip-wrapper">
-        <div data-v-24e1b71f="" class="tooltip" style="transform: translateX(calc(-50% + 0px));">75</div>
+    <div
+      aria-hidden="true"
+      class="
+        fake-thumb
+        thumb-max
+      "
+      style="left: 75%;"
+    >
+      <div class="tooltip-wrapper">
+        <div
+          class="tooltip"
+          style="transform: translateX(calc(-50% + 0px));"
+        >
+          75
+        </div>
       </div>
     </div>
-    <div data-v-cfbfc2ef="" class="filled-track" style="left: 25%; width: 50%;"></div>
+    <div
+      class="filled-track"
+      style="left: 25%; width: 50%;"
+    ></div>
   </div>
-</div>"
+</div>
 `;