@roadtrip/components 2.42.0 → 2.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "2.42.0",
+  "version": "2.44.0",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",
@@ -34,7 +34,7 @@
     "dev": "stencil build --dev",
     "serve": "stencil build --dev --watch --serve",
     "test": "stencil test --e2e --screenshot",
-    "test:e2e": "stencil test --e2e",
+    "test:e2e": "stencil test --e2e --watch",
     "test:watch": "stencil test --e2e --watchAll",
     "generate": "stencil generate",
     "icons": "npm run svgo && node ./scripts/sprite-svg.mjs && node ./scripts/icons.mjs",
@@ -59,13 +59,13 @@
     "@babel/core": "^7.14.8",
     "@geometricpanda/storybook-addon-badges": "^0.2.2",
     "@nrk/svg-to-js": "^2.1.3",
-    "@stencil/core": "^2.6.0",
+    "@stencil/core": "2.18.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/postcss": "^2.0.0",
-    "@storybook/addon-a11y": "^6.5.10",
-    "@storybook/addon-docs": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/web-components": "^6.5.10",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/web-components": "^6.5.12",
     "@types/jest": "^26.0.23",
     "@types/puppeteer": "^5.4.3",
     "autoprefixer": "^10.2.6",

package/dist/cjs/css-shim-9a05bb86.js

