@wizishop/angular-components 0.0.158 → 0.0.162

package/angular-components.scss

@@ -64,6 +64,7 @@ $wac-wizishop-blue-button-darken: #3596b7!default;
 $wac-wizishop-blue-button-focus: #2f8baa!default;
 $wac-wizishop-blue-button-disabled: #94cde0!default;
 $wac-wizishop-blue-button: #52aecd!default;
+$wac-wizishop-blue-button-light: #52AECD1A!default;
 $wac-wizishop-blue: #4baed0!default;
 $wac-color-icon-search-multiple-search: #b4bdd0!default;
 $wac-hover-multiple-search: #edf7fa!default;
@@ -84,6 +85,7 @@ $wac-calendar-box-shadow: #0000001a!default;
 
 $wac-tag-default: #f5f8fa!default;
 $wac-tag-success: #2ecc71!default;
+$wac-tag-success-light: #2ECC711A!default;
 $wac-tag-waring: #f5b226!default;
 $wac-tag-gray: #526384!default;
 
@@ -571,6 +573,120 @@ $wac-subtitle-color: #7A87A1!default;
     }
   }
 }
+.block-with-checkbox {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: $wac-white;
+  box-shadow: 0px 2px 6px #0000000D;
+  border-radius: 3px;
+  margin: 0 0 15px;
+  padding: 30px;
+  @include media('<tablet') {
+    padding: 20px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  &__left {
+    width: 30px;
+    margin: 0 20px 0 0;
+    display: flex;
+    align-items: center;
+  }
+  &__center {
+    width: 100%;
+  }
+  &__right {
+    display: flex;
+    align-items: center;
+    width: auto;
+    div {
+      margin: 0 0 0 20px;
+    }
+  }
+}
+
+.wac-radio-block {
+  height: 30px;
+  input {
+    outline: 0 !important;
+    display: none;
+    & + label {
+      padding-left: 30px;
+      padding-right: 5px;
+      position: relative;
+      cursor: pointer;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        border: 1px solid $wac-border-form;
+        border-radius: 23px;
+        top: 3px;
+      }
+      &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border-radius: 23px;
+        background: $wac-input-active-color;
+        top: 6px;
+        left: 2.5px;
+        opacity: 0;
+      }
+      &:before,
+      &:after {
+        outline: 0 !important;
+      }
+      &:hover,
+      &:focus {
+        &:before {
+          border-color: $wac-input-active-color !important;
+        }
+      }
+    }
+    &:hover {
+      & + label {
+        color: $wac-input-radio-color-active-label;
+        &:before {
+          border-color: $wac-input-active-color !important;
+        }
+      }
+      &:not([disabled]) {
+        & + label {
+          &:before {
+            border-color: $wac-input-active-color !important;
+          }
+        }
+      }
+    }
+    &:checked + label {
+      color: $wac-input-radio-color-active-label;
+      &:before {
+        border-color: $wac-input-active-color!important;
+      }
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+
+
+  .wac-radio__row {
+    min-width: 100%;
+    margin: 0 0 7px;
+  }
+
+  label {
+    padding-left: 7px;
+    margin-right: 0;
+  }
+}
 .wac-breadcrumbs {
   width: 100%;
   display: flex;
@@ -719,6 +835,42 @@ $wac-subtitle-color: #7A87A1!default;
     white-space: nowrap;
   }
 
+  &.is-green.opacity {
+    background-color: $wac-tag-success-light;
+    border-color: $wac-tag-success-light;
+    transition: .3s;
+    i {
+      color: $wac-tag-success;
+    }
+    &:hover, &:focus {
+      background-color: $wac-tag-success;
+      i {
+        color: $wac-white;
+      }
+    }
+  }
+
+  &.static-width {
+    width: 40px;
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  &.is-blue.opacity {
+    background-color: $wac-wizishop-blue-button-light;
+    border-color: $wac-wizishop-blue-button-light;
+    transition: .3s;
+    i {
+      color: $wac-wizishop-blue-button;
+    }
+    &:hover, &:focus {
+      background-color: $wac-wizishop-blue-button;
+      i {
+        color: $wac-white;
+      }
+    }
+  }
+
   &.animationText {
     width: rem(40);
     height: rem(40);
@@ -769,6 +921,8 @@ $wac-subtitle-color: #7A87A1!default;
     padding: 4px 6px;
     background-color: #F8EDD2;
     float: right;
+    z-index: 2;
+    position: relative;
     i {
       font-size: rem(18);
       color: #FDCD52;
@@ -2144,7 +2298,8 @@ $wac-subtitle-color: #7A87A1!default;
   }
 
   > strong {
-    font-size: rem(30);
+    font-size: rem(40);
+    line-height: rem(47);
     text-align: center;
     display: block;
     width: 100%;
@@ -2155,7 +2310,7 @@ $wac-subtitle-color: #7A87A1!default;
   > p {
     font-size: rem(20);
     text-transform: uppercase;
-    margin: 0 0 30px;
+    margin: 0 0 20px;
     text-align: center;
     display: block;
     width: 100%;
@@ -2373,6 +2528,61 @@ $wac-subtitle-color: #7A87A1!default;
   }
 
 }
+.wac-confirm-delete {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  z-index: 999;
+  width: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  background-color: $wac-white;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(100%);
+  transition: 0s visibility .35s, opacity .3s ease 0s, transform .3s ease 0s;
+  &.is-open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0);
+    transition: 0s visibility, opacity .3s ease .05s, transform .3s ease .05s;
+  }
+  > div {
+    width: auto;
+    display: flex;
+    align-items: center;
+    &:first-child {
+      position: relative;
+      margin: 0 20px 0 0;
+      padding: 0 0 0 30px;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 10px;
+        width: 1px;
+        height: 100%;
+        background-color: $wac-border-form;
+      }
+      span {
+        font-size: rem(16);
+        line-height: 1.4;
+        color: $wac-second-color;
+      }
+    }
+    &:last-child {
+      > div {
+        width: auto;
+        &:first-child {
+          margin: 0 10px 0 0;
+        }
+      }
+    }
+  }
+}
 .wac-delete {
   width: 40px;
   height: 40px;
@@ -2900,6 +3110,9 @@ $wac-subtitle-color: #7A87A1!default;
         align-items: flex-start;
         margin: 0;
       }
