@limetech/lime-elements 36.1.0-next.9 → 36.1.0

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { brightnesses, colors, getColorName, getCssColor } from './swatches';
 /**
  * @private
@@ -28,108 +28,118 @@ export class Palette {
       event.stopPropagation();
       this.change.emit(value);
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.required = undefined;
   }
   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 })),
+      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": {}
+  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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` if a value is required"
+      "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
       },
-      "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"
+      "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
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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.js

@@ -1,5 +1,5 @@
 /* eslint-disable multiline-ternary */
-import { Component, h, Prop, State, Event } from '@stencil/core';
+import { h } 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
@@ -16,7 +16,6 @@ import { Component, h, Prop, State, Event } from '@stencil/core';
  */
 export class ColorPicker {
   constructor() {
-    this.isOpen = false;
     this.renderTooltip = () => {
       if (!this.readonly && this.tooltipLabel) {
         return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
@@ -26,9 +25,7 @@ export class ColorPicker {
       if (this.readonly) {
         return this.renderPickerTrigger();
       }
-      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", 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 })));
+      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", 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 } : {};
@@ -46,144 +43,159 @@ export class ColorPicker {
       event.stopPropagation();
       this.change.emit(event.detail);
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.helperText = undefined;
+    this.tooltipLabel = undefined;
+    this.required = undefined;
+    this.readonly = undefined;
+    this.isOpen = false;
   }
   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" })),
+      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": {}
+  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
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` if a value is required"
+      "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
       },
-      "attribute": "required",
-      "reflect": true
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to `true` if a value is readonly. This makes the component un-interactive."
+      "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
       },
-      "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"
+      "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
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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/config/config.js

@@ -1,9 +1,11 @@
-import { Component, Prop } from '@stencil/core';
 import globalConfig from '../../global/config';
 /**
  * @private
  */
 export class Config {
+  constructor() {
+    this.config = undefined;
+  }
   componentDidLoad() {
     this.setGlobalConfig();
   }
@@ -26,21 +28,23 @@ export class Config {
   }
   static get is() { return "limel-config"; }
   static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "config": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "object",
-        "resolved": "object",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Global configuration for Lime Elements"
+  static get properties() {
+    return {
+      "config": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "object",
+          "resolved": "object",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Global configuration for Lime Elements"
+        }
       }
-    }
-  }; }
+    };
+  }
 }