@public-ui/components 3.0.5 → 3.0.6-rc.1

package/doc/textarea.md

@@ -5,33 +5,33 @@
 
 ## Properties
 
-| Property              | Attribute              | Description                                                                                                                                                                                                                                                                                        | Type                                                                                                                                                                                                                                                                                                                                                                                        | Default      |
-| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| `_accessKey`          | `_access-key`          | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                                                                                                                                            | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_adjustHeight`       | `_adjust-height`       | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                                                                                                                                                                   | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                                                                                                                                                             | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `''`         |
-| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                    | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`                                                                                                                                                                                                                                                                                     | `undefined`  |
-| `_id`                 | `_id`                  | Defines the internal ID of the primary component element.                                                                                                                                                                                                                                          | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`  |
-| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `"hard" \| "soft" \| undefined`                                                                                                                                                                                                                                                                                                                                                             | `'hard'`     |
-| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `string \| undefined \| {} & { _level?: 0 \| 3 \| 1 \| 2 \| 4 \| 5 \| 6 \| undefined; _on?: KoliBriAlertEventCallbacks \| undefined; _label?: string \| undefined; _alert?: boolean \| undefined; _hasCloser?: boolean \| undefined; _type?: "default" \| "info" \| "success" \| "warning" \| "error" \| undefined; _variant?: "card" \| "msg" \| undefined; } & { _description: string; }` | `undefined`  |
-| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_on`                 | `_on`                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined`                                                                                                                                                                                                                                                                                 | `undefined`  |
-| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_required`           | `_required`            | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_resize`             | `_resize`              | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `"none" \| "vertical" \| undefined`                                                                                                                                                                                                                                                                                                                                                         | `'vertical'` |
-| `_rows`               | `_rows`                | Defines how many rows of text should be visible at the same time.                                                                                                                                                                                                                                  | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_shortKey`           | `_short-key`           | Adds a visual short key hint to the component.                                                                                                                                                                                                                                                     | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
-| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `undefined`  |
-| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                       | `'top'`      |
-| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                      | `false`      |
-| `_value`              | `_value`               | Defines the value of the input.                                                                                                                                                                                                                                                                    | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                       | `undefined`  |
+| Property              | Attribute              | Description                                                                                                                                                                                                                                                                                        | Type                                                                                                        | Default      |
+| --------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ |
+| `_accessKey`          | `_access-key`          | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                                                                                                                                                            | `string \| undefined`                                                                                       | `undefined`  |
+| `_adjustHeight`       | `_adjust-height`       | Adjusts the height of the element to its content.                                                                                                                                                                                                                                                  | `boolean \| undefined`                                                                                      | `false`      |
+| `_disabled`           | `_disabled`            | Makes the element not focusable and ignore all events.                                                                                                                                                                                                                                             | `boolean \| undefined`                                                                                      | `false`      |
+| `_hasCounter`         | `_has-counter`         | Shows a character counter for the input element.                                                                                                                                                                                                                                                   | `boolean \| undefined`                                                                                      | `false`      |
+| `_hideLabel`          | `_hide-label`          | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.                                                                                                                                                         | `boolean \| undefined`                                                                                      | `false`      |
+| `_hideMsg`            | `_hide-msg`            | Hides the error message but leaves it in the DOM for the input's aria-describedby.                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                      | `false`      |
+| `_hint`               | `_hint`                | Defines the hint text.                                                                                                                                                                                                                                                                             | `string \| undefined`                                                                                       | `''`         |
+| `_icons`              | `_icons`               | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                                                                                                                                                    | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }`     | `undefined`  |
+| `_id`                 | `_id`                  | <span class="text-red-500">**[DEPRECATED]**</span> Will be removed in the next major version.<br/><br/>Defines the internal ID of the primary component element.                                                                                                                                      | `string \| undefined`                                                                                       | `undefined`  |
+| `_label` _(required)_ | `_label`               | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.                                                                                                                                       | `string`                                                                                                    | `undefined`  |
+| `_maxLength`          | `_max-length`          | Defines the maximum number of input characters.                                                                                                                                                                                                                                                    | `number \| undefined`                                                                                       | `undefined`  |
+| `_maxLengthBehavior`  | `_max-length-behavior` | Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.                                                                                                                                                        | `"hard" \| "soft" \| undefined`                                                                             | `'hard'`     |
+| `_msg`                | `_msg`                 | Defines the properties for a message rendered as Alert component.                                                                                                                                                                                                                                  | `Omit<AlertProps, "_label" \| "_variant"> & { _description: string; } \| string \| undefined`               | `undefined`  |
+| `_name`               | `_name`                | Defines the technical name of an input field.                                                                                                                                                                                                                                                      | `string \| undefined`                                                                                       | `undefined`  |
+| `_on`                 | `_on`                  | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                                                                                                                                                          | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput \| undefined` | `undefined`  |
+| `_placeholder`        | `_placeholder`         | Defines the placeholder for input field. To be shown when there's no value.                                                                                                                                                                                                                        | `string \| undefined`                                                                                       | `undefined`  |
+| `_readOnly`           | `_read-only`           | Makes the input element read only.                                                                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                      | `false`      |
+| `_required`           | `_required`            | Makes the input element required.                                                                                                                                                                                                                                                                  | `boolean \| undefined`                                                                                      | `false`      |
+| `_resize`             | `_resize`              | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `"none" \| "vertical" \| undefined`                                                                         | `'vertical'` |
+| `_rows`               | `_rows`                | Defines how many rows of text should be visible at the same time.                                                                                                                                                                                                                                  | `number \| undefined`                                                                                       | `undefined`  |
+| `_shortKey`           | `_short-key`           | Adds a visual short key hint to the component.                                                                                                                                                                                                                                                     | `string \| undefined`                                                                                       | `undefined`  |
+| `_spellCheck`         | `_spell-check`         | Defines whether the browser should check the spelling and grammar.                                                                                                                                                                                                                                 | `boolean \| undefined`                                                                                      | `undefined`  |
+| `_tooltipAlign`       | `_tooltip-align`       | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                                                                                                                                                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                       | `'top'`      |
+| `_touched`            | `_touched`             | Shows if the input was touched by a user.                                                                                                                                                                                                                                                          | `boolean \| undefined`                                                                                      | `false`      |
+| `_value`              | `_value`               | Defines the value of the input.                                                                                                                                                                                                                                                                    | `string \| undefined`                                                                                       | `undefined`  |
 
 
 ## Methods

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "3.0.5",
+  "version": "3.0.6-rc.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -54,11 +54,11 @@
     "@floating-ui/dom": "1.7.4",
     "adopted-style-sheets": "1.1.9-rc.20",
     "boxen": "8.0.1",
