@limetech/lime-elements 34.1.0-next.5 → 34.1.0-next.9

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

@@ -0,0 +1,135 @@
+import { Component, h, Prop, Event } from '@stencil/core';
+import { brightnesses, colors, getColorName, getCssColor } from './swatches';
+/**
+ * @private
+ */
+export class Palette {
+  constructor() {
+    this.renderSwatches = () => {
+      return colors.map((color) => {
+        return brightnesses.map(this.renderSwatch(color));
+      });
+    };
+    this.renderSwatch = (color) => (brightness) => {
+      const colorName = getColorName(color, brightness);
+      const classList = {
+        swatch: true,
+        [colorName]: true,
+        'swatch--selected': this.value === getCssColor(color, brightness),
+      };
+      return (h("div", { class: classList, onClick: this.handleClick(color, brightness), tabindex: "0" }));
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      this.change.emit(event.detail);
+    };
+    this.handleClick = (color, brightness) => (event) => {
+      const value = getCssColor(color, brightness);
+      event.stopPropagation();
+      this.change.emit(value);
+    };
+  }
+  render() {
+    const background = this.value ? { '--background': this.value } : {};
+    return [
+      h("div", { class: "color-picker-palette" }, this.renderSwatches()),
+      h("div", { class: "chosen-color-name" },
+        h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required }),
+        h("div", { class: "chosen-color-preview", style: background })),
+    ];
+  }
+  static get is() { return "limel-color-picker-palette"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["color-picker-palette.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["color-picker-palette.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Color value that is manually typed by the user"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label of the input field"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "helperText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Helper text of the input field"
+      },
+      "attribute": "helper-text",
+      "reflect": true
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if a value is required"
+      },
+      "attribute": "required",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits chosen value to the parent component"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,71 @@
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+:host {
+  --popover-surface-width: 50rem;
+  --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill-opacity='0.1' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+}
+
+.color-picker {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+}
+
+.chosen-color-preview,
+.picker-trigger {
+  box-sizing: border-box;
+  position: relative;
+  isolation: isolate;
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.chosen-color-preview:before, .chosen-color-preview:after,
+.picker-trigger:before,
+.picker-trigger:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.chosen-color-preview:before,
+.picker-trigger:before {
+  background: var(--color-picker-default-background);
+  background-size: 0.5rem;
+  z-index: 0;
+}
+.chosen-color-preview:after,
+.picker-trigger:after {
+  background: var(--background);
+  z-index: 1;
+}
+
+.picker-trigger {
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
+
+:host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
+  cursor: default;
+  box-shadow: var(--button-shadow-normal);
+  transform: none;
+}
+
+.chosen-color-input[readonly] {
+  transform: translateY(1rem);
+}

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

@@ -0,0 +1,189 @@
+/* eslint-disable multiline-ternary */
+import { Component, h, Prop, State, Event } from '@stencil/core';
+/**
+ * This component enables you to select a swatch from out color palette, simply
+ * by clicking on it. You can then copy the css variable name of the chosen color
+ * and use it where desired.
+ *
+ * The color picker can also show you a preview of any valid color name or color value.
+ *
+ * :::note
+ * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+ * :::
+ *
+ * @exampleComponent limel-example-color-picker
+ * @exampleComponent limel-example-color-picker-readonly
+ */
+export class ColorPicker {
+  constructor() {
+    this.isOpen = false;
+    this.renderTooltip = () => {
+      if (!this.readonly) {
+        return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
+      }
+    };
+    this.renderPickerPalette = () => {
+      if (this.readonly) {
+        return this.renderPickerTrigger();
+      }
+      return (h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose },
+        this.renderPickerTrigger(),
+        h("limel-color-picker-palette", { value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
+    };
+    this.renderPickerTrigger = () => {
+      const background = this.value ? { '--background': this.value } : {};
+      return (h("div", { class: "picker-trigger", slot: "trigger", style: background, role: "button", tabindex: "0", onClick: this.openPopover, id: "tooltip-button" }));
+    };
+    this.openPopover = (event) => {
+      event.stopPropagation();
+      this.isOpen = true;
+    };
+    this.onPopoverClose = (event) => {
+      event.stopPropagation();
+      this.isOpen = false;
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      this.change.emit(event.detail);
+    };
+  }
+  render() {
+    return [
+      this.renderTooltip(),
+      h("div", { class: "color-picker" },
+        this.renderPickerPalette(),
+        h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, class: "chosen-color-input" })),
+    ];
+  }
+  static get is() { return "limel-color-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["color-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["color-picker.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name or code of the chosen color"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the input field"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "helperText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Helper text of the input field"
+      },
+      "attribute": "helper-text",
+      "reflect": true
+    },
+    "tooltipLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displayed as tooltips when picker is hovered."
+      },
+      "attribute": "tooltip-label",
+      "reflect": true
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if a value is required"
+      },
+      "attribute": "required",
+      "reflect": true
+    },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to `true` if a value is readonly. This makes the component un-interactive."
+      },
+      "attribute": "readonly",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "isOpen": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits chosen value to the parent component"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/color-picker/swatches.js

