toggle-components-library 1.36.1-beta.1 → 1.36.1-beta.3

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.36.1-beta.1",
+  "version": "1.36.1-beta.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.1-beta.1",
+    "version": "1.36.1-beta.3",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/buttons/ToggleMetricsButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size]" :style="styles" @click="click">
+    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size, {'toggle-metrics-button-disabled': disabled }]" :style="styles" @click="click" :disabled="disabled">
         <div :class="icon" :style="styles ? 'background-color:' + styles.color : ''"></div>
         <slot>{{buttonText}}</slot>
     </button>
@@ -36,6 +36,10 @@
           type: Object,
           required: false,
         },
+        disabled: {
+          type: Boolean,
+          default: false
+        }
       },
       methods: {
         click() {

package/src/components/cards/ToggleCommentCard.vue

@@ -2,7 +2,7 @@
   <div class="toggle-comment-card">
     <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
       <div class="toggle-comment-card-text">
-        <p>"{{ displayComment }}"</p>
+        <p>"{{ comment }}"</p>
       </div>
       <div class="toggle-comment-card-name">
         <slot name="button_contacts"></slot>
@@ -50,10 +50,7 @@ export default {
         (this.cardIndex / this.totalCards) * colorPalette.length
       );
       return colorPalette[paletteIndex];
-    },
-    displayComment() {
-        return this.comment.length > 420 ? this.comment.substring(0, 420) + "..." : this.comment;
-    },
+    }
   }
 };
 </script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -1,5 +1,5 @@
 <template>
-    <swiper-slide class="toggle-carousel-slide" :style="'width:' + slideWidth + '; height:' + slideHeight">
+    <swiper-slide class="toggle-carousel-slide">
         <slot></slot>
     </swiper-slide>
 </template>

package/src/sass/includes/_as_buttons.scss

@@ -462,6 +462,15 @@
     }
 }
 
+.toggle-metrics-button-disabled {
+    opacity: 0.3;
+    cursor: default;
+
+    .heatmap-icon, .email-icon, .contacts-icon {
+        transform: none !important;
+    }
+}
+
 .toggle-button-booster-badge {
     display: flex;
     align-items: center;

package/src/sass/includes/_as_cards.scss

@@ -170,7 +170,6 @@
     width: 100%;
     height: 250px;
     border-radius: 18px;
-    padding-right: 20px;
     font-size: $toggle-font-size-regular;
     font-family: $toggle-font-family;
 }
@@ -187,6 +186,11 @@
     .toggle-comment-card-text {
         text-align: justify;
         line-height: 1.5rem;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 6;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        display: -webkit-box;
 
         p {
             margin: 0

package/src/sass/includes/_as_navs.scss

@@ -4,7 +4,7 @@
 
 .toggle-sidenav-container {
   font-size: $toggle-font-size-regular;
-  width: 25%;
+  width: 20%;
   float: left;
   max-width: 280px;
   min-height: 100vh;
@@ -134,7 +134,7 @@
   
   line-height: 1rem;
   font-size: $toggle-font-size-regular;
-  width: 25%;
+  width: 20%;
   float: left;
   max-width: 280px;
   min-height: 100vh;