@nanoporetech-digital/components 3.14.0 → 4.0.0

package/dist/collection/components/icon/utils.js

@@ -37,7 +37,7 @@ const getNamedUrl = (iconName) => {
   if (url) {
     return url;
   }
-  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
+  return getAssetPath(`/nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
 };
 export const getName = (iconName, icon) => {
   if (!iconName && icon && !isSrc(icon)) {

package/dist/collection/components/icon/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/icon/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/icon/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n  if (!CACHED_MAP) {\n    const win = window as any;\n    win.Nanoicons = win.Nanoicons || {};\n    CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n  }\n  return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n  const map = getIconMap();\n  Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.icon);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.icon) {\n    url = getSrc(i.icon);\n    if (url) {\n      return url;\n    }\n  }\n  return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`/nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n  iconName: string | undefined,\n  icon: string | undefined\n) => {\n  if (!iconName && icon && !isSrc(icon)) {\n    iconName = icon;\n  }\n  if (isStr(iconName)) {\n    iconName = toLower(iconName);\n  }\n\n  if (!isStr(iconName) || iconName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n  if (invalidChars !== '') {\n    console.warn('invalid characters in icon name ' + iconName);\n    return null;\n  }\n  return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n  if (isStr(src)) {\n    src = src.trim();\n    if (isSrc(src)) {\n      return src;\n    }\n  }\n  return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n"]}

package/dist/collection/components/img/img.css

@@ -77,7 +77,7 @@
 .img__image.loaded,
 .img__bg.loaded {
   opacity: 1;
-  filter: blur(0.1px);
+  filter: blur(0);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {

package/dist/collection/components/overflow-nav/overflow-nav.css

@@ -0,0 +1,223 @@
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+:host {
+  /**
+  * @prop --indicator-transition. Defaults to var(--nano-transition-fast, 0.3s)
+  * @prop --indicator-color. Defaults to #90c6e7;
+  * @prop --indicator-size. Defaults to 0;
+  * @prop --indicator-track-color. Defaults to #e4e6e8;
+  * @prop --indicator-track-size. Defaults to var(--indicator-size);
+
+  * @prop --scroll-btn-color. Defaults to 'currentColor';
+  * @prop --fade-size. The size of the fade areas (when items do not fit). Defaults to 1.75rem;
+  * @prop --fade-transparency. Defaults to 0;
+  *
+  * @prop --padding. Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);
+  */
+  --indicator-transition: var(--nano-transition-fast, 0.3s);
+  --indicator-color: #90c6e7;
+  --indicator-size: 0;
+  --indicator-track-color: #e4e6e8;
+  --indicator-track-size: var(--indicator-size);
+  --scroll-btn-color: "currentColor";
+  --fade-size: 1.75rem;
+  --fade-transparency: 0;
+  --padding: var(--fade-size);
+  position: relative;
+  z-index: var(--nano-layer-index-raised, 5);
+}
+
+:host([orientation=horizontal]) {
+  display: block;
+}
+
+:host([orientation=vertical]) {
+  display: flex;
+}
+
+.onav__scroller {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  display: flex;
+  transition: var(--nano-transition-medium, 0.5s) ease;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
+  -webkit-mask-size: calc(100% + var(--fade-size) * 4);
+          mask-size: calc(100% + var(--fade-size) * 4);
+  -webkit-mask-position: calc(var(--fade-size) * -2);
+          mask-position: calc(var(--fade-size) * -2);
+}
+.onav__scroller::-webkit-scrollbar {
+  inline-size: 0;
+  block-size: 0;
+}
+.onav__scroller::after {
+  content: " ";
+  line-height: 1;
+  flex: 0 0 auto;
+  display: block;
+}
+.onav--has-scroll-controls-start .onav__scroller {
+  -webkit-mask-position: 0;
+          mask-position: 0;
+  -webkit-mask-size: calc(100% + var(--fade-size) * 2);
+          mask-size: calc(100% + var(--fade-size) * 2);
+}
+.onav--has-scroll-controls-end .onav__scroller {
+  -webkit-mask-position: calc(var(--fade-size) * -1);
+          mask-position: calc(var(--fade-size) * -1);
+  -webkit-mask-size: calc(100% + var(--fade-size));
+          mask-size: calc(100% + var(--fade-size));
+}
+.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller {
+  -webkit-mask-size: 100%;
+          mask-size: 100%;
+  -webkit-mask-position: 0;
+          mask-position: 0;
+}
+.onav__items {
+  flex: 1 1 auto;
+  position: relative;
+  width: auto;
+  flex-wrap: nowrap;
+  display: flex;
+}
+.onav__items::before {
+  content: "";
+  background: var(--indicator-track-color);
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.onav__active-indicator {
+  position: absolute;
+  z-index: 10;
+  transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease;
+}
+.onav nano-icon-button.onav__scroll-button {
+  --nano-color-base: var(--scroll-btn-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  border: unset;
+  z-index: 2;
+  transition: var(--nano-transition-fast, 0.3s) ease opacity;
+  opacity: 0;
+  color: var(--scroll-btn-color);
+  pointer-events: none;
+}
+.onav nano-icon-button.onav__scroll-button:focus {
+  outline: none;
+}
+.onav nano-icon-button.onav__scroll-button.is-shown {
+  opacity: 1;
+  pointer-events: all;
+}
+.onav nano-icon-button.onav__scroll-button:focus-visible {
+  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;
+}
+.onav--horizontal .onav__scroller {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  padding-inline: var(--padding);
+  -webkit-mask-image: linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));
+          mask-image: linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));
+}
+.onav--horizontal .onav__scroller::after {
+  padding-inline: 0 var(--fade-size);
+  padding-block: 0 0;
+}
+.onav--horizontal.onav--has-scroll-controls .onav__scroller {
+  padding-inline: var(--fade-size) 0;
+  -webkit-padding-before: 0;
+          padding-block-start: 0;
+  -webkit-padding-after: 0;
+          padding-block-end: 0;
+}
+.onav--horizontal .onav__items {
+  flex-direction: row;
+}
+.onav--horizontal .onav__items::before {
+  content: "";
+  width: 100%;
+  height: var(--indicator-track-size);
+  inset-block-end: 0;
+}
+.onav--horizontal .onav__active-indicator {
+  inset-block-end: 0;
+  -webkit-border-after: solid var(--indicator-size) var(--indicator-color);
+          border-block-end: solid var(--indicator-size) var(--indicator-color);
+}
+.onav--horizontal .onav__scroll-button {
+  inset-block: 0;
+}
+.onav--horizontal .onav__scroll-button--start {
+  inset-inline-start: 0;
+}
+.onav--horizontal .onav__scroll-button--end {
+  inset-inline-end: 0;
+}
+.onav--vertical {
+  width: 100%;
+}
+.onav--vertical .onav__nav {
+  max-height: 100%;
+  display: flex;
+}
+.onav--vertical .onav__scroller {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-direction: column;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  padding-block: var(--padding);
+  -webkit-mask-image: linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));
+          mask-image: linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));
+  padding-inline: 0 0;
+  -webkit-padding-before: calc(var(--fade-size) + 12px);
+          padding-block-start: calc(var(--fade-size) + 12px);
+  -webkit-padding-after: var(--fade-size);
+          padding-block-end: var(--fade-size);
+}
+.onav--vertical .onav__scroller::after {
+  padding-inline: 0 0;
+  padding-block: 0 var(--fade-size);
+}
+.onav--vertical .onav__items {
+  flex-direction: column;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.onav--vertical .onav__items::before {
+  content: "";
+  height: 100%;
+  width: var(--indicator-track-size);
+  inset-inline-start: 0;
+}
+.onav--vertical .onav__active-indicator {
+  inset-inline-start: 0;
+  -webkit-border-start: solid var(--indicator-size) var(--indicator-color);
+          border-inline-start: solid var(--indicator-size) var(--indicator-color);
+}
+.onav--vertical .onav__scroll-button {
+  inset-inline: 0;
+}
+.onav--vertical .onav__scroll-button--start {
+  inset-block-start: 0;
+}
+.onav--vertical .onav__scroll-button--end {
+  inset-block-end: 0;
+}