@limetech/lime-elements 34.1.0-next.11 → 34.1.0-next.15

package/dist/cjs/limel-slider.cjs.entry.js

@@ -1431,7 +1431,12 @@ let Slider = class {
      */
     this.valuemin = 0;
     this.changeHandler = (event) => {
-      this.change.emit(event.detail.value / this.factor);
+      let value = event.detail.value;
+      const step = this.multiplyByFactor(this.step);
+      if (!this.isMultipleOfStep(value, step)) {
+        value = this.roundToStep(value, step);
+      }
+      this.change.emit(value / this.factor);
     };
     this.inputHandler = this.inputHandler.bind(this);
     this.getContainerClassList = this.getContainerClassList.bind(this);
@@ -1443,11 +1448,10 @@ let Slider = class {
     this.initialize();
   }
   initialize() {
-    const element = this.rootElement.shadowRoot.querySelector('.mdc-slider');
-    if (!element) {
+    const inputElement = this.getInputElement();
+    if (!inputElement) {
       return;
     }
-    const inputElement = element.querySelector('input');
     const value = this.getValue();
     /*
     For some reason the input element's `value` attribute is removed
@@ -1472,7 +1476,6 @@ let Slider = class {
     */
     const greaterThanOrEqualMin = value >= this.valuemin;
     const lessThanOrEqualMax = value <= this.valuemax;
-    const dividableByStep = value % this.step === 0;
     if (!greaterThanOrEqualMin) {
       const newMin = this.multiplyByFactor(value);
       inputElement.setAttribute('min', `${newMin}`);
@@ -1481,20 +1484,16 @@ let Slider = class {
       const newMax = this.multiplyByFactor(value);
       inputElement.setAttribute('max', `${newMax}`);
     }
-    if (!dividableByStep) {
+    if (!this.isMultipleOfStep(value, this.step)) {
       inputElement.removeAttribute('step');
     }
-    this.mdcSlider = new MDCSlider(element);
-    this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
-    this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
+    this.createMDCSlider();
   }
   componentWillLoad() {
     this.setPercentageClass(this.value);
   }
   disconnectedCallback() {
-    this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);
-    this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);
-    this.mdcSlider.destroy();
+    this.destroyMDCSlider();
   }
   getContainerClassList() {
     return {
@@ -1533,7 +1532,16 @@ let Slider = class {
     if (!this.mdcSlider) {
       return;
     }
-    this.mdcSlider.setValue(this.multiplyByFactor(this.getValue()));
+    const value = this.multiplyByFactor(this.getValue());
+    this.mdcSlider.setValue(value);
+    if (this.isStepConfigured()) {
+      return;
+    }
+    const step = this.multiplyByFactor(this.step);
+    if (!this.isMultipleOfStep(value, step)) {
+      return;
+    }
+    this.reCreateSliderWithStep();
   }
   updateDisabledState() {
     if (!this.mdcSlider) {
@@ -1557,6 +1565,54 @@ let Slider = class {
   setPercentageClass(value) {
     this.percentageClass = getPercentageClass((value - this.valuemin) / (this.valuemax - this.valuemin));
   }
+  isMultipleOfStep(value, step) {
+    if (!step) {
+      return true;
+    }
+    return value % step === 0;
+  }
+  roundToStep(value, step) {
+    return Math.round(value / step) * step;
+  }
+  getRootElement() {
+    return this.rootElement.shadowRoot.querySelector('.mdc-slider');
+  }
+  getInputElement() {
+    const element = this.getRootElement();
+    if (!element) {
+      return;
+    }
+    return element.querySelector('input');
+  }
+  isStepConfigured() {
+    if (!this.step) {
+      return true;
+    }
+    const input = this.getInputElement();
+    if (!input) {
+      return true;
+    }
+    return input.hasAttribute('step');
+  }
+  reCreateSliderWithStep() {
+    const inputElement = this.getInputElement();
+    const step = `${this.multiplyByFactor(this.step)}`;
+    inputElement.setAttribute('step', step);
+    this.destroyMDCSlider();
+    this.createMDCSlider();
+  }
+  createMDCSlider() {
+    const element = this.getRootElement();
+    this.mdcSlider = new MDCSlider(element);
+    this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
+    this.mdcSlider.listen('MDCSlider:input', this.inputHandler);
+  }
+  destroyMDCSlider() {
+    this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);
+    this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);
+    this.mdcSlider.destroy();
+    this.mdcSlider = undefined;
+  }
   get rootElement() { return index.getElement(this); }
   static get watchers() { return {
     "disabled": ["watchDisabled"],

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -1117,6 +1117,10 @@
 .chosen-color-preview[style="--background:lime-yellow;"]:after {
   background-color: var(--lime-yellow);
 }
+.picker-trigger[style="--background:lime-light-grey;"]:after,
+.chosen-color-preview[style="--background:lime-light-grey;"]:after {
+  background-color: var(--lime-light-grey);
+}
 
 :host {
   --popover-surface-width: 50rem;

package/dist/collection/components/color-picker/color-picker.css

@@ -32,6 +32,10 @@
 .chosen-color-preview[style="--background:lime-yellow;"]:after {
   background-color: var(--lime-yellow);
 }
+.picker-trigger[style="--background:lime-light-grey;"]:after,
+.chosen-color-preview[style="--background:lime-light-grey;"]:after {
+  background-color: var(--lime-light-grey);
+}
 
 :host {
   --popover-surface-width: 50rem;

package/dist/collection/components/form/templates/common.js

@@ -59,7 +59,7 @@ function findFirstEntry(data, subSchema) {
     getRequiredEntry(data, subSchema),
     ...Object.entries(data),
   ];
-  return entries.filter(([_, value]) => !!value)[0];
+  return entries.filter(([_, value]) => !!value && typeof value !== 'boolean')[0];
 }
 function getRequiredEntry(data, subSchema) {
   if (!('required' in subSchema)) {