@@ -1,6 +0,0 @@
-'use strict';
-
-/*
- Stencil Client Patch Esm v2.12.1 | MIT Licensed | https://stenciljs.com
- */
-var __assign=function(){return (__assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},StyleNode=function(){this.start=0,this.end=0,this.previous=null,this.parent=null,this.rules=null,this.parsedCssText="",this.cssText="",this.atRule=!1,this.type=0,this.keyframesName="",this.selector="",this.parsedSelector="";};function parse(e){return parseCss(lex(e=clean(e)),e)}function clean(e){return e.replace(RX.comments,"").replace(RX.port,"")}function lex(e){var t=new StyleNode;t.start=0,t.end=e.length;for(var r=t,n=0,s=e.length;n<s;n++)if(e[n]===OPEN_BRACE){r.rules||(r.rules=[]);var o=r,a=o.rules[o.rules.length-1]||null;(r=new StyleNode).start=n+1,r.parent=o,r.previous=a,o.rules.push(r);}else e[n]===CLOSE_BRACE&&(r.end=n+1,r=r.parent||t);return t}function parseCss(e,t){var r=t.substring(e.start,e.end-1);if(e.parsedCssText=e.cssText=r.trim(),e.parent){var n=e.previous?e.previous.end:e.parent.start;r=(r=(r=_expandUnicodeEscapes(r=t.substring(n,e.start-1))).replace(RX.multipleSpaces," ")).substring(r.lastIndexOf(";")+1);var s=e.parsedSelector=e.selector=r.trim();e.atRule=0===s.indexOf(AT_START),e.atRule?0===s.indexOf(MEDIA_START)?e.type=types.MEDIA_RULE:s.match(RX.keyframesRule)&&(e.type=types.KEYFRAMES_RULE,e.keyframesName=e.selector.split(RX.multipleSpaces).pop()):0===s.indexOf(VAR_START)?e.type=types.MIXIN_RULE:e.type=types.STYLE_RULE;}var o=e.rules;if(o)for(var a=0,i=o.length,l=void 0;a<i&&(l=o[a]);a++)parseCss(l,t);return e}function _expandUnicodeEscapes(e){return e.replace(/\\([0-9a-f]{1,6})\s/gi,(function(){for(var e=arguments[1],t=6-e.length;t--;)e="0"+e;return "\\"+e}))}var types={STYLE_RULE:1,KEYFRAMES_RULE:7,MEDIA_RULE:4,MIXIN_RULE:1e3},OPEN_BRACE="{",CLOSE_BRACE="}",RX={comments:/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,port:/@import[^;]*;/gim,customProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,mixinProp:/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,mixinApply:/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,varApply:/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,keyframesRule:/^@[^\s]*keyframes/,multipleSpaces:/\s+/g},VAR_START="--",MEDIA_START="@media",AT_START="@";function findRegex(e,t,r){e.lastIndex=0;var n=t.substring(r).match(e);if(n){var s=r+n.index;return {start:s,end:s+n[0].length}}return null}var VAR_USAGE_START=/\bvar\(/,VAR_ASSIGN_START=/\B--[\w-]+\s*:/,COMMENTS=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,TRAILING_LINES=/^[\t ]+\n/gm;function resolveVar(e,t,r){return e[t]?e[t]:r?executeTemplate(r,e):""}function findVarEndIndex(e,t){for(var r=0,n=t;n<e.length;n++){var s=e[n];if("("===s)r++;else if(")"===s&&--r<=0)return n+1}return n}function parseVar(e,t){var r=findRegex(VAR_USAGE_START,e,t);if(!r)return null;var n=findVarEndIndex(e,r.start),s=e.substring(r.end,n-1).split(","),o=s[0],a=s.slice(1);return {start:r.start,end:n,propName:o.trim(),fallback:a.length>0?a.join(",").trim():void 0}}function compileVar(e,t,r){var n=parseVar(e,r);if(!n)return t.push(e.substring(r,e.length)),e.length;var s=n.propName,o=null!=n.fallback?compileTemplate(n.fallback):void 0;return t.push(e.substring(r,n.start),(function(e){return resolveVar(e,s,o)})),n.end}function executeTemplate(e,t){for(var r="",n=0;n<e.length;n++){var s=e[n];r+="string"==typeof s?s:s(t);}return r}function findEndValue(e,t){for(var r=!1,n=!1,s=t;s<e.length;s++){var o=e[s];if(r)n&&'"'===o&&(r=!1),n||"'"!==o||(r=!1);else if('"'===o)r=!0,n=!0;else if("'"===o)r=!0,n=!1;else {if(";"===o)return s+1;if("}"===o)return s}}return s}function removeCustomAssigns(e){for(var t="",r=0;;){var n=findRegex(VAR_ASSIGN_START,e,r),s=n?n.start:e.length;if(t+=e.substring(r,s),!n)break;r=findEndValue(e,s);}return t}function compileTemplate(e){var t=0;e=removeCustomAssigns(e=e.replace(COMMENTS,"")).replace(TRAILING_LINES,"");for(var r=[];t<e.length;)t=compileVar(e,r,t);return r}function resolveValues(e){var t={};e.forEach((function(e){e.declarations.forEach((function(e){t[e.prop]=e.value;}));}));for(var r={},n=Object.entries(t),s=function(e){var t=!1;if(n.forEach((function(e){var n=e[0],s=executeTemplate(e[1],r);s!==r[n]&&(r[n]=s,t=!0);})),!t)return "break"},o=0;o<10;o++){if("break"===s())break}return r}function getSelectors(e,t){if(void 0===t&&(t=0),!e.rules)return [];var r=[];return e.rules.filter((function(e){return e.type===types.STYLE_RULE})).forEach((function(e){var n=getDeclarations(e.cssText);n.length>0&&e.parsedSelector.split(",").forEach((function(e){e=e.trim(),r.push({selector:e,declarations:n,specificity:computeSpecificity(),nu:t});})),t++;})),r}function computeSpecificity(e){return 1}var IMPORTANT="!important",FIND_DECLARATIONS=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gm;function getDeclarations(e){for(var t,r=[];t=FIND_DECLARATIONS.exec(e.trim());){var n=normalizeValue(t[2]),s=n.value,o=n.important;r.push({prop:t[1].trim(),value:compileTemplate(s),important:o});}return r}function normalizeValue(e){var t=(e=e.replace(/\s+/gim," ").trim()).endsWith(IMPORTANT);return t&&(e=e.substr(0,e.length-IMPORTANT.length).trim()),{value:e,important:t}}function getActiveSelectors(e,t,r){var n=[],s=getScopesForElement(t,e);return r.forEach((function(e){return n.push(e)})),s.forEach((function(e){return n.push(e)})),sortSelectors(getSelectorsForScopes(n).filter((function(t){return matches(e,t.selector)})))}function getScopesForElement(e,t){for(var r=[];t;){var n=e.get(t);n&&r.push(n),t=t.parentElement;}return r}function getSelectorsForScopes(e){var t=[];return e.forEach((function(e){t.push.apply(t,e.selectors);})),t}function sortSelectors(e){return e.sort((function(e,t){return e.specificity===t.specificity?e.nu-t.nu:e.specificity-t.specificity})),e}function matches(e,t){return ":root"===t||"html"===t||e.matches(t)}function parseCSS(e){var t=parse(e),r=compileTemplate(e);return {original:e,template:r,selectors:getSelectors(t),usesCssVars:r.length>1}}function addGlobalStyle(e,t){if(e.some((function(e){return e.styleEl===t})))return !1;var r=parseCSS(t.textContent);return r.styleEl=t,e.push(r),!0}function updateGlobalScopes(e){var t=resolveValues(getSelectorsForScopes(e));e.forEach((function(e){e.usesCssVars&&(e.styleEl.textContent=executeTemplate(e.template,t));}));}function reScope(e,t){var r=e.template.map((function(r){return "string"==typeof r?replaceScope(r,e.scopeId,t):r})),n=e.selectors.map((function(r){return __assign(__assign({},r),{selector:replaceScope(r.selector,e.scopeId,t)})}));return __assign(__assign({},e),{template:r,selectors:n,scopeId:t})}function replaceScope(e,t,r){return e=replaceAll(e,"\\."+t,"."+r)}function replaceAll(e,t,r){return e.replace(new RegExp(t,"g"),r)}function loadDocument(e,t){return loadDocumentStyles(e,t),loadDocumentLinks(e,t).then((function(){updateGlobalScopes(t);}))}function startWatcher(e,t){"undefined"!=typeof MutationObserver&&new MutationObserver((function(){loadDocumentStyles(e,t)&&updateGlobalScopes(t);})).observe(document.head,{childList:!0});}function loadDocumentLinks(e,t){for(var r=[],n=e.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])'),s=0;s<n.length;s++)r.push(addGlobalLink(e,t,n[s]));return Promise.all(r)}function loadDocumentStyles(e,t){return Array.from(e.querySelectorAll("style:not([data-styles]):not([data-no-shim])")).map((function(e){return addGlobalStyle(t,e)})).some(Boolean)}function addGlobalLink(e,t,r){var n=r.href;return fetch(n).then((function(e){return e.text()})).then((function(s){if(hasCssVariables(s)&&r.parentNode){hasRelativeUrls(s)&&(s=fixRelativeUrls(s,n));var o=e.createElement("style");o.setAttribute("data-styles",""),o.textContent=s,addGlobalStyle(t,o),r.parentNode.insertBefore(o,r),r.remove();}})).catch((function(e){console.error(e);}))}var CSS_VARIABLE_REGEXP=/[\s;{]--[-a-zA-Z0-9]+\s*:/m;function hasCssVariables(e){return e.indexOf("var(")>-1||CSS_VARIABLE_REGEXP.test(e)}var CSS_URL_REGEXP=/url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;function hasRelativeUrls(e){return CSS_URL_REGEXP.lastIndex=0,CSS_URL_REGEXP.test(e)}function fixRelativeUrls(e,t){var r=t.replace(/[^/]*$/,"");return e.replace(CSS_URL_REGEXP,(function(e,t){var n=r+t;return e.replace(t,n)}))}var CustomStyle=function(){function e(e,t){this.win=e,this.doc=t,this.count=0,this.hostStyleMap=new WeakMap,this.hostScopeMap=new WeakMap,this.globalScopes=[],this.scopesMap=new Map,this.didInit=!1;}return e.prototype.i=function(){var e=this;return this.didInit||!this.win.requestAnimationFrame?Promise.resolve():(this.didInit=!0,new Promise((function(t){e.win.requestAnimationFrame((function(){startWatcher(e.doc,e.globalScopes),loadDocument(e.doc,e.globalScopes).then((function(){return t()}));}));})))},e.prototype.addLink=function(e){var t=this;return addGlobalLink(this.doc,this.globalScopes,e).then((function(){t.updateGlobal();}))},e.prototype.addGlobalStyle=function(e){addGlobalStyle(this.globalScopes,e)&&this.updateGlobal();},e.prototype.createHostStyle=function(e,t,r,n){if(this.hostScopeMap.has(e))throw new Error("host style already created");var s=this.registerHostTemplate(r,t,n),o=this.doc.createElement("style");return o.setAttribute("data-no-shim",""),s.usesCssVars?n?(o["s-sc"]=t=s.scopeId+"-"+this.count,o.textContent="/*needs update*/",this.hostStyleMap.set(e,o),this.hostScopeMap.set(e,reScope(s,t)),this.count++):(s.styleEl=o,s.usesCssVars||(o.textContent=executeTemplate(s.template,{})),this.globalScopes.push(s),this.updateGlobal(),this.hostScopeMap.set(e,s)):o.textContent=r,o},e.prototype.removeHost=function(e){var t=this.hostStyleMap.get(e);t&&t.remove(),this.hostStyleMap.delete(e),this.hostScopeMap.delete(e);},e.prototype.updateHost=function(e){var t=this.hostScopeMap.get(e);if(t&&t.usesCssVars&&t.isScoped){var r=this.hostStyleMap.get(e);if(r){var n=resolveValues(getActiveSelectors(e,this.hostScopeMap,this.globalScopes));r.textContent=executeTemplate(t.template,n);}}},e.prototype.updateGlobal=function(){updateGlobalScopes(this.globalScopes);},e.prototype.registerHostTemplate=function(e,t,r){var n=this.scopesMap.get(t);return n||((n=parseCSS(e)).scopeId=t,n.isScoped=r,this.scopesMap.set(t,n)),n},e}();!function(e){!e||e.__cssshim||e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")||(e.__cssshim=new CustomStyle(e,e.document));}("undefined"!=typeof window&&window);

package/dist/cjs/road-badge_11.cjs.entry.js

@@ -1,532 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9b63596c.js');
-require('./polyfill-c7a0fa22.js');
-const index$1 = require('./index-b51ea273.js');
-const utils = require('./utils-90171b88.js');
-
-const badgeCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:1rem;min-height:1rem;padding:0 0.3125rem;font-family:var(--road-font, sans-serif);font-size:0.625rem;font-weight:700;white-space:nowrap;border-radius:1rem}:host(.badge-bubble){min-width:0.25rem;min-height:0.25rem;padding:0}:host(.badge-primary){color:var(--road-primary-contrast);background-color:var(--road-primary-500)}:host(.badge-secondary){color:var(--road-primary-contrast);background-color:var(--road-primary-500)}:host(.badge-accent){color:var(--road-secondary-contrast);background-color:var(--road-secondary-500)}:host(.badge-info){color:var(--road-info-contrast);background-color:var(--road-info-default)}:host(.badge-success){color:var(--road-success-contrast);background-color:var(--road-success-default)}:host(.badge-warning){color:var(--road-warning-contrast);background-color:var(--road-warning-default)}:host(.badge-danger){color:var(--road-danger-contrast);background-color:var(--road-danger-default)}";
-
-let Badge = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Color of the badge
-     */
-    this.color = 'secondary';
-    /**
-     * if `true` the badge will be displayed has a little bubble
-     */
-    this.bubble = false;
-  }
-  render() {
-    const colorClass = this.color !== undefined ? `badge-${this.color}` : '';
-    const bubbleClass = this.bubble ? 'badge-bubble' : '';
-    return (index.h(index.Host, { class: `${colorClass} ${bubbleClass}` }, index.h("slot", null)));
-  }
-};
-Badge.style = badgeCss;
-
-const buttonCss = ":host{--border-radius:0.25rem;--font-size:1rem;--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-900);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);-webkit-transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){outline:0}.button-native{position:relative;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-200)}:host(.btn-primary){color:var(--road-primary-contrast);background:var(--road-primary-500)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-primary-contrast)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-primary-700)}:host(.btn-secondary){color:var(--road-primary-contrast);background:var(--road-primary-500)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-primary-contrast)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-primary-700)}:host(.btn-link){font-weight:400;color:var(--road-primary-500);background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-700)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-grey-600);background:var(--road-grey-000);border-color:var(--road-grey-600)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-grey-600)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-200)}:host(.btn-outline-primary){color:var(--road-primary-500);border-color:var(--road-primary-500)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-primary-500)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-primary-100)}:host(.btn-outline-secondary){color:var(--road-primary-500);border-color:var(--road-primary-500)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-primary-500)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-primary-100)}:host([aria-disabled]){opacity:0.16}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-md){--font-size:0.875rem;height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-sm){--font-size:0.875rem;height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-block){width:100%}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}";
-
-let Button = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.roadfocus = index.createEvent(this, "roadfocus", 7);
-    this.roadFocus = index.createEvent(this, "roadFocus", 7);
-    this.roadblur = index.createEvent(this, "roadblur", 7);
-    this.roadBlur = index.createEvent(this, "roadBlur", 7);
-    /**
-     * The color to use from your application's color palette.
-     */
-    this.color = 'default';
-    /**
-      * The button size.
-      */
-    this.size = 'lg';
-    /**
-     * The type of the button.
-     */
-    this.buttonType = 'button';
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    this.disabled = false;
-    /**
-     * Set to `true` for a full-width button.
-     */
-    this.expand = false;
-    /**
-     * Set to `true` for a transparent button with a border
-     */
-    this.outline = false;
-    this.onClick = (ev) => {
-      if (this.el.shadowRoot && this.el.attachShadow) {
-        // this button wants to specifically submit a form
-        // climb up the dom to see if we're in a <form>
-        // and if so, then use JS to submit it
-        const form = this.el.closest('form');
-        if (form) {
-          ev.preventDefault();
-          const fakeButton = document.createElement('button');
-          fakeButton.type = this.buttonType;
-          fakeButton.style.display = 'none';
-          form.appendChild(fakeButton);
-          fakeButton.click();
-          fakeButton.remove();
-        }
-      }
-    };
-    this.onFocus = () => {
-      this.roadfocus.emit();
-      this.roadFocus.emit();
-    };
-    this.onBlur = () => {
-      this.roadblur.emit();
-      this.roadBlur.emit();
-    };
-  }
-  render() {
-    const { buttonType, disabled, href, rel, target, color } = this;
-    const TagType = this.href === undefined ? 'button' : 'a';
-    const attrs = (TagType === 'button')
-      ? { type: buttonType }
-      : {
-        download: this.download,
-        href,
-        rel,
-        target,
-      };
-    const colorClass = this.outline ? `btn-outline-${color}` : `btn-${color}`;
-    const sizeClass = this.size !== undefined ? `btn-${this.size}` : '';
-    const expandClass = this.expand ? 'btn-block' : '';
-    return (index.h(index.Host, { class: `${colorClass} ${sizeClass} ${expandClass}`, onClick: this.onClick, "aria-disabled": disabled ? 'true' : null }, index.h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("slot", { name: "start" }), index.h("slot", null), index.h("slot", { name: "end" }))));
-  }
-  get el() { return index.getElement(this); }
-};
-Button.style = buttonCss;
-
-const colCss = ":host{position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding-right:8px;padding-left:8px}:host(.col-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-1){-ms-flex:0 0 8.3333%;flex:0 0 8.3333%;max-width:8.3333%}:host(.col-2){-ms-flex:0 0 16.6667%;flex:0 0 16.6667%;max-width:16.6667%}:host(.col-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-4){-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}:host(.col-5){-ms-flex:0 0 41.6667%;flex:0 0 41.6667%;max-width:41.6667%}:host(.col-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-7){-ms-flex:0 0 58.3333%;flex:0 0 58.3333%;max-width:58.3333%}:host(.col-8){-ms-flex:0 0 66.6667%;flex:0 0 66.6667%;max-width:66.6667%}:host(.col-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-10){-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;max-width:83.3333%}:host(.col-11){-ms-flex:0 0 91.6667%;flex:0 0 91.6667%;max-width:91.6667%}:host(.col-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-1){margin-left:8.3333%}:host(.offset-2){margin-left:16.6667%}:host(.offset-3){margin-left:25%}:host(.offset-4){margin-left:33.3333%}:host(.offset-5){margin-left:41.6667%}:host(.offset-6){margin-left:50%}:host(.offset-7){margin-left:58.3333%}:host(.offset-8){margin-left:66.6667%}:host(.offset-9){margin-left:75%}:host(.offset-10){margin-left:83.3333%}:host(.offset-11){margin-left:91.6667%}@media (min-width: 576px){:host(.col-sm){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-sm-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-sm-1){-ms-flex:0 0 8.3333%;flex:0 0 8.3333%;max-width:8.3333%}:host(.col-sm-2){-ms-flex:0 0 16.6667%;flex:0 0 16.6667%;max-width:16.6667%}:host(.col-sm-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-sm-4){-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}:host(.col-sm-5){-ms-flex:0 0 41.6667%;flex:0 0 41.6667%;max-width:41.6667%}:host(.col-sm-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-sm-7){-ms-flex:0 0 58.3333%;flex:0 0 58.3333%;max-width:58.3333%}:host(.col-sm-8){-ms-flex:0 0 66.6667%;flex:0 0 66.6667%;max-width:66.6667%}:host(.col-sm-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-sm-10){-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;max-width:83.3333%}:host(.col-sm-11){-ms-flex:0 0 91.6667%;flex:0 0 91.6667%;max-width:91.6667%}:host(.col-sm-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-sm-0){margin-left:0}:host(.offset-sm-1){margin-left:8.3333%}:host(.offset-sm-2){margin-left:16.6667%}:host(.offset-sm-3){margin-left:25%}:host(.offset-sm-4){margin-left:33.3333%}:host(.offset-sm-5){margin-left:41.6667%}:host(.offset-sm-6){margin-left:50%}:host(.offset-sm-7){margin-left:58.3333%}:host(.offset-sm-8){margin-left:66.6667%}:host(.offset-sm-9){margin-left:75%}:host(.offset-sm-10){margin-left:83.3333%}:host(.offset-sm-11){margin-left:91.6667%}}@media (min-width: 768px){:host(.col-md){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-md-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-md-1){-ms-flex:0 0 8.3333%;flex:0 0 8.3333%;max-width:8.3333%}:host(.col-md-2){-ms-flex:0 0 16.6667%;flex:0 0 16.6667%;max-width:16.6667%}:host(.col-md-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-md-4){-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}:host(.col-md-5){-ms-flex:0 0 41.6667%;flex:0 0 41.6667%;max-width:41.6667%}:host(.col-md-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-md-7){-ms-flex:0 0 58.3333%;flex:0 0 58.3333%;max-width:58.3333%}:host(.col-md-8){-ms-flex:0 0 66.6667%;flex:0 0 66.6667%;max-width:66.6667%}:host(.col-md-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-md-10){-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;max-width:83.3333%}:host(.col-md-11){-ms-flex:0 0 91.6667%;flex:0 0 91.6667%;max-width:91.6667%}:host(.col-md-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-md-0){margin-left:0}:host(.offset-md-1){margin-left:8.3333%}:host(.offset-md-2){margin-left:16.6667%}:host(.offset-md-3){margin-left:25%}:host(.offset-md-4){margin-left:33.3333%}:host(.offset-md-5){margin-left:41.6667%}:host(.offset-md-6){margin-left:50%}:host(.offset-md-7){margin-left:58.3333%}:host(.offset-md-8){margin-left:66.6667%}:host(.offset-md-9){margin-left:75%}:host(.offset-md-10){margin-left:83.3333%}:host(.offset-md-11){margin-left:91.6667%}}@media (min-width: 992px){:host(.col-lg){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-lg-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-lg-1){-ms-flex:0 0 8.3333%;flex:0 0 8.3333%;max-width:8.3333%}:host(.col-lg-2){-ms-flex:0 0 16.6667%;flex:0 0 16.6667%;max-width:16.6667%}:host(.col-lg-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-lg-4){-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}:host(.col-lg-5){-ms-flex:0 0 41.6667%;flex:0 0 41.6667%;max-width:41.6667%}:host(.col-lg-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-lg-7){-ms-flex:0 0 58.3333%;flex:0 0 58.3333%;max-width:58.3333%}:host(.col-lg-8){-ms-flex:0 0 66.6667%;flex:0 0 66.6667%;max-width:66.6667%}:host(.col-lg-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-lg-10){-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;max-width:83.3333%}:host(.col-lg-11){-ms-flex:0 0 91.6667%;flex:0 0 91.6667%;max-width:91.6667%}:host(.col-lg-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-lg-0){margin-left:0}:host(.offset-lg-1){margin-left:8.3333%}:host(.offset-lg-2){margin-left:16.6667%}:host(.offset-lg-3){margin-left:25%}:host(.offset-lg-4){margin-left:33.3333%}:host(.offset-lg-5){margin-left:41.6667%}:host(.offset-lg-6){margin-left:50%}:host(.offset-lg-7){margin-left:58.3333%}:host(.offset-lg-8){margin-left:66.6667%}:host(.offset-lg-9){margin-left:75%}:host(.offset-lg-10){margin-left:83.3333%}:host(.offset-lg-11){margin-left:91.6667%}}@media (min-width: 1200px){:host(.col-xl){-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}:host(.col-xl-auto){-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}:host(.col-xl-1){-ms-flex:0 0 8.3333%;flex:0 0 8.3333%;max-width:8.3333%}:host(.col-xl-2){-ms-flex:0 0 16.6667%;flex:0 0 16.6667%;max-width:16.6667%}:host(.col-xl-3){-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}:host(.col-xl-4){-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}:host(.col-xl-5){-ms-flex:0 0 41.6667%;flex:0 0 41.6667%;max-width:41.6667%}:host(.col-xl-6){-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}:host(.col-xl-7){-ms-flex:0 0 58.3333%;flex:0 0 58.3333%;max-width:58.3333%}:host(.col-xl-8){-ms-flex:0 0 66.6667%;flex:0 0 66.6667%;max-width:66.6667%}:host(.col-xl-9){-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}:host(.col-xl-10){-ms-flex:0 0 83.3333%;flex:0 0 83.3333%;max-width:83.3333%}:host(.col-xl-11){-ms-flex:0 0 91.6667%;flex:0 0 91.6667%;max-width:91.6667%}:host(.col-xl-12){-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}:host(.offset-xl-0){margin-left:0}:host(.offset-xl-1){margin-left:8.3333%}:host(.offset-xl-2){margin-left:16.6667%}:host(.offset-xl-3){margin-left:25%}:host(.offset-xl-4){margin-left:33.3333%}:host(.offset-xl-5){margin-left:41.6667%}:host(.offset-xl-6){margin-left:50%}:host(.offset-xl-7){margin-left:58.3333%}:host(.offset-xl-8){margin-left:66.6667%}:host(.offset-xl-9){margin-left:75%}:host(.offset-xl-10){margin-left:83.3333%}:host(.offset-xl-11){margin-left:91.6667%}}";
-
-let Col = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("slot", null));
-  }
-};
-Col.style = colCss;
-
-const drawerDarkCss = ":host{--background:var(--road-grey-000);--color:var(--road-grey-900);--header-icon:var(--road-grey-900);--header-color:var(--road-grey-900);--header-background:var(--road-grey-000);--header-delimiter:0;--back-chevron-color:var(--road-grey-900);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;-webkit-transition:opacity 0.15s linear, visibility 0.15s;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;-ms-touch-action:none;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;-webkit-transition:-webkit-transform 0.3s ease-out;transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.drawer-right){-ms-flex-pack:end;justify-content:flex-end}:host(.drawer-right) .drawer-dialog{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.drawer-bottom){-ms-flex-align:end;align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)}.drawer-header{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{-ms-flex-negative:0;flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-primary-contrast);--header-color:var(--road-primary-contrast);--header-background:var(--road-primary-900);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:1rem;font-weight:400}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{-webkit-transform:none;transform:none}:host{--background:var(--road-grey-999);--color:var(--road-grey-000);--header-icon:var(--road-grey-000)}";
-
-const drawerLightCss = ":host{--background:var(--road-grey-000);--color:var(--road-grey-900);--header-icon:var(--road-grey-900);--header-color:var(--road-grey-900);--header-background:var(--road-grey-000);--header-delimiter:0;--back-chevron-color:var(--road-grey-900);--max-height:auto;--z-index:10;position:fixed;top:0;left:0;z-index:var(--z-index);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;width:100%;height:100%;overflow:hidden;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--color);visibility:hidden !important;opacity:0;-webkit-transition:opacity 0.15s linear, visibility 0.15s;transition:opacity 0.15s linear, visibility 0.15s}.drawer-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:block;-ms-touch-action:none;touch-action:none;cursor:pointer;background:var(--road-overlay)}.drawer-dialog{position:relative;width:100%;pointer-events:none;-webkit-transition:-webkit-transform 0.3s ease-out;transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.drawer-right){-ms-flex-pack:end;justify-content:flex-end}:host(.drawer-right) .drawer-dialog{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.drawer-bottom){-ms-flex-align:end;align-items:flex-end}:host(.drawer-bottom) .drawer-dialog{width:100%;max-height:var(--max-height);-webkit-transform:translateY(100%);transform:translateY(100%)}:host(.drawer-bottom) .drawer-content{height:auto}.drawer-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100vh;pointer-events:auto;background-color:var(--background);background-clip:padding-box;-webkit-box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);box-shadow:0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16)}.drawer-header{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;height:3.5rem;color:var(--header-color);background:var(--header-background);border-color:var(--road-grey-300);border-style:solid;border-width:var(--header-delimiter)}.drawer-header road-icon{-ms-flex-negative:0;flex-shrink:0;color:var(--header-icon)}.drawer-header-inverse{--header-icon:var(--road-primary-contrast);--header-color:var(--road-primary-contrast);--header-background:var(--road-primary-900);margin-bottom:2.5rem}.drawer-action,.drawer-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding:0.5rem;font-family:inherit;font-size:0.875rem;color:inherit;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.drawer-header:not(.drawer-header-inverse) .drawer-action road-icon{color:var(--back-chevron-color)}.drawer-action~.drawer-title,.drawer-close~.drawer-title{padding-left:0}.drawer-action-left,.drawer-close-left{margin-right:auto}.drawer-title{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:3.5rem;padding-left:3.5rem;margin:0;font-size:1rem;font-weight:400}.drawer-body{overflow-y:auto}:host(.drawer-right) .drawer-body,:host(.drawer-left) .drawer-body{height:calc(100vh - 3.5rem)}.drawer-inner{padding:0 1rem 2.5rem}@media (min-width: 768px){.drawer-inner{padding:0 2rem 2.5rem}}:host(.drawer-open){visibility:visible !important;opacity:1}:host(.drawer-open) .drawer-dialog{-webkit-transform:none;transform:none}";
-
-let Drawer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.onOpen = index.createEvent(this, "open", 7);
-    this.onClose = index.createEvent(this, "close", 7);
-    this.onBack = index.createEvent(this, "back", 7);
-    /**
-     * Set isOpen property to true to open the drawer
-     */
-    this.isOpen = false;
-    /**
-     * position of the drawer. e.g. left, right, bottom
-     */
-    this.position = 'left';
-    /**
-     * Width of the drawer
-     */
-    this.drawerWidth = 480;
-    /**
-     * Inverse header colors
-     */
-    this.hasInverseHeader = false;
-    /**
-     * Show / hide back icon
-     */
-    this.hasBackIcon = false;
-    /**
-     * Show / hide close icon
-     */
-    this.hasCloseIcon = true;
-    /**
-     * Close the dialog when clicking on the cross or layer
-     */
-    this.onClick = (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
-      this.close();
-    };
-    /**
-     * Close the dialog when clicking on the cross or layer
-     */
-    this.onClickBack = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      this.back();
-    };
-  }
-  /**
-   * Open the drawer
-   */
-  async open() {
-    this.isOpen = true;
-  }
-  /**
-   * Close the drawer
-   */
-  async close() {
-    this.isOpen = false;
-  }
-  /**
-   * Return to previous state of the drawer content
-   */
-  async back() {
-    this.onBack.emit();
-  }
-  handleOpen(openValue) {
-    if (openValue === true) {
-      this.onOpen.emit();
-    }
-    else {
-      this.el.addEventListener('transitionend', () => {
-        this.onClose.emit();
-        this.el.shadowRoot && (this.el.shadowRoot.querySelector('.drawer-body').scrollTop = 0);
-      }, { once: true });
-    }
-  }
-  /**
-   * Close the dialog when press Escape key
-   */
-  onEscape(event) {
-    if (event.key === 'Escape' || event.key === "Esc") {
-      this.close();
-    }
-  }
-  /**
-   * Call close function when clicking an element with data-dismiss="modal" attribute
-   */
-  componentDidLoad() {
-    this.el.querySelectorAll('[data-dismiss="modal"]').forEach(item => {
-      item.addEventListener('click', () => this.close());
-    });
-  }
-  render() {
-    const drawerIsOpenClass = this.isOpen ? 'drawer-open' : '';
-    const inverseHeaderClass = this.hasInverseHeader ? 'drawer-header-inverse' : '';
-    const drawerDelimiterClass = this.drawerTitle !== undefined && !this.hasInverseHeader ? 'drawer-delimiter' : '';
-    const backIconElement = this.hasBackIcon ? index.h("button", { type: "button", class: "drawer-action", "aria-label": "Back", onClick: this.onClickBack }, index.h("road-icon", { icon: index$1.navigationChevron, rotate: "180" }), this.backText) : '';
-    const closeIconElement = this.hasCloseIcon ? index.h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": "Close" }, index.h("road-icon", { icon: index$1.navigationClose, "aria-hidden": "true" })) : '';
-    const drawerWidthValue = this.position === 'bottom' ? '100%' : this.drawerWidth + 'px';
-    return (index.h(index.Host, { class: `drawer ${drawerIsOpenClass} drawer-${this.position}`, tabindex: "-1", role: "dialog" }, index.h("div", { class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), index.h("div", { class: "drawer-dialog", style: { maxWidth: `${drawerWidthValue}` }, role: "document", tabindex: "0" }, index.h("div", { class: "drawer-content" }, index.h("header", { class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle !== undefined ? index.h("h2", { class: "drawer-title" }, this.drawerTitle) : index.h("div", { class: "drawer-title" }, index.h("slot", { name: "title" })), closeIconElement), index.h("div", { class: "drawer-body" }, index.h("slot", null))))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "isOpen": ["handleOpen"]
-  }; }
-};
-Drawer.style = {
-  dark: drawerDarkCss,
-  light: drawerLightCss
-};
-
-const gridCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;padding-right:8px;padding-left:8px;margin-right:auto;margin-left:auto}";
-
-let Grid = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("slot", null));
-  }
-};
-Grid.style = gridCss;
-
-const validateContent = (svgContent) => {
-  const div = document.createElement('div');
-  div.innerHTML = svgContent;
-  // setup this way to ensure it works on our buddy IE
-  for (let i = div.childNodes.length - 1; i >= 0; i--) {
-    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
-      div.removeChild(div.childNodes[i]);
-    }
-  }
-  // must only have 1 root element
-  const svgElm = div.firstElementChild;
-  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
-    const svgClass = svgElm.getAttribute('class') || '';
-    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
-    // root element must be an svg
-    // lets double check we've got valid elements
-    // do not allow scripts
-    if (isValid(svgElm)) {
-      return div.innerHTML;
-    }
-  }
-  return '';
-};
-const isValid = (elm) => {
-  if (elm.nodeType === 1) {
-    if (elm.nodeName.toLowerCase() === 'script') {
-      return false;
-    }
-    for (let i = 0; i < elm.attributes.length; i++) {
-      const val = elm.attributes[i].value;
-      if (utils.isStr(val) && val.toLowerCase().indexOf('on') === 0) {
-        return false;
-      }
-    }
-    for (let i = 0; i < elm.childNodes.length; i++) {
-      if (!isValid(elm.childNodes[i])) {
-        return false;
-      }
-    }
-  }
-  return true;
-};
-
-const roadiconContent = new Map();
-const requests = new Map();
-const getSvgContent = (url, sanitize) => {
-  // see if we already have a request for this url
-  let req = requests.get(url);
-  if (!req) {
-    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-      // we don't already have a request
-      // @ts-ignore
-      req = fetch(url).then((rsp) => {
-        if (rsp.ok) {
-          return rsp.text().then((svgContent) => {
-            if (svgContent && sanitize !== false) {
-              svgContent = validateContent(svgContent);
-            }
-            roadiconContent.set(url, svgContent || '');
-          });
-        }
-        roadiconContent.set(url, '');
-      });
-      // cache for the same requests
-      requests.set(url, req);
-    }
-    else {
-      // set to empty for ssr scenarios and resolve promise
-      roadiconContent.set(url, '');
-      return Promise.resolve();
-    }
-  }
-  return req;
-};
-
-const iconCss = ":host{-webkit-box-sizing:content-box;box-sizing:content-box;display:inline-block;color:var(--road-grey-900);-webkit-transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;fill:currentColor;contain:strict}:host svg{display:block;width:100%;height:100%}:host(.icon-sm){width:1.25rem;height:1.25rem}:host(.icon-md){width:1.5rem;height:1.5rem}:host(.icon-lg){width:2rem;height:2rem}:host(.icon-3x){width:3rem;height:3rem}:host(.icon-4x){width:4rem;height:4rem}:host(.icon-primary){color:var(--road-primary-900)}:host(.icon-secondary){color:var(--road-primary-500)}:host(.icon-accent){color:var(--road-secondary-500)}:host(.icon-info){color:var(--road-info-default)}:host(.icon-success){color:var(--road-success-default)}:host(.icon-warning){color:var(--road-warning-default)}:host(.icon-danger){color:var(--road-danger-default)}:host(.icon-default){color:var(--road-grey-900)}:host(.icon-white){color:var(--road-grey-000)}:host(.icon-rotate-90){-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.icon-rotate-180){-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.icon-rotate-270){-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
-
-let Icon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isVisible = false;
-    /**
-     * The size of the icon.
-     * Available options are: `"sm"`, `"md"`, `"lg"`, `"3x"` and `"4x"`.
-     */
-    this.size = "lg";
-    /**
-     * If enabled, road-icon will be loaded lazily when it's visible in the viewport.
-     * Default, `false`.
-     */
-    this.lazy = false;
-    /**
-     * When set to `false`, SVG content that is HTTP fetched will not be checked
-     * if the response SVG content has any `<script>` elements, or any attributes
-     * that start with `on`, such as `onclick`.
-     */
-    this.sanitize = true;
-  }
-  componentWillLoad() {
-    this.waitUntilVisible(this.el, '50px', () => {
-      this.isVisible = true;
-      this.loadIcon();
-    });
-  }
-  disconnectedCallback() {
-    if (this.io) {
-      this.io.disconnect();
-      this.io = undefined;
-    }
-  }
-  waitUntilVisible(el, rootMargin, cb) {
-    if (this.lazy && window.IntersectionObserver) {
-      const io = this.io = new window.IntersectionObserver((data) => {
-        if (data[0].isIntersecting) {
-          io.disconnect();
-          this.io = undefined;
-          cb();
-        }
-      }, { rootMargin });
-      io.observe(el);
-    }
-    else {
-      // browser doesn't support IntersectionObserver
-      // so just fallback to always show it
-      cb();
-    }
-  }
-  loadIcon() {
-    if (this.isVisible) {
-      const url = utils.getUrl(this);
-      if (url) {
-        if (roadiconContent.has(url)) {
-          // sync if it's already loaded
-          this.svgContent = roadiconContent.get(url);
-        }
-        else {
-          // async if it hasn't been loaded
-          getSvgContent(url, this.sanitize).then(() => (this.svgContent = roadiconContent.get(url)));
-        }
-      }
-    }
-    if (!this.ariaLabel && this.ariaHidden !== 'true') {
-      const label = utils.getName(this.name, this.icon);
-      // user did not provide a label
-      // come up with the label based on the icon name
-      if (label) {
-        this.ariaLabel = label.replace(/-/g, ' ');
-      }
-    }
-  }
-  render() {
-    const colorClass = this.color !== undefined ? `icon-${this.color}` : '';
-    const sizeClass = this.size !== undefined ? `icon-${this.size}` : '';
-    const rotateClass = this.rotate !== undefined ? `icon-rotate-${this.rotate}` : '';
-    return (index.h(index.Host, { class: `${colorClass} ${sizeClass} ${rotateClass}`, "aria-hidden": "true" }, ((this.svgContent !== '')
-      ? index.h("div", { class: "icon-inner", innerHTML: this.svgContent })
-      : index.h("div", { class: "icon-inner" }))));
-  }
-  static get assetsDirs() { return ["svg"]; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "name": ["loadIcon"],
-    "src": ["loadIcon"],
-    "icon": ["loadIcon"]
-  }; }
-};
-Icon.style = iconCss;
-
-const itemCss = ":host{--border-radius:0.25rem;--background-color:transparent;--detail-color:var(--road-grey-900);--inner-padding:1rem 0.5rem 1rem 0;--min-height:3.5rem;--padding-left:1rem;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;text-decoration:none;outline:none}.item-native{position:relative;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);padding:0 0 0 var(--padding-left);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-grey-900);background-color:var(--background-color);border-color:var(--road-grey-300);border-style:solid;border-width:var(--border-width, 0);border-radius:var(--border-radius);outline:none;-webkit-transition:background 0.15s ease-in-out;transition:background 0.15s ease-in-out;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.item-active{background-color:var(--road-grey-100)}button.item-native:not(:disabled):not(.item-active):hover,button.item-native:not(:disabled):not(.item-active):focus{background-color:var(--road-grey-100)}.item-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--road-grey-300);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}.input-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;overflow:inherit;text-overflow:ellipsis}.item-detail-icon{color:var(--detail-color)}::slotted(road-icon){-ms-flex-negative:0;flex-shrink:0;margin-right:0.5rem}::slotted(road-img){-ms-flex-negative:0;flex-shrink:0;width:3rem;height:3rem;-o-object-fit:cover;object-fit:cover;min-height:inherit;margin-right:1rem}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}:host(.item-lines-none){--border-width:0 !important;--inner-border-width:0 !important}:host(.item-lines-full){--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}:host(.item-lines-inset){--inner-border-width:0 0 1px 0 !important}";
-
-let Item = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.multipleInputs = false;
-    /**
-     * If `true`, a button tag will be rendered and the item will be tappable.
-     */
-    this.button = false;
-    /**
-     * The icon to use when `detail` is set to `true`.
-     */
-    this.detailIcon = index$1.navigationChevron;
-    /**
-     * If `true`, the user cannot interact with the item.
-     */
-    this.disabled = false;
-    /**
-     * The type of the button. Only used when an `onclick` or `button` property is present.
-     */
-    this.type = 'button';
-  }
-  // If the item has an href or button property it will render a native
-  // anchor or button that is clickable
-  isClickable() {
-    return (this.href !== undefined || this.button);
-  }
-  render() {
-    const { detail, detailIcon, download, lines, disabled, href, rel, target } = this;
-    const clickable = this.isClickable();
-    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
-    const attrs = (TagType === 'button')
-      ? { type: this.type }
-      : {
-        download,
-        href,
-        rel,
-        target,
-      };
-    const showDetail = detail !== undefined && detail;
-    return (index.h(index.Host, { "aria-disabled": disabled ? 'true' : null, class: {
-        [`item-lines-${lines}`]: lines !== undefined,
-      } }, index.h(TagType, Object.assign({}, attrs, { class: {
-        'item-native': true,
-        'item-active': this.active,
-      }, part: "native", disabled: disabled }), index.h("slot", { name: "start" }), index.h("div", { class: "item-inner" }, index.h("div", { class: "input-wrapper" }, index.h("slot", null)), index.h("slot", { name: "end" }), showDetail && index.h("road-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon" })))));
-  }
-  get el() { return index.getElement(this); }
-};
-Item.style = itemCss;
-
-const labelCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;overflow:hidden;font-size:0.875rem;color:currentColor;text-overflow:ellipsis;white-space:nowrap}";
-
-let Label = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("slot", null));
-  }
-};
-Label.style = labelCss;
-
-const listCss = ":host{display:block;contain:content;list-style-type:none}:host(.list-lines-none) ::slotted(road-item){--border-width:0;--inner-border-width:0}:host(.list-lines-full){border:1px solid var(--road-grey-300);border-bottom:0}:host(.list-lines-full),:host(.list-lines-full) ::slotted(road-item){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-inset),:host(.list-lines-inset) ::slotted(road-item){--inner-border-width:0 0 1px 0}";
-
-let List = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const { lines } = this;
-    return (index.h(index.Host, { class: {
-        [`list-lines-${lines}`]: lines !== undefined,
-      } }, index.h("slot", null)));
-  }
-};
-List.style = listCss;
-
-const rowCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:1440px;margin-right:-8px;margin-left:-8px}@media (min-width: 1440px){:host{margin-right:auto;margin-left:auto}}:host(.flex-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-center){-ms-flex-align:center;align-items:center}:host(.align-items-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-stretch){-ms-flex-align:stretch;align-items:stretch}@media (min-width: 576px){:host(.flex-sm-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-sm-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-sm-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-sm-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-sm-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-sm-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-sm-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-sm-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-sm-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-sm-center){-ms-flex-align:center;align-items:center}:host(.align-items-sm-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-sm-stretch){-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 768px){:host(.flex-md-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-md-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-md-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-md-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-md-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-md-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-md-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-md-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-md-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-md-center){-ms-flex-align:center;align-items:center}:host(.align-items-md-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-md-stretch){-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 992px){:host(.flex-lg-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-lg-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-lg-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-lg-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-lg-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-lg-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-lg-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-lg-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-lg-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-lg-center){-ms-flex-align:center;align-items:center}:host(.align-items-lg-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-lg-stretch){-ms-flex-align:stretch;align-items:stretch}}@media (min-width: 1200px){:host(.flex-xl-wrap){-ms-flex-wrap:wrap;flex-wrap:wrap}:host(.flex-xl-nowrap){-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host(.justify-content-xl-start){-ms-flex-pack:start;justify-content:flex-start}:host(.justify-content-xl-end){-ms-flex-pack:end;justify-content:flex-end}:host(.justify-content-xl-center){-ms-flex-pack:center;justify-content:center}:host(.justify-content-xl-between){-ms-flex-pack:justify;justify-content:space-between}:host(.justify-content-xl-around){-ms-flex-pack:distribute;justify-content:space-around}:host(.align-items-xl-start){-ms-flex-align:start;align-items:flex-start}:host(.align-items-xl-end){-ms-flex-align:end;align-items:flex-end}:host(.align-items-xl-center){-ms-flex-align:center;align-items:center}:host(.align-items-xl-baseline){-ms-flex-align:baseline;align-items:baseline}:host(.align-items-xl-stretch){-ms-flex-align:stretch;align-items:stretch}}:host(.align-content-start){-ms-flex-line-pack:start;align-content:flex-start}:host(.align-content-end){-ms-flex-line-pack:end;align-content:flex-end}:host(.align-content-center){-ms-flex-line-pack:center;align-content:center}:host(.align-content-between){-ms-flex-line-pack:justify;align-content:space-between}:host(.align-content-around){-ms-flex-line-pack:distribute;align-content:space-around}:host(.align-content-stretch){-ms-flex-line-pack:stretch;align-content:stretch}:host(.align-self-auto){-ms-flex-item-align:auto;align-self:auto}:host(.align-self-start){-ms-flex-item-align:start;align-self:flex-start}:host(.align-self-end){-ms-flex-item-align:end;align-self:flex-end}:host(.align-self-center){-ms-flex-item-align:center;align-self:center}:host(.align-self-baseline){-ms-flex-item-align:baseline;align-self:baseline}:host(.align-self-stretch){-ms-flex-item-align:stretch;align-self:stretch}";
-
-let Row = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
-Row.style = rowCss;
-
-const toolbarCss = ":host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-grey-900);background:var(--road-grey-000);border-bottom:1px solid var(--road-grey-300)}.toolbar-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:3.5rem;contain:content;overflow:hidden}.toolbar-content{-ms-flex:1 1 0%;flex:1 1 0%;min-width:0;max-width:100%}::slotted(road-button){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;--border-radius:1.5rem;font-size:0.875rem;font-weight:400}:host(.toolbar-primary){color:var(--road-primary-contrast);background:var(--road-primary-900)}:host(.toolbar-secondary){color:var(--road-primary-contrast);background:var(--road-primary-500)}";
-
-let Toolbar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const colorClass = this.color !== undefined ? `toolbar-${this.color}` : '';
-    return (index.h(index.Host, { class: colorClass }, index.h("div", { class: "toolbar-container" }, index.h("slot", { name: "start" }), index.h("slot", { name: "primary" }), index.h("div", { class: "toolbar-content" }, index.h("slot", null)), index.h("slot", { name: "secondary" }), index.h("slot", { name: "end" }))));
-  }
-};
-Toolbar.style = toolbarCss;
-
-exports.road_badge = Badge;
-exports.road_button = Button;
-exports.road_col = Col;
-exports.road_drawer = Drawer;
-exports.road_grid = Grid;
-exports.road_icon = Icon;
-exports.road_item = Item;
-exports.road_label = Label;
-exports.road_list = List;
-exports.road_row = Row;
-exports.road_toolbar = Toolbar;