Merge pull request #260 from UX-Alkosto/develop

Updated Glide dependencies and Glide css

components/gallery/css/theme.js

@@ -1,6 +1,7 @@
 import { css } from 'lit';
 
 export const Theme = css`
+.glide__slide--active,
 .k-slider__slide--active,
 .k-gallery__slide--active {
     filter: grayscale(0%);

components/slider/css/theme.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 export const Theme = css`
-.k-slider__arrow {
+.glide__arrow {
     align-items: center;
     background-color: white;
     border-radius: 48px;
@@ -21,26 +21,26 @@ export const Theme = css`
     width: 48px;
     z-index: 2;
 }
-.k-slider__arrow k-icon {
+.glide__arrow k-icon {
     font-size: 20px;
 }
-.k-slider__arrow:focus {
+.glide__arrow:focus {
     outline: none;
 }
-.k-slider__arrow:hover {
+.glide__arrow:hover {
     border-color: white;
 }
-.k-slider__arrow--left {
+.glide__arrow--left {
     left: 1em;
 }
-.k-slider__arrow--right {
+.glide__arrow--right {
     right: 1em;
 }
-.k-slider__arrow--disabled {
+.glide__arrow--disabled {
     opacity: 0.33;
 }
 
-.k-slider__bullets {
+.glide__bullets {
     position: absolute;
     z-index: 2;
     bottom: -2em;
@@ -50,7 +50,7 @@ export const Theme = css`
     transform: translateX(-50%);
 }
 
-.k-slider__bullet {
+.glide__bullet {
     background-color: var(--k-slider-bullet-color,#F5F5F5);
     width: 12px;
     height: 12px;
@@ -63,23 +63,23 @@ export const Theme = css`
     box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
     margin: 0 0.5em;
 }
-.k-slider__bullet:focus {
+.glide__bullet:focus {
     outline: none;
 }
-.k-slider__bullet:hover, .k-slider__bullet:focus {
+.glide__bullet:hover, .glide__bullet:focus {
     background-color: var(--k-slider-bullet-color-hover, #004691);
 }
-.k-slider__bullet--active {
+.glide__bullet--active {
     background-color: var(--carousel-nav-color, #004691);
 }
 
-.k-slider--swipeable {
+.glide--swipeable {
     cursor: grab;
     cursor: -moz-grab;
     cursor: -webkit-grab;
 }
 
-.k-slider--dragging {
+.glide--dragging {
     cursor: grabbing;
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;

components/slider/index.js

@@ -1,4 +1,5 @@
 import { LitElement, html } from 'lit';
+import Glide from '@glidejs/glide';
 import { common } from '../common';
 import { styles, Core as coreStyles, Theme as themeStyles } from './css';
 
@@ -85,42 +86,27 @@ export class Slider extends LitElement {
         </style>`;
     }
     _getArrows() {
-        return html`<div class="k-slider__arrows" data-glide-el="controls">
-            <button class="k-slider__arrow k-slider__arrow--left" data-glide-dir="<"><k-icon icon="alk-icon-izquierda"></k-icon></button>
-            <button class="k-slider__arrow k-slider__arrow--right" data-glide-dir=">"><k-icon icon="alk-icon-derecha"></k-icon></button>
+        return html`<div class="glide__arrows" data-glide-el="controls">
+            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><k-icon icon="alk-icon-izquierda"></k-icon></button>
+            <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><k-icon icon="alk-icon-derecha"></k-icon></button>
         </div>`;
     }
     _getDots() {
         const bullets = [];
         for (let index = 0; index < this.countSlides; index++) {
-            bullets.push(html`<button class="k-slider__bullet" data-glide-dir="=${index}"></button>`);
+            bullets.push(html`<button class="glide__bullet" data-glide-dir="=${index}"></button>`);
         }
-        return html`<div class="k-slider__bullets" data-glide-el="controls[nav]">
+        return html`<div class="glide__bullets" data-glide-el="controls[nav]">
             ${bullets}
         </div>`;
     }
     async _initSlider() {
-        const Glide = await import('@glidejs/glide').then(Module => Module.default);
         let rawSlides = this.innerHTML;
         const slides = this.shadowRoot.querySelector('.k-slider__slides');
         slides.innerHTML = rawSlides;
         this.innerHTML = '';
         this.loaded = true;
         return new Glide(this.shadowRoot.querySelector('.k-slider'), {
-            classes: {
-                direction: {
-                    ltr: 'k-slider--ltr',
-                    rtl: 'k-slider--rtl'
-                },
-                slider: 'k-slider--slider',
-                carousel: 'k-slider--carousel',
-                swipeable: 'k-slider--swipeable',
-                dragging: 'k-slider--dragging',
-                cloneSlide: 'k-slider__slide--clone',
-                activeNav: 'k-slider__bullet--active',
-                activeSlide: 'k-slider__slide--active',
-                disabledArrow: 'k-slider__arrow--disabled'
-            },
             gap: this['items-space'],
             type: 'carousel',
             peek: this.peek,

dist/components.js

@@ -1,2 +1,2 @@
-/*! webcomponents release: 2.0.0 */
-import"./index-f60bebf7.js";
+/*! webcomponents release: 2.0.1 */
+import"./index-5f538007.js";