@@ -0,0 +1,29 @@
+export const colors = [
+  'red',
+  'pink',
+  'magenta',
+  'purple',
+  'violet',
+  'indigo',
+  'blue',
+  'sky',
+  'cyan',
+  'teal',
+  'green',
+  'lime',
+  'grass',
+  'yellow',
+  'amber',
+  'orange',
+  'coral',
+  'brown',
+  'gray',
+  'glaucous',
+];
+export const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];
+export function getColorName(color, brightness) {
+  return `--color-${color}-${brightness}`;
+}
+export function getCssColor(color, brightness) {
+  return `rgb(var(${getColorName(color, brightness)}))`;
+}

package/dist/collection/components/list/list.css

@@ -68,7 +68,7 @@
  * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
  * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
  */
-:host {
+:host(limel-list) {
   display: block;
 }
 
@@ -3061,6 +3061,7 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  box-sizing: border-box;
   z-index: 0;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {

package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css

@@ -118,8 +118,7 @@
   height: var(--step-height);
   position: absolute;
   z-index: 1;
-  right: 0;
-  transform: translateX(50%);
+  right: calc(var(--step-height) / 2 * -1);
   overflow: hidden;
 }
 .divider:after {

package/dist/collection/components/slider/slider.js

@@ -58,6 +58,8 @@ export class Slider {
     if (!element) {
       return;
     }
+    const inputElement = element.querySelector('input');
+    const value = this.getValue();
     /*
     For some reason the input element's `value` attribute is removed
     (probably by Stencil) when the element is first rendered. But if the
@@ -65,9 +67,34 @@ export class Slider {
     MDCSlider crashes.
     So we add the attribute right before initializing MDCSlider. /Ads
     */
-    element
-      .querySelector('input')
-      .setAttribute('value', `${this.multiplyByFactor(this.getValue())}`);
+    inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);
+    /*
+    When creating the `mdcSlider` component, its important that the value set in
+    the input field obeys the range and the step size.
+
+    The MDCSlider will throw an exception unless the value in the input element
+    is dividible by the step value and is in the provided range.
+    If an exception occurs, this component will crash and it will be impossible to change
+    its value.
+    The logic below ensures that the component will render even though the
+    provided value is wrong.
+    This could be considered wrong, but it at least fixes so that it's possible
+    to change the value from the UI.
+    */
+    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}`);
+    }
+    if (!lessThanOrEqualMax) {
+      const newMax = this.multiplyByFactor(value);
+      inputElement.setAttribute('max', `${newMax}`);
+    }
+    if (!dividableByStep) {
+      inputElement.removeAttribute('step');
+    }
     this.mdcSlider = new MDCSlider(element);
     this.mdcSlider.listen('MDCSlider:change', this.changeHandler);
     this.mdcSlider.listen('MDCSlider:input', this.inputHandler);

package/dist/esm/{_arrayIncludesWith-3f5ce249.js → _arrayIncludesWith-b5d3fd9e.js}

@@ -1,8 +1,9 @@
-import { v as identity, c as isArguments, p as arrayPush } from './isEqual-4d982635.js';
-import { d as defineProperty } from './_defineProperty-cbf98a2a.js';
-import { S as Symbol } from './eq-f40dd1d6.js';
+import { v as identity, c as isArguments, p as arrayPush } from './isEqual-4f22635f.js';
+import { d as defineProperty } from './_defineProperty-8c869077.js';
+import { S as Symbol } from './isObject-c74e273c.js';
 import { i as isArray } from './isArray-80298bc7.js';
-import { i as isObjectLike, a as isArrayLike } from './isArrayLike-14db8f02.js';
+import { i as isArrayLike } from './isArrayLike-dd37ba9a.js';
+import { i as isObjectLike } from './isObjectLike-38996507.js';
 
 /**
  * A faster alternative to `Function#apply`, this function invokes `func`

package/dist/esm/{_assignValue-94fb6adc.js → _assignValue-08fe10bc.js}

@@ -1,5 +1,5 @@
-import { d as defineProperty } from './_defineProperty-cbf98a2a.js';
-import { e as eq } from './eq-f40dd1d6.js';
+import { d as defineProperty } from './_defineProperty-8c869077.js';
+import { e as eq } from './eq-c1c7f528.js';
 
 /**
  * The base implementation of `assignValue` and `assignMergeValue` without

package/dist/esm/{_defineProperty-cbf98a2a.js → _defineProperty-8c869077.js}

@@ -1,4 +1,5 @@
-import { r as root, i as isObject, a as isFunction } from './eq-f40dd1d6.js';
+import { i as isFunction } from './eq-c1c7f528.js';
+import { r as root, i as isObject } from './isObject-c74e273c.js';
 
 /** Used to detect overreaching core-js shims. */
 var coreJsData = root['__core-js_shared__'];

package/dist/esm/eq-c1c7f528.js

@@ -0,0 +1,72 @@
+import { i as isObject, b as baseGetTag } from './isObject-c74e273c.js';
+
+/** `Object#toString` result references. */
+var asyncTag = '[object AsyncFunction]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    proxyTag = '[object Proxy]';
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 9 which returns 'object' for typed arrays and other constructors.
+  var tag = baseGetTag(value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+
+/**
+ * Performs a
+ * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+ * comparison between two values to determine if they are equivalent.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ * var other = { 'a': 1 };
+ *
+ * _.eq(object, object);
+ * // => true
+ *
+ * _.eq(object, other);
+ * // => false
+ *
+ * _.eq('a', 'a');
+ * // => true
+ *
+ * _.eq('a', Object('a'));
+ * // => false
+ *
+ * _.eq(NaN, NaN);
+ * // => true
+ */
+function eq(value, other) {
+  return value === other || (value !== value && other !== other);
+}
+
+export { eq as e, isFunction as i };

package/dist/esm/{isArrayLike-14db8f02.js → isArrayLike-dd37ba9a.js}

@@ -1,32 +1,4 @@
-import { a as isFunction } from './eq-f40dd1d6.js';
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return value != null && typeof value == 'object';
-}
+import { i as isFunction } from './eq-c1c7f528.js';
 
 /** Used as references for various `Number` constants. */
 var MAX_SAFE_INTEGER$1 = 9007199254740991;
@@ -115,4 +87,4 @@ function isArrayLike(value) {
   return value != null && isLength(value.length) && !isFunction(value);
 }
 
-export { isArrayLike as a, isLength as b, isIndex as c, isObjectLike as i };
+export { isLength as a, isIndex as b, isArrayLike as i };

package/dist/esm/{isEqual-4d982635.js → isEqual-4f22635f.js}

@@ -1,7 +1,9 @@
-import { r as root, b as baseGetTag, f as freeGlobal, e as eq, S as Symbol } from './eq-f40dd1d6.js';
-import { g as getNative, t as toSource } from './_defineProperty-cbf98a2a.js';
+import { e as eq } from './eq-c1c7f528.js';
+import { g as getNative, t as toSource } from './_defineProperty-8c869077.js';
+import { r as root, b as baseGetTag, f as freeGlobal, S as Symbol } from './isObject-c74e273c.js';
 import { i as isArray } from './isArray-80298bc7.js';
-import { i as isObjectLike, b as isLength, c as isIndex, a as isArrayLike } from './isArrayLike-14db8f02.js';
+import { i as isObjectLike } from './isObjectLike-38996507.js';
+import { a as isLength, b as isIndex, i as isArrayLike } from './isArrayLike-dd37ba9a.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee