npm - @roadtrip/components - Versions diffs - 3.12.1 → 3.13.0 - Mend

@roadtrip/components 3.12.1 → 3.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/dist/cjs/road-button-floating.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-button-floating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,~~2iDAA2iD~~;;~~MCgBxjD~~,MAAM;;;;;;;IA6DT,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,IAAK,IAAI,CAAC,EAAU,CAAC,YAAY,EAAE;;;;QAIvD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrC,IAAI,IAAI,EAAE;UACR,EAAE,CAAC,cAAc,EAAE,CAAC;UAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;UACpD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;UAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;UACnB,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;OACF;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAhFmE,OAAO;;;;;EAuC1E,QAAQ;IACN,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;IACtC,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;MACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACzC;IACD,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACnC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAC3C;GACF;EAiCH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAU,CAAC;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAErF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzBD,QAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,kBAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,qBAAO,CACC,CACL,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/\n Button floating\n \n \n * Index\n * - Button\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n position: fixed;\n right: 1rem;\n bottom: 1rem;\n z-index: 2;\n box-sizing: border-box;\n display: block;\n align-items: center;\n max-width: 3.5rem;\n height: 3.5rem;\n padding: 0.6rem 0.75rem 0.75rem;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-button-medium);\n font-weight: 700;\n line-height: 1.375;\n color: var(--road-on-button-secondary);\n text-decoration: none;\n white-space: nowrap;\n background: var(--road-button-secondary);\n border: 1px solid transparent;\n border-radius: 2rem;\n box-shadow: var(--road-elevation-average);\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n:host(.position-left) {\n right: auto;\n left: 1rem;\n}\n\n:host(.position-center) {\n right: 0;\n left: 0;\n margin: 0 auto;\n}\n\n:host(.scroll-up) {\n display: block;\n max-width: 3.5rem;\n}\n\n:host(.scroll-down) .button-native{\n display: flex;\n}\n\n:host(.scroll-down) {\n display: flex;\n max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n\n:host(:hover) {\n background-color: var(--road-button-secondary-variant);\n}\n\n:host(.focus-visible) {\n outline: 0;\n}\n\n/\n Native button\n /\n\n.button-native {\n position: relative;\n z-index: 1;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n border: none;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/ DISABLED\n -------------------- /\n\n:host([aria-disabled]) {\n pointer-events: none;\n opacity: 0.16;\n}\n\n.button-native:disabled {\n cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/\n @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n \n @part native - The native HTML button or anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-button-floating',\n styleUrl: 'button-floating.css',\n shadow: true,\n})\nexport class Button {\n\n @Element() el!: HTMLRoadButtonElement;\n\n /\n position.\n /\n @Prop({ reflect: true }) position?: 'left' \| 'center' \| 'right' = 'right';\n\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the button has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n\n @Listen('scroll', {target: 'window'})\n\n onScroll() {\n const positionScroll = window.scrollY;\n if (positionScroll < 300 ) {\n this.el.classList.add(\"scroll-down\");\n this.el.classList.remove(\"scroll-up\");\n }\n if (positionScroll > 300 ) {\n this.el.classList.add(\"scroll-up\");\n this.el.classList.remove(\"scroll-down\");\n }\n }\n\n\n\n\n private onClick = (ev: Event) => {\n if (this.el.shadowRoot && (this.el as any).attachShadow) {\n // this button wants to specifically submit a form\n // climb up the dom to see if we're in a <form>\n // and if so, then use JS to submit it\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n render() {\n const TagType = this.href === undefined ? 'button' : 'a' as any;\n const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n return (\n <Host\n onClick={this.onClick}\n class={`${positionClass}`}\n >\n <TagType\n class=\"button-native\"\n part=\"native\"\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <slot name=\"start\"/>\n <slot/>\n </TagType>\n </Host>\n );\n }\n}"],"version":3}
1	+ {"file":"road-button-floating.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,ouDAAouD;;MCgBjvD,MAAM;;;;;;;IA6DT,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,IAAK,IAAI,CAAC,EAAU,CAAC,YAAY,EAAE;;;;QAIvD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrC,IAAI,IAAI,EAAE;UACR,EAAE,CAAC,cAAc,EAAE,CAAC;UAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;UACpD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;UAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;UACnB,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;OACF;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAhFmE,OAAO;;;;;EAuC1E,QAAQ;IACN,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;IACtC,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;MACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACzC;IACD,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACnC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAC3C;GACF;EAiCH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAU,CAAC;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAErF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzBD,QAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBA,kBAAM,IAAI,EAAC,OAAO,GAAE,EACpBA,qBAAO,CACC,CACL,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/\n Button floating\n \n \n * Index\n * - Button\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n position: fixed;\n right: 1rem;\n bottom: 1rem;\n z-index: 2;\n box-sizing: border-box;\n display: block;\n align-items: center;\n max-width: 3.5rem;\n height: 3.5rem;\n padding: 0.6rem 0.75rem 0.75rem;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-button-medium);\n font-weight: 700;\n line-height: 1.375;\n color: var(--road-on-button-secondary);\n text-decoration: none;\n white-space: nowrap;\n background: var(--road-button-secondary);\n border: 1px solid transparent;\n border-radius: 2rem;\n box-shadow: var(--road-elevation-average);\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n:host(.position-left) {\n right: auto;\n left: 1rem;\n}\n\n:host(.position-center) {\n right: 0;\n left: 0;\n margin: 0 auto;\n}\n\n:host(.scroll-up) {\n display: block;\n max-width: 3.5rem;\n}\n\n:host(.position-center.scroll-up) {\n display: flex;\n max-width: max-content;\n}\n\n\n:host(.scroll-down) .button-native{\n display: flex;\n}\n\n:host(.position-center.scroll-down) .button-native{\n display: flex;\n}\n\n:host(.position-center) .button-native{\n display: flex;\n}\n\n:host(.scroll-down) {\n display: flex;\n max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n\n:host(:hover) {\n background-color: var(--road-button-secondary-variant);\n}\n\n:host(.focus-visible) {\n outline: 0;\n}\n\n/\n Native button\n /\n\n.button-native {\n position: relative;\n z-index: 1;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n border: none;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/ DISABLED\n -------------------- /\n\n:host([aria-disabled]) {\n pointer-events: none;\n opacity: 0.16;\n}\n\n.button-native:disabled {\n cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/\n @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n \n @part native - The native HTML button or anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-button-floating',\n styleUrl: 'button-floating.css',\n shadow: true,\n})\nexport class Button {\n\n @Element() el!: HTMLRoadButtonElement;\n\n /\n position.\n /\n @Prop({ reflect: true }) position?: 'left' \| 'center' \| 'right' = 'right';\n\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the button has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal /\n @Event() roadFocus!: EventEmitter<void>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n\n @Listen('scroll', {target: 'window'})\n\n onScroll() {\n const positionScroll = window.scrollY;\n if (positionScroll < 300 ) {\n this.el.classList.add(\"scroll-down\");\n this.el.classList.remove(\"scroll-up\");\n }\n if (positionScroll > 300 ) {\n this.el.classList.add(\"scroll-up\");\n this.el.classList.remove(\"scroll-down\");\n }\n }\n\n\n\n\n private onClick = (ev: Event) => {\n if (this.el.shadowRoot && (this.el as any).attachShadow) {\n // this button wants to specifically submit a form\n // climb up the dom to see if we're in a <form>\n // and if so, then use JS to submit it\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n render() {\n const TagType = this.href === undefined ? 'button' : 'a' as any;\n const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n return (\n <Host\n onClick={this.onClick}\n class={`${positionClass}`}\n >\n <TagType\n class=\"button-native\"\n part=\"native\"\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <slot name=\"start\"/>\n <slot/>\n </TagType>\n </Host>\n );\n }\n}"],"version":3}

package/dist/cjs/road-card.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
-const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:1.5rem;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
+const cardCss = ":host{position:relative;box-sizing:border-box;display:block;padding:var(--road-spacing-05);margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}@media (min-width: 768px){:host{padding:var(--road-spacing-06)}}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:1.5rem;margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
 const Card = class {
   constructor(hostRef) {
@@ -24,6 +24,7 @@ const Card = class {
         });
       }
     };
+    this.elevation = 'none';
     this.button = false;
     this.value = undefined;
     this.type = 'button';
@@ -37,12 +38,13 @@ const Card = class {
   }
   renderCard() {
     const clickable = this.isClickable();
+    const { elevation, href } = this;
+    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;
     if (!clickable) {
       return [
-        index.h("slot", null)
+        index.h(index.Host, { class: `${elevationClass}` }, index.h("slot", null))
       ];
     }
-    const { href } = this;
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
     const attrs = (TagType === 'button')
       ? { type: this.type }
@@ -52,7 +54,7 @@ const Card = class {
         rel: this.rel,
         target: this.target,
       };
-    return (index.h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), index.h("slot", null)));
+    return (index.h(index.Host, { class: `${elevationClass}` }, index.h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), index.h("slot", null))));
   }
   render() {
     return (this.renderCard());

package/dist/cjs/road-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,~~grBAAgrB~~;;~~MCanrB~~,IAAI;;;;;~~IA+DP~~,YAAO,GAAG;;MAChB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;OACJ;KACF,CAAC;~~kBAnEwB~~,KAAK;;gBAUe,QAAQ;;;;;;EA0C9C,WAAW;IACjB,QAAQ,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;GACjD;EAeO,UAAU;IAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;~~IAErC~~,IAAI,CAAC,SAAS,EAAE~~;MACd~~,~~OAAO;QACLA~~,~~qBAAO~~;~~OACR~~,CAAC;~~KACH~~;~~IACD~~,~~MAAM~~,~~EAAE~~,~~IAAI~~,EAAE,GAAG,~~IAAI~~,CAAC;~~IACtB~~,MAAM,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,IAAI,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ;QAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;QACnB;QACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC;IAEJ,QACEA,QAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErBA,qBAAO,CACC,~~EACV~~;GACH;EAED,MAAM;IACJ,QACE,IAAI,CAAC,UAAU,EAAE,EACjB;GACH;;;;;;;","names":["h"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/\n Card\n \n Index\n * - Card\n * - Native\n * - Icon\n /\n\n/ CARD\n -------------------- /\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: block;\n margin-bottom: var(--margin-bottom, 1rem);\n}\n\n/ NATIVE\n -------------------- /\n\n.card-native {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n padding: 1.5rem;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: center;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n background: var(--road-surface);\n border: 0;\n border-radius: 0.25rem;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n cursor: pointer;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n/ ICON\n -------------------- /\n\n::slotted(road-icon) {\n text-align: center;\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\n\n/\n @slot - Content of the card.\n \n @part native - The native HTML button, anchor, or div element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-card',\n styleUrl: 'card.css',\n shadow: true,\n})\nexport class Card {\n\n @Element() el!: HTMLRoadCardElement;\n\n /\n If `true`, a button tag will be rendered and the card will be tappable.\n /\n @Prop() button: boolean = false;\n\n /\n value of the card\n /\n @Prop() value?: string;\n\n /\n The type of the button. Only used when an `onclick` or `button` property is present.\n /\n @Prop() type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download?: string;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the card is clicked and send the `value` of the card\n /\n @Event() roadcardclick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n /* @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n\n private isClickable(): boolean {\n return (this.href !== undefined \|\| this.button);\n }\n\n private onClick = () => {\n if(this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [\n <slot/>\n ];\n }\n ~~const { href~~ } ~~= this;\~~n const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n const attrs = (TagType === 'button')\n ? { type: this.type }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot/>\n </TagType>\n );\n }\n\n render() {\n return (\n this.renderCard()\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"road-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,ujCAAujC;;MCa1jC,IAAI;;;;;IAoEP,YAAO,GAAG;;MAChB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;OACJ;KACF,CAAC;qBAxEoD,MAAM;kBAKlC,KAAK;;gBAUe,QAAQ;;;;;;EA0C9C,WAAW;IACjB,QAAQ,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;GACjD;EAeO,UAAU;IAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACjC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,kBAAkB,SAAS,EAAE,GAAG,EAAE,CAAC;IAC3E,IAAI,CAAC,SAAS,EAAE;MAGd,OAAO;QACLA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAChCD,qBAAO,CACA;OACR,CAAC;KAEH;IACD,MAAM,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,IAAI,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ;QAC/B,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;QACnB;QACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC;IAEJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE,IAChCD,QAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,KAErBA,qBAAO,CACC,CACH,EACP;GACH;EAED,MAAM;IACJ,QACE,IAAI,CAAC,UAAU,EAAE,EACjB;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/\n Card\n \n Index\n * - Card\n * - Native\n * - Icon\n /\n\n/ CARD\n -------------------- /\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: block;\n padding: var(--road-spacing-05);\n margin-bottom: var(--margin-bottom, 1rem);\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: var(--road-spacing-02);\n}\n\n:host(.card-elevation-none) {\n box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n box-shadow: var(--road-elevation-average);\n}\n\n@media (min-width: 768px) {\n\n :host {\n padding: var(--road-spacing-06);\n }\n}\n\n/ NATIVE\n -------------------- /\n\n.card-native {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n padding: 1.5rem;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: center;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n background: var(--road-surface);\n border: 0;\n border-radius: 0.25rem;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n cursor: pointer;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n/ ICON\n -------------------- /\n\n::slotted(road-icon) {\n text-align: center;\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n/\n @slot - Content of the card.\n \n @part native - The native HTML button, anchor, or div element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-card',\n styleUrl: 'card.css',\n shadow: true,\n})\nexport class Card {\n\n @Element() el!: HTMLRoadCardElement;\n\n /\n The elevation.\n /\n @Prop() elevation?: 'none' \| 'lowest' \| 'average' = 'none';\n\n /\n If `true`, a button tag will be rendered and the card will be tappable.\n /\n @Prop() button: boolean = false;\n\n /\n value of the card\n /\n @Prop() value?: string;\n\n /\n The type of the button. Only used when an `onclick` or `button` property is present.\n /\n @Prop() type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download?: string;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the card is clicked and send the `value` of the card\n /\n @Event() roadcardclick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n /* @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n\n private isClickable(): boolean {\n return (this.href !== undefined \|\| this.button);\n }\n\n private onClick = () => {\n if(this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n const { elevation, href } = this;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n if (!clickable) {\n \n \n return [\n <Host class={`${elevationClass}`}>\n <slot/>\n </Host>\n ];\n \n }\n const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n const attrs = (TagType === 'button')\n ? { type: this.type }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <Host class={`${elevationClass}`}>\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot/>\n </TagType>\n </Host>\n );\n }\n\n render() {\n return (\n this.renderCard()\n );\n }\n\n}\n"],"version":3}

package/dist/cjs/road-navbar-item.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-12592729.js');
-const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon{color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:\"\";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;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-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
+const navbarItemCss = ":host{position:relative;box-sizing:border-box;display:flex;flex:1;flex-basis:0;flex-direction:column;flex-grow:1;align-items:center;justify-content:center;text-align:center;white-space:nowrap}@media (min-width: 1200px){:host{flex-grow:inherit;width:100%;padding:0.5rem}}:host(.tab-disabled),:host(.tab-disabled) road-tooltip,:host(.tab-disabled) road-tooltip road-icon,:host(.tab-disabled) ::slotted(road-icon){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}:host(.tab-selected),:host(.tab-selected) road-tooltip road-icon,:host(.tab-selected) ::slotted(road-icon){color:var(--road-on-button-tertiary);fill:var(--road-on-button-tertiary)}:host(.tab-selected)::after{position:absolute;bottom:-12px;left:0;display:block;width:100%;height:4px;color:var(--road-on-button-tertiary);content:\"\";background-color:var(--road-on-button-tertiary)}@media (min-width: 1200px){:host(.tab-selected)::after{bottom:auto;left:0;width:4px;height:100%}}:host(.focus-visible) ::slotted(road-icon),:host(.focus-visible) ::slotted(road-icon)::after,:host(.focus-visible) ::slotted(road-label),:host(.focus-visible) ::slotted(road-label)::after,:host(:hover) ::slotted(road-icon),:host(:hover) ::slotted(road-icon)::after,:host(:hover) ::slotted(road-label),:host(:hover) ::slotted(road-label)::after{color:var(--road-on-button-tertiary)}:host(.tab-disabled.focus-visible) ::slotted(road-icon),:host(.tab-disabled.focus-visible) ::slotted(road-label),:host(.tab-disabled:hover) ::slotted(road-icon),:host(.tab-disabled:hover) ::slotted(road-label){color:var(--road-on-surface-disabled);cursor:not-allowed;fill:var(--road-on-surface-disabled)}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;margin:0;overflow:visible;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-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.tab-disabled) .button-native{cursor:not-allowed}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%}::slotted(road-icon){display:block;width:2rem;height:2rem;margin-right:auto;margin-bottom:0.25rem;margin-left:auto;fill:currentColor}@media (min-width: 1200px){:host ::slotted(road-tooltip){width:100%}}::slotted(road-label){position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:column;font-size:var(--road-label-small);font-weight:700;text-align:center;white-space:nowrap}@media (min-width: 1200px){::slotted(road-label){display:block}}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);z-index:1;box-sizing:border-box;height:auto;font-size:var(--road-font-size-10);font-weight:400}";
 const NavbarItem = class {
   constructor(hostRef) {
@@ -50,16 +50,17 @@ const NavbarItem = class {
     }
   }
   render() {
-    const { href, rel, target, selected, tab } = this;
+    const { href, rel, target, selected, tab, disabled } = this;
     const attrs = {
       download: this.download,
       href,
       rel,
       target,
     };
-    return (index.h(index.Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, class: {
+    return (index.h(index.Host, { onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: "0", "aria-selected": selected ? 'true' : null, id: tab !== undefined ? `navbar-item-${tab}` : null, disabled: disabled, class: {
         'navbar-item': true,
         'tab-selected': selected,
+        'tab-disabled': disabled,
       } }, index.h("a", Object.assign({}, attrs, { tabIndex: -1, class: "button-native", part: "native" }), index.h("span", { class: "button-inner" }, index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/road-navbar-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,~~s6EAAs6E~~;;~~MCa/6E~~,UAAU;;;;;IAiFb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;~~IAClD~~,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;OACzB,IAEDD,+BAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7DA,kBAAM,KAAK,EAAC,cAAc,IACxBA,qBAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/\n Navbar item\n \n Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n /\n\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-basis: 0;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n :host {\n flex-grow: inherit;\n width: 100%;\n padding: 0.5rem;\n }\n\n}\n\n/\n Selected state\n /\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon {\n color: var(--road-on-button-tertiary);\n fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n position: absolute;\n bottom: -12px;\n left: 0;\n display: block;\n width: 100%;\n height: 4px;\n color: var(--road-on-button-tertiary);\n content: \"\";\n background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n :host(.tab-selected)::after {\n bottom: auto;\n left: 0;\n width: 4px;\n height: 100%;\n }\n\n}\n\n\n/\n Focus on Tab state\n /\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n color: var(--road-on-button-tertiary);\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n margin: 0;\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ INNER\n -------------------- /\n\n.button-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-flow: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n::slotted(road-icon) {\n display: block;\n width: 2rem;\n height: 2rem;\n margin-right: auto;\n margin-bottom: 0.25rem;\n margin-left: auto;\n fill: currentColor;\n}\n\n/ TOOLTIP\n -------------------- /\n\n@media (min-width: 1200px) {\n\n :host ::slotted(road-tooltip) {\n width: 100%;\n }\n\n}\n\n/ LABEL\n -------------------- /\n\n::slotted(road-label) {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-direction: column;\n font-size: var(--road-label-small);\n font-weight: 700;\n text-align: center;\n white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n ::slotted(road-label) {\n display: block;\n }\n}\n\n/ BADGE\n -------------------- /\n\n::slotted(road-badge) {\n position: absolute;\n top: 4px;\n left: calc(50% + 0.375rem);\n z-index: 1;\n box-sizing: border-box;\n height: auto;\n font-size: var(--road-font-size-10);\n font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/\n @slot - Content of the item, it should be road-icon and road-label elements.\n \n @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-navbar-item',\n styleUrl: 'navbar-item.css',\n shadow: true,\n})\nexport class NavbarItem {\n\n @Element() el!: HTMLRoadNavbarItemElement;\n\n /\n If `true`, the user cannot interact with the tab button.\n /\n @Prop() disabled = false;\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download: string \| undefined;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href: string \| undefined;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel: string \| undefined;\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n * the selected tab.\n /\n @Prop() tab?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target: string \| undefined;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadnavbaritemclick!: EventEmitter;\n /* @internal */\n @Event() roadNavbarItemClick!: EventEmitter;\n\n @Listen('roadNavbarChanged', { target: 'window' })\n @Listen('roadnavbarchanged', { target: 'window' })\n onNavbarChanged(ev: CustomEvent) {\n this.selected = this.tab === ev.detail.tab;\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n if (!this.disabled) {\n this.roadnavbaritemclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadNavbarItemClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n }\n if(this.href === undefined) {\n ev.preventDefault();\n }\n }\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { href, rel, target, selected, tab } = this;\n const attrs = {\n download: this.download,\n href,\n rel,\n target,\n };\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex=\"0\"\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `navbar-item-${tab}` : null}\n class={{\n 'navbar-item': true,\n 'tab-selected': selected,\n }}\n >\n <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n <span class=\"button-inner\">\n <slot/>\n </span>\n </a>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"road-navbar-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,kiGAAkiG;;MCa3iG,UAAU;;;;;IAiFb,YAAO,GAAG,CAAC,EAAiB;MAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;QACxC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;OACpB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;KACpB,CAAC;oBAlFiB,KAAK;;;;oBAyBY,KAAK;;;;EAyBzC,eAAe,CAAC,EAAe;IAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;GAC5C;EAEO,SAAS,CAAC,EAAyB;IACzC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC5B,GAAG,EAAE,IAAI,CAAC,GAAG;UACb,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;OACJ;MACD,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,EAAE,CAAC,cAAc,EAAE,CAAC;OACrB;KACF;GACF;EAYD,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IAC5D,MAAM,KAAK,GAAG;MACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI;MACJ,GAAG;MACH,MAAM;KACP,CAAC;IAEF,QACEA,QAACC,UAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,KAAK,EACV,QAAQ,EAAC,GAAG,mBACG,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,EAAE,EAAE,GAAG,KAAK,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,IAAI,EACnD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,QAAQ;OACzB,IAEDD,+BAAO,KAAK,IAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,KAC7DA,kBAAM,KAAK,EAAC,cAAc,IACxBA,qBAAO,CACF,CACL,CACC,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["src/components/navbar-item/navbar-item.css?tag=road-navbar-item&encapsulation=shadow","src/components/navbar-item/navbar-item.tsx"],"sourcesContent":["/\n Navbar item\n \n Index\n * - Native\n * - Inner\n * - Icon\n * - Badge\n /\n\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-basis: 0;\n flex-direction: column;\n flex-grow: 1;\n align-items: center;\n justify-content: center;\n text-align: center;\n white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n :host {\n flex-grow: inherit;\n width: 100%;\n padding: 0.5rem;\n }\n\n}\n\n/\n Disabled\n /\n\n:host(.tab-disabled),\n:host(.tab-disabled) road-tooltip,\n:host(.tab-disabled) road-tooltip road-icon,\n:host(.tab-disabled) ::slotted(road-icon) {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n fill: var(--road-on-surface-disabled);\n}\n\n/\n Selected state\n /\n\n:host(.tab-selected),\n:host(.tab-selected) road-tooltip road-icon,\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--road-on-button-tertiary);\n fill: var(--road-on-button-tertiary);\n}\n\n:host(.tab-selected)::after {\n position: absolute;\n bottom: -12px;\n left: 0;\n display: block;\n width: 100%;\n height: 4px;\n color: var(--road-on-button-tertiary);\n content: \"\";\n background-color: var(--road-on-button-tertiary);\n}\n\n@media (min-width: 1200px) {\n\n :host(.tab-selected)::after {\n bottom: auto;\n left: 0;\n width: 4px;\n height: 100%;\n }\n\n}\n\n\n/\n Focus on Tab state\n /\n\n:host(.focus-visible) ::slotted(road-icon),\n:host(.focus-visible) ::slotted(road-icon)::after,\n:host(.focus-visible) ::slotted(road-label),\n:host(.focus-visible) ::slotted(road-label)::after,\n:host(:hover) ::slotted(road-icon),\n:host(:hover) ::slotted(road-icon)::after,\n:host(:hover) ::slotted(road-label),\n:host(:hover) ::slotted(road-label)::after {\n color: var(--road-on-button-tertiary);\n}\n\n:host(.tab-disabled.focus-visible) ::slotted(road-icon),\n:host(.tab-disabled.focus-visible) ::slotted(road-label),\n:host(.tab-disabled:hover) ::slotted(road-icon),\n:host(.tab-disabled:hover) ::slotted(road-label) {\n color: var(--road-on-surface-disabled);\n cursor: not-allowed;\n fill: var(--road-on-surface-disabled);\n}\n\n\n/ NATIVE\n -------------------- /\n\n.button-native {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n margin: 0;\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host(.tab-disabled) .button-native {\n cursor: not-allowed;\n}\n\n/ INNER\n -------------------- /\n\n.button-inner {\n position: relative;\n z-index: 1;\n display: flex;\n flex-flow: inherit;\n align-items: inherit;\n justify-content: inherit;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n::slotted(road-icon) {\n display: block;\n width: 2rem;\n height: 2rem;\n margin-right: auto;\n margin-bottom: 0.25rem;\n margin-left: auto;\n fill: currentColor;\n}\n\n/ TOOLTIP\n -------------------- /\n\n@media (min-width: 1200px) {\n\n :host ::slotted(road-tooltip) {\n width: 100%;\n }\n\n}\n\n/ LABEL\n -------------------- /\n\n::slotted(road-label) {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n flex-direction: column;\n font-size: var(--road-label-small);\n font-weight: 700;\n text-align: center;\n white-space: nowrap;\n}\n\n@media (min-width: 1200px) {\n\n ::slotted(road-label) {\n display: block;\n }\n}\n\n/ BADGE\n -------------------- /\n\n::slotted(road-badge) {\n position: absolute;\n top: 4px;\n left: calc(50% + 0.375rem);\n z-index: 1;\n box-sizing: border-box;\n height: auto;\n font-size: var(--road-font-size-10);\n font-weight: 400;\n}\n","import { Component, Host, h, Element, Prop, Event, EventEmitter, Listen } from '@stencil/core';\n\n/\n @slot - Content of the item, it should be road-icon and road-label elements.\n \n @part native - The native HTML anchor element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-navbar-item',\n styleUrl: 'navbar-item.css',\n shadow: true,\n})\nexport class NavbarItem {\n\n @Element() el!: HTMLRoadNavbarItemElement;\n\n /\n If `true`, the user cannot interact with the tab button.\n /\n @Prop() disabled = false;\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download: string \| undefined;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href: string \| undefined;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel: string \| undefined;\n\n /\n The selected tab component\n /\n @Prop({ mutable: true }) selected = false;\n\n /\n A tab id must be provided for each `road-tab`. It's used internally to reference\n * the selected tab.\n /\n @Prop() tab?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target: string \| undefined;\n\n /\n Emitted when the tab bar is clicked\n * @internal\n /\n @Event() roadnavbaritemclick!: EventEmitter;\n /* @internal */\n @Event() roadNavbarItemClick!: EventEmitter;\n\n @Listen('roadNavbarChanged', { target: 'window' })\n @Listen('roadnavbarchanged', { target: 'window' })\n onNavbarChanged(ev: CustomEvent) {\n this.selected = this.tab === ev.detail.tab;\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n if (!this.disabled) {\n this.roadnavbaritemclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadNavbarItemClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n }\n if(this.href === undefined) {\n ev.preventDefault();\n }\n }\n }\n\n private onKeyUp = (ev: KeyboardEvent) => {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.selectTab(ev);\n }\n };\n\n private onClick = (ev: Event) => {\n this.selectTab(ev);\n };\n\n render() {\n const { href, rel, target, selected, tab, disabled } = this;\n const attrs = {\n download: this.download,\n href,\n rel,\n target,\n };\n\n return (\n <Host\n onClick={this.onClick}\n onKeyup={this.onKeyUp}\n role=\"tab\"\n tabindex=\"0\"\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `navbar-item-${tab}` : null}\n disabled={disabled}\n class={{\n 'navbar-item': true,\n 'tab-selected': selected,\n 'tab-disabled': disabled,\n }}\n >\n <a {...attrs} tabIndex={-1} class=\"button-native\" part=\"native\">\n <span class=\"button-inner\">\n <slot/>\n </span>\n </a>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/cjs/roadtrip.cjs.js CHANGED Viewed

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"]}],[1,\"road-item\",{\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"target\":[1],\"type\":[1],\"multipleInputs\":[32]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4]}],[1,\"road-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"position\":[1],\"drawerWidth\":[2,\"drawer-width\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"hasBackIcon\":[4,\"has-back-icon\"],\"backText\":[1,\"back-text\"],\"drawerTitle\":[1,\"drawer-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64],\"back\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"isOpen\":[\"handleOpen\"]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"disabled\":[4],\"enterkeyhint\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"step\":[1],\"size\":[2],\"sizes\":[1],\"type\":[1],\"value\":[1032],\"label\":[1],\"error\":[1],\"helper\":[1],\"debounce\":[2]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-input-group\"],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]},null,{\"errorMessage\":[\"updateMessagePosition\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]}]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]}]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-autocomplete.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]]]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]}]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toggle.cjs\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]]]"), options);
 });
 exports.setNonce = index.setNonce;

package/dist/collection/components/button-floating/button-floating.css CHANGED Viewed

@@ -52,10 +52,24 @@
   max-width: 3.5rem;
 }
+:host(.position-center.scroll-up) {
+  display: flex;
+  max-width: max-content;
+}
 :host(.scroll-down) .button-native{
   display: flex;
 }
+:host(.position-center.scroll-down) .button-native{
+  display: flex;
+}
+:host(.position-center) .button-native{
+  display: flex;
+}
 :host(.scroll-down) {
   display: flex;
   max-width: max-content;

package/dist/collection/components/card/card.css CHANGED Viewed

@@ -14,7 +14,30 @@
   position: relative;
   box-sizing: border-box;
   display: block;
+  padding: var(--road-spacing-05);
   margin-bottom: var(--margin-bottom, 1rem);
+  background: var(--road-surface);
+  border: 1px solid var(--road-outline-weak);
+  border-radius: var(--road-spacing-02);
+}
+:host(.card-elevation-none) {
+  box-shadow: none;
+}
+:host(.card-elevation-lowest) {
+  box-shadow: var(--road-elevation-lowest);
+}
+:host(.card-elevation-average) {
+  box-shadow: var(--road-elevation-average);
+}
+@media (min-width: 768px) {
+  :host {
+    padding: var(--road-spacing-06);
+  }
 }
 /* NATIVE

package/dist/collection/components/card/card.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 /**
  * @slot  - Content of the card.
  *
@@ -19,6 +19,7 @@ export class Card {
         });
       }
     };
+    this.elevation = 'none';
     this.button = false;
     this.value = undefined;
     this.type = 'button';
@@ -32,12 +33,13 @@ export class Card {
   }
   renderCard() {
     const clickable = this.isClickable();
+    const { elevation, href } = this;
+    const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;
     if (!clickable) {
       return [
-        h("slot", null)
+        h(Host, { class: `${elevationClass}` }, h("slot", null))
       ];
     }
-    const { href } = this;
     const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
     const attrs = (TagType === 'button')
       ? { type: this.type }
@@ -47,7 +49,7 @@ export class Card {
         rel: this.rel,
         target: this.target,
       };
-    return (h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), h("slot", null)));
+    return (h(Host, { class: `${elevationClass}` }, h(TagType, Object.assign({}, attrs, { class: "card-native", part: "native", onClick: this.onClick }), h("slot", null))));
   }
   render() {
     return (this.renderCard());
@@ -66,6 +68,24 @@ export class Card {
   }
   static get properties() {
     return {
+      "elevation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'none' | 'lowest' | 'average'",
+          "resolved": "\"average\" | \"lowest\" | \"none\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The elevation."
+        },
+        "attribute": "elevation",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
       "button": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;~~AAEjF~~;;;;GAIG;AAOH,MAAM,OAAO,IAAI;;~~IA+DP~~,YAAO,GAAG,GAAG,EAAE;;MACrB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;~~kBAnEwB~~,KAAK;;gBAUe,QAAQ;;;;;;EA0C9C,WAAW;IACjB,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;EAClD,CAAC;EAeO,UAAU;IAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;~~IAErC~~,IAAI,CAAC,SAAS,EAAE~~;MACd~~,~~OAAO;QACL~~,~~eAAO~~;~~OACR~~,CAAC;~~KACH~~;~~IACD~~,~~MAAM~~,~~EAAE,~~IAAI,EAAE,GAAG,~~IAAI~~,CAAC;~~IACtB~~,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC;MAClC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;MACrB,CAAC,CAAC;QACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC;IAEJ,OAAO,CACL,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO;~~MAErB~~,eAAO,CACC,~~CACX~~,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAEF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\n\n/*\n @slot - Content of the card.\n \n @part native - The native HTML button, anchor, or div element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-card',\n styleUrl: 'card.css',\n shadow: true,\n})\nexport class Card {\n\n @Element() el!: HTMLRoadCardElement;\n\n /\n If `true`, a button tag will be rendered and the card will be tappable.\n /\n @Prop() button: boolean = false;\n\n /\n value of the card\n /\n @Prop() value?: string;\n\n /\n The type of the button. Only used when an `onclick` or `button` property is present.\n /\n @Prop() type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download?: string;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the card is clicked and send the `value` of the card\n /\n @Event() roadcardclick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n /* @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n\n private isClickable(): boolean {\n return (this.href !== undefined \|\| this.button);\n }\n\n private onClick = () => {\n if(this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [\n <slot/>\n ];\n }\n ~~const { href~~ } ~~= this;\~~n const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n const attrs = (TagType === 'button')\n ? { type: this.type }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot/>\n </TagType>\n );\n }\n\n render() {\n return (\n this.renderCard()\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF;;;;GAIG;AAOH,MAAM,OAAO,IAAI;;IAoEP,YAAO,GAAG,GAAG,EAAE;;MACrB,IAAG,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACtB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,KAAK,EAAE,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,0CAAE,WAAW;SACxD,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;qBAxEoD,MAAM;kBAKlC,KAAK;;gBAUe,QAAQ;;;;;;EA0C9C,WAAW;IACjB,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;EAClD,CAAC;EAeO,UAAU;IAChB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IACjC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3E,IAAI,CAAC,SAAS,EAAE;MAGd,OAAO;QACL,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE;UAChC,eAAO,CACA;OACR,CAAC;KAEH;IACD,MAAM,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAY,CAAC;IACjF,MAAM,KAAK,GAAG,CAAC,OAAO,KAAK,QAAQ,CAAC;MAClC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;MACrB,CAAC,CAAC;QACA,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC;IAEJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,cAAc,EAAE;MAChC,EAAC,OAAO,oBACF,KAAK,IACT,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO;QAErB,eAAO,CACC,CACH,CACR,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,IAAI,CAAC,UAAU,EAAE,CAClB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element, Host } from '@stencil/core';\n\n/*\n @slot - Content of the card.\n \n @part native - The native HTML button, anchor, or div element that wraps all child elements.\n /\n\n@Component({\n tag: 'road-card',\n styleUrl: 'card.css',\n shadow: true,\n})\nexport class Card {\n\n @Element() el!: HTMLRoadCardElement;\n\n /\n The elevation.\n /\n @Prop() elevation?: 'none' \| 'lowest' \| 'average' = 'none';\n\n /\n If `true`, a button tag will be rendered and the card will be tappable.\n /\n @Prop() button: boolean = false;\n\n /\n value of the card\n /\n @Prop() value?: string;\n\n /\n The type of the button. Only used when an `onclick` or `button` property is present.\n /\n @Prop() type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /\n This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n /\n @Prop() download?: string;\n\n /\n Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n /\n @Prop() href?: string;\n\n /\n Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n /\n @Prop() rel?: string;\n\n /\n Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n /\n @Prop() target?: string;\n\n /\n Emitted when the card is clicked and send the `value` of the card\n /\n @Event() roadcardclick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n /* @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string \| undefined \| null;\n label: string \| undefined \| null;\n }>;\n\n private isClickable(): boolean {\n return (this.href !== undefined \|\| this.button);\n }\n\n private onClick = () => {\n if(this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector('road-label')?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n const { elevation, href } = this;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n if (!clickable) {\n \n \n return [\n <Host class={`${elevationClass}`}>\n <slot/>\n </Host>\n ];\n \n }\n const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;\n const attrs = (TagType === 'button')\n ? { type: this.type }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <Host class={`${elevationClass}`}>\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot/>\n </TagType>\n </Host>\n );\n }\n\n render() {\n return (\n this.renderCard()\n );\n }\n\n}\n"]}

package/dist/collection/components/card/card.stories.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 export default {
   title: 'Listing/Card',
@@ -11,38 +12,56 @@ export default {
       handles: ['roadcardclick'],
     },
   },
+  argTypes: {
+    elevation: {
+      options: ['none', 'lowest', 'average'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: {
+    elevation: null,
+  },
 };
-export const Value = () => html`
+const Template = (args) => html`
+<road-card button value="125"
+  elevation="${ifDefined(args.elevation)}">
+  <road-label>125</road-label>
+</road-card>
+`;
+export const Value = (args) => html`
 <road-grid>
   <road-row>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="125">
+      <road-card button value="125" elevation="${ifDefined(args.elevation)}">
         <road-label>125</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="135">
+      <road-card button value="135" elevation="${ifDefined(args.elevation)}">
         <road-label>135</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="145">
+      <road-card button value="145" elevation="${ifDefined(args.elevation)}">
         <road-label>145</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="155">
+      <road-card button value="155" elevation="${ifDefined(args.elevation)}">
         <road-label>155</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="165">
+      <road-card button value="165" elevation="${ifDefined(args.elevation)}">
         <road-label>165</road-label>
       </road-card>
     </road-col>
     <road-col class="col-4 col-md-3 col-lg-2">
-      <road-card button value="175">
+      <road-card button value="175" elevation="${ifDefined(args.elevation)}">
         <road-label>175</road-label>
       </road-card>
     </road-col>
@@ -50,29 +69,29 @@ export const Value = () => html`
 </road-grid>
 `;
-export const vehicle = () => html`
+export const vehicle = (args) => html`
 <road-grid>
   <road-row>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="car">
+      <road-card button value="car" elevation="${ifDefined(args.elevation)}">
         <road-icon name="vehicle-car" size="3x"></road-icon>
         <road-label>Car</road-label>
       </road-card>
     </road-col>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="4x4">
+      <road-card button value="4x4" elevation="${ifDefined(args.elevation)}">
         <road-icon name="vehicle-suv" size="3x"></road-icon>
         <road-label>4x4</road-label>
       </road-card>
     </road-col>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="truck">
+      <road-card button value="truck" elevation="${ifDefined(args.elevation)}">
         <road-icon name="vehicle-pickup-van" size="3x"></road-icon>
         <road-label>Truck</road-label>
       </road-card>
     </road-col>
     <road-col class="col-6 col-md-4 col-lg-3">
-      <road-card button value="bike">
+      <road-card button value="bike" elevation="${ifDefined(args.elevation)}">
         <road-icon name="vehicle-moto" size="3x"></road-icon>
         <road-label>Bike</road-label>
       </road-card>

package/dist/collection/components/counter/counter.js CHANGED Viewed

@@ -78,6 +78,7 @@ export class Counter {
     this.value = 1;
     this.size = "lg";
     this.dustbin = false;
+    this.readonly = false;
   }
   onValueChange(valueInput) {
     this.setIsDustbinVisible(valueInput);
@@ -93,7 +94,7 @@ export class Counter {
   }
   render() {
     const dataCi = this.isDustbinVisible ? "road-dustbin" : "";
-    return (h("road-input-group", { class: this.size && `counter-${this.size}` }, h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi })), h("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter" }), h("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { name: "navigation-add-more", size: this.size }))));
+    return (h("road-input-group", { class: this.size && `counter-${this.size}` }, h("road-button", { slot: "prepend", size: this.size, onClick: this.decrease, class: this.leftIconClasses, "data-cy": "road-decrease" }, h("road-icon", { name: this.isDustbinVisible ? "delete-forever" : "navigation-add-less", ref: (el) => this.iconCounterLess = el, size: this.size, "data-cy": dataCi })), h("road-input", { ref: (el) => this.inputElement = el, type: "number", min: this.min.toString(), max: (this.max && this.max.toString()), step: this.step, value: this.value, onRoadChange: this.onRoadChange, onKeyUp: this.checkValue, "data-cy": "road-input-counter", readonly: this.readonly }), h("road-button", { slot: "append", size: this.size, onClick: this.increase, class: this.rightIconClasses, "data-cy": "road-increase" }, h("road-icon", { name: "navigation-add-more", size: this.size }))));
   }
   static get is() { return "road-counter"; }
   static get encapsulation() { return "scoped"; }
@@ -232,6 +233,24 @@ export class Counter {
         "attribute": "dustbin",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to not modify the input field"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }