@iris.interactive/handcook 2.10.30 → 2.10.32

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-2.10.30-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.10.32-blue.svg?cacheSeconds=2592000)
 ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
 [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
 [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.10.30",
+  "version": "2.10.32",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/scripts/components/slider/slider.component.js

@@ -39,18 +39,21 @@ export class HcSlider {
     // Options
     options = {};
 
+    // Events
+    initEvent;
+
     /**
      * @param elements
      */
     constructor(elements = ElementEnum.slider) {
-        this.initOptions();
         document.querySelectorAll(elements).forEach(element => {
+            this.initEvent = new Event("init.hc.slider");
+            this.initOptions();
             this.slider = element;
             this.setOptions();
             this.buildDom();
             const instance = new Swiper(element, this.options);
             this.instances.push(instance);
-            this.initOptions();
         });
     }
 
@@ -246,6 +249,8 @@ export class HcSlider {
                     if (swiper.isLocked) {
                         swiper.$el.addClass('hc-slider-lock');
                     }
+
+                    this.slider.dispatchEvent(this.initEvent);
                 },
                 slideChangeTransitionEnd: (swiper) => {
 

package/public/styles/scss/_variables.scss

@@ -327,9 +327,7 @@ $button-background-color: var(--iris--button--background-color);
 $button-color-hover: var(--iris--button--color-hover);
 $button-background-color-hover: var(--iris--button--background-color-hover, none);
 $button-background-image: var(--iris--button--background-image, none);
-$button-gradient-background-image-size: var(--iris--button--background-size, var(--iris--global--gradient-background-size, (200% 100%)));
-$button-gradient-background-image-position: var(--iris--button--background-position, initial);
-$button-gradient-background-image-position-hover: var(--iris--button--background-position-hover, (bottom right, top right));
+$button-gradient-background-image-size: var(--iris--global--gradient-background-size, (200% 100%));
 $button-border: var(--iris--button--border, none);
 $button-border-hover: var(--iris--button--border-hover, none);
 $button-background-color--force: var(--iris--button--border-color, $button-background-color);

package/public/styles/scss/mixins/_mixin-style.scss

@@ -153,7 +153,6 @@
     background-color: $button-background-color;
     background-image: $button-background-image;
     background-size: $button-gradient-background-image-size;
-    background-position: $button-gradient-background-image-position;
     border: $button-border;
     word-break: normal;
     @include transition;
@@ -177,7 +176,6 @@
         background-color: $button-background-color;
         background-image: $button-background-image;
         background-size: $button-gradient-background-image-size;
-        background-position: $button-gradient-background-image-position;
         border: $button-border;
     }
 
@@ -185,7 +183,7 @@
         color: $button-color-hover;
         background-color: $button-background-color-hover;
         border: $button-border-hover;
-        background-position: $button-gradient-background-image-position-hover;
+        background-position: bottom right, top right;
 
         &:before {
             color: $button-color-hover;