@nanoporetech-digital/components 2.6.0 → 2.9.0

package/dist/types/components/form-control/form-control.d.ts

@@ -6,6 +6,7 @@ interface FormControlWrapProps {
   labelId: string;
   label: string;
   moreId: string;
+  helperEndId: string;
   type?: TextFieldTypes;
   showInlineError: boolean;
   hasHelperSlot: boolean;
@@ -18,6 +19,7 @@ interface FormControlWrapProps {
   showCharCount?: boolean;
   maxlength?: number;
   charCount?: number;
+  hasHelperEndSlot?: boolean;
 }
 interface FormControlProps {
   clearControl: boolean;

package/dist/types/components/global-nav/global-nav.d.ts

@@ -75,9 +75,16 @@ export declare class GlobalNav implements ComponentInterface {
   private el;
   /**
    * Connect to local, dev, test or prod MyAccount
-   * environments to retrieve global nav / sso data
+   * environments to retrieve global nav / sso data.
+   * Alternatively, you can use the `ssoDataUrl` prop.
    */
-  env: 'local' | 'dev' | 'test' | 'prod';
+  env?: 'local' | 'dev' | 'test' | 'prod';
+  /**
+   * A base url to retrieve global nav / sso data.
+   * `nav_bar_data.json` will be appended to this url.
+   * An alternative to the pre-defined `env` urls
+   */
+  ssoDataUrl?: string;
   /**
    * Where to take user after SSO login
    */
@@ -171,6 +178,7 @@ export declare class GlobalNav implements ComponentInterface {
    * Submit the search form (a search value must be present)
    */
   submitSearch(): Promise<void>;
+  getMyAccData(): Promise<void>;
   currentSelectedIndex(): SearchIndex;
   changeInternalSearchVal(): void;
   initAlgoliaClient(): void;
@@ -248,7 +256,6 @@ export declare class GlobalNav implements ComponentInterface {
   render(): any;
   private domainFor;
   private processSearchResults;
-  private getMyAccData;
   private processMyAccData;
   private processMyAccLinks;
 }

package/dist/types/components/input/input.d.ts

@@ -4,12 +4,14 @@ import { Color, ControlValidity, ControlValidityEventDetail, InputChangeEventDet
  * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.
 
 It is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more.
+The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
  * @slot start - suitable for inline action buttons or icons that may add extra contextual information
  * @slot end - suitable for inline action buttons or icons that may add extra contextual information
  * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
+ * @slot helper-end - helper text to accompany the form field on the side.
  * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information
  */
 export declare class Input implements ComponentInterface {
@@ -26,6 +28,7 @@ export declare class Input implements ComponentInterface {
   hasFocus: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
+  hasHelperEndSlot: boolean;
   errorMessage: string;
   datalist: HTMLNanoDatalistElement;
   setDataListOpts(): void;

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -8,7 +8,6 @@ import type { ResizeStateChangeEventDetail } from '../../interface';
 export declare class ResizeObserve implements ComponentInterface {
   private ro;
   private appliedStates;
-  private el;
   host: HTMLNanoResizeObserveElement;
   currentWidth: number;
   currentHeight: number;

package/dist/types/components/select/select.d.ts

@@ -14,6 +14,7 @@ import { OptionInterface } from '../option/option-interface';
  * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
+ * @slot helper-end - helper text to accompany the form field on the side.
  * @slot down-arrow - use this to replace the default down arrow
  * @slot - default slot; nest `nano-option` elements
  */
@@ -26,7 +27,6 @@ export declare class Select implements ComponentInterface {
   private selectId;
   private rtl;
   private onInit;
-  private isLegacy;
   private _selectWrap;
   private get selectWrap();
   private set selectWrap(value);
@@ -39,6 +39,7 @@ export declare class Select implements ComponentInterface {
   hasFocus: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
+  hasHelperEndSlot: boolean;
   inputSearchVal: string;
   el: HTMLNanoSelectElement;
   /**

package/dist/types/components.d.ts

@@ -808,9 +808,9 @@ export namespace Components {
          */
         "cartUrl": string;
         /**
-          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data
+          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data. Alternatively, you can use the `ssoDataUrl` prop.
          */
-        "env": 'local' | 'dev' | 'test' | 'prod';
+        "env"?: 'local' | 'dev' | 'test' | 'prod';
         /**
           * Whether to attempt to get global nav / sso data from MyAccount
          */
@@ -868,6 +868,10 @@ export namespace Components {
           * Whether to show search functionality
          */
         "showSearch": boolean;
+        /**
+          * A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url. An alternative to the pre-defined `env` urls
+         */
+        "ssoDataUrl"?: string;
         /**
           * Where to take user after SSO login
          */
@@ -3069,7 +3073,7 @@ declare namespace LocalJSX {
          */
         "cartUrl"?: string;
         /**
-          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data
+          * Connect to local, dev, test or prod MyAccount environments to retrieve global nav / sso data. Alternatively, you can use the `ssoDataUrl` prop.
          */
         "env"?: 'local' | 'dev' | 'test' | 'prod';
         /**
@@ -3145,6 +3149,10 @@ declare namespace LocalJSX {
           * Whether to show search functionality
          */
         "showSearch"?: boolean;
+        /**
+          * A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url. An alternative to the pre-defined `env` urls
+         */
+        "ssoDataUrl"?: string;
         /**
           * Where to take user after SSO login
          */

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-05-30T08:56:02",
+  "timestamp": "2022-06-09T09:27:21",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.12.2",
@@ -2024,7 +2024,7 @@
         {
           "name": "--control-invalid-style",
           "annotation": "prop",
-          "docs": "Control box-shadow when invalid. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem #fac6c3);"
+          "docs": "Control box-shadow when invalid. Defaults to to var(--nano-control-focus-shadow, 0 0 0 0.1875rem #e4e6e8);"
         },
         {
           "name": "--control-padding",
@@ -5692,7 +5692,7 @@
         {
           "name": "--drop-bg--invalid",
           "annotation": "prop",
-          "docs": "Default value var(--nano-input-background-color, #fee8de);"
+          "docs": "Default value var(--nano-input-background-color, white);"
         },
         {
           "name": "--drop-border--invalid",
@@ -5898,7 +5898,7 @@
           "mutable": false,
           "attr": "env",
           "reflectToAttr": false,
-          "docs": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data",
+          "docs": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
           "docsTags": [],
           "default": "'prod'",
           "values": [
@@ -5919,7 +5919,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false,
           "getter": false,
           "setter": false
@@ -6148,6 +6148,24 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "ssoDataUrl",
+          "type": "string",
+          "mutable": false,
+          "attr": "sso-data-url",
+          "reflectToAttr": false,
+          "docs": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "ssoRedirect",
           "type": "string",
@@ -7743,7 +7761,7 @@
       "encapsulation": "scoped",
       "tag": "nano-input",
       "readme": "# nano-input (extra examples and methods)\n\n### Validation\n\nShow custom html5 validation errors (use with [grid](/site/components/grid/readme.html) for inline inputs)\n\n```html\n<nano-grid l-cols=\"3\">\n  <nano-input validate-on=\"dirty\" required label=\"Error on dirty\" type=\"email\"></nano-input>\n  <nano-input validate-on=\"submit\" required label=\"Error on submit\" type=\"email\"></nano-input>\n  <nano-input validate-on=\"submitThenDirty\" required label=\"Error on submit then dirty\" type=\"email\"></nano-input>\n</nano-grid>\n```\n\nYou can save time on existing projects and just wrap inputs\n\n```html\n<nano-input float-label clear-input validate-on=\"dirty\">\n  <div class=\"whatever_wrappers_you_may_have\">\n    <label for=\"mouse\">Favourite food:</label>\n  </div>\n  <div class=\"whatever_wrappers_you_may_have\">\n    <input type=\"text\" id=\"mouse\" value=\"chips\" required>\n  </div><button type=\"submit\">Save</button>\n</nano-input>\n```\n\n### Invalidate and show custom error\n\n```js\nfunction showError() {\n  let input = document.querySelector('#userName');\n  input.showError('User name already taken. Please choose another')\n  // clear error\n  input.showError('')\n}\n```\n\n<br>",
-      "docs": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.",
+      "docs": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)",
       "docsTags": [
         {
           "name": "slot",
@@ -7769,6 +7787,10 @@
           "name": "slot",
           "text": "helper - helper text to accompany the form field underneath."
         },
+        {
+          "name": "slot",
+          "text": "helper-end - helper text to accompany the form field on the side."
+        },
         {
           "name": "slot",
           "text": "- can be used with a `nano-datalist`. See the `nano-datalist` docs for more information"
@@ -8487,7 +8509,7 @@
           "type": "\"date\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"textarea\" | \"time\" | \"url\"",
           "mutable": false,
           "attr": "type",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The type of control to display. The default type is text.",
           "docsTags": [],
           "default": "'text'",
@@ -8751,7 +8773,7 @@
         {
           "name": "--input-bg-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-background-color, #fee8de);"
+          "docs": "defaults to var(--nano-input-background-color, white);"
         },
         {
           "name": "--input-border-radius",
@@ -8771,17 +8793,17 @@
         {
           "name": "--input-border-style--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);"
         },
         {
           "name": "--input-border-style--invalid-focus",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);"
         },
         {
           "name": "--input-border-width",
           "annotation": "prop",
-          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 2px));"
+          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 1px));"
         },
         {
           "name": "--input-font-size",
@@ -8831,7 +8853,7 @@
         {
           "name": "--multi-input-value-border",
           "annotation": "prop",
-          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #90c6e7);"
+          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #badcf0);"
         },
         {
           "name": "--multi-input-value-text-color",
@@ -8892,6 +8914,10 @@
           "name": "helper",
           "docs": "helper text to accompany the form field underneath."
         },
+        {
+          "name": "helper-end",
+          "docs": "helper text to accompany the form field on the side."
+        },
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"
@@ -10624,6 +10650,10 @@
           "name": "slot",
           "text": "helper - helper text to accompany the form field underneath."
         },
+        {
+          "name": "slot",
+          "text": "helper-end - helper text to accompany the form field on the side."
+        },
         {
           "name": "slot",
           "text": "down-arrow - use this to replace the default down arrow"
@@ -11308,7 +11338,7 @@
         {
           "name": "--input-bg-color--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-background-color, #fee8de);"
+          "docs": "defaults to var(--nano-input-background-color, white);"
         },
         {
           "name": "--input-border-radius",
@@ -11328,17 +11358,17 @@
         {
           "name": "--input-border-style--invalid",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);"
         },
         {
           "name": "--input-border-style--invalid-focus",
           "annotation": "prop",
-          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);"
+          "docs": "defaults to var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);"
         },
         {
           "name": "--input-border-width",
           "annotation": "prop",
-          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 2px));"
+          "docs": "defaults to var(--input-border-width-sh, var(--nano-input-border-width, 1px));"
         },
         {
           "name": "--input-font-size",
@@ -11388,7 +11418,7 @@
         {
           "name": "--multi-input-value-border",
           "annotation": "prop",
-          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #90c6e7);"
+          "docs": "Tag / multivalue border. defaults to var(--nano-input-tag-color, #badcf0);"
         },
         {
           "name": "--multi-input-value-text-color",
@@ -11453,6 +11483,10 @@
           "name": "helper",
           "docs": "helper text to accompany the form field underneath."
         },
+        {
+          "name": "helper-end",
+          "docs": "helper text to accompany the form field on the side."
+        },
         {
           "name": "label",
           "docs": "if you do not set a label attribute, you can use this slot for more complex markup"

package/docs-vscode.json

@@ -1148,7 +1148,7 @@
         },
         {
           "name": "env",
-          "description": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data",
+          "description": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
           "values": [
             {
               "name": "dev"
@@ -1204,6 +1204,10 @@
           "name": "show-search",
           "description": "Whether to show search functionality"
         },
+        {
+          "name": "sso-data-url",
+          "description": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls"
+        },
         {
           "name": "sso-redirect",
           "description": "Where to take user after SSO login"
@@ -1512,7 +1516,7 @@
       "name": "nano-input",
       "description": {
         "kind": "markdown",
-        "value": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more."
+        "value": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)"
       },
       "attributes": [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.6.0",
+  "version": "2.9.0",
   "repository": {
     "type": "git",
     "url": "https://git.oxfordnanolabs.local/Digital/nano-components"
@@ -43,7 +43,8 @@
     "prettier.base": "prettier \"./{src,jest}/**/*.{ts,tsx,js,jsx}\"",
     "test": "run-p themes.prod test.all.base",
     "test.ci": "run-p themes.prod test.all.base",
-    "test.spec": "stencil test --spec --max-workers=2 --watch --config='./stencil.config.test.ts'",
+    "test.spec": "stencil test --spec --watch --config='./stencil.config.test.ts'",
+    "test.e2e": "stencil test --e2e --max-workers=1 --watch --config='./stencil.config.test.ts'",
     "test.spec.debug": "npx --node-arg=\"--inspect-brk\" stencil test --spec --config='./stencil.config.test.ts'",
     "test.watch": "run-s themes.prod test.all.watch",
     "test.all.watch": "stencil test --spec --e2e --watch --bail --config='./stencil.config.test.ts'",
@@ -126,5 +127,5 @@
   "peerDependencies": {
     "@stencil/core": "^2.5.0"
   },
-  "gitHead": "ac6bf7e519f5c73475cc3903288a4b8f55dbcc3c"
+  "gitHead": "ff0616c4082cdbbd535e243c43d9fa2ce82e39da"
 }

package/dist/cjs/form-control-3bc82e3e.js

@@ -1,80 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-const index = require('./index-cb62df44.js');
-
-const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
-  if (!label && !hasLabelSlot)
-    return;
-  if (floatLabel) {
-    return (index.h("label", { class: "placeholder-as-label", htmlFor: controlId, id: labelId },
-      label && label,
-      !label && hasLabelSlot && index.h("slot", { name: "label" })));
-  }
-  else {
-    return (index.h("label", { class: { label: true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
-      index.h("div", { class: "label-placeholder" },
-        placeholder && hasValue && rtl && (index.h("span", { class: "placeholder" },
-          placeholder,
-          " / ")),
-        index.h("span", { class: "labeltext" },
-          label && label,
-          !label && hasLabelSlot && index.h("slot", { name: "label" })),
-        placeholder && hasValue && !rtl && (index.h("span", { class: "placeholder" },
-          " / ",
-          placeholder))),
-      showCharCount && (index.h("span", { class: "charcount" }, maxlength
-        ? maxlength - charCount + ' left'
-        : charCount + ' characters'))));
-  }
-};
-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)) : '',
-    index.h("div", { class: {
-        'has-label': label !== null && !floatLabel,
-        'has-float-label': label !== null && floatLabel,
-        rtl,
-        legacy: isLegacy,
-        input: true,
-        textarea: type === 'textarea',
-      } },
-      floatLabel && renderLabel(Object.assign(Object.assign({}, props), { rtl })),
-      children),
-    showInlineError || hasHelperSlot ? (index.h("div", { class: "more", id: moreId },
-      !!showInlineError ? index.h("div", { class: "error" }, errorMessage) : '',
-      index.h("div", { class: "helper" },
-        index.h("slot", { name: "helper" })))) : (''),
-  ];
-};
-const FormControl = (props, children) => {
-  const { clearControl, onClearText, readonly, disabled, control, ref, endSlot, endValueSlot, startSlot, } = props;
-  const clickThrough = () => {
-    control.setFocus();
-  };
-  return (index.h("div", { class: "native-input-wrap", ref: (el) => {
-      if (ref)
-        ref(el);
-    } },
-    index.h("span", { class: "start" },
-      index.h("slot", { name: "start" }),
-      startSlot),
-    children,
-    clearControl && !readonly && !disabled && (index.h("button", { type: "button", class: "icon input-clear-icon", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
-      index.h("nano-icon", { name: "light/times" }))),
-    index.h("span", { class: "value-end", onClick: clickThrough },
-      index.h("slot", { name: "value-end" }),
-      endValueSlot),
-    index.h("span", { class: "end" },
-      index.h("slot", { name: "end" }),
-      endSlot)));
-};
-
-exports.FormControl = FormControl;
-exports.FormControlWrap = FormControlWrap;
-
-//# sourceMappingURL=form-control-3bc82e3e.js.map

package/dist/cjs/form-control-3bc82e3e.js.map

@@ -1 +0,0 @@
-{"file":"form-control-3bc82e3e.js","mappings":"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","names":["h"],"sources":["./src/components/form-control/form-control.tsx"],"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}

package/dist/esm/form-control-67eeb108.js

@@ -1,77 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { h } from './index-5f8d16e7.js';
-
-const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
-  if (!label && !hasLabelSlot)
-    return;
-  if (floatLabel) {
-    return (h("label", { class: "placeholder-as-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" },
-          placeholder,
-          " / ")),
-        h("span", { class: "labeltext" },
-          label && label,
-          !label && hasLabelSlot && h("slot", { name: "label" })),
-        placeholder && hasValue && !rtl && (h("span", { class: "placeholder" },
-          " / ",
-          placeholder))),
-      showCharCount && (h("span", { class: "charcount" }, maxlength
-        ? maxlength - charCount + ' left'
-        : charCount + ' characters'))));
-  }
-};
-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',
-      } },
-      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" },
-        h("slot", { name: "helper" })))) : (''),
-  ];
-};
-const FormControl = (props, children) => {
-  const { clearControl, onClearText, readonly, disabled, control, ref, endSlot, endValueSlot, startSlot, } = props;
-  const clickThrough = () => {
-    control.setFocus();
-  };
-  return (h("div", { class: "native-input-wrap", ref: (el) => {
-      if (ref)
-        ref(el);
-    } },
-    h("span", { class: "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 },
-      h("nano-icon", { name: "light/times" }))),
-    h("span", { class: "value-end", onClick: clickThrough },
-      h("slot", { name: "value-end" }),
-      endValueSlot),
-    h("span", { class: "end" },
-      h("slot", { name: "end" }),
-      endSlot)));
-};
-
-export { FormControlWrap as F, FormControl as a };
-
-//# sourceMappingURL=form-control-67eeb108.js.map

package/dist/esm/form-control-67eeb108.js.map

@@ -1 +0,0 @@
-{"file":"form-control-67eeb108.js","mappings":"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","names":[],"sources":["./src/components/form-control/form-control.tsx"],"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}

package/dist/esm-es5/form-control-67eeb108.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{h}from"./index-5f8d16e7.js";var renderLabel=function(a){var l=a.label,e=a.hasLabelSlot,r=a.controlId,t=a.labelId,n=a.floatLabel,s=a.placeholder,o=a.hideLabel,c=a.hasValue,i=a.rtl,d=a.showCharCount,u=a.maxlength,b=a.charCount;if(!l&&!e)return;if(n){return h("label",{class:"placeholder-as-label",htmlFor:r,id:t},l&&l,!l&&e&&h("slot",{name:"label"}))}else{return h("label",{class:{label:true,"visually-hide":o},htmlFor:r,id:t},h("div",{class:"label-placeholder"},s&&c&&i&&h("span",{class:"placeholder"},s," / "),h("span",{class:"labeltext"},l&&l,!l&&e&&h("slot",{name:"label"})),s&&c&&!i&&h("span",{class:"placeholder"}," / ",s)),d&&h("span",{class:"charcount"},u?u-b+" left":b+" characters"))}};var FormControlWrap=function(a,l){var e=a.rtl,r=a.floatLabel,t=a.label,n=a.moreId,s=a.type,o=a.hasHelperSlot,c=a.showInlineError,i=a.errorMessage;var d=!document.head.attachShadow;return[!r?renderLabel(Object.assign({},a)):"",h("div",{class:{"has-label":t!==null&&!r,"has-float-label":t!==null&&r,rtl:e,legacy:d,input:true,textarea:s==="textarea"}},r&&renderLabel(Object.assign(Object.assign({},a),{rtl:e})),l),c||o?h("div",{class:"more",id:n},!!c?h("div",{class:"error"},i):"",h("div",{class:"helper"},h("slot",{name:"helper"}))):""]};var FormControl=function(a,l){var e=a.clearControl,r=a.onClearText,t=a.readonly,n=a.disabled,s=a.control,o=a.ref,c=a.endSlot,i=a.endValueSlot,d=a.startSlot;var u=function(){s.setFocus()};return h("div",{class:"native-input-wrap",ref:function(a){if(o)o(a)}},h("span",{class:"start"},h("slot",{name:"start"}),d),l,e&&!t&&!n&&h("button",{type:"button",class:"icon input-clear-icon",tabindex:"-1",onTouchStart:r,onMouseDown:r},h("nano-icon",{name:"light/times"})),h("span",{class:"value-end",onClick:u},h("slot",{name:"value-end"}),i),h("span",{class:"end"},h("slot",{name:"end"}),c))};export{FormControlWrap as F,FormControl as a};
-//# sourceMappingURL=form-control-67eeb108.js.map