@wizishop/angular-components 0.0.184 → 0.0.185

package/angular-components.scss

@@ -2170,6 +2170,51 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
+.wac-content-with-buttons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  @include media('<tablet') {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  &__text {
+    width: 100%;
+    &__count {
+      margin: 10px 0 0;
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+      > span {
+        &:first-child {
+          font-size: rem(12);
+          font-style: italic;
+          color: $wac-color-text-grey;
+          line-height: rem(16);
+          display: inline-block;
+          transform: translateY(-3px);
+        }
+        &:last-child {
+          display: inline-block;
+          margin: 0 0 0 20px;
+        }
+      }
+    }
+  }
+  &__cta {
+    display: flex;
+    align-items: center;
+    width: auto;
+   > div {
+     margin: 0 0 0 20px;
+   }
+    @include media('<tablet') {
+      margin: 15px 0 0;
+    }
+  }
+}
 
 .wac-switch {
   input {
@@ -2794,7 +2839,9 @@ $wac-subtitle-color: #7A87A1!default;
           }
         }
         .subtitle {
+          padding: 0 0 0 60px;
           .center & {
+            padding: 0;
             display: flex;
             justify-content: center;
           }

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

@@ -2265,6 +2265,7 @@
         function LinkComponent(renderer2) {
             this.renderer2 = renderer2;
             this.target = '_self';
+            this.fontSize = '14px';
         }
         Object.defineProperty(LinkComponent.prototype, "href", {
             get: function () {
@@ -2299,7 +2300,7 @@
     LinkComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-link',
-                    template: "<a #linkComponent class=\"wac-link\" [ngClass]=\"{ class: class }\" [id]=\"{ id: id }\"><ng-content></ng-content></a>\n"
+                    template: "<a #linkComponent class=\"wac-link\" [style.fontSize]=\"fontSize\" [ngClass]=\"{ class: class }\" [id]=\"{ id: id }\"><ng-content></ng-content></a>\n"
                 },] }
     ];
     LinkComponent.ctorParameters = function () { return [
@@ -2310,6 +2311,7 @@
         target: [{ type: i0.Input }],
         id: [{ type: i0.Input }],
         class: [{ type: i0.Input }],
+        fontSize: [{ type: i0.Input }],
         linkComponent: [{ type: i0.ViewChild, args: ['linkComponent',] }]
     };
 
@@ -4474,18 +4476,56 @@
 
     var ContentWithButtonsComponent = /** @class */ (function () {
         function ContentWithButtonsComponent() {
+            this.iconCopy = 'fa-duotone fa-copy';
+            this.iconTranslate = 'fa-thin fa-globe';
+            this.count = true;
+            this.countCharacterLabel = 'caractères';
+            this.countWordsLabel = 'mots';
+            this.copyAction = new i0.EventEmitter();
+            this.reportAction = new i0.EventEmitter();
+            this.translateAction = new i0.EventEmitter();
+            this.countIsReady = false;
         }
         ContentWithButtonsComponent.prototype.ngOnInit = function () {
+            this.randomLabelName = 'content-' + Math.random() * (900 - 700) + 700;
+        };
+        ContentWithButtonsComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                var content = document.getElementById(_this.randomLabelName).innerHTML.replace(/(<([^>]+)>)/gi, '').replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, '');
+                _this.countCharacter = content.trim().split(' ').join('').length;
+                _this.countWords = content.trim().split(' ').length;
+                _this.countIsReady = true;
+            });
+        };
+        ContentWithButtonsComponent.prototype.eventCopy = function () {
+            this.copyAction.emit(true);
+        };
+        ContentWithButtonsComponent.prototype.eventTranslate = function () {
+            this.translateAction.emit(true);
+        };
+        ContentWithButtonsComponent.prototype.eventReport = function () {
+            this.reportAction.emit(true);
         };
         return ContentWithButtonsComponent;
     }());
     ContentWithButtonsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-content-with-buttons',
-                    template: "<p>content-with-buttons works!</p>\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)=\"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"
                 },] }
     ];
-    ContentWithButtonsComponent.ctorParameters = function () { return []; };
+    ContentWithButtonsComponent.propDecorators = {
+        iconCopy: [{ type: i0.Input }],
+        iconTranslate: [{ type: i0.Input }],
+        count: [{ type: i0.Input }],
+        countCharacterLabel: [{ type: i0.Input }],
+        countWordsLabel: [{ type: i0.Input }],
+        reportLabel: [{ type: i0.Input }],
+        copyAction: [{ type: i0.Output }],
+        reportAction: [{ type: i0.Output }],
+        translateAction: [{ type: i0.Output }]
+    };
 
     var components = [
         TagComponent,