+      &.center {
+        justify-content: center;
+      }
       &__left {
         width: auto;
         display: flex;
@@ -2910,6 +3123,11 @@ $wac-subtitle-color: #7A87A1!default;
           width: 100%;
           margin: 0 0 30px;
         }
+        &.fullsize {
+          width: 100%;
+          margin: 0;
+          justify-content: center;
+        }
         a {
           display: flex;
           min-width: 40px;
@@ -3197,6 +3415,15 @@ a.wac-link {
     }
   }
 }
+.wac-mosaic {
+  &__loader {
+    min-height: 400px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 .wac-multiple-search {
   width: 100%;
   min-height: 50px;
@@ -5512,6 +5739,9 @@ h1.wac-h1 {
     display: flex;
     align-items: center;
   }
+  &.center {
+    text-align: center;
+  }
 
   small {
     font-size: rem(18);

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

@@ -2045,13 +2045,15 @@
         maxlength: [{ type: i0.Input }],
         max: [{ type: i0.Input }],
         dynamicSize: [{ type: i0.Input }],
-        progressBar: [{ type: i0.Input }]
+        progressBar: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }]
     };
 
     var H1Component = /** @class */ (function () {
         function H1Component() {
             this.annotation = '';
             this.withImg = false;
+            this.center = false;
         }
         H1Component.prototype.ngOnInit = function () { };
         return H1Component;
@@ -2059,13 +2061,14 @@
     H1Component.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-h1',
-                    template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg}\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n"
+                    template: "<h1 class=\"wac-h1\" [ngClass]=\"{'with-img': withImg, 'center': center}\"><ng-content></ng-content><small *ngIf=\"annotation !== ''\">{{ annotation }}</small></h1>\n"
                 },] }
     ];
     H1Component.ctorParameters = function () { return []; };
     H1Component.propDecorators = {
         annotation: [{ type: i0.Input }],
-        withImg: [{ type: i0.Input }]
+        withImg: [{ type: i0.Input }],
+        center: [{ type: i0.Input }]
     };
 
     var H2Component = /** @class */ (function () {
@@ -2103,6 +2106,7 @@
     var HeaderPageComponent = /** @class */ (function () {
         function HeaderPageComponent() {
             this.withImg = false;
+            this.center = false;
         }
         HeaderPageComponent.prototype.ngOnInit = function () { };
         return HeaderPageComponent;
@@ -2110,14 +2114,15 @@
     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\">\n      <div class=\"wac-header-page__maxWidth__top__left\">\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 [withImg]=\"withImg\">{{ title }}<ng-content select=\"[role=header]\"></ng-content></wac-h1>\n      </div>\n      <div class=\"wac-header-page__maxWidth__top__right\">\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        <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"
                 },] }
     ];
     HeaderPageComponent.ctorParameters = function () { return []; };
     HeaderPageComponent.propDecorators = {
         title: [{ type: i0.Input }],
         linkBack: [{ type: i0.Input }],
-        withImg: [{ type: i0.Input }]
+        withImg: [{ type: i0.Input }],
+        center: [{ type: i0.Input }]
     };
 
     var InputComponent = /** @class */ (function () {
@@ -4295,6 +4300,102 @@
         max: [{ type: i0.Input }]
     };
 
+    var BlockWithCheckboxComponent = /** @class */ (function () {
+        function BlockWithCheckboxComponent() {
+            this.selected = false;
+            this.iconCopy = 'fa-solid fa-copy';
+            this.iconWorld = 'fa-thin fa-globe';
+            this.copyAction = new i0.EventEmitter();
+            this.worldAction = new i0.EventEmitter();
+            this.checkboxAction = new i0.EventEmitter();
+        }
+        BlockWithCheckboxComponent.prototype.ngOnInit = function () {
+        };
+        BlockWithCheckboxComponent.prototype.eventSelected = function (event) {
+            this.selected = !this.selected;
+            console.log(this.selected);
+            this.checkboxAction.emit(this.selected);
+        };
+        BlockWithCheckboxComponent.prototype.eventCopy = function () {
+            this.copyAction.emit(true);
+        };
+        BlockWithCheckboxComponent.prototype.eventWorld = function () {
+            this.worldAction.emit(true);
+        };
+        return BlockWithCheckboxComponent;
+    }());
+    BlockWithCheckboxComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-block-with-checkbox',
+                    template: "<div class=\"block-with-checkbox\">\n  <div class=\"block-with-checkbox__left\">\n    <div class=\"wac-radio-block\">\n      <div class=\"wac-radio__row\">\n        <input type=\"checkbox\" [value]=\"selected\" (click)=\"eventSelected($event)\" id=\"radioBlock\">\n        <label for=\"radioBlock\"></label>\n      </div>\n    </div>\n  </div>\n  <div class=\"block-with-checkbox__center\">\n    <ng-content></ng-content>\n  </div>\n  <div class=\"block-with-checkbox__right\">\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]=\"iconWorld\"  (click)=\"eventWorld()\"></wac-button></div>\n  </div>\n</div>\n"
+                },] }
+    ];
+    BlockWithCheckboxComponent.ctorParameters = function () { return []; };
+    BlockWithCheckboxComponent.propDecorators = {
+        selected: [{ type: i0.Input }],
+        iconCopy: [{ type: i0.Input }],
+        iconWorld: [{ type: i0.Input }],
+        copyAction: [{ type: i0.Output }],
+        worldAction: [{ type: i0.Output }],
+        checkboxAction: [{ type: i0.Output }]
+    };
+
+    var ConfirmDeleteComponent = /** @class */ (function () {
+        function ConfirmDeleteComponent() {
+            this.open = false;
+            this.confirm = new i0.EventEmitter();
+            this.backgroundColor = '#fff';
+            this.borderRadius = '0px';
+        }
+        ConfirmDeleteComponent.prototype.ngOnInit = function () {
+        };
+        ConfirmDeleteComponent.prototype.eventCancel = function (event) {
+            this.confirm.emit(false);
+            this.open = false;
+        };
+        ConfirmDeleteComponent.prototype.eventConfirm = function (event) {
+            this.confirm.emit(true);
+            this.open = false;
+        };
+        return ConfirmDeleteComponent;
+    }());
+    ConfirmDeleteComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-confirm-delete',
+                    template: "<div class=\"wac-confirm-delete\" [ngClass]=\"{'is-open': open}\" [style.backgroundColor]=\"backgroundColor\" [style.borderRadius]=\"borderRadius\">\n  <div>\n    <span [innerHTML]=\"label\"></span>\n  </div>\n  <div>\n    <div><wac-button [label]=\"labelCancel\" [extraClasses]=\"'is-outlined is-grey'\" (click)=\"eventCancel($event)\"></wac-button></div>\n    <div><wac-button [label]=\"labelConfirm\" [extraClasses]=\"'is-danger'\" (click)=\"eventConfirm($event)\"></wac-button></div>\n  </div>\n</div>\n"
+                },] }
+    ];
+    ConfirmDeleteComponent.ctorParameters = function () { return []; };
+    ConfirmDeleteComponent.propDecorators = {
+        open: [{ type: i0.Input }],
+        label: [{ type: i0.Input }],
+        labelCancel: [{ type: i0.Input }],
+        labelConfirm: [{ type: i0.Input }],
+        confirm: [{ type: i0.Output }],
+        backgroundColor: [{ type: i0.Input }],
+        borderRadius: [{ type: i0.Input }]
+    };
+
+    var MosaicComponent = /** @class */ (function () {
+        function MosaicComponent() {
+            this.isLoading = true;
+        }
+        MosaicComponent.prototype.ngOnInit = function () {
+        };
+        return MosaicComponent;
+    }());
+    MosaicComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'wac-mosaic',
+                    template: "<div class=\"wac-mosaic__loader\" *ngIf=\"isLoading\">\n  <wac-loader></wac-loader>\n</div>\n<div class=\"wac-mosaic\" *ngIf=\"!isLoading\">\n  <div class=\"wac-mosaic__wrapper\">\n    <div class=\"wac-mosaic__wrapper__column\"></div>\n    <div class=\"wac-mosaic__wrapper__column\" *ngIf=\"items\"></div>\n    <div class=\"wac-mosaic__wrapper__column\"></div>\n  </div>\n</div>\n",
+                    styles: [".wac-mosaic__loader{min-height:400px;width:100%;display:flex;justify-content:center;align-items:center}"]
+                },] }
+    ];
+    MosaicComponent.ctorParameters = function () { return []; };
+    MosaicComponent.propDecorators = {
+        items: [{ type: i0.Input }]
+    };
+
     var components = [
         TagComponent,
         TabComponent,
@@ -4340,7 +4441,10 @@
         WrapperSidebarComponent,
         BreadcrumbsComponent,
         CardPriceComponent,
-        TokenCheckComponent
+        TokenCheckComponent,
+        BlockWithCheckboxComponent,
+        ConfirmDeleteComponent,
+        MosaicComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -4442,12 +4546,14 @@
     exports.AutoHideDirective = AutoHideDirective;
     exports.BackComponent = BackComponent;
     exports.BlockComponent = BlockComponent;
+    exports.BlockWithCheckboxComponent = BlockWithCheckboxComponent;
     exports.BreadcrumbsComponent = BreadcrumbsComponent;
     exports.ButtonComponent = ButtonComponent;
     exports.CalendarComponent = CalendarComponent;
     exports.CardPriceComponent = CardPriceComponent;
     exports.CheckBoxRow = CheckBoxRow;
     exports.CheckboxComponent = CheckboxComponent;
+    exports.ConfirmDeleteComponent = ConfirmDeleteComponent;
     exports.DebounceKeyupDirective = DebounceKeyupDirective;
     exports.DeleteComponent = DeleteComponent;
     exports.DropdownComponent = DropdownComponent;
@@ -4472,6 +4578,7 @@
     exports.LinkComponent = LinkComponent;
     exports.LoaderComponent = LoaderComponent;
     exports.LogoComponent = LogoComponent;
+    exports.MosaicComponent = MosaicComponent;
     exports.MultipleSearchComponent = MultipleSearchComponent;
     exports.MultipleSearchPlusComponent = MultipleSearchPlusComponent;
     exports.PaginationComponent = PaginationComponent;