-    "chalk": "5.6.0",
+    "chalk": "5.6.2",
     "clsx": "2.1.1",
-    "color-convert": "3.1.0",
+    "color-convert": "3.1.2",
     "color-rgba": "2.4.0",
-    "figlet": "1.8.2",
+    "figlet": "1.9.1",
     "lodash-es": "4.17.21",
     "markdown-it": "14.1.0",
     "query-selector-all-shadow-root": "0.0.3",

package/vscode-custom-data.json

@@ -547,24 +547,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -847,24 +830,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -970,24 +936,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -1119,24 +1068,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -1313,24 +1245,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_multiple",
@@ -1474,24 +1389,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_multiple",
@@ -1623,24 +1521,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -1800,24 +1681,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -1953,24 +1817,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -2081,24 +1928,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -2213,24 +2043,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -3037,10 +2850,6 @@
           "name": "_icons",
           "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
         },
-        {
-          "name": "_id",
-          "description": "Defines the internal ID of the primary component element."
-        },
         {
           "name": "_label",
           "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
@@ -3268,24 +3077,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_multiple",
@@ -3392,24 +3184,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",
@@ -3886,24 +3661,7 @@
         },
         {
           "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "msg"
-            }
-          ]
+          "description": "Defines the properties for a message rendered as Alert component."
         },
         {
           "name": "_name",

package/dist/cjs/FieldControlStateWrapper-Bi3QahMR.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";var Heading=require("./Heading-CjBQ4tEn.js"),index=require("./index-D-gXzjxo.js"),clsx=require("./clsx-CkZlkaek.js");require("./common-BnJ53iei.js");var reuse=require("./reuse-Cs36Ddzu.js"),FormFieldStateWrapper=require("./FormFieldStateWrapper-C7fBmRoh.js");const InputContainer=(e,l)=>{var{class:o}=e,r=Heading.__rest(e,["class"]);return index.h("div",Object.assign({class:clsx.clsx("kol-field-control__input",o)},r),l)},KolFieldControlFc=(e,l)=>{const{class:o,id:r,disabled:i,label:t,hideLabel:n,labelAlign:s,renderNoTooltip:a,hint:d,renderNoHint:c,tooltipAlign:p,accessKey:b,shortKey:u,msg:g,touched:h,required:F,readonly:_,fieldControlInputProps:x,fieldControlLabelProps:f,fieldControlTooltipProps:C,fieldControlHintProps:m}=e,y=Heading.__rest(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),k=!c,K=!a,j=FormFieldStateWrapper.checkHasMsg(g,h),S=reuse.showExpertSlot(t),q=K&&!S&&n,B=reuse.buildBadgeTextString(b,u),v=[index.h(index.Fragment,null,index.h(InputContainer,Object.assign({},x),l),q&&index.h(FormFieldStateWrapper.FormFieldTooltipFc,Object.assign({},C||{},{id:r,label:t,hideLabel:n,align:p,badgeText:B}))),index.h(FormFieldStateWrapper.KolFormFieldLabelFc,Object.assign({},f||{},{id:r,baseClassName:"kol-field-control",class:clsx.clsx(null==f?void 0:f.class,{"kol-field-control__label--visually-hidden":Boolean(n)}),hasExpertSlot:S,label:t,accessKey:b,shortKey:u}))];"left"===s&&v.reverse();const H={"kol-field-control--disabled":Boolean(i),"kol-field-control--required":Boolean(F),"kol-field-control--touched":Boolean(h),"kol-field-control--hide-label":Boolean(n),"kol-field-control--read-only":Boolean(_),[`kol-field-control--${(null==g?void 0:g.type)||"error"}`]:Boolean(j),[`kol-field-control--label-align-${s}`]:Boolean(s)};return index.h("div",Object.assign({class:clsx.clsx("kol-field-control",H,o)},y),v,k&&index.h(FormFieldStateWrapper.KolFormFieldHintFc,Object.assign({},m||{},{baseClassName:"kol-field-control",id:r,hint:d})))};function getFieldControlProps(e){const l={id:e._id,disabled:e._disabled,msg:FormFieldStateWrapper.convertMsgToInternMsg(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(l.required=e._required),"_readOnly"in e&&(l.readonly=e._readOnly),"_labelAlign"in e&&(l.labelAlign=e._labelAlign),"_accessKey"in e&&(l.accessKey=e._accessKey),"_shortKey"in e&&(l.shortKey=e._shortKey),l}const FieldControlStateWrapper=(e,l)=>{var{state:o}=e,r=Heading.__rest(e,["state"]);return index.h(KolFieldControlFc,Object.assign({},getFieldControlProps(o),r),l)};exports.FieldControlStateWrapper=FieldControlStateWrapper;

package/dist/cjs/FieldControlStateWrapper-Bi3QahMR.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldControlStateWrapper-Bi3QahMR.js","sources":["src/functional-components/FieldControl/FieldControl.tsx","src/functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper.tsx"],"sourcesContent":["import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { type AlignPropType, type LabelAlignPropType, buildBadgeTextString, checkHasMsg, type InternMsgPropType, showExpertSlot } from '../../schema';\nimport KolFieldControlTooltipFc from '../FormFieldTooltip';\nimport KolFieldControlLabelFc from '../FormFieldLabel';\nimport KolFieldControlHintFc from '../FormFieldHint';\n\nexport type FieldControlProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {\n\tid: string;\n\thint?: string;\n\tlabel: string;\n\thideLabel?: boolean;\n\tlabelAlign?: LabelAlignPropType;\n\taccessKey?: string;\n\tshortKey?: string;\n\ttooltipAlign?: AlignPropType;\n\tdisabled?: boolean;\n\tmsg?: InternMsgPropType;\n\ttouched?: boolean;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tshowTooltip?: boolean;\n\n\trenderNoLabel?: boolean;\n\trenderNoHint?: boolean;\n\trenderNoTooltip?: boolean;\n\n\tfieldControlLabelProps?: JSXBase.HTMLAttributes<Omit<HTMLLabelElement | HTMLLegendElement, 'id' | 'hidden' | 'htmlFor'>> & {\n\t\tcomponent?: 'label' | 'legend';\n\t\tshowBadge?: boolean;\n\t};\n\tfieldControlInputProps?: JSXBase.HTMLAttributes<HTMLDivElement>;\n\tfieldControlTooltipProps?: Pick<JSXBase.HTMLAttributes<HTMLElement>, 'class'>;\n\tfieldControlHintProps?: JSXBase.HTMLAttributes<HTMLElement>;\n};\n\nconst InputContainer: FC<JSXBase.HTMLAttributes<HTMLDivElement>> = ({ class: classNames, ...other }, children) => {\n\treturn (\n\t\t<div class={clsx('kol-field-control__input', classNames)} {...other}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nconst KolFieldControlFc: FC<FieldControlProps> = (props, children) => {\n\tconst {\n\t\tclass: classNames,\n\t\tid,\n\t\tdisabled,\n\t\tlabel,\n\t\thideLabel,\n\t\tlabelAlign,\n\t\trenderNoTooltip,\n\t\thint,\n\t\trenderNoHint,\n\t\ttooltipAlign,\n\t\taccessKey,\n\t\tshortKey,\n\t\tmsg,\n\t\ttouched,\n\t\trequired,\n\t\treadonly,\n\t\tfieldControlInputProps,\n\t\tfieldControlLabelProps,\n\t\tfieldControlTooltipProps,\n\t\tfieldControlHintProps,\n\t\t...other\n\t} = props;\n\n\tconst canShowHint = !renderNoHint;\n\tconst canShowTooltip = !renderNoTooltip;\n\tconst showMsg = checkHasMsg(msg, touched);\n\tconst hasExpertSlot = showExpertSlot(label);\n\tconst useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;\n\tconst badgeText = buildBadgeTextString(accessKey, shortKey);\n\n\tconst components = [\n\t\t<>\n\t\t\t<InputContainer {...fieldControlInputProps}>{children}</InputContainer>\n\t\t\t{useTooltipInsteadOfLabel && (\n\t\t\t\t<KolFieldControlTooltipFc\n\t\t\t\t\t{...(fieldControlTooltipProps || {})}\n\t\t\t\t\tid={id}\n\t\t\t\t\tlabel={label}\n\t\t\t\t\thideLabel={hideLabel}\n\t\t\t\t\talign={tooltipAlign}\n\t\t\t\t\tbadgeText={badgeText}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>,\n\t\t<KolFieldControlLabelFc\n\t\t\t{...(fieldControlLabelProps || {})}\n\t\t\tid={id}\n\t\t\tbaseClassName=\"kol-field-control\"\n\t\t\tclass={clsx(fieldControlLabelProps?.class, {\n\t\t\t\t['kol-field-control__label--visually-hidden']: Boolean(hideLabel),\n\t\t\t})}\n\t\t\thasExpertSlot={hasExpertSlot}\n\t\t\tlabel={label}\n\t\t\taccessKey={accessKey}\n\t\t\tshortKey={shortKey}\n\t\t/>,\n\t];\n\n\tif (labelAlign === 'left') {\n\t\tcomponents.reverse();\n\t}\n\n\tconst stateCssClasses = {\n\t\t['kol-field-control--disabled']: Boolean(disabled),\n\t\t['kol-field-control--required']: Boolean(required),\n\t\t['kol-field-control--touched']: Boolean(touched),\n\t\t['kol-field-control--hide-label']: Boolean(hideLabel),\n\t\t['kol-field-control--read-only']: Boolean(readonly),\n\t\t[`kol-field-control--${msg?.type || 'error'}`]: Boolean(showMsg),\n\t\t[`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),\n\t};\n\n\treturn (\n\t\t<div class={clsx('kol-field-control', stateCssClasses, classNames)} {...other}>\n\t\t\t{components}\n\t\t\t{canShowHint && <KolFieldControlHintFc {...(fieldControlHintProps || {})} baseClassName=\"kol-field-control\" id={id} hint={hint} />}\n\t\t</div>\n\t);\n};\n\nexport default KolFieldControlFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolFieldControlFc, { type FieldControlProps } from '../../functional-components/FieldControl';\nimport {\n\ttype InputColorStates,\n\ttype InputEmailStates,\n\ttype InputFileStates,\n\ttype InputNumberStates,\n\ttype InputPasswordStates,\n\ttype InputRangeStates,\n\ttype InputTextStates,\n\ttype InputCheckboxStates,\n\ttype InputRadioStates,\n\ttype SelectStates,\n\tconvertMsgToInternMsg,\n} from '../../schema';\n\ntype InputState =\n\t| InputTextStates\n\t| InputEmailStates\n\t| InputPasswordStates\n\t| InputNumberStates\n\t| InputColorStates\n\t| InputFileStates\n\t| InputRangeStates\n\t| InputCheckboxStates\n\t| InputRadioStates\n\t| SelectStates;\n\nexport type FieldControlStateWrapperProps = Partial<FieldControlProps> & {\n\tstate: InputState;\n};\n\nfunction getFieldControlProps(state: InputState): FieldControlProps {\n\tconst props: FieldControlProps = {\n\t\tid: state._id,\n\t\tdisabled: state._disabled,\n\t\tmsg: convertMsgToInternMsg(state._msg),\n\t\thint: state._hint,\n\t\tlabel: state._label,\n\t\thideLabel: state._hideLabel,\n\t\ttouched: state._touched,\n\t};\n\n\tif ('_required' in state) {\n\t\tprops.required = state._required;\n\t}\n\n\tif ('_readOnly' in state) {\n\t\tprops.readonly = state._readOnly;\n\t}\n\n\tif ('_labelAlign' in state) {\n\t\tprops.labelAlign = state._labelAlign;\n\t}\n\n\tif ('_accessKey' in state) {\n\t\tprops.accessKey = state._accessKey;\n\t}\n\n\tif ('_shortKey' in state) {\n\t\tprops.shortKey = state._shortKey;\n\t}\n\n\treturn props;\n}\n\nconst FieldControlStateWrapper: FC<FieldControlStateWrapperProps> = ({ state, ...other }, children) => {\n\treturn (\n\t\t<KolFieldControlFc {...getFieldControlProps(state)} {...other}>\n\t\t\t{children}\n\t\t</KolFieldControlFc>\n\t);\n};\n\nexport default FieldControlStateWrapper;\n"],"names":["__rest","h","clsx","checkHasMsg","showExpertSlot","buildBadgeTextString","Fragment","KolFieldControlTooltipFc","KolFieldControlLabelFc","KolFieldControlHintFc","convertMsgToInternMsg"],"mappings":";;;;;;;;;;;;AAqCA,MAAM,cAAc,GAA+C,CAAC,EAA+B,EAAE,QAAQ,KAAI;QAA7C,EAAE,KAAK,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAA,cAAA,CAAA,EAAA,EAA7B,SAA+B,CAAF;AAChG,IAAA,QACCC,OAAK,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,KAAK,EAAEC,SAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC,IAAM,KAAK,CAAA,EACjE,QAAQ,CACJ;AAER,CAAC;AAED,MAAM,iBAAiB,GAA0B,CAAC,KAAK,EAAE,QAAQ,KAAI;IACpE,MAAM,EACL,KAAK,EAAE,UAAU,EACjB,EAAE,EACF,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,EACH,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,sBAAsB,EACtB,sBAAsB,EACtB,wBAAwB,EACxB,qBAAqB,EAElB,GAAA,KAAK,EADL,KAAK,kBACL,KAAK,EAtBH,CAsBL,OAAA,EAAA,IAAA,EAAA,UAAA,EAAA,OAAA,EAAA,WAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,cAAA,EAAA,cAAA,EAAA,WAAA,EAAA,UAAA,EAAA,KAAA,EAAA,SAAA,EAAA,UAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,uBAAA,CAAA,CAAQ;AAET,IAAA,MAAM,WAAW,GAAG,CAAC,YAAY;AACjC,IAAA,MAAM,cAAc,GAAG,CAAC,eAAe;IACvC,MAAM,OAAO,GAAGC,iCAAW,CAAC,GAAG,EAAE,OAAO,CAAC;AACzC,IAAA,MAAM,aAAa,GAAGC,oBAAc,CAAC,KAAK,CAAC;IAC3C,MAAM,wBAAwB,GAAG,cAAc,IAAI,CAAC,aAAa,IAAI,SAAS;IAC9E,MAAM,SAAS,GAAGC,0BAAoB,CAAC,SAAS,EAAE,QAAQ,CAAC;AAE3D,IAAA,MAAM,UAAU,GAAG;AAClB,QAAAJ,OAAA,CAAAK,cAAA,EAAA,IAAA;AACC,YAAAL,OAAA,CAAC,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,sBAAsB,CAAA,EAAG,QAAQ,CAAkB;AACtE,YAAA,wBAAwB,KACxBA,OAAC,CAAAM,wCAAwB,qBACnB,wBAAwB,IAAI,EAAE,GAAC,EACpC,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,EAAA,CAAA,CACnB,CACF,CACC;QACHN,OAAC,CAAAO,yCAAsB,EAClB,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,sBAAsB,IAAI,EAAE,GACjC,EAAA,EAAE,EAAE,EAAE,EACN,aAAa,EAAC,mBAAmB,EACjC,KAAK,EAAEN,SAAI,CAAC,sBAAsB,KAAtB,IAAA,IAAA,sBAAsB,KAAtB,MAAA,GAAA,MAAA,GAAA,sBAAsB,CAAE,KAAK,EAAE;AAC1C,gBAAA,CAAC,2CAA2C,GAAG,OAAO,CAAC,SAAS,CAAC;AACjE,aAAA,CAAC,EACF,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EACjB,CAAA,CAAA;KACF;AAED,IAAA,IAAI,UAAU,KAAK,MAAM,EAAE;QAC1B,UAAU,CAAC,OAAO,EAAE;;AAGrB,IAAA,MAAM,eAAe,GAAG;AACvB,QAAA,CAAC,6BAA6B,GAAG,OAAO,CAAC,QAAQ,CAAC;AAClD,QAAA,CAAC,6BAA6B,GAAG,OAAO,CAAC,QAAQ,CAAC;AAClD,QAAA,CAAC,4BAA4B,GAAG,OAAO,CAAC,OAAO,CAAC;AAChD,QAAA,CAAC,+BAA+B,GAAG,OAAO,CAAC,SAAS,CAAC;AACrD,QAAA,CAAC,8BAA8B,GAAG,OAAO,CAAC,QAAQ,CAAC;AACnD,QAAA,CAAC,sBAAsB,CAAA,GAAG,KAAH,IAAA,IAAA,GAAG,uBAAH,GAAG,CAAE,IAAI,KAAI,OAAO,CAAE,CAAA,GAAG,OAAO,CAAC,OAAO,CAAC;QAChE,CAAC,CAAA,+BAAA,EAAkC,UAAU,CAAE,CAAA,GAAG,OAAO,CAAC,UAAU,CAAC;KACrE;AAED,IAAA,QACCD,OAAA,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAK,KAAK,EAAEC,SAAI,CAAC,mBAAmB,EAAE,eAAe,EAAE,UAAU,CAAC,IAAM,KAAK,CAAA;QAC3E,UAAU;QACV,WAAW,IAAID,OAAC,CAAAQ,wCAAqB,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,GAAC,qBAAqB,IAAI,EAAE,GAAC,EAAE,aAAa,EAAC,mBAAmB,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAA,CAAA,CAAI,CAC7H;AAER,CAAC;;AC7FD,SAAS,oBAAoB,CAAC,KAAiB,EAAA;AAC9C,IAAA,MAAM,KAAK,GAAsB;QAChC,EAAE,EAAE,KAAK,CAAC,GAAG;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS;AACzB,QAAA,GAAG,EAAEC,2CAAqB,CAAC,KAAK,CAAC,IAAI,CAAC;QACtC,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,KAAK,CAAC,MAAM;QACnB,SAAS,EAAE,KAAK,CAAC,UAAU;QAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ;KACvB;AAED,IAAA,IAAI,WAAW,IAAI,KAAK,EAAE;AACzB,QAAA,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS;;AAGjC,IAAA,IAAI,WAAW,IAAI,KAAK,EAAE;AACzB,QAAA,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS;;AAGjC,IAAA,IAAI,aAAa,IAAI,KAAK,EAAE;AAC3B,QAAA,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW;;AAGrC,IAAA,IAAI,YAAY,IAAI,KAAK,EAAE;AAC1B,QAAA,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,UAAU;;AAGnC,IAAA,IAAI,WAAW,IAAI,KAAK,EAAE;AACzB,QAAA,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC,SAAS;;AAGjC,IAAA,OAAO,KAAK;AACb;AAEA,MAAM,wBAAwB,GAAsC,CAAC,EAAmB,EAAE,QAAQ,KAAI;AAAjC,IAAA,IAAA,EAAE,KAAK,EAAY,GAAA,EAAA,EAAP,KAAK,GAAAV,cAAA,CAAA,EAAA,EAAjB,SAAmB,CAAF;AACrF,IAAA,QACCC,OAAA,CAAC,iBAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,oBAAoB,CAAC,KAAK,CAAC,EAAM,KAAK,CAAA,EAC3D,QAAQ,CACU;AAEtB;;;;"}

package/dist/cjs/FormFieldStateWrapper-C7fBmRoh.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";var common=require("./common-BnJ53iei.js"),accessAndShortKey=require("./access-and-short-key-B0dVd63T.js"),disabled=require("./disabled-JsWu7U3p.js"),hideLabel=require("./hide-label-DUc_dh2F.js"),label=require("./label-QuxWRpmX.js"),tooltipAlign=require("./tooltip-align-BrHrEyjZ.js"),events=require("./events-DDhO-Ns8.js"),associated_controller=require("./associated.controller-DCjDhSZx.js"),isObject=require("./isObject-DMA85Fq4.js"),Heading=require("./Heading-CjBQ4tEn.js"),index=require("./index-D-gXzjxo.js"),clsx=require("./clsx-CkZlkaek.js"),Alert=require("./Alert-DyIpLNKH.js"),InternalUnderlinedBadgeText=require("./InternalUnderlinedBadgeText-BODtZzoY.js"),reuse=require("./reuse-Cs36Ddzu.js"),i18n=require("./i18n-CGM1ewjR.js"),componentNames=require("./component-names-D7MwtuB7.js");const validateAdjustHeight=(e,t)=>{common.watchBoolean(e,"_adjustHeight",t)},validateHideMsg=(e,t,n)=>{common.watchBoolean(e,"_hideMsg",t,n)},validateHint=(e,t)=>{common.watchString(e,"_hint",t)};function transformObjectProperties(e){return Object.entries(e).reduce((e,[t,n])=>{const i=t.startsWith("_")?t.slice(1):t;return Object.assign(Object.assign({},e),{[i]:n})},{})}const validateMsg=(e,t)=>{common.objectObjectHandler(t,()=>{try{t=common.parseJson(t)}catch(e){}common.watchValidator(e,"_msg",e=>{if(void 0===e)return!0;if("string"==typeof e&&e.length>0)return!0;if(common.isObject(e)&&null!==e){const t=e;return common.isString(t._description,1)}return!1},new Set(["MsgPropType","string"]),t)})};function convertMsgToInternMsg(e){if(e)return"string"==typeof e?{description:e,type:"error"}:transformObjectProperties(e)}function checkHasMsg(e,t){return!!e&&(!0===t||"error"!==(null==e?void 0:e.type))}const validateTouched=(e,t)=>{common.watchBoolean(e,"_touched",t)},FormFieldMsgFc=e=>{var{alert:t,msg:n,hideMsg:i,id:o,class:r}=e,s=Heading.__rest(e,["alert","msg","hideMsg","id","class"]);return index.h(Alert.KolAlertFc,Object.assign({id:`${o}-msg`,alert:t,type:"error",class:clsx.clsx("kol-form-field__msg",{"visually-hidden":!0===i},r)},n,s,{"aria-hidden":"true"}),(null==n?void 0:n.description)||void 0)};var symbolTag="[object Symbol]";function isSymbol(e){return"symbol"==typeof e||isObject.isObjectLike(e)&&isObject.baseGetTag(e)==symbolTag}var reWhitespace=/\s/;function trimmedEndIndex(e){for(var t=e.length;t--&&reWhitespace.test(e.charAt(t)););return t}var reTrimStart=/^\s+/;function baseTrim(e){return e?e.slice(0,trimmedEndIndex(e)+1).replace(reTrimStart,""):e}var NAN=NaN,reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,freeParseInt=parseInt;function toNumber(e){if("number"==typeof e)return e;if(isSymbol(e))return NAN;if(isObject.isObject(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=isObject.isObject(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=baseTrim(e);var n=reIsBinary.test(e);return n||reIsOctal.test(e)?freeParseInt(e.slice(2),n?2:8):reIsBadHex.test(e)?NAN:+e}var now=function(){return isObject.root.Date.now()},FUNC_ERROR_TEXT="Expected a function",nativeMax=Math.max,nativeMin=Math.min;function debounce(e,t,n){var i,o,r,s,a,l,c=0,d=!1,h=!1,u=!0;if("function"!=typeof e)throw new TypeError(FUNC_ERROR_TEXT);function m(t){var n=i,r=o;return i=o=void 0,c=t,s=e.apply(r,n)}function p(e){var n=e-l;return void 0===l||n>=t||n<0||h&&e-c>=r}function g(){var e=now();if(p(e))return b(e);a=setTimeout(g,function(e){var n=t-(e-l);return h?nativeMin(n,r-(e-c)):n}(e))}function b(e){return a=void 0,u&&i?m(e):(i=o=void 0,s)}function v(){var e=now(),n=p(e);if(i=arguments,o=this,l=e,n){if(void 0===a)return function(e){return c=e,a=setTimeout(g,t),d?m(e):s}(l);if(h)return clearTimeout(a),a=setTimeout(g,t),m(l)}return void 0===a&&(a=setTimeout(g,t)),s}return t=toNumber(t)||0,isObject.isObject(n)&&(d=!!n.leading,r=(h="maxWait"in n)?nativeMax(toNumber(n.maxWait)||0,t):r,u="trailing"in n?!!n.trailing:u),v.cancel=function(){void 0!==a&&clearTimeout(a),c=0,i=l=o=a=void 0},v.flush=function(){return void 0===a?s:b(now())},v}const LabelFc=({hasExpertSlot:e,accessKey:t,shortKey:n,label:i,showBadge:o=!0})=>{if(e)return index.h("slot",{name:"expert"});if(!i)return null;const r=InternalUnderlinedBadgeText.isString(t)||InternalUnderlinedBadgeText.isString(n);if(!o||!r)return index.h("span",null,i);const s=reuse.buildBadgeTextString(t,n);return index.h(index.Fragment,null,index.h(InternalUnderlinedBadgeText.KolInternalUnderlinedBadgeTextFc,{badgeText:s,label:i})," ",index.h("kbd",{class:"badge-text-hint","aria-hidden":"true"},s))},KolFormFieldLabelFc=e=>{var{component:t="label",id:n,baseClassName:i="kol-form-field",class:o,accessKey:r,shortKey:s,label:a,hideLabel:l,hasExpertSlot:c,showBadge:d}=e,h=Heading.__rest(e,["component","id","baseClassName","class","accessKey","shortKey","label","hideLabel","hasExpertSlot","showBadge"]);const u=!c&&l;return index.h(t,Object.assign({},h,{class:clsx.clsx(`${i}__label`,o),id:u?void 0:`${n}-label`,hidden:u,htmlFor:n}),index.h("span",{class:clsx.clsx(`${i}__label-text`)},index.h(LabelFc,{hasExpertSlot:c,accessKey:r,shortKey:s,label:a,showBadge:d})))},KolFormFieldHintFc=e=>{var{id:t,class:n,hint:i,baseClassName:o="kol-form-field"}=e,r=Heading.__rest(e,["id","class","hint","baseClassName"]);return i?index.h("span",Object.assign({class:clsx.clsx(`${o}__hint`,n),id:`${t}-hint`},r),i):null},KolFormFieldCounterFc=({currentLength:e,currentLengthDebounced:t,maxLength:n,maxLengthBehavior:i})=>{let o,r;const s=["kol-form-field__counter"];if("hard"===i)o="number"==typeof n?i18n.translate("kol-character-counter-current-of-max",{placeholders:{current:String(e),max:String(n)}}):i18n.translate("kol-character-counter-current",{placeholders:{current:String(e)}}),r="number"==typeof n?i18n.translate("kol-character-counter-current-of-max-aria",{placeholders:{current:String(t),max:String(n)}}):i18n.translate("kol-character-counter-current",{placeholders:{current:String(t)}});else{if("number"!=typeof n)return null;{const i=n-e,a=i<0,l=n-t,c=l<0;o=a?i18n.translate("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(i))}}):i18n.translate("kol-character-limit-remaining",{placeholders:{remaining:String(i)}}),r=c?i18n.translate("kol-character-limit-exceeded",{placeholders:{over:String(Math.abs(l))}}):i18n.translate("kol-character-limit-remaining",{placeholders:{remaining:String(l)}}),a&&s.push("kol-form-field__counter--exceeded")}}return index.h(index.Fragment,null,index.h("span",{class:clsx.clsx(s),"aria-hidden":"true","data-testid":"input-counter"},o),index.h("span",{"aria-live":"polite",class:"visually-hidden","data-testid":"input-counter-aria"},r))},KolFormFieldCharacterLimitHintFc=({id:e,maxLength:t})=>index.h("span",{id:`${e}-character-limit-hint`,class:"visually-hidden"},i18n.translate("kol-character-limit-hint",{placeholders:{limit:String(t)}})),FormFieldTooltipFc=({id:e,align:t,badgeText:n,hideLabel:i,label:o,class:r})=>index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:clsx.clsx("kol-form-field__tooltip",r),_badgeText:n,_align:t,_id:i?`${e}-label`:void 0,_label:o});function getModifierClassNameByMsgType(e){return(null==e?void 0:e.type)&&{default:"msg-type-default",info:"msg-type-info",success:"msg-type-success",warning:"msg-type-warning",error:"msg-type-error"}[null==e?void 0:e.type]||""}const InputContainer=(e,t)=>{var{class:n}=e,i=Heading.__rest(e,["class"]);return index.h("div",Object.assign({class:clsx.clsx("kol-form-field__input",n)},i),t)},KolFormFieldFc=(e,t)=>{const{component:n="div",renderNoLabel:i,renderNoTooltip:o,renderNoHint:r,anotherChildren:s,id:a,required:l,alert:c,disabled:d,class:h,msg:u,hideMsg:m,hideLabel:p,label:g,hint:b,accessKey:v,shortKey:f,tooltipAlign:x,counter:_,readOnly:y,touched:F,maxLength:L,formFieldLabelProps:j,formFieldHintProps:K,formFieldTooltipProps:T,formFieldMsgProps:S,formFieldInputProps:M}=e,C=Heading.__rest(e,["component","renderNoLabel","renderNoTooltip","renderNoHint","anotherChildren","id","required","alert","disabled","class","msg","hideMsg","hideLabel","label","hint","accessKey","shortKey","tooltipAlign","counter","readOnly","touched","maxLength","formFieldLabelProps","formFieldHintProps","formFieldTooltipProps","formFieldMsgProps","formFieldInputProps"]),O=!i,B=!r,H=!o,I=reuse.showExpertSlot(g),k=checkHasMsg(u,F),A=reuse.buildBadgeTextString(v,f),E=H&&!I&&p;let D={"kol-form-field--disabled":Boolean(d),"kol-form-field--required":Boolean(l),"kol-form-field--touched":Boolean(F),"kol-form-field--hide-label":Boolean(p),"kol-form-field--read-only":Boolean(y),"kol-form-field--hidden-msg":Boolean(m)};return k&&(D=Object.assign(Object.assign({},D),{[`kol-form-field--${(null==u?void 0:u.type)||"error"}`]:!0,[`kol-form-field--${getModifierClassNameByMsgType(u)}`]:!0})),index.h(n,Object.assign({class:clsx.clsx("kol-form-field",D,h)},C),O&&index.h(KolFormFieldLabelFc,Object.assign({},j||{},{id:a,hasExpertSlot:I,hideLabel:p,label:g,accessKey:v,shortKey:f})),index.h(InputContainer,Object.assign({},M),t,E&&index.h(FormFieldTooltipFc,Object.assign({},T||{},{id:a,label:g,hideLabel:p,align:x,badgeText:A}))),_?index.h(KolFormFieldCounterFc,Object.assign({},_)):null,L?index.h(KolFormFieldCharacterLimitHintFc,{id:a,maxLength:L}):null,k&&index.h(FormFieldMsgFc,Object.assign({},S||{},{id:a,alert:c,msg:u,hideMsg:m})),B&&index.h(KolFormFieldHintFc,Object.assign({},K||{},{id:a,hint:b})),s)};function getDefaultProps({ariaDescribedBy:e,hideLabel:t,label:n}){return{title:"",autoCapitalize:"off",autoCorrect:"off","aria-describedby":(null==e?void 0:e.length)?e.join(" "):void 0,"aria-label":t&&n?n:void 0}}class ControlledInputController extends associated_controller.AssociatedInputController{constructor(e,t,n){super(e,t,n),this.component=e}validateTouched(e){validateTouched(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(e,t,n){super(e,t,n),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.updateCurrentLengthDebounced=debounce(e=>{common.setState(this.component,"_currentLengthDebounced",e)},500),this.component=e}validateAccessKey(e){accessAndShortKey.validateAccessKey(this.component,e),accessAndShortKey.validateAccessAndShortKey(e,this.component._shortKey)}validateAdjustHeight(e){validateAdjustHeight(this.component,e)}validateDisabled(e){disabled.validateDisabled(this.component,e)}validateTooltipAlign(e){tooltipAlign.validateTooltipAlign(this.component,e)}validateHideMsg(e){validateHideMsg(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideMsg&&common.a11yHint("Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(e){hideLabel.validateHideLabel(this.component,e,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&common.a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(e){validateHint(this.component,e)}validateId(e){common.watchString(this.component,"_id",e,{minLength:1}),""!==e&&void 0!==e||common.devHint("A unique ID on the input fields is not strictly required, but it might be relevant for E2E tests.")}validateLabel(e){label.validateLabelWithExpertSlot(this.component,e,{required:!0})}validateMsg(e){validateMsg(this.component,e)}validateOn(e){"object"==typeof e&&common.setState(this.component,"_on",e)}validateShortKey(e){accessAndShortKey.validateShortKey(this.component,e),accessAndShortKey.validateAccessAndShortKey(this.component._accessKey,e)}validateSmartButton(e){common.objectObjectHandler(e,()=>{try{e=common.parseJson(e)}catch(e){}common.setState(this.component,"_smartButton",e)})}validateTabIndex(e){accessAndShortKey.validateTabIndex(this.component,e)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideMsg(this.component._hideMsg),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateShortKey(this.component._shortKey),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex),accessAndShortKey.validateAccessAndShortKey(this.component._accessKey,this.component._shortKey)}emitEvent(e,t){this.host&&events.dispatchDomEvent(this.host,e,t)}onBlur(e){var t;this.component._touched=!0,this.emitEvent(events.KolEvent.blur),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onBlur)&&this.component._on.onBlur(e)}onChange(e,t){var n;void 0===t&&(t=e.target.value),this.emitEvent(events.KolEvent.change,t),"function"==typeof(null===(n=this.component._on)||void 0===n?void 0:n.onChange)&&this.component._on.onChange(e,t),this.valueChangeListeners.forEach(e=>e(t))}onInput(e,t=!0,n){var i;void 0===n&&(n=e.target.value),this.emitEvent(events.KolEvent.input,n),t&&this.setFormAssociatedValue(n),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(e,n)}onClick(e){var t;this.emitEvent(events.KolEvent.click),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onClick)&&this.component._on.onClick(e)}onFocus(e){var t;this.emitEvent(events.KolEvent.focus),"function"==typeof(null===(t=this.component._on)||void 0===t?void 0:t.onFocus)&&this.component._on.onFocus(e)}addValueChangeListener(e){this.valueChangeListeners.push(e)}hasSoftCharacterLimit(){return"number"==typeof this.component.state._maxLength&&"soft"===this.component.state._maxLengthBehavior}hasCounter(){return!0===this.component.state._hasCounter}}const getRenderStates=e=>{const t=convertMsgToInternMsg(e._msg),n=Boolean((null==t?void 0:t.description)&&t.description.length>0),i="error"===(null==t?void 0:t.type)&&n&&!0===e._touched,o="string"==typeof e._hint&&e._hint.length>0,r=[];return n&&r.push(`${e._id}-msg`),o&&r.push(`${e._id}-hint`),{hasError:i,hasHint:o,ariaDescribedBy:r}};function getFormFieldProps(e){const t={id:e._id,disabled:e._disabled,msg:convertMsgToInternMsg(e._msg),hint:e._hint,label:e._label,hideLabel:e._hideLabel,hideMsg:e._hideMsg,touched:e._touched};return"_required"in e&&(t.required=e._required),"_readOnly"in e&&(t.readOnly=e._readOnly),"_accessKey"in e&&(t.accessKey=e._accessKey),"_shortKey"in e&&(t.shortKey=e._shortKey),"_maxLength"in e&&(t.maxLength=e._maxLength),"_currentLength"in e&&"number"==typeof e._currentLength&&"_currentLengthDebounced"in e&&"number"==typeof e._currentLengthDebounced&&"_hasCounter"in e&&!0===e._hasCounter&&(t.counter={currentLength:e._currentLength,currentLengthDebounced:e._currentLengthDebounced,maxLength:e._maxLength,maxLengthBehavior:e._maxLengthBehavior||"hard"}),t}const FormFieldStateWrapper=(e,t)=>{var{state:n}=e,i=Heading.__rest(e,["state"]);return index.h(KolFormFieldFc,Object.assign({},getFormFieldProps(n),i),t)};exports.FormFieldStateWrapper=FormFieldStateWrapper,exports.FormFieldTooltipFc=FormFieldTooltipFc,exports.InputController=InputController,exports.KolFormFieldHintFc=KolFormFieldHintFc,exports.KolFormFieldLabelFc=KolFormFieldLabelFc,exports.checkHasMsg=checkHasMsg,exports.convertMsgToInternMsg=convertMsgToInternMsg,exports.getDefaultProps=getDefaultProps,exports.getRenderStates=getRenderStates;