@wizishop/angular-components 0.0.233 → 0.0.234

package/angular-components.scss

@@ -4212,11 +4212,6 @@ span.wac-tooltip {
         color: $wac-white;
       }
     }
-
-    .wac-button__tooltips {
-      background-color: $wac-wizishop-blue-button!important;
-      color: $white!important;
-    }
   }
 
   &.animationText {
@@ -4419,59 +4414,6 @@ span.wac-tooltip {
       background-color: $wac-main-text;
     }
 
-    .wac-button__tooltips {
-      background-color: $wac-main-text-lighten!important;
-      color: $wac-white!important;
-
-      &.right {
-        &:before {
-          border-color: transparent $wac-main-text-lighten transparent transparent;
-        }
-      }
-
-      &.left {
-        &:before {
-          border-color: transparent transparent transparent $wac-main-text-lighten;
-        }
-      }
-
-      &.top-center {
-        &:before {
-          border-color: $wac-main-text-lighten transparent transparent transparent;
-        }
-      }
-
-      &.top-right {
-        &:before {
-          border-color: $wac-main-text-lighten transparent transparent transparent;
-        }
-      }
-
-      &.top-left {
-        &:before {
-          border-color: $wac-main-text-lighten transparent transparent transparent;
-        }
-      }
-
-      &.bottom-center {
-        &:before {
-          border-color: transparent transparent $wac-main-text-lighten transparent;
-        }
-      }
-
-      &.bottom-right {
-        &:before {
-          border-color: transparent transparent $wac-main-text-lighten transparent;
-        }
-      }
-
-      &.bottom-left {
-        &:before {
-          border-color: transparent transparent $wac-main-text-lighten transparent;
-        }
-      }
-    }
-
     &:hover,
     &.hover {
       background-color: $wac-main-text-lighten;
@@ -4755,59 +4697,6 @@ span.wac-tooltip {
       background-color: $wac-background-color-darken;
     }
 
-    .wac-button__tooltips {
-      background-color: $wac-background-color-darken!important;
-      color: $wac-main-text!important;
-
-      &.right {
-        &:before {
-          border-color: transparent $wac-background-color-darken transparent transparent;
-        }
-      }
-
-      &.left {
-        &:before {
-          border-color: transparent transparent transparent $wac-background-color-darken;
-        }
-      }
-
-      &.top-center {
-        &:before {
-          border-color: $wac-background-color-darken transparent transparent transparent;
-        }
-      }
-
-      &.top-right {
-        &:before {
-          border-color: $wac-background-color-darken transparent transparent transparent;
-        }
-      }
-
-      &.top-left {
-        &:before {
-          border-color: $wac-background-color-darken transparent transparent transparent;
-        }
-      }
-
-      &.bottom-center {
-        &:before {
-          border-color: transparent transparent $wac-background-color-darken transparent;
-        }
-      }
-
-      &.bottom-right {
-        &:before {
-          border-color: transparent transparent $wac-background-color-darken transparent;
-        }
-      }
-
-      &.bottom-left {
-        &:before {
-          border-color: transparent transparent $wac-background-color-darken transparent;
-        }
-      }
-    }
-
     .wac-button__wrapper, .wac-button__animation {
       color: $wac-second-color;
       transition: color 0.3s ease-in-out;
@@ -4872,58 +4761,6 @@ span.wac-tooltip {
       background-color: $wac-primary-button-darken;
     }
 
-    .wac-button__tooltips {
-      background-color: $wac-primary-button-darken!important;
-      color: $wac-white!important;
-      &.right {
-        &:before {
-          border-color: transparent $wac-primary-button-darken transparent transparent;
-        }
-      }
-
-      &.left {
-        &:before {
-          border-color: transparent transparent transparent $wac-primary-button-darken;
-        }
-      }
-
-      &.top-center {
-        &:before {
-          border-color: $wac-primary-button-darken transparent transparent transparent;
-        }
-      }
-
-      &.top-right {
-        &:before {
-          border-color: $wac-primary-button-darken transparent transparent transparent;
-        }
-      }
-
-      &.top-left {
-        &:before {
-          border-color: $wac-primary-button-darken transparent transparent transparent;
-        }
-      }
-
-      &.bottom-center {
-        &:before {
-          border-color: transparent transparent $wac-primary-button-darken transparent;
-        }
-      }
-
-      &.bottom-right {
-        &:before {
-          border-color: transparent transparent $wac-primary-button-darken transparent;
-        }
-      }
-
-      &.bottom-left {
-        &:before {
-          border-color: transparent transparent $wac-primary-button-darken transparent;
-        }
-      }
-    }
-
     &:hover,
     &.hover {
       background-color: $wac-primary-button-darken;
@@ -4988,58 +4825,6 @@ span.wac-tooltip {
       background-color: $wac-green-color-darken;
     }
 
-    .wac-button__tooltips {
-      background-color: $wac-green-color-darken!important;
-      color: $wac-white!important;
-      &.right {
-        &:before {
-          border-color: transparent $wac-green-color-darken transparent transparent;
-        }
-      }
-
-      &.left {
-        &:before {
-          border-color: transparent transparent transparent $wac-green-color-darken;
-        }
-      }
-
-      &.top-center {
-        &:before {
-          border-color: $wac-green-color-darken transparent transparent transparent;
-        }
-      }
-
-      &.top-right {
-        &:before {
-          border-color: $wac-green-color-darken transparent transparent transparent;
-        }
-      }
-
-      &.top-left {
-        &:before {
-          border-color: $wac-green-color-darken transparent transparent transparent;
-        }
-      }
-
-      &.bottom-center {
-        &:before {
-          border-color: transparent transparent $wac-green-color-darken transparent;
-        }
-      }
-
-      &.bottom-right {
-        &:before {
-          border-color: transparent transparent $wac-green-color-darken transparent;
-        }
-      }
-
-      &.bottom-left {
-        &:before {
-          border-color: transparent transparent $wac-green-color-darken transparent;
-        }
-      }
-    }
-
     &:hover,
     &.hover {
       background-color: $wac-green-color-darken;
@@ -5211,9 +4996,10 @@ span.wac-tooltip {
   &__tooltips {
     position: absolute;
     width: auto;
-    padding: 10px;
-    background: $wizishop-blue;
-    color: $white;
+    padding: 8px;
+    border-radius: 3px;
+    background: $wac-second-color !important;
+    color: $wac-white;
     min-width: 100%;
     visibility: hidden;
     font-size: 14px;
@@ -5231,25 +5017,25 @@ span.wac-tooltip {
 
     &:before {
       content: '';
-      display: block;
+      display: none!important;
       position: absolute;
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 10px 10px 0 10px;
-      border-color: $wizishop-blue transparent transparent transparent;
+      border-color: transparentize($wac-second-color, .1) transparent transparent transparent;
     }
 
     &.right {
       left: 100%;
-      transform: translate(20px, -50%);
+      transform: translate(10px, -50%);
       top: 50%;
       &:before {
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 10px 10px 10px 0;
-        border-color: transparent $wizishop-blue transparent transparent;
+        border-color: transparent transparentize($wac-second-color, .1) transparent transparent;
         right: 100%;
         top: 50%;
         transform: translateY(-50%);
@@ -5258,14 +5044,14 @@ span.wac-tooltip {
 
     &.left {
       right: 100%;
-      transform: translate(-20px, -50%);
+      transform: translate(-10px, -50%);
       top: 50%;
       &:before {
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 10px 0 10px 10px;
-        border-color: transparent transparent transparent $wizishop-blue;
+        border-color: transparent transparent transparent transparentize($wac-second-color, .1);
         left: 100%;
         top: 50%;
         transform: translateY(-50%);
@@ -5274,7 +5060,7 @@ span.wac-tooltip {
 
     &.top-center {
       left: 50%;
-      transform: translate(-50%, -20px);
+      transform: translate(-50%, -10px);
       bottom: 100%;
       &:before {
         left: 50%;
@@ -5285,7 +5071,7 @@ span.wac-tooltip {
 
     &.top-right {
       right: 0;
-      transform: translate(0, -20px);
+      transform: translate(0, -10px);
       bottom: 100%;
       &:before {
         right: 10px;
@@ -5295,7 +5081,7 @@ span.wac-tooltip {
 
     &.top-left {
       left: 0;
-      transform: translate(0, -20px);
+      transform: translate(0, -10px);
       bottom: 100%;
       &:before {
         left: 10px;
@@ -5305,14 +5091,14 @@ span.wac-tooltip {
 
     &.bottom-center {
       left: 50%;
-      transform: translate(-50%, 20px);
+      transform: translate(-50%, 10px);
       top: 100%;
       &:before {
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 10px 10px 10px;
-        border-color: transparent transparent $wizishop-blue transparent;
+        border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
         right: auto;
         top: auto;
         left: 50%;
@@ -5323,14 +5109,14 @@ span.wac-tooltip {
 
     &.bottom-right {
       right: 0;
-      transform: translate(0, 20px);
+      transform: translate(0, 10px);
       top: 100%;
       &:before {
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 10px 10px 10px;
-        border-color: transparent transparent $wizishop-blue transparent;
+        border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
         top: auto;
         right: 10px;
         bottom: 100%;
@@ -5339,14 +5125,14 @@ span.wac-tooltip {
 
     &.bottom-left {
       left: 0;
-      transform: translate(0, 20px);
+      transform: translate(0, 10px);
       top: 100%;
       &:before {
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 10px 10px 10px;
-        border-color: transparent transparent $wizishop-blue transparent;
+        border-color: transparent transparent transparentize($wac-second-color, .1) transparent;
         right: auto;
         top: auto;
         left: 10px;
@@ -5359,7 +5145,7 @@ span.wac-tooltip {
     .wac-button {
       &__tooltips {
         visibility: visible;
-        opacity: 1;
+        opacity: .9;
         transition: opacity .3s ease .05s, visibility 0s linear 0s;
       }
     }

package/bundles/wizishop-angular-components.umd.js

@@ -4515,6 +4515,8 @@
         function ContentWithButtonsComponent() {
             this.iconCopy = 'fa-duotone fa-copy';
             this.iconTranslate = 'fa-regular fa-globe';
+            this.tooltipCopy = '';
+            this.tooltipTranslate = '';
             this.count = true;
             this.countCharacterLabel = 'caractères';
             this.countWordsLabel = 'mots';
@@ -4549,12 +4551,14 @@
     ContentWithButtonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-content-with-buttons',
-                    template: "<div class=\"wac-content-with-buttons\">\n  <div class=\"wac-content-with-buttons__text\">\n    <div id=\"{{randomLabelName}}\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"wac-content-with-buttons__text__count\" *ngIf=\"count && countIsReady\">\n      <span>{{ countWords }} {{ countWordsLabel }} - {{ countCharacter }} {{ countCharacterLabel }}</span>\n      <span><wac-link (click)=\"$event.preventDefault();\" (mousedown)=\"$event.preventDefault();eventReport();\" fontSize=\"12px\">{{ reportLabel }}</wac-link></span>\n    </div>\n  </div>\n  <div class=\"wac-content-with-buttons__cta\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconTranslate\"  (click)=\"eventTranslate()\"></wac-button></div>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-content-with-buttons\">\n  <div class=\"wac-content-with-buttons__text\">\n    <div id=\"{{randomLabelName}}\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"wac-content-with-buttons__text__count\" *ngIf=\"count && countIsReady\">\n      <span>{{ countWords }} {{ countWordsLabel }} - {{ countCharacter }} {{ countCharacterLabel }}</span>\n      <span><wac-link (click)=\"$event.preventDefault();\" (mousedown)=\"$event.preventDefault();eventReport();\" fontSize=\"12px\">{{ reportLabel }}</wac-link></span>\n    </div>\n  </div>\n  <div class=\"wac-content-with-buttons__cta\">\n    <div><wac-button extraClasses=\"is-blue opacity static-width\"  [iconFontSize]=\"18\" [icon]=\"iconCopy\" (click)=\"eventCopy()\" [tooltip]=\"tooltipCopy\" [tooltipPosition]=\"'top-center'\" [tooltipWidth]=\"'150px'\"></wac-button></div>\n    <div><wac-button extraClasses=\"is-green opacity static-width\" [iconFontSize]=\"18\" [icon]=\"iconTranslate\" [tooltip]=\"tooltipTranslate\" [tooltipPosition]=\"'top-center'\" [tooltipWidth]=\"'150px'\" (click)=\"eventTranslate()\"></wac-button></div>\n  </div>\n</div>\n"
                 },] }
     ];
     ContentWithButtonsComponent.propDecorators = {
         iconCopy: [{ type: i0.Input }],
         iconTranslate: [{ type: i0.Input }],
+        tooltipCopy: [{ type: i0.Input }],
+        tooltipTranslate: [{ type: i0.Input }],
         count: [{ type: i0.Input }],
         countCharacterLabel: [{ type: i0.Input }],
         countWordsLabel: [{ type: i0.Input }],