@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-autocomplete/kup-autocomplete.js

@@ -1,15 +1,14 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, } from '@stencil/core';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { KupAutocompleteProps, } from './kup-autocomplete-declarations';
-import { ItemsDisplayMode } from '../kup-list/kup-list-declarations';
+import { ItemsDisplayMode, } from '../kup-list/kup-list-declarations';
 import { consistencyCheck } from '../kup-list/kup-list-helper';
 import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupAutocomplete {
   constructor() {
     /*-------------------------------------------------*/
@@ -20,10 +19,6 @@ export class KupAutocomplete {
     /*-------------------------------------------------*/
     /*                    P r o p s                    */
     /*-------------------------------------------------*/
-    /**
-     * Function that can be invoked when the filter is updated, but only if in serverHandledFilter mode. It returns the items filtered.
-     */
-    this.callBackOnFilterUpdate = undefined;
     /**
      * Custom style of the component.
      * @default ""
@@ -55,25 +50,28 @@ export class KupAutocomplete {
      */
     this.selectMode = ItemsDisplayMode.CODE;
     /**
-     * When true, it will emit events to inform the listener of the change of the current filter value.
-     * Also the component builtin filter will be disabled.
+     * When true, the items filter is managed server side, otherwise items filter is done client side.
      */
     this.serverHandledFilter = false;
+    /**
+     * When true shows the drop-down icon, for open list.
+     */
+    this.showDropDownIcon = true;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     this.doConsistencyCheck = true;
     this.elStyle = undefined;
-    this.listEl = undefined;
+    this.listEl = null;
     /**
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
     this.textfieldWrapper = undefined;
     this.textfieldEl = undefined;
+    this.clickCb = null;
   }
   onKupBlur(e) {
-    this.closeList();
     const { target } = e;
     this.kupBlur.emit({
       comp: this,
@@ -110,13 +108,17 @@ export class KupAutocomplete {
     this.doConsistencyCheck = true;
     this.consistencyCheck(undefined, e.target.value);
     if (this.openList(false)) {
-      this.handleFilterChange(this.displayedValue, e.target);
+      if (this.listEl != null && !this.serverHandledFilter) {
+        this.listEl.resetFilter(this.displayedValue);
+      }
+    }
+    if (e.target.value.length >= this.minimumChars) {
+      this.kupInput.emit({
+        comp: this,
+        id: this.rootElement.id,
+        value: this.value,
+      });
     }
-    this.kupInput.emit({
-      comp: this,
-      id: this.rootElement.id,
-      value: this.value,
-    });
   }
   onKupIconClick(event) {
     const { target } = event;
@@ -136,6 +138,9 @@ export class KupAutocomplete {
     this.doConsistencyCheck = true;
     this.consistencyCheck(e);
     this.closeList();
+    if (this.textfieldEl) {
+      this.textfieldEl.focus();
+    }
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
@@ -244,46 +249,39 @@ export class KupAutocomplete {
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
   /*-------------------------------------------------*/
-  handleFilterChange(newFilter, eventTarget) {
-    let detail = {
-      comp: this,
-      id: this.rootElement.id,
-      filter: newFilter,
-      matchesMinimumCharsRequired: newFilter && newFilter.length >= this.minimumChars,
-      el: eventTarget,
-    };
-    if (this.serverHandledFilter && this.callBackOnFilterUpdate) {
-      this.callBackOnFilterUpdate(detail)
-        .then((items) => {
-        this.data['kup-list']['data'] = [...items];
-        this.kupFilterChanged.emit(detail);
-      })
-        .catch((err) => {
-        this.kupManager.debug.logMessage(this, 'Executing callback error', KupDebugCategory.ERROR);
-        this.kupManager.debug.logMessage(this, err, KupDebugCategory.ERROR);
-      });
-    }
-    else {
-      this.listEl.resetFilter(newFilter);
-      this.kupFilterChanged.emit(detail);
-    }
-  }
   openList(forceOpen) {
     if (forceOpen != true && this.value.length < this.minimumChars) {
+      this.closeList();
       return false;
     }
     this.textfieldWrapper.classList.add('toggled');
     this.listEl.menuVisible = true;
-    this.kupManager.dynamicPosition.start(this.listEl);
-    let elStyle = this.listEl.style;
+    const elStyle = this.listEl.style;
     elStyle.height = 'auto';
     elStyle.minWidth = this.textfieldWrapper.clientWidth + 'px';
+    if (this.kupManager.dynamicPosition.isRegistered(this.listEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.listEl, this.textfieldWrapper);
+    }
+    else {
+      this.kupManager.dynamicPosition.register(this.listEl, this.textfieldWrapper, 0, KupDynamicPositionPlacement.AUTO, true);
+    }
+    this.kupManager.dynamicPosition.start(this.listEl);
+    if (!this.clickCb) {
+      this.clickCb = {
+        cb: () => {
+          this.closeList();
+        },
+        el: this.listEl,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCb, true);
     return true;
   }
   closeList() {
     this.textfieldWrapper.classList.remove('toggled');
     this.listEl.menuVisible = false;
-    this.kupManager.dynamicPosition.stop(this.rootElement);
+    this.kupManager.dynamicPosition.stop(this.listEl);
+    this.kupManager.removeClickCallback(this.clickCb);
   }
   isListOpened() {
     return this.listEl.menuVisible == true;
@@ -296,12 +294,12 @@ export class KupAutocomplete {
     let ret = consistencyCheck(valueIn, this.data['kup-list'], this.listEl, this.selectMode, this.displayMode, e);
     this.value = ret.value;
     this.displayedValue = ret.displayedValue;
-    if (this.listEl != null) {
+    if (this.listEl != null && !this.serverHandledFilter) {
       this.listEl.resetFilter(this.displayedValue);
     }
   }
   prepList() {
-    return (h("kup-list", Object.assign({}, this.data['kup-list'], { displayMode: this.displayMode, isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (this.listEl = el), tabindex: -1 })));
+    return (h("kup-list", Object.assign({ displayMode: this.displayMode }, this.data['kup-list'], { isMenu: true, "onkup-list-click": (e) => this.onKupItemClick(e), ref: (el) => (this.listEl = el) })));
   }
   /*-------------------------------------------------*/
   /*          L i f e c y c l e   H o o k s          */
@@ -328,12 +326,11 @@ export class KupAutocomplete {
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
     if (root) {
-      const f = root.querySelector('.f-text-field--wrapper');
+      const f = root.querySelector('.f-text-field');
       if (f) {
         this.textfieldWrapper = f;
         this.textfieldEl = f.querySelector('input');
         FTextFieldMDC(f);
-        this.kupManager.dynamicPosition.register(this.listEl, this.textfieldWrapper);
       }
     }
     this.kupManager.debug.logRender(this, true);
@@ -341,19 +338,19 @@ export class KupAutocomplete {
   render() {
     const fullHeight = this.rootElement.classList.contains('kup-full-height');
     const fullWidth = this.rootElement.classList.contains('kup-full-width');
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, onBlur: (e) => this.onKupBlur(e), style: this.elStyle },
-      customStyle ? h("style", null, customStyle) : null,
+    return (h(Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: this.elStyle },
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, style: this.elStyle },
-        h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: KupThemeIconValues.DROPDOWN, trailingIcon: true, value: this.displayedValue, onClick: (e) => this.onKupClick(e), onChange: (e) => this.onKupChange(e), onFocus: (e) => this.onKupFocus(e), onInput: (e) => this.onKupInput(e), onIconClick: (e) => this.onKupIconClick(e) })),
-        this.prepList())));
+        h(FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
+            ? KupThemeIconValues.DROPDOWN
+            : null, trailingIcon: true, value: this.displayedValue, onBlur: (e) => this.onKupBlur(e), onClick: (e) => this.onKupClick(e), onChange: (e) => this.onKupChange(e), onFocus: (e) => this.onKupFocus(e), onInput: (e) => this.onKupInput(e), onIconClick: (e) => this.onKupIconClick(e) }), this.prepList()))));
   }
   disconnectedCallback() {
-    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));
+    if (this.listEl) {
+      this.kupManager.dynamicPosition.unregister([this.listEl]);
+      this.listEl.remove();
     }
