@wizishop/angular-components 0.0.158 → 0.0.160

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);
@@ -2373,6 +2525,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;

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

@@ -4295,6 +4295,82 @@
         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 components = [
         TagComponent,
         TabComponent,
@@ -4340,7 +4416,9 @@
         WrapperSidebarComponent,
         BreadcrumbsComponent,
         CardPriceComponent,
-        TokenCheckComponent
+        TokenCheckComponent,
+        BlockWithCheckboxComponent,
+        ConfirmDeleteComponent
     ];
     var exportsFromModule = [
         PaginationComponent,
@@ -4442,12 +4520,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;