@nanoporetech-digital/components 2.5.0 → 2.8.0

package/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-05-26T00:24:07",
+  "timestamp": "2022-06-07T11:55:03",
   "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",
@@ -8751,7 +8769,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 +8789,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 +8849,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",
@@ -9390,6 +9408,25 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "notification",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "notification",
+          "reflectToAttr": false,
+          "docs": "Will show an indicator badge - only when placed in a nano-menu-draw",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "open",
           "type": "boolean",
@@ -11289,7 +11326,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",
@@ -11309,17 +11346,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",
@@ -11369,7 +11406,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",

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"
@@ -1873,6 +1877,10 @@
           "name": "href",
           "description": "Href to link to"
         },
+        {
+          "name": "notification",
+          "description": "Will show an indicator badge - only when placed in a nano-menu-draw"
+        },
         {
           "name": "open",
           "description": "Whether a secondary menu should be or is currently open"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanoporetech-digital/components",
-  "version": "2.5.0",
+  "version": "2.8.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": "3bc259ad0d07a38138061b0268ec10baf39d5b1e"
+  "gitHead": "988c32f7f274729b1fde3b5f0530b72396ca2436"
 }

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.map

@@ -1 +0,0 @@
-{"file":"form-control-67eeb108.js","mappings":";;;;;AAuCA,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,EACH,aAAa,EACb,SAAS,EACT,SAAS,GACE;EACX,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY;IAAE,OAAO;EACpC,IAAI,UAAU,EAAE;IACd,QACE,aAAO,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO;MAChE,KAAK,IAAI,KAAK;MACd,CAAC,KAAK,IAAI,YAAY,IAAI,YAAM,IAAI,EAAC,OAAO,GAAG,CAC1C,EACR;GACH;OAAM;IACL,QACE,aACE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,EAClD,OAAO,EAAE,SAAS,EAClB,EAAE,EAAE,OAAO;MAEX,WAAK,KAAK,EAAC,mBAAmB;QAC3B,WAAW,IAAI,QAAQ,IAAI,GAAG,KAC7B,YAAM,KAAK,EAAC,aAAa;UAAE,WAAW;gBAAW,CAClD;QACD,YAAM,KAAK,EAAC,WAAW;UACpB,KAAK,IAAI,KAAK;UACd,CAAC,KAAK,IAAI,YAAY,IAAI,YAAM,IAAI,EAAC,OAAO,GAAG,CAC3C;QACN,WAAW,IAAI,QAAQ,IAAI,CAAC,GAAG,KAC9B,YAAM,KAAK,EAAC,aAAa;;UAAK,WAAW,CAAQ,CAClD,CACG;MACL,aAAa,KACZ,YAAM,KAAK,EAAC,WAAW,IACpB,SAAS;UACN,SAAS,GAAG,SAAS,GAAG,OAAO;UAC/B,SAAS,GAAG,aAAa,CACxB,CACR,CACK,EACR;GACH;AACH,CAAC,CAAC;MAEW,eAAe,GAA8C,CACxE,KAA2B,EAC3B,QAAQ;EAER,MAAM,EACJ,GAAG,EACH,UAAU,EACV,KAAK,EACL,MAAM,EACN,IAAI,EACJ,aAAa,EACb,eAAe,EACf,YAAY,GACb,GAAG,KAAK,CAAC;EACV,MAAM,QAAQ,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;EAE7C,OAAO;IACL,CAAC,UAAU,GAAG,WAAW,mBAAM,KAAK,EAAG,GAAG,EAAE;IAC5C,WACE,KAAK,EAAE;QACL,WAAW,EAAE,KAAK,KAAK,IAAI,IAAI,CAAC,UAAU;QAC1C,iBAAiB,EAAE,KAAK,KAAK,IAAI,IAAI,UAAU;QAC/C,GAAG;QACH,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,IAAI,KAAK,UAAU;OAC9B;MAEA,UAAU,IAAI,WAAW,iCAAM,KAAK,KAAE,GAAG,IAAG;MAC5C,QAAQ,CACL;IACN,eAAe,IAAI,aAAa,IAC9B,WAAK,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,MAAM;MACzB,CAAC,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,OAAO,IAAE,YAAY,CAAO,GAAG,EAAE;MACjE,WAAK,KAAK,EAAC,QAAQ;QACjB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,KAEN,EAAE,CACH;GACF,CAAC;AACJ,EAAE;MAEW,WAAW,GAA0C,CAChE,KAAuB,EACvB,QAAQ;EAER,MAAM,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,EACH,OAAO,EACP,YAAY,EACZ,SAAS,GACV,GAAG,KAAK,CAAC;EACV,MAAM,YAAY,GAAG;IACnB,OAAO,CAAC,QAAQ,EAAE,CAAC;GACpB,CAAC;EAEF,QACE,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE;MACN,IAAI,GAAG;QAAE,GAAG,CAAC,EAAE,CAAC,CAAC;KAClB;IAED,YAAM,KAAK,EAAC,OAAO;MACjB,YAAM,IAAI,EAAC,OAAO,GAAG;MACpB,SAAS,CACL;IACN,QAAQ;IACR,YAAY,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAC,IAAI,EACb,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,WAAW;MAExB,iBAAW,IAAI,EAAC,aAAa,GAAa,CACnC,CACV;IACD,YAAM,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,YAAY;MAC3C,YAAM,IAAI,EAAC,WAAW,GAAG;MACxB,YAAY,CACR;IACP,YAAM,KAAK,EAAC,KAAK;MACf,YAAM,IAAI,EAAC,KAAK,GAAG;MAClB,OAAO,CACH,CACH,EACN;AACJ;;;;","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

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/form-control/form-control.tsx"],"names":["renderLabel","_a","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","visually-hide","FormControlWrap","props","children","moreId","type","hasHelperSlot","showInlineError","errorMessage","isLegacy","document","head","attachShadow","Object","assign","has-label","has-float-label","legacy","input","textarea","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"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"]}