+    this.kupManager.theme.unregister(this);
   }
   static get is() { return "kup-autocomplete"; }
   static get encapsulation() { return "shadow"; }
@@ -364,29 +361,6 @@ export class KupAutocomplete {
     "$": ["kup-autocomplete.css"]
   }; }
   static get properties() { return {
-    "callBackOnFilterUpdate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(detail: {\n        filter: string;\n        matchesMinimumCharsRequired: boolean;\n        el: EventTarget;\n    }) => Promise<any[]> | undefined",
-        "resolved": "(detail: { filter: string; matchesMinimumCharsRequired: boolean; el: EventTarget; }) => Promise<any[]>",
-        "references": {
-          "EventTarget": {
-            "location": "global"
-          },
-          "Promise": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Function that can be invoked when the filter is updated, but only if in serverHandledFilter mode. It returns the items filtered."
-      },
-      "defaultValue": "undefined"
-    },
     "customStyle": {
       "type": "string",
       "mutable": false,
@@ -399,11 +373,11 @@ export class KupAutocomplete {
       "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."
       },
@@ -543,11 +517,29 @@ export class KupAutocomplete {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, it will emit events to inform the listener of the change of the current filter value.\nAlso the component builtin filter will be disabled."
+        "text": "When true, the items filter is managed server side, otherwise items filter is done client side."
       },
       "attribute": "server-handled-filter",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "showDropDownIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true shows the drop-down icon, for open list."
+      },
+      "attribute": "show-drop-down-icon",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -694,26 +686,6 @@ export class KupAutocomplete {
           }
         }
       }
