@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/components/kup-text-field/kup-text-field.js

@@ -45,6 +45,11 @@ export class KupTextField {
      * @default null
      */
     this.helper = null;
+    /**
+     * When true, the helper will be displayed.
+     * @default true
+     */
+    this.helperEnabled = true;
     /**
      * When set, the helper will be shown only when the field is focused.
      * @default false
@@ -265,7 +270,7 @@ export class KupTextField {
   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) {
         const inputEl = f.querySelector('.mdc-text-field__input');
         if (inputEl) {
@@ -287,6 +292,7 @@ export class KupTextField {
         : false,
       fullWidth: this.fullWidth,
       helper: this.helper,
+      helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
       icon: this.icon,
       info: this.rootElement.classList.contains('kup-info')
@@ -327,9 +333,8 @@ export class KupTextField {
       onIconClick: (e) => this.onKupIconClick(e),
       onClearIconClick: () => this.onKupClearIconClick(),
     };
-    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 },
         h(FTextField, Object.assign({}, props)))));
   }
@@ -357,11 +362,11 @@ export class KupTextField {
       "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."
       },
@@ -381,8 +386,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component is disabled."
       },
@@ -402,8 +407,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "true",
-            "name": "default"
+            "name": "default",
+            "text": "true"
           }],
         "text": "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit."
       },
@@ -423,8 +428,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component will be rendered at full width."
       },
@@ -444,8 +449,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, its content will be shown as a help text below the field."
       },
@@ -453,6 +458,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "null"
     },
+    "helperEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "true"
+          }],
+        "text": "When true, the helper will be displayed."
+      },
+      "attribute": "helper-enabled",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "helperWhenFocused": {
       "type": "boolean",
       "mutable": false,
@@ -465,8 +491,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set, the helper will be shown only when the field is focused."
       },
@@ -486,8 +512,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, the text-field will show this icon."
       },
@@ -507,8 +533,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"\""
           }],
         "text": "Sets the initial value of the component"
       },
@@ -528,8 +554,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"text\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"text\""
           }],
         "text": "The HTML type of the input element. It has no effect on text areas."
       },
@@ -549,8 +575,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Enables a clear trailing icon."
       },
@@ -570,8 +596,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, its content will be shown as a label."
       },
@@ -591,8 +617,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the label will be on the left of the component."
       },
@@ -612,8 +638,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The HTML max attribute specifies the maximum value for the input element.\nWorks with the following input types: number, range, date, datetime-local, month, time and week."
       },
@@ -633,8 +659,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "When set, the helper will display a character counter."
       },
@@ -654,8 +680,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The HTML min attribute specifies the minimum value for the input element.\nWorks with the following input types: number, range, date, datetime-local, month, time and week."
       },
@@ -675,8 +701,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component will be rendered as an outlined field."
       },
@@ -696,8 +722,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select."
       },
@@ -717,8 +743,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "null",
-            "name": "default"
+            "name": "default",
+            "text": "null"
           }],
         "text": "The HTML step of the input element. It has effect only with number input type."
       },
@@ -738,8 +764,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the component will be rendered as a textarea."
       },
@@ -759,8 +785,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set, the icon will be shown after the text."
       },
@@ -780,8 +806,8 @@ export class KupTextField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, the label will be on the right of the component."
       },
@@ -960,8 +986,8 @@ export class KupTextField {
         "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."
           }],
@@ -1040,8 +1066,8 @@ export class KupTextField {
         "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."
           }],

package/dist/collection/components/kup-time-picker/kup-time-picker.css

@@ -1,11 +1,14 @@
 :host {
   display: block;
   font-size: var(--kup-font-size);
+  width: max-content;
 }
 
 #time-picker-div {
   display: none;
   outline: none;
+  position: absolute;
+  z-index: 1;
 }
 #time-picker-div.visible {
   display: block;
@@ -519,6 +522,10 @@
   transform: rotate(0deg);
 }
 
+.f-text-field {
+  position: relative;
+}
+
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/