@roadtrip/components 3.10.0 → 3.10.1

package/dist/esm/road-illustration.entry.js

@@ -1,72 +1,5 @@
-import { g as getAssetPath, r as registerInstance, h, H as Host, f as getElement } from './index-4b484f35.js';
-
-let CACHED_MAP;
-const getIllustrationMap = () => {
-  if (typeof window === 'undefined') {
-    return new Map();
-  }
-  else {
-    if (!CACHED_MAP) {
-      const win = window;
-      win.Ionicons = win.Ionicons || {};
-      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
-    }
-    return CACHED_MAP;
-  }
-};
-const getUrl = (i) => {
-  let url = getSrc(i.src);
-  if (url) {
-    return url;
-  }
-  url = getName(i.name, i.illustration);
-  if (url) {
-    return getNamedUrl(url);
-  }
-  if (i.illustration) {
-    url = getSrc(i.illustration);
-    if (url) {
-      return url;
-    }
-  }
-  return null;
-};
-const getNamedUrl = (illustrationName) => {
-  const url = getIllustrationMap().get(illustrationName);
-  if (url) {
-    return url;
-  }
-  return getAssetPath(`svg/${illustrationName}.svg`);
-};
-const getName = (illustrationName, illustration) => {
-  if (!illustrationName && illustration && !isSrc(illustration)) {
-    illustrationName = illustration;
-  }
-  if (isStr(illustrationName)) {
-    illustrationName = toLower(illustrationName);
-  }
-  if (!isStr(illustrationName) || illustrationName.trim() === '') {
-    return null;
-  }
-  // only allow alpha characters and dash
-  const invalidChars = illustrationName.replace(/[a-z]|-|\d/gi, '');
-  if (invalidChars !== '') {
-    return null;
-  }
-  return illustrationName;
-};
-const getSrc = (src) => {
-  if (isStr(src)) {
-    src = src.trim();
-    if (isSrc(src)) {
-      return src;
-    }
-  }
-  return null;
-};
-const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
-const isStr = (val) => typeof val === 'string';
-const toLower = (val) => val.toLowerCase();
+import { r as registerInstance, h, H as Host, f as getElement } from './index-4b484f35.js';
+import { i as isStr, g as getUrl, b as getName } from './utils-ff713b72.js';
 
 const validateContent = (svgContent) => {
   const div = document.createElement('div');

package/dist/esm/road-illustration.entry.js.map

@@ -1 +1 @@
-{"file":"road-illustration.entry.js","mappings":"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","names":[],"sources":["./src/components/illustration/utils.ts","./src/components/illustration/validate.ts","./src/components/illustration/request.ts","./src/components/illustration/illustration.css?tag=road-illustration&encapsulation=shadow","./src/components/illustration/illustration.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Illustration } from './illustration';\n\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIllustrationMap = (): Map<string, string> => {\n  if (typeof window === 'undefined') {\n    return new Map();\n  } else {\n    if (!CACHED_MAP) {\n      const win = window as any;\n      win.Ionicons = win.Ionicons || {};\n      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();\n    }\n    return CACHED_MAP;\n  }\n};\n\nexport const addIllustrations = (illustrations: { [name: string]: string; }) => {\n  const map = getIllustrationMap();\n  Object.keys(illustrations).forEach(name => map.set(name, illustrations[name]));\n};\n\n\nexport const getUrl = (i: Illustration) => {\n  let url = getSrc(i.src);\n  if (url) {\n    return url;\n  }\n\n  url = getName(i.name, i.illustration);\n  if (url) {\n    return getNamedUrl(url);\n  }\n\n  if (i.illustration) {\n    url = getSrc(i.illustration);\n    if (url) {\n      return url;\n    }\n  }\n\n  return null;\n};\n\n\nconst getNamedUrl = (illustrationName: string) => {\n  const url = getIllustrationMap().get(illustrationName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`svg/${illustrationName}.svg`);\n};\n\n\nexport const getName = (\n  illustrationName: string | undefined,\n  illustration: string | undefined\n) => {\n\n  if (!illustrationName && illustration && !isSrc(illustration)) {\n    illustrationName = illustration;\n  }\n  if (isStr(illustrationName)) {\n    illustrationName = toLower(illustrationName);\n  }\n\n  if (!isStr(illustrationName) || illustrationName.trim() === '') {\n    return null;\n  }\n\n  // only allow alpha characters and dash\n  const invalidChars = illustrationName.replace(/[a-z]|-|\\d/gi, '');\n  if (invalidChars !== '') {\n    return null;\n  }\n\n  return illustrationName;\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);\n\nexport const isStr = (val: any): val is string => typeof val === 'string';\n\nexport const toLower = (val: string) => val.toLowerCase();","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadillustrationContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getIllustrationSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadillustrationContent.set(url, svgContent || '');\n          });\n        }\n        roadillustrationContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadillustrationContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Illustration\n *\n * Index\n * - Sizes\n * - Colors\n * - Rotation\n */\n\n:host {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--road-icon);\n  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  fill: currentColor;\n  contain: strict;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.illustration-sm) {\n  width: 4rem;\n  height: 4rem;\n}\n\n:host(.illustration-md) {\n  width: 8rem;\n  height: 8rem;\n}\n\n:host(.illustration-lg) {\n  width: 16rem;\n  height: 16rem;\n}\n\n:host(.illustration-2x) {\n  width: 32rem;\n  height: 32rem;\n}\n\n/* ROTATION\n -------------------- */\n\n:host(.illustration-rotate-90) {\n  transform: rotate(90deg);\n}\n\n:host(.illustration-rotate-180) {\n  transform: rotate(180deg);\n}\n\n:host(.illustration-rotate-270) {\n  transform: rotate(270deg);\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"],"version":3}
+{"file":"road-illustration.entry.js","mappings":"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","names":[],"sources":["./src/components/illustration/validate.ts","./src/components/illustration/request.ts","./src/components/illustration/illustration.css?tag=road-illustration&encapsulation=shadow","./src/components/illustration/illustration.tsx"],"sourcesContent":["import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string) => {\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  // setup this way to ensure it works on our buddy IE\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n    const svgClass = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as any)) {\n      return div.innerHTML;\n    }\n  }\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n  if (elm.nodeType === 1) {\n    if (elm.nodeName.toLowerCase() === 'script') {\n      return false;\n    }\n\n    for (let i = 0; i < elm.attributes.length; i++) {\n      const val = elm.attributes[i].value;\n      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n        return false;\n      }\n    }\n\n    for (let i = 0; i < elm.childNodes.length; i++) {\n      if (!isValid(elm.childNodes[i] as any)) {\n        return false;\n      }\n    }\n  }\n  return true;\n};\n","import { validateContent } from './validate';\n\nexport const roadillustrationContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getIllustrationSvgContent = (url: string, sanitize: boolean) => {\n  // see if we already have a request for this url\n  let req = requests.get(url);\n\n  if (!req) {\n    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n      // we don't already have a request\n      // @ts-ignore\n      req = fetch(url).then((rsp) => {\n        if (rsp.ok) {\n          return rsp.text().then((svgContent) => {\n            if (svgContent && sanitize !== false) {\n              svgContent = validateContent(svgContent);\n            }\n            roadillustrationContent.set(url, svgContent || '');\n          });\n        }\n        roadillustrationContent.set(url, '');\n      });\n\n      // cache for the same requests\n      requests.set(url, req);\n    } else {\n      // set to empty for ssr scenarios and resolve promise\n      roadillustrationContent.set(url, '');\n      return Promise.resolve();\n    }\n  }\n\n  return req;\n};\n","/*\n * Illustration\n *\n * Index\n * - Sizes\n * - Colors\n * - Rotation\n */\n\n:host {\n  box-sizing: content-box;\n  display: inline-block;\n  color: var(--road-icon);\n  transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  fill: currentColor;\n  contain: strict;\n}\n\n:host svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n/* SIZES\n -------------------- */\n\n:host(.illustration-sm) {\n  width: 4rem;\n  height: 4rem;\n}\n\n:host(.illustration-md) {\n  width: 8rem;\n  height: 8rem;\n}\n\n:host(.illustration-lg) {\n  width: 16rem;\n  height: 16rem;\n}\n\n:host(.illustration-2x) {\n  width: 32rem;\n  height: 32rem;\n}\n\n/* ROTATION\n -------------------- */\n\n:host(.illustration-rotate-90) {\n  transform: rotate(90deg);\n}\n\n:host(.illustration-rotate-180) {\n  transform: rotate(180deg);\n}\n\n:host(.illustration-rotate-270) {\n  transform: rotate(270deg);\n}\n","import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getIllustrationSvgContent, roadillustrationContent } from './request';\nimport { getName, getUrl } from './utils';\n\n@Component({\n  tag: 'road-illustration',\n  assetsDirs: ['svg'],\n  styleUrl: 'illustration.css',\n  shadow: true,\n})\nexport class Illustration {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLRoadIllustrationElement;\n\n  @State() private illustrationSvgContent?: string;\n\n  @State() private isVisible = false;\n\n\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the illustration name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Set the illustration to hidden, respectively `true`, to remove it from the accessibility tree.\n   */\n  @Prop({ reflect: true }) ariaHidden?: string;\n\n  /**\n   * Specifies which illustration to use from the built-in set of illustrations.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() illustration?: any;\n\n  /**\n   * The size of the illustration.\n   * Available options are: `\"sm\"`, `\"md\"`, `\"lg\"`, `\"2x\"`.\n   */\n  @Prop() size?: 'sm' | 'md' | 'lg' | '2x' = \"2x\";\n\n  /**\n   * The rotation of the illustration.\n   * Available options are: `\"90\"`, `\"180\"`, `\"270\"`.\n   */\n  @Prop() rotate?: '90' | '180' | '270';\n\n  /**\n   * If enabled, road-illustration will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * When set to `false`, SVG content that is HTTP fetched will not be checked\n   * if the response SVG content has any `<script>` elements, or any attributes\n   * that start with `on`, such as `onclick`.\n   */\n  @Prop() sanitize = true;\n\n  componentWillLoad() {\n\n    this.waitUntilVisible(this.el, '50px', () => {\n      this.isVisible = true;\n      this.loadIllustration();\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private waitUntilVisible(el: HTMLRoadIllustrationElement, rootMargin: string, cb: () => void) {\n    if (this.lazy && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('illustration')\n  loadIllustration() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (roadillustrationContent.has(url)) {\n          // sync if it's already loaded\n          this.illustrationSvgContent = roadillustrationContent.get(url);\n        } else {\n          // async if it hasn't been loaded\n          getIllustrationSvgContent(url, this.sanitize).then(() => (this.illustrationSvgContent = roadillustrationContent.get(url)));\n        }\n      }\n    }\n\n    if (!this.ariaLabel && this.ariaHidden !== 'true') {\n      const label = getName(this.name, this.illustration);\n      // user did not provide a label\n      // come up with the label based on the icon name\n      if (label) {\n        this.ariaLabel = label.replace(/-/g, ' ');\n      }\n    }\n  }\n\n  render() {\n    const sizeClass = this.size !== undefined ? `illustration-${this.size}` : '';\n    const rotateClass = this.rotate !== undefined ? `illustration-rotate-${this.rotate}` : '';\n\n    return (\n      <Host class={`${sizeClass} ${rotateClass}`} aria-hidden=\"true\">\n        {(\n          (this.illustrationSvgContent !== '')\n            ? <div class=\"icon-inner\" innerHTML={this.illustrationSvgContent}></div>\n            : <div class=\"icon-inner\"></div>\n        )}\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/esm/road-navbar.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, e as createEvent, h, H as Host } from './index-4b484f35.js';
-import './polyfill-2b159e86.js';
+import './polyfill-ab80527b.js';
 
 const navbarCss = ":host{--z-index:3;position:fixed;bottom:0;left:0;z-index:var(--z-index);box-sizing:border-box;display:flex;align-items:center;width:100%;height:5.125rem;padding-left:0;margin:0;text-align:center;-webkit-user-select:none;user-select:none;background-color:var(--road-surface);border-top:1px solid var(--road-outline)}@media (max-width: 576px){:host{overflow-x:auto}}@media (min-width: 1200px){:host{bottom:auto;flex-direction:column;width:104px;height:100%;border-top:0;border-right:1px solid var(--road-outline)}}::slotted(.drawer-button-save){position:absolute;bottom:0;width:100%}";