@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,7 +1,6 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
 import Picker from 'vanilla-picker';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupColorPickerProps, } from './kup-color-picker-declarations';
 import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
 import { getProps, setProps } from '../../utils/utils';
@@ -54,6 +53,7 @@ export class KupColorPicker {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.clickCb = null;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -163,31 +163,36 @@ export class KupColorPicker {
   componentDidLoad() {
     const root = this.rootElement.shadowRoot;
     if (root) {
+      const that = this;
       this.picker = new Picker({
         alpha: false,
         color: this.value,
         parent: this.anchorEl,
       });
-      this.picker['kupColorPicker'] = this;
       this.picker['onClose'] = function (color) {
-        let colorPicker = this['kupColorPicker'];
-        colorPicker.setValue(color.hex.substr(0, 7));
-        colorPicker.kupManager.dynamicPosition.stop(colorPicker.dropdownEl);
-        colorPicker.kupChange.emit({
-          comp: colorPicker,
-          id: colorPicker.rootElement.id,
-          value: colorPicker.value,
+        that.setValue(color.hex.substr(0, 7));
+        that.kupChange.emit({
+          comp: that,
+          id: that.rootElement.id,
+          value: that.value,
         });
       };
       this.picker['onOpen'] = function () {
-        let colorPicker = this['kupColorPicker'];
-        if (!colorPicker.dropdownEl) {
-          colorPicker.dropdownEl =
-            this['kupColorPicker'].rootElement.shadowRoot.querySelector('.picker_wrapper');
-          colorPicker.kupManager.dynamicPosition.register(colorPicker.dropdownEl, colorPicker.anchorEl);
+        if (that.disabled) {
+          that.picker.closeHandler(null);
         }
-        if (!colorPicker.disabled) {
-          colorPicker.kupManager.dynamicPosition.start(colorPicker.dropdownEl);
+        else {
+          that.rootElement.style.setProperty('--kup_colorpicker_picker_width', that.textfieldEl.clientWidth + 'px');
+          if (!that.clickCb) {
+            that.clickCb = {
+              cb: () => {
+                that.picker.closeHandler(null);
+                that.kupManager.removeClickCallback(that.clickCb);
+              },
+              el: that.picker['domElement'],
+            };
+          }
+          that.kupManager.addClickCallback(this.clickCb, true);
         }
       };
     }
@@ -202,7 +207,7 @@ export class KupColorPicker {
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
     if (root) {
-      this.textfieldEl = root.querySelector('.f-text-field--wrapper');
+      this.textfieldEl = root.querySelector('.f-text-field');
       if (this.textfieldEl) {
         FTextFieldMDC(this.textfieldEl);
       }
@@ -222,18 +227,13 @@ export class KupColorPicker {
     const style = {
       ['--kup_colorpicker_thumb_color']: this.value ? this.value : '',
     };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, { style: style },
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, ref: (el) => (this.anchorEl = el) }, widget)));
   }
   disconnectedCallback() {
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
-    const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
-    if (dynamicPositionElements.length > 0) {
-      this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
-    }
   }
   static get is() { return "kup-color-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -256,11 +256,11 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }, {
-            "text": "https ://ketchup.smeup.com/ketchup-showcase/#/customization",
-            "name": "see"
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
           }],
         "text": "Custom style of the component."
       },
@@ -284,8 +284,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "Props of the text field."
       },
@@ -303,8 +303,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Defaults at false. When set to true, the component is disabled."
       },
@@ -324,8 +324,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component. Can be css color name, hex code or rgb code (sample: \"red\" or rgb(255, 0, 0) or \"#FF0000\" )."
       },
@@ -345,8 +345,8 @@ export class KupColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When true, the component's text field will be replaced by a swatch."
       },
@@ -385,8 +385,8 @@ export class KupColorPicker {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
               }],
             "text": "- When provided and true, the result will be the list of props with their description."
           }],
@@ -452,8 +452,8 @@ export class KupColorPicker {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
               }],
             "text": "- Object containing props that will be set to the component."
           }],
@@ -481,8 +481,8 @@ export class KupColorPicker {
         "signature": "(value: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "value - Value to be set.",
-                "name": "param"
+                "name": "param",
+                "text": "value - Value to be set."
               }],
             "text": "- Value to be set."
           }],

package/dist/collection/components/kup-combobox/kup-combobox-declarations.js

@@ -11,4 +11,5 @@ export var KupComboboxProps;
   KupComboboxProps["initialValue"] = "Sets the initial value of the component";
   KupComboboxProps["isSelect"] = "Lets the combobox behave as a select element.";
   KupComboboxProps["selectMode"] = "Sets how to return the selected item value. Suported values: \"code\", \"description\", \"both\".";
+  KupComboboxProps["showDropDownIcon"] = "When true shows the drop-down icon, for open list.";
 })(KupComboboxProps || (KupComboboxProps = {}));