lau-ecom-design-system 1.0.27 → 1.0.29

package/dist/style.css

@@ -1115,58 +1115,10 @@ video {
   display: none;
 }
 
-.dsEcom-container {
-  width: 100%;
-}
-
-@media (min-width: 320px) {
-  .dsEcom-container {
-    max-width: 320px;
-  }
-}
-
-@media (min-width: 640px) {
-  .dsEcom-container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .dsEcom-container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .dsEcom-container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .dsEcom-container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .dsEcom-container {
-    max-width: 1536px;
-  }
-}
-
 .dsEcom-pointer-events-none {
   pointer-events: none;
 }
 
-.dsEcom-static {
-  position: static;
-}
-
-.dsEcom-fixed {
-  position: fixed;
-}
-
 .dsEcom-absolute {
   position: absolute;
 }
@@ -1199,10 +1151,6 @@ video {
   right: 0px;
 }
 
-.dsEcom-right-12 {
-  right: 3rem;
-}
-
 .dsEcom-right-4 {
   right: 1rem;
 }
@@ -1227,10 +1175,6 @@ video {
   top: 0.75rem;
 }
 
-.dsEcom-top-4 {
-  top: 1rem;
-}
-
 .dsEcom-top-\[10px\] {
   top: 10px;
 }
@@ -1247,14 +1191,6 @@ video {
   z-index: 50;
 }
 
-.dsEcom-z-\[100\] {
-  z-index: 100;
-}
-
-.dsEcom-z-\[60\] {
-  z-index: 60;
-}
-
 .dsEcom-col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -1268,11 +1204,6 @@ video {
   margin-right: 91px;
 }
 
-.dsEcom-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .dsEcom-my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1310,10 +1241,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.dsEcom-mt-8 {
-  margin-top: 2rem;
-}
-
 .dsEcom-mt-\[2px\] {
   margin-top: 2px;
 }
@@ -1330,10 +1257,6 @@ video {
   display: flex;
 }
 
-.dsEcom-inline-flex {
-  display: inline-flex;
-}
-
 .dsEcom-grid {
   display: grid;
 }
@@ -1351,22 +1274,10 @@ video {
   height: 1px !important;
 }
 
-.dsEcom-h-12 {
-  height: 3rem;
-}
-
-.dsEcom-h-16 {
-  height: 4rem;
-}
-
 .dsEcom-h-4 {
   height: 1rem;
 }
 
-.dsEcom-h-48 {
-  height: 12rem;
-}
-
 .dsEcom-h-5 {
   height: 1.25rem;
 }
@@ -1407,18 +1318,6 @@ video {
   height: auto;
 }
 
-.dsEcom-h-full {
-  height: 100%;
-}
-
-.dsEcom-h-screen {
-  height: 100vh;
-}
-
-.dsEcom-min-h-screen {
-  min-height: 100vh;
-}
-
 .\!dsEcom-w-full {
   width: 100% !important;
 }
@@ -1427,14 +1326,6 @@ video {
   width: 2.5rem;
 }
 
-.dsEcom-w-12 {
-  width: 3rem;
-}
-
-.dsEcom-w-32 {
-  width: 8rem;
-}
-
 .dsEcom-w-4 {
   width: 1rem;
 }
@@ -1447,6 +1338,10 @@ video {
   width: 2rem;
 }
 
+.dsEcom-w-\[212px\] {
+  width: 212px;
+}
+
 .dsEcom-w-\[284px\] {
   width: 284px;
 }
@@ -1459,10 +1354,6 @@ video {
   width: 883px;
 }
 
-.dsEcom-w-\[calc\(100\%-2rem\)\] {
-  width: calc(100% - 2rem);
-}
-
 .dsEcom-w-auto {
   width: auto;
 }
@@ -1475,18 +1366,6 @@ video {
   width: 100%;
 }
 