-    }, {
-      "method": "kupFilterChanged",
-      "name": "kup-autocomplete-filterchanged",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "kupAutocompleteFilterChangedEventPayload",
-        "resolved": "kupAutocompleteFilterChangedEventPayload",
-        "references": {
-          "kupAutocompleteFilterChangedEventPayload": {
-            "location": "import",
-            "path": "./kup-autocomplete-declarations"
-          }
-        }
-      }
     }]; }
   static get methods() { return {
     "getProps": {
@@ -721,8 +693,8 @@ export class KupAutocomplete {
         "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."
           }],
@@ -804,8 +776,8 @@ export class KupAutocomplete {
         "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."
           }],
@@ -833,8 +805,8 @@ export class KupAutocomplete {
         "signature": "(value: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "value - Value of the component.",
-                "name": "param"
+                "name": "param",
+                "text": "value - Value of the component."
               }],
             "text": "- Value of the component."
           }],

package/dist/collection/components/kup-badge/kup-badge.css

@@ -1,35 +1,3 @@
-.f-image--wrapper {
-  display: block;
-  margin: auto;
-  position: relative;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper.kup-fit img {
-  max-width: max-content;
-  object-fit: contain;
-}
-.f-image--wrapper img {
-  display: block;
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__css {
-  overflow: hidden;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .f-image__icon {
-  margin: auto;
-  height: var(--kup_image_height, 100%);
-  width: var(--kup_image_width, 100%);
-}
-.f-image--wrapper .css-step.bottom-aligned {
-  bottom: 0;
-  position: absolute;
-}
-
 /**
 * @prop --kup-badge-border-radius: Sets border radius of the badge.
 * @prop --kup-badge-font-family: Sets font family of the badge.
@@ -72,10 +40,8 @@
   padding: var(--kup_badge_padding);
   text-align: center;
 }
-
-.f-image--wrapper {
+#kup-component .f-image {
   display: block;
-  position: relative;
   left: 50%;
   position: absolute;
   top: 50%;

package/dist/collection/components/kup-badge/kup-badge.js

@@ -94,9 +94,8 @@ export class KupBadge {
       }
       imageEl = h(FImage, Object.assign({}, this.imageData));
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     return (h(Host, null,
-      customStyle ? h("style", null, customStyle) : null,
+      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, onClick: () => this.onKupClick() },
         this.text,
         imageEl)));
@@ -125,11 +124,11 @@ export class KupBadge {
       "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."
       },
@@ -154,8 +153,8 @@ export class KupBadge {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The data of the image displayed inside the badge."
       },
@@ -173,8 +172,8 @@ export class KupBadge {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The text displayed inside the badge."
       },
@@ -210,8 +209,8 @@ export class KupBadge {
         "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."
           }],
@@ -258,8 +257,8 @@ export class KupBadge {
         "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."
           }],