@wizishop/angular-components 0.0.182 → 0.0.186

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 {
@@ -2743,6 +2788,7 @@ $wac-subtitle-color: #7A87A1!default;
       &__left {
         width: auto;
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         align-content: center;
         margin: 0 10px 0 0;
@@ -2784,6 +2830,31 @@ $wac-subtitle-color: #7A87A1!default;
             }
           }
         }
+        &__nowrap {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          .center & {
+            justify-content: center;
+          }
+        }
+        .subtitle {
+          padding: 0 0 0 60px;
+          .center & {
+            padding: 0;
+            display: flex;
+            justify-content: center;
+          }
+          &:empty {
+            display: none;
+          }
+          &:not(:empty) {
+            margin: 12px 0 0;
+          }
+        }
+        > *:not(a) {
+          width: 100%;
+        }
       }
       &__right {
         width: 100%;
@@ -3723,7 +3794,7 @@ span.wac-tooltip {
   border: 2px solid transparent;
   transition: .3s ease;
   opacity: .45;
-  &.selected:not(.disabled), &:not(.disabled):hover, &:not(.disabled):focus {
+  &.selected, &:not(.disabled):hover, &:not(.disabled):focus {
     border-color: $wac-input-active-color;
     opacity: 1!important;
   }
@@ -3943,6 +4014,12 @@ span.wac-tooltip {
     font-style: italic;
   }
 
+  .subtitle {
+    &:last-child {
+      margin: 0;
+    }
+  }
+
   .package-subtitle {
    margin: 10px 0 30px;
   }

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

@@ -2121,7 +2121,7 @@
     HeaderPageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-header-page',
-                    template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n        <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-header-page\">\n  <div class=\"wac-header-page__maxWidth\">\n    <div class=\"wac-header-page__maxWidth__top\" [ngClass]=\"{'center':center}\">\n      <div class=\"wac-header-page__maxWidth__top__left\" [ngClass]=\"{'fullsize':center}\">\n        <!-- TODO Hard to use when only want a button and not a router link -->\n        <div class=\"wac-header-page__maxWidth__top__left__nowrap\">\n          <a *ngIf=\"linkBack\" [routerLink]=\"linkBack\"><i class=\"fas fa-chevron-left\"></i></a>\n          <wac-h1 [center]=\"center\" [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n        </div>\n        <p class=\"subtitle\"><ng-content select=\"[role=subtitle]\"></ng-content></p>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\" *ngIf=\"!center\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     HeaderPageComponent.ctorParameters = function () { return []; };
@@ -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',] }]
     };
 
@@ -4354,7 +4356,7 @@
     BlockWithCheckboxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-block-with-checkbox',
-                    template: "<div class=\"block-with-checkbox\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
+                    template: "<div class=\"block-with-checkbox\" (click)=\"disabled ? $event.preventDefault() : ''\" [ngClass]=\"{'selected': inputRadioA.checked || selected, 'firstWacRadioBLock': isFirst, 'disabled': disabled}\" [style.opacity]=\"opacity\" (mouseover)=\"removeFirstClass()\">\n  <div class=\"block-with-checkbox__left\" (click)=\"inputRadioA.click()\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input #inputRadioA [name]=\"nameRadio\" type=\"radio\" [checked]=\"selected\" [value]=\"selected\" (change)=\"eventSelected($event)\" [id]=\"randomLabelName\">\n        <label [for]=\"randomLabelName\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\" (click)=\"inputRadioA.click()\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"
                 },] }
     ];
     BlockWithCheckboxComponent.ctorParameters = function () { return []; };
@@ -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,