-.dsEcom-w-screen {
-  width: 100vw;
-}
-
-.dsEcom-max-w-\[500px\] {
-  max-width: 500px;
-}
-
-.dsEcom-flex-1 {
-  flex: 1 1 0%;
-}
-
 .dsEcom-shrink-0 {
   flex-shrink: 0;
 }
@@ -1510,11 +1389,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.dsEcom--rotate-90 {
-  --tw-rotate: -90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .dsEcom-rotate-0 {
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1534,10 +1408,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.dsEcom-transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .dsEcom-cursor-default {
   cursor: default;
 }
@@ -1554,10 +1424,6 @@ video {
   appearance: none;
 }
 
-.dsEcom-grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
 .dsEcom-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -1610,10 +1476,6 @@ video {
   gap: 2rem;
 }
 
-.dsEcom-overflow-hidden {
-  overflow: hidden;
-}
-
 .dsEcom-rounded {
   border-radius: 0.25rem;
 }
@@ -1711,11 +1573,6 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
-.dsEcom-border-neutral-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
-}
-
 .dsEcom-border-neutral-60 {
   border-color: var(--neutral-60);
 }
@@ -1748,21 +1605,6 @@ video {
   background-color: var(--primary-60) !important;
 }
 
-.dsEcom-bg-\[\#00A19C\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 161 156 / var(--tw-bg-opacity, 1));
-}
-
-.dsEcom-bg-\[\#E8F3F3\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(232 243 243 / var(--tw-bg-opacity, 1));
-}
-
-.dsEcom-bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
-
 .dsEcom-bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -1782,19 +1624,10 @@ video {
   background-color: var(--neutral-10);
 }
 
-.dsEcom-bg-neutral-100 {
-  background-color: var(--neutral-100);
-}
-
 .dsEcom-bg-neutral-20 {
   background-color: var(--neutral-20);
 }
 
-.dsEcom-bg-neutral-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
-}
-
 .dsEcom-bg-neutral-40 {
   background-color: var(--neutral-40);
 }
@@ -1828,10 +1661,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.dsEcom-bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .dsEcom-bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1884,10 +1713,6 @@ video {
   padding: 0.25rem;
 }
 
-.dsEcom-p-2 {
-  padding: 0.5rem;
-}
-
 .dsEcom-p-4 {
   padding: 1rem;
 }
@@ -2009,10 +1834,6 @@ video {
   padding-right: 3rem;
 }
 
-.dsEcom-pr-24 {
-  padding-right: 6rem;
-}
-
 .dsEcom-pr-\[44px\] {
   padding-right: 44px;
 }
@@ -2037,24 +1858,10 @@ video {
   font-family: core-font-family-public-sans;
 }
 
-.dsEcom-text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .dsEcom-text-\[12px\] {
   font-size: 12px;
 }
 
-.dsEcom-text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.dsEcom-font-bold {
-  font-weight: 700;
-}
-
 .dsEcom-font-core-font-weight-extrabold {
   font-weight: 800;
 }
@@ -2106,20 +1913,10 @@ video {
   color: var(--neutral-100);
 }
 
-.dsEcom-text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
-}
-
 .dsEcom-text-neutral-60 {
   color: var(--neutral-60);
 }
 
-.dsEcom-text-neutral-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
-}
-
 .dsEcom-text-neutral-70 {
   color: var(--neutral-70);
 }
@@ -2150,26 +1947,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.dsEcom-opacity-0 {
-  opacity: 0;
-}
-
-.dsEcom-opacity-100 {
-  opacity: 1;
-}
-
-.dsEcom-shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.dsEcom-shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .dsEcom-shadow-upc-shadow-prominent {
   --tw-shadow: 0px 8px 48px -6px rgba(89, 89, 89, 0.24);
   --tw-shadow-colored: 0px 8px 48px -6px var(--tw-shadow-color);
@@ -2200,18 +1977,6 @@ video {
   transition-duration: 150ms;
 }
 
-.dsEcom-transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.dsEcom-transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .dsEcom-duration-200 {
   transition-duration: 200ms;
 }
@@ -2224,10 +1989,6 @@ video {
   transition-duration: 0.3s;
 }
 
-.dsEcom-ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -2515,11 +2276,6 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
-.hover\:dsEcom-text-neutral-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
-}
-
 .hover\:dsEcom-text-neutral-70:hover {
   color: var(--neutral-70);
 }
