@nanoporetech-digital/components 2.5.0 → 2.8.0

package/dist/collection/components/accordion/accordion.js

@@ -47,7 +47,7 @@ export class Accordion {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/alert/alert.js

@@ -305,7 +305,7 @@ export class Alert {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/algolia/algolia-filter.js

@@ -362,7 +362,7 @@ export class AlgoliaFilter {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -405,7 +405,7 @@ export class AlgoliaFilter {
         "references": {
           "FilterChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/algolia/algolia-input.js

@@ -228,7 +228,7 @@ export class AlgoliaInput {
         "references": {
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -349,7 +349,7 @@ export class AlgoliaInput {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -390,7 +390,7 @@ export class AlgoliaInput {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -410,7 +410,7 @@ export class AlgoliaInput {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -430,7 +430,7 @@ export class AlgoliaInput {
         "references": {
           "AloliaSearchResultDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/algolia/algolia-results.js

@@ -251,7 +251,7 @@ export class AlgoliaResults {
         "references": {
           "PageChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/algolia/algolia.js

@@ -738,7 +738,7 @@ export class Algolia {
         "references": {
           "SearchIndex": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -982,7 +982,7 @@ export class Algolia {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },
@@ -1047,7 +1047,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1067,7 +1067,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1087,7 +1087,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1107,7 +1107,7 @@ export class Algolia {
         "references": {
           "IndexResult": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/checkbox/checkbox-group.css

@@ -66,7 +66,7 @@
   margin: 0;
   padding: 0;
 }
-.nanogroupcb__legend, .nanogroupcb__error, .nanogroupcb__help, .nanogroupcb__more {
+.nanogroupcb__error, .nanogroupcb__help, .nanogroupcb__more {
   display: block;
   width: 100%;
   overflow: hidden;
@@ -78,6 +78,9 @@
   padding: 0 0 var(--label-padding);
   margin: 0;
   line-height: 1;
+  white-space: normal;
+  display: block;
+  width: 100%;
 }
 :host([invalid]:not([invalid=false])) .nanogroupcb__legend {
   color: var(--label-color--invalid);

package/dist/collection/components/checkbox/checkbox-group.js

@@ -370,7 +370,7 @@ export class CheckboxGroup {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -392,7 +392,7 @@ export class CheckboxGroup {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/checkbox/checkbox.css

@@ -12,7 +12,7 @@
 }
 :host {
   /**
-   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #fac6c3);
+   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #e4e6e8);
    * @prop --focus-shadow: Control focus box-shadow. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
    * @prop --padding: padding around radio and checkbox controls. Defaults to initial;
    * @prop --control-padding: padding around tag and segmented controls text. Various defaults.
@@ -34,7 +34,7 @@
    * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);
   */
   --focus-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-  --invalid-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #fac6c3);
+  --invalid-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #e4e6e8);
   --padding: initial;
   --check-bg-color: #fff;
   --check-border-style: 1px solid #b5aea7;

package/dist/collection/components/checkbox/checkbox.js

@@ -405,7 +405,7 @@ export class Checkbox {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -441,7 +441,7 @@ export class Checkbox {
         "references": {
           "CheckboxChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -512,7 +512,7 @@ export class Checkbox {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/datalist/datalist.js

@@ -550,7 +550,7 @@ export class DataList {
         "references": {
           "OptionInterface": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/date-input/date-input.css

@@ -51,6 +51,7 @@ nano-icon {
   padding: 0 !important;
   width: 0 !important;
   width: 100%;
+  z-index: var(--nano-layer-index-dropdown, 300) !important;
 }
 .date-field__close-bar {
   -webkit-box-align: center;

package/dist/collection/components/date-input/date-input.js

@@ -405,7 +405,7 @@ export class DateInput {
         "references": {
           "LocalDateOpts": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -526,7 +526,7 @@ export class DateInput {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -550,7 +550,7 @@ export class DateInput {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -592,7 +592,7 @@ export class DateInput {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -962,7 +962,7 @@ export class DateInput {
         "references": {
           "DateInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -985,7 +985,7 @@ export class DateInput {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -1007,7 +1007,7 @@ export class DateInput {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/date-picker/date-picker.js

@@ -370,7 +370,7 @@ export class DatePicker {
         "references": {
           "DaysOfWeek": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/date-utils.ts"
           }
         }
       },
@@ -395,7 +395,7 @@ export class DatePicker {
         "references": {
           "DuetLocalizedText": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -418,7 +418,7 @@ export class DatePicker {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -442,7 +442,7 @@ export class DatePicker {
         "references": {
           "DateDisabledPredicate": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -521,7 +521,7 @@ export class DatePicker {
         "references": {
           "PickerChangeEvent": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }

package/dist/collection/components/details/details.js

@@ -239,7 +239,7 @@ export class Details {
         "references": {
           "Color": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },

package/dist/collection/components/dialog/dialog.js

@@ -336,7 +336,7 @@ export class Dialog {
         "references": {
           "StorageMethods": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/store/component-store.ts"
           }
         }
       },

package/dist/collection/components/dropdown/dropdown.js

@@ -410,7 +410,7 @@ export class Dropdown {
         "references": {
           "PopoverPlacement": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/utils/popover.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/utils/popover.ts"
           }
         }
       },

package/dist/collection/components/file-upload/file-upload.css

@@ -29,7 +29,7 @@
    * @prop --drop-border-tint: Default value var(--nano-color-primary-rgb, 0, 116, 149);
    * @prop --drop-border-width: Default value 2px;
    * @prop --drop-border-radius: Default value 5px;
-   * @prop --drop-bg--invalid: Default value var(--nano-input-background-color, #fee8de);
+   * @prop --drop-bg--invalid: Default value var(--nano-input-background-color, white);
    * @prop --drop-border--invalid: Default value var(--nano-color-danger-rgb, 239, 65, 53);
 
    * @prop --btn-bg: Default value var(--nano-color-primary, #007495);
@@ -55,7 +55,7 @@
   --drop-border-tint: var(--nano-color-primary-rgb, 0, 116, 149);
   --drop-border-width: 2px;
   --drop-border-radius: 5px;
-  --drop-bg--invalid: var(--nano-input-background-color, #fee8de);
+  --drop-bg--invalid: var(--nano-input-background-color, white);
   --drop-border--invalid: var(--nano-color-danger-rgb, 239, 65, 53);
   --btn-bg: var(--nano-color-primary, #007495);
   --btn-text: var(--nano-color-primary-contrast, #fff);

package/dist/collection/components/file-upload/file-upload.js

@@ -655,7 +655,7 @@ export class FileUpload {
         "references": {
           "FileWithUrl": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       },
@@ -713,7 +713,7 @@ export class FileUpload {
         "references": {
           "FileInputChangeEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -766,7 +766,7 @@ export class FileUpload {
         "references": {
           "ControlValidityEventDetail": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         }
       }
@@ -788,7 +788,7 @@ export class FileUpload {
           },
           "ControlValidity": {
             "location": "import",
-            "path": "/builds/zfg2rJd-/0/Digital/nano-components/packages/components/src/interface.d.ts"
+            "path": "/builds/RxH386Vg/0/Digital/nano-components/packages/components/src/interface.d.ts"
           }
         },
         "return": "Promise<ControlValidity>"

package/dist/collection/components/form-control/form-control.js

@@ -6,45 +6,43 @@ const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, plac
   if (!label && !hasLabelSlot)
     return;
   if (floatLabel) {
-    return (h("label", { class: "placeholder-as-label", htmlFor: controlId, id: labelId },
+    return (h("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId },
       label && label,
       !label && hasLabelSlot && h("slot", { name: "label" })));
   }
   else {
-    return (h("label", { class: { label: true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
-      h("div", { class: "label-placeholder" },
-        placeholder && hasValue && rtl && (h("span", { class: "placeholder" },
+    return (h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
+      h("div", { class: "form-ctrl__label-wrap" },
+        placeholder && hasValue && rtl && (h("span", { class: "form-ctrl__label-placeholder" },
           placeholder,
           " / ")),
-        h("span", { class: "labeltext" },
+        h("span", { class: "form-ctrl__labeltext" },
           label && label,
           !label && hasLabelSlot && h("slot", { name: "label" })),
-        placeholder && hasValue && !rtl && (h("span", { class: "placeholder" },
+        placeholder && hasValue && !rtl && (h("span", { class: "form-ctrl__label-placeholder" },
           " / ",
           placeholder))),
-      showCharCount && (h("span", { class: "charcount" }, maxlength
+      showCharCount && (h("span", { class: "form-ctrl__label-charcount" }, maxlength
         ? maxlength - charCount + ' left'
         : charCount + ' characters'))));
   }
 };
 export const FormControlWrap = (props, children) => {
   const { rtl, floatLabel, label, moreId, type, hasHelperSlot, showInlineError, errorMessage, } = props;
-  const isLegacy = !document.head.attachShadow;
   return [
     !floatLabel ? renderLabel(Object.assign({}, props)) : '',
     h("div", { class: {
         'has-label': label !== null && !floatLabel,
         'has-float-label': label !== null && floatLabel,
         rtl,
-        legacy: isLegacy,
-        input: true,
-        textarea: type === 'textarea',
+        'form-ctrl__input': true,
+        'form-ctrl__textarea': type === 'textarea',
       } },
       floatLabel && renderLabel(Object.assign(Object.assign({}, props), { rtl })),
       children),
-    showInlineError || hasHelperSlot ? (h("div", { class: "more", id: moreId },
-      !!showInlineError ? h("div", { class: "error" }, errorMessage) : '',
-      h("div", { class: "helper" },
+    showInlineError || hasHelperSlot ? (h("div", { class: "form-ctrl__more", id: moreId },
+      !!showInlineError ? (h("div", { class: "form-ctrl__error" }, errorMessage)) : (''),
+      h("div", { class: "form-ctrl__helper" },
         h("slot", { name: "helper" })))) : (''),
   ];
 };
@@ -53,20 +51,20 @@ export const FormControl = (props, children) => {
   const clickThrough = () => {
     control.setFocus();
   };
-  return (h("div", { class: "native-input-wrap", ref: (el) => {
+  return (h("div", { class: "form-ctrl__input-wrap", ref: (el) => {
       if (ref)
         ref(el);
     } },
-    h("span", { class: "start" },
+    h("span", { class: "form-ctrl__slot-start" },
       h("slot", { name: "start" }),
       startSlot),
     children,
-    clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon input-clear-icon", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
+    clearControl && !readonly && !disabled && (h("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
       h("nano-icon", { name: "light/times" }))),
-    h("span", { class: "value-end", onClick: clickThrough },
+    h("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough },
       h("slot", { name: "value-end" }),
       endValueSlot),
-    h("span", { class: "end" },
+    h("span", { class: "form-ctrl__slot-end" },
       h("slot", { name: "end" }),
       endSlot)));
 };

package/dist/collection/components/form-control/form-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"placeholder-as-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ label: true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"label-placeholder\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n  const isLegacy = !document.head.attachShadow;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        legacy: isLegacy,\n        input: true,\n        textarea: type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"more\" id={moreId}>\n        {!!showInlineError ? <div class=\"error\">{errorMessage}</div> : ''}\n        <div class=\"helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"native-input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon input-clear-icon\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"form-ctrl__float-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ 'form-ctrl__label': true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"form-ctrl__label-wrap\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"form-ctrl__label-placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"form-ctrl__labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"form-ctrl__label-placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"form-ctrl__label-charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        'form-ctrl__input': true,\n        'form-ctrl__textarea': type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"form-ctrl__more\" id={moreId}>\n        {!!showInlineError ? (\n          <div class=\"form-ctrl__error\">{errorMessage}</div>\n        ) : (\n          ''\n        )}\n        <div class=\"form-ctrl__helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"form-ctrl__input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"form-ctrl__slot-start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon form-ctrl__clear-btn\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"form-ctrl__slot-value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"form-ctrl__slot-end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}