@@ -2618,12 +2374,6 @@ video {
   display: block !important;
 }
 
-@media (min-width: 768px) {
-  .md\:dsEcom-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 @media (min-width: 320px) and (max-width: 1024px) {
   .mobiles\:dsEcom-order-first {
     order: -9999;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lau-ecom-design-system",
   "private": false,
-  "version": "1.0.27",
+  "version": "1.0.29",
   "sourceType": "module",
   "sideEffects": false,
   "main": "dist/lau-ecom-design-system.ssr.js",

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -17,38 +17,55 @@ const props = withDefaults(defineProps<Props>(), {
   categoryCookies: () => {
     return [
       {
+        id: CookieItemKey.essential,
         title: "Esenciales",
         description:
           "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: false,
-        isDisabled: false,
+        isChecked: true,
+        isDisabled: true,
         onToggle: (value: boolean) => {
-          console.log("firstSwitch: " + value);
+          console.log("essentialSwitch: " + value);
         },
       },
       {
+        id: CookieItemKey.preferences,
         title: "Preferencias",
         description:
           "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
         isChecked: false,
         isDisabled: false,
-        onToggle: () => {},
+        onToggle: (value: boolean) => {
+          console.log("preferencesSwitch: " + value);
+        },
       },
       {
         id: CookieItemKey.statistics,
-        title: "Estadisticas",
+        title: "Estadísticas",
         description:
           "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: true,
+        isChecked: false,
         isDisabled: false,
-        onToggle: () => {},
+        onToggle: (value: boolean) => {
+          console.log("statisticsSwitch: " + value);
+        },
       },
       {
         id: CookieItemKey.marketing,
         title: "Marketing",
         description:
           "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: true,
+        isChecked: false,
+        isDisabled: false,
+        onToggle: (value: boolean) => {
+          console.log("marketingSwitch: " + value);
+        },
+      },
+      {
+        id: CookieItemKey.marketingPersonalization,
+        title: "Personalización de Marketing",
+        description:
+          "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
+        isChecked: false,
         isDisabled: false,
         onToggle: () => {},
       },
@@ -117,18 +134,26 @@ const handleAcceptAll = () => {
 
 <template>
   <div v-if="isBannerVisible">
-    <div v-if="!isConfigOpen" class="lau-ecom-cookies lau-ecom-cookies--upc">
+    <div 
+      v-if="!isConfigOpen" 
+      class="lau-ecom-cookies lau-ecom-cookies--upc"
+    >
       <p class="lau-ecom-text lau-ecom-text--upc core-font-body-reg-04-16px">
         Este sitio web utiliza cookies gracias a esto podemos personalizar los
         ingresos a la web en futuras visitas y brindarte una mejor experiencia
         dentro de nuestro sitio.
         <a class="core-font-link-02-16px dsEcom-text-link-60">Conoce más</a>
+        
       </p>
       <div class="lau-ecom-buttons">
-        <LauEcomTextButton @on-click="handleConfigCookies">
+        <LauEcomTextButton 
+          @on-click="handleConfigCookies"
+        >
           Configurar cookies
         </LauEcomTextButton>
-        <LauEcomButton @on-click="handleAccept"> Aceptar </LauEcomButton>
+        <LauEcomButton class="dsEcom-w-[212px]" @on-click="handleAccept">
+          Aceptar todas las cookies
+        </LauEcomButton>
       </div>
     </div>
     <LauEcomBannerCookiesConfig

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -40,28 +40,51 @@ const handleReject = () => {
 };
 
 const handleAcceptSelected = () => {
-  let analyticsStorageOption;
-  let adStorageOption;
-
-  const analyticsStorageIndex = items.value?.findIndex(
-    (item) => item.id === CookieItemKey.statistics,
-  );
-  if (analyticsStorageIndex) {
-    analyticsStorageOption = items.value![analyticsStorageIndex].isChecked
-      ? CookieOption.granted
-      : CookieOption.denied;
-  }
-
-  const adStorageIndex = items.value?.findIndex(
-    (item) => item.id === CookieItemKey.marketing,
+  let analyticsStorageOption: string = CookieOption.denied;
+  let adStorageOption: string = CookieOption.denied;
+  let preferencesStorageOption: string = CookieOption.denied;
+  let essentialStorageOption: string = CookieOption.granted; // Siempre granted para esenciales
+
+  // Obtener el estado de cada tipo de cookie
+  items.value?.forEach((item) => {
+    console.log('Checking item:', {
+      id: item.id,
+      expectedId: {
+        preferences: CookieItemKey.preferences,
+        statistics: CookieItemKey.statistics,
+        marketing: CookieItemKey.marketing
+      },
+      isChecked: item.isChecked
+    });
+
+    if (item.id === 'functionality_storage') {
+      console.log('Found preferences item:', item);
+      preferencesStorageOption = item.isChecked ? CookieOption.granted : CookieOption.denied;
+      console.log('Set preferencesStorageOption to:', preferencesStorageOption);
+    }
+    if (item.id === 'analytics_storage') {
+      analyticsStorageOption = item.isChecked ? CookieOption.granted : CookieOption.denied;
+    }
+    if (item.id === 'ad_storage') {
+      adStorageOption = item.isChecked ? CookieOption.granted : CookieOption.denied;
+    }
+  });
+
+  console.log('Final values:', {
+    analyticsStorageOption,
+    adStorageOption,
+    preferencesStorageOption,
+    essentialStorageOption,
+    itemsLength: items.value?.length,
+    allItems: items.value
+  });
+
+  acceptCookiesSelected(
+    analyticsStorageOption,    // analytics_storage
+    adStorageOption,          // ad_storage
+    preferencesStorageOption, // functionality_storage
+    essentialStorageOption    // security_storage
   );
-  if (adStorageIndex) {
-    adStorageOption = items.value![adStorageIndex].isChecked
-      ? CookieOption.granted
-      : CookieOption.denied;
-  }
-
-  acceptCookiesSelected(analyticsStorageOption!, adStorageOption!);
   emit("onAcceptSelected");
 };
 
@@ -76,7 +99,9 @@ const handleAcceptAll = () => {
     class="lau-ecom-banner-cookies-config lau-ecom-banner-cookies-config--upc"
   >
     <div class="lau-ecom-config-head lau-ecom-config-head--upc">
-      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
+      <p class="upc-font-subtitle-03-20px">
+        Configuracion de cookies
+      </p>
       <button @click="handleCloseConfig">
         <span><LauEcomCoreIconNavClose /></span>
       </button>

package/src/components/LauEcomIcon/LauEcomUpcIconClose.vue

@@ -23,7 +23,17 @@ withDefaults(
     stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <line x1="18" y1="6" x2="6" y2="18" />
-    <line x1="6" y1="6" x2="18" y2="18" />
+    <line 
+      x1="18" 
+      y1="6" 
+      x2="6" 
+      y2="18" 
+    />
+    <line 
+      x1="6" 
+      y1="6" 
+      x2="18" 
+      y2="18" 
+    />
   </svg>
 </template> 

package/src/components/LauEcomIcon/LauEcomUpcIconSearch.vue

@@ -23,7 +23,16 @@ withDefaults(
     stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <circle cx="11" cy="11" r="8" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    <circle 
+      cx="11" 
+      cy="11" 
+      r="8" 
+    />
+    <line 
+      x1="21" 
+      y1="21" 
+      x2="16.65" 
+      y2="16.65" 
+    />
   </svg>
 </template>