npm - @roadtrip/components - Versions diffs - 3.26.0 → 3.27.0 - Mend

@roadtrip/components 3.26.0 → 3.27.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 (84) hide show

package/dist/esm/road-tab-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-tab-button.entry.js","mappings":"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","names":[],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/\n Tab button\n \n Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n \n /\n\n/*\n @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/\n Active state\n /\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/\n Focus state\n /\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\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 min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\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 -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ UNDERLINE\n -------------------- /\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\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: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/ LABEL\n -------------------- /\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n @slot - Content of the tab-button, 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-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\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 Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n /\n @Prop() layout?: 'icon-start' \| 'icon-top' = 'icon-start';\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 /\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() roadtabbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, 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={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\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"],"version":3}
1	+ {"file":"road-tab-button.entry.js","mappings":"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","names":[],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/\n Tab button\n \n Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n \n /\n\n/*\n @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/\n Active state\n /\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/\n Focus state\n /\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\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 min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\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 -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ UNDERLINE\n -------------------- /\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\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: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/ LABEL\n -------------------- /\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n @slot - Content of the tab-button, 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-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\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 Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n /\n @Prop() layout?: 'icon-start' \| 'icon-top' = 'icon-start';\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 /\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() roadtabbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, 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={tabIndex}\n aria-selected={selected ? 'true' : 'false'}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\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"],"version":3}

package/dist/esm/road-textarea.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-52302079.js';
-const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}";
+const textareaCss = ".sc-road-textarea-h{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface)}.form-control.sc-road-textarea{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 1rem 0;margin:0;font-size:var(--road-body-medium);color:var(--road-on-surface);background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;box-shadow:none;appearance:none}.form-control.sc-road-textarea::placeholder{color:var(--road-on-surface-extra-weak);opacity:1}@media (hover: hover){.form-control.sc-road-textarea:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:-ms-input-placeholder~.form-label.sc-road-textarea{transform:scale(0.625) translateY(-0.625rem)}.form-control.sc-road-textarea:not(:disabled):focus{border-color:var(--road-input-outline-variant)}.form-control.sc-road-textarea:disabled,.form-control[readonly].sc-road-textarea{color:var(--road-on-surface-weak);cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.textarea-control.sc-road-textarea{height:auto;padding-top:1rem;padding-bottom:0.5rem;line-height:1.5}.textarea-control.no-resize.sc-road-textarea{resize:none}.form-label.sc-road-textarea{position:absolute;top:0.75rem;left:1rem;display:block;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.input-xl.sc-road-textarea-h{--height:3.5rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea{padding:1.5rem 1rem 0.5rem}.input-xl.sc-road-textarea-h .form-label.sc-road-textarea{top:1rem}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:focus~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[required].sc-road-textarea:valid~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control.has-value.sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"date\"].sc-road-textarea~.form-label.sc-road-textarea,.input-xl.sc-road-textarea-h .form-control[type=\"time\"].sc-road-textarea~.form-label.sc-road-textarea{width:100vw;transform:scale(0.75) translateY(-0.625rem)}.input-xl.sc-road-textarea-h .form-control.sc-road-textarea:placeholder-shown~.form-label.sc-road-textarea{width:100vw;transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-textarea{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-danger-surface)}.form-control.is-invalid.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid{border-color:var(--road-danger-outline)}.form-control.is-invalid.sc-road-textarea~.invalid-feedback.sc-road-textarea,.was-validated.sc-road-textarea .form-control.sc-road-textarea:invalid~.invalid-feedback.sc-road-textarea{display:block}.helper.sc-road-textarea{margin-top:0.5rem;font-size:var(--road-helper-medium);color:var(--road-on-surface-weak)}";
 const Textarea = class {
   constructor(hostRef) {

package/dist/esm/road-textarea.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"road-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/\n Textarea\n \n Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n /\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/ INPUT\n -------------------- /\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/\n Placeholder\n /\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/\n Hover state\n /\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/ stylelint-disable /\n\n/ IE FIX /\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/ stylelint-enable /\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/\n Disabled state\n /\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/ TEXTAREA\n -------------------- /\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/ LABEL\n -------------------- /\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n/ SIZES\n -------------------- /\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/ ERROR\n -------------------- /\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/ HELPER\n -------------------- /\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /\n The id of textarea\n /\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize: string = 'none';\n\n /\n This Boolean attribute lets you specify that a form control should have focus when the page loads.\n /\n @Prop() autofocus: boolean = false;\n\n /\n If `true`, the user cannot interact with the textarea.\n /\n @Prop() disabled: boolean = false;\n\n /\n A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n /\n @Prop() inputmode?: 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search';\n\n /\n A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n /\n @Prop() enterkeyhint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send';\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.textareaId;\n\n /\n Instructional text that shows before the textarea has a value.\n /\n @Prop() placeholder?: string;\n\n /\n The sizes of the input.\n /\n @Prop() sizes: 'lg' \| 'xl' = 'lg';\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly: boolean = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required: boolean = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n If `false`, to disabled resize.\n /\n @Prop() resize: boolean = true;\n\n /\n The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n /\n @Prop() cols?: number;\n\n /\n The number of rows of the control.\n /\n @Prop() rows?: number;\n\n /\n Indicates how the control wraps text.\n /\n @Prop() wrap?: 'hard' \| 'soft' \| 'off';\n\n /\n The value of the textarea.\n /\n @Prop({ mutable: true }) value?: string \| null = '';\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.textareaId}-label`;\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n Helper message for the field\n /\n @Prop() helper?: string;\n\n /\n Update the native textarea element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /* @internal /\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the value has changed.\n /\n @Event() roadchange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the textarea loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal /\n @Event() roadBlur!: EventEmitter<void>;\n\n /\n Emitted when the textarea has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}
1	+ {"file":"road-textarea.entry.js","mappings":"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","names":[],"sources":["src/components/textarea/textarea.css?tag=road-textarea&encapsulation=scoped","src/components/textarea/textarea.tsx"],"sourcesContent":["/\n Textarea\n \n Index\n * - Input\n * - Textarea\n * - Label\n * - Sizes\n * - Error\n * - Helper\n /\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1rem;\n font-family: var(--road-font, sans-serif);\n color: var(--road-on-surface);\n}\n\n/ INPUT\n -------------------- /\n\n.form-control {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 3rem;\n padding: 0.75rem 1rem 0;\n margin: 0;\n font-size: var(--road-body-medium);\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n box-shadow: none;\n appearance: none;\n}\n\n/\n Placeholder\n /\n\n.form-control::placeholder {\n color: var(--road-on-surface-extra-weak);\n opacity: 1;\n}\n\n/\n Hover state\n /\n\n@media (hover: hover) {\n\n .form-control:not(:disabled):hover {\n border-color: var(--road-input-outline-variant);\n }\n}\n\n/\n Focus state\n /\n\n.form-control:focus ~ .form-label,\n.form-control[required]:valid ~ .form-label,\n.form-control.has-value ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n.form-control:placeholder-shown ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n\n/ stylelint-disable /\n\n/ IE FIX /\n\n.form-control:-ms-input-placeholder ~ .form-label {\n transform: scale(0.625) translateY(-0.625rem);\n}\n/ stylelint-enable /\n\n.form-control:not(:disabled):focus {\n border-color: var(--road-input-outline-variant);\n}\n\n/\n Disabled state\n /\n\n.form-control:disabled,\n.form-control[readonly] {\n color: var(--road-on-surface-weak);\n cursor: not-allowed;\n background: var(--road-surface-disabled);\n opacity: 1;\n}\n\n/ TEXTAREA\n -------------------- /\n\n.textarea-control {\n height: auto;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n line-height: 1.5;\n}\n\n.textarea-control.no-resize {\n resize: none;\n}\n\n/ LABEL\n -------------------- /\n\n.form-label {\n position: absolute;\n top: 0.75rem;\n left: 1rem;\n display: block;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n pointer-events: none;\n transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n transform-origin: 0 0;\n}\n\n/ SIZES\n -------------------- /\n\n:host(.input-xl) {\n --height: 3.5rem;\n}\n\n:host(.input-xl) .form-control {\n padding: 1.5rem 1rem 0.5rem;\n}\n\n:host(.input-xl) .form-label {\n top: 1rem;\n}\n\n:host(.input-xl) .form-control:focus ~ .form-label,\n:host(.input-xl) .form-control[required]:valid ~ .form-label,\n:host(.input-xl) .form-control.has-value ~ .form-label,\n:host(.input-xl) .form-control[type=\"date\"] ~ .form-label,\n:host(.input-xl) .form-control[type=\"time\"] ~ .form-label {\n width: 100vw;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n:host(.input-xl) .form-control:placeholder-shown ~ .form-label {\n width: 100vw;\n transform: scale(0.75) translateY(-0.625rem);\n}\n\n\n/ ERROR\n -------------------- /\n\n.invalid-feedback {\n display: none;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-danger-surface);\n}\n\n.form-control.is-invalid,\n.was-validated .form-control:invalid {\n border-color: var(--road-danger-outline);\n}\n\n.form-control.is-invalid ~ .invalid-feedback,\n.was-validated .form-control:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/ HELPER\n -------------------- /\n\n.helper {\n margin-top: 0.5rem;\n font-size: var(--road-helper-medium);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'road-textarea',\n styleUrl: 'textarea.css',\n scoped: true,\n})\nexport class Textarea {\n\n /\n The id of textarea\n /\n @Prop() textareaId: string = `road-textarea-${textareaIds++}`;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n /\n @Prop() autocapitalize: string = 'none';\n\n /\n This Boolean attribute lets you specify that a form control should have focus when the page loads.\n /\n @Prop() autofocus: boolean = false;\n\n /\n If `true`, the user cannot interact with the textarea.\n /\n @Prop() disabled: boolean = false;\n\n /\n A hint to the browser for which keyboard to display.\n * This attribute applies when the value of the type attribute is `\"text\"`, `\"password\"`, `\"email\"`, or `\"url\"`. Possible values are: `\"verbatim\"`, `\"latin\"`, `\"latin-name\"`, `\"latin-prose\"`, `\"full-width-latin\"`, `\"kana\"`, `\"katakana\"`, `\"numeric\"`, `\"tel\"`, `\"email\"`, `\"url\"`.\n /\n @Prop() inputmode?: 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search';\n\n /\n A hint to the browser for which enter key to display.\n * Possible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n * `\"previous\"`, `\"search\"`, and `\"send\"`.\n /\n @Prop() enterkeyhint?: 'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send';\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.textareaId;\n\n /\n Instructional text that shows before the textarea has a value.\n /\n @Prop() placeholder?: string;\n\n /\n The sizes of the input.\n /\n @Prop() sizes: 'lg' \| 'xl' = 'lg';\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop() readonly: boolean = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop() required: boolean = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n If `false`, to disabled resize.\n /\n @Prop() resize: boolean = true;\n\n /\n The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.\n /\n @Prop() cols?: number;\n\n /\n The number of rows of the control.\n /\n @Prop() rows?: number;\n\n /\n Indicates how the control wraps text.\n /\n @Prop() wrap?: 'hard' \| 'soft' \| 'off';\n\n /\n The value of the textarea.\n /\n @Prop({ mutable: true }) value?: string \| null = '';\n\n /\n Label for the field\n /\n @Prop() label: string = `${this.textareaId}-label`;\n\n /\n Error message for the field\n /\n @Prop() error?: string;\n\n /\n Helper message for the field\n /\n @Prop() helper?: string;\n\n /\n Update the native textarea element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.roadchange.emit({ value: this.value });\n this.roadChange.emit({ value: this.value });\n }\n\n /\n Emitted when a keyboard input occurred.\n /\n @Event() roadinput!: EventEmitter<KeyboardEvent>;\n /* @internal /\n @Event() roadInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the value has changed.\n /\n @Event() roadchange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n /* @internal /\n @Event() roadChange!: EventEmitter<{\n value: string \| undefined \| null\n }>;\n\n /\n Emitted when the textarea loses focus.\n /\n @Event() roadblur!: EventEmitter<void>;\n /* @internal /\n @Event() roadBlur!: EventEmitter<void>;\n\n /\n Emitted when the textarea has focus.\n /\n @Event() roadfocus!: EventEmitter<void>;\n /* @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n private getValue(): string {\n return this.value \|\| '';\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.roadinput.emit(ev as KeyboardEvent);\n this.roadInput.emit(ev as KeyboardEvent);\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n render() {\n const value = this.getValue();\n const labelId = this.textareaId + '-label';\n const hasValueClass = this.value !== '' ? 'has-value' : '';\n const noResizeClass = this.resize == false ? 'no-resize' : '';\n const isInvalidClass = this.error !== undefined && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host aria-disabled={this.disabled ? 'true' : null} class={this.sizes && `input-${this.sizes}`}>\n <textarea\n class={`form-control textarea-control ${hasValueClass} ${noResizeClass} ${isInvalidClass}`}\n id={this.textareaId}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n disabled={this.disabled}\n autoCapitalize={this.autocapitalize}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n maxLength={this.maxlength}\n minLength={this.minlength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n value={value}\n spellcheck={this.spellcheck}\n cols={this.cols}\n rows={this.rows}\n wrap={this.wrap}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n >\n </textarea>\n <label class=\"form-label\" id={labelId} htmlFor={this.textareaId}>{this.label}</label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n\n}\n\nlet textareaIds = 0;\n"],"version":3}

package/dist/esm/roadtrip.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchBrowser = () => {
 };
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[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\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[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\"],\"ariaLabel\":[1,\"aria-label\"],\"ariaLabelBack\":[1,\"aria-label-back\"],\"ariaLabelClose\":[1,\"aria-label-close\"],\"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\"],[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-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]}],[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\",[[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\",[[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-content-card\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[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\",[[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\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[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\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal\",[[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\",[[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\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code\",[[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-asset\",[[1,\"road-asset\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"asset\":[8],\"lazy\":[4],\"sanitize\":[4],\"assetSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadAsset\"],\"src\":[\"loadAsset\"],\"asset\":[\"loadAsset\"]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[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-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[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\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[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\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[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\",[[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\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[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\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[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\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[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\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[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\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[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\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"road-badge_14\",[[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\",{\"titleItem\":[1,\"title-item\"],\"text\":[1],\"button\":[4],\"detail\":[4],\"active\":[4],\"detailIcon\":[1,\"detail-icon\"],\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"lines\":[1],\"layout\":[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\"],\"ariaLabel\":[1,\"aria-label\"],\"ariaLabelBack\":[1,\"aria-label-back\"],\"ariaLabelClose\":[1,\"aria-label-close\"],\"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\"],[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-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]}],[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\",[[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\",[[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-content-card\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-banner\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel\",[[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\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[1],\"helper\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog\",[[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\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal\",[[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\",[[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\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-toast\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-alert\",[[1,\"road-alert\",{\"color\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1]}]]],[\"road-area-code\",[[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-asset\",[[1,\"road-asset\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"asset\":[8],\"lazy\":[4],\"sanitize\":[4],\"assetSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadAsset\"],\"src\":[\"loadAsset\"],\"asset\":[\"loadAsset\"]}]]],[\"road-autocomplete\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-floating\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item\",[[4,\"road-carousel-item\"]]],[\"road-flap\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration\",[[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-navbar\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-progress\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[1],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1]}]]],[\"road-progress-indicator-horizontal\",[[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\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-group\",[[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\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-segmented-button-bar\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select\",[[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\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[4,\"click\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]]]]],[\"road-skeleton\",[[1,\"road-skeleton\"]]],[\"road-spinner\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch\",[[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\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button\",[[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\",[[6,\"road-table\"]]],[\"road-tabs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea\",[[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\",[[2,\"road-toggle\",{\"toggleId\":[1,\"toggle-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-toolbar-title\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page\",[[1,\"road-toolbar-title-page\"]]],[\"road-tooltip\",[[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\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
 });
 //# sourceMappingURL=roadtrip.js.map

package/dist/html.html-data.json CHANGED Viewed

@@ -612,6 +612,10 @@
           "name": "required",
           "description": "If `true`, the user must fill in a value before submitting a form."
         },
+        {
+          "name": "secondary-label",
+          "description": "Secondary Label for the field"
+        },
         {
           "name": "value",
           "description": "Value the form will get"
@@ -2174,6 +2178,9 @@
             },
             {
               "name": "default"
+            },
+            {
+              "name": "in-progress"
             }
           ]
         },
@@ -2189,6 +2196,9 @@
             },
             {
               "name": "default"
+            },
+            {
+              "name": "in-progress"
             }
           ]
         },
@@ -2204,6 +2214,9 @@
             },
             {
               "name": "default"
+            },
+            {
+              "name": "in-progress"
             }
           ]
         },
@@ -2326,6 +2339,10 @@
           "name": "required",
           "description": "If `true`, the user must fill in a value before submitting a form."
         },
+        {
+          "name": "secondary-label",
+          "description": "Secondary Label for the field"
+        },
         {
           "name": "value",
           "description": "Value the form will get"

package/dist/roadtrip/p-40ee0f8a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,c as o,h as a,H as i,a as d}from"./p-f3d586b3.js";import"./p-1ccae339.js";const e='.sc-road-radio-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface)}.form-radio-inline.sc-road-radio-h{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:1.5rem;margin-bottom:0}.form-radio-input.sc-road-radio{position:absolute;z-index:-1;width:20px;height:20px;opacity:0}.form-radio-input.sc-road-radio:disabled{z-index:1;width:100%;cursor:not-allowed}.form-radio-label.sc-road-radio{position:relative;display:inline-flex;align-items:flex-start;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-radio-label.sc-road-radio::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0.1rem 0.75rem 0 0;content:"";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:50%;transition:border-color 0.2s ease-in-out}.form-radio-label-span.sc-road-radio{margin-left:var(--road-spacing-02);color:var(--road-on-surface-weak)}.form-radio-label.sc-road-radio::after{position:absolute;top:0.285rem;left:0.1875rem;box-sizing:border-box;display:block;width:0.875rem;height:0.875rem;content:"";background:var(--road-grey-60);border:none;border-radius:50%;transition:background 0.2s ease-in-out, transform 0.2s ease-in-out;transform:scale(0);transform-origin:50% 50%}@media (hover: hover){.form-radio-input.sc-road-radio~.form-radio-label.sc-road-radio:hover::before{border-color:var(--road-input-surface)}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio:hover::after{background:var(--road-input-surface-variant)}}.form-radio-input.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-input-surface);opacity:1;transform:scale(1)}.form-radio-input.focus-visible.sc-road-radio~.form-radio-label.sc-road-radio::before{box-shadow:0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant)}.form-radio-input.focus-visible.sc-road-radio:checked~.form-radio-label.sc-road-radio::after{background:var(--road-primary-700)}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio{cursor:not-allowed}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::before,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::before{background:var(--road-on-surface-disabled);border:none}.form-radio-input.sc-road-radio:disabled~.form-radio-label.sc-road-radio::after,.form-radio-input[readonly].sc-road-radio~.form-radio-label.sc-road-radio::after{background:var(--road-grey-60)}.form-radio-input.is-invalid.sc-road-radio~.form-radio-label.sc-road-radio::before{border-color:var(--road-danger-outline)}.form-radio-inverse.sc-road-radio{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-radio-inverse.sc-road-radio::before{margin:0 0 0 1rem}.form-radio-inverse.sc-road-radio::after{right:0.1875rem;left:auto}';const s=class{constructor(a){r(this,a);this.roadfocus=o(this,"roadfocus",7);this.roadFocus=o(this,"roadFocus",7);this.roadblur=o(this,"roadblur",7);this.roadBlur=o(this,"roadBlur",7);this.radioGroup=null;this.updateState=()=>{if(this.radioGroup){this.checked=this.radioGroup.value===this.value}};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.radioId=`road-radio-${t++}`;this.checked=false;this.name=this.radioId;this.required=false;this.disabled=false;this.value=undefined;this.label=`${this.radioId}-label`;this.secondaryLabel=undefined;this.inverse=false;this.error=undefined;this.helper=undefined;this.inline=true}connectedCallback(){if(this.value===undefined){this.value=this.radioId}const r=this.radioGroup=this.el.closest("road-radio-group");if(r){this.updateState()}}disconnectedCallback(){const r=this.radioGroup;if(r){this.radioGroup=null}}onRoadChangedChanged(){this.updateState()}render(){const r=this.radioId+"-label";const o=this.inverse&&"form-radio-inverse";const d=this.error?"is-invalid":"";const e=this.inline?"form-radio-inline":"";return a(i,{class:`form-radio ${e}`},a("input",{class:`form-radio-input ${d}`,type:"radio",id:this.radioId,name:this.name,required:this.required,disabled:this.disabled,"aria-disabled":this.disabled?"true":null,checked:this.checked,"aria-checked":`${this.checked}`,"aria-labelledby":r,value:this.value,onFocus:this.onFocus,onBlur:this.onBlur}),a("label",{class:`form-radio-label ${o}`,id:r,htmlFor:this.radioId},this.label," ",a("span",{class:"form-radio-label-span"},this.secondaryLabel)))}get el(){return d(this)}};let t=0;s.style=e;export{s as road_radio};
2	+ //# sourceMappingURL=p-40ee0f8a.entry.js.map

package/dist/roadtrip/p-40ee0f8a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["radioCss","Radio","this","radioGroup","updateState","checked","value","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","radioIds","radioId","connectedCallback","undefined","el","closest","disconnectedCallback","onRoadChangedChanged","render","labelId","inverseClass","inverse","isInvalidClass","error","inlineClass","inline","h","Host","class","type","id","name","required","disabled","htmlFor","label","secondaryLabel"],"sources":["src/components/radio/radio.css?tag=road-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * Radio\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Radio\n * - Label\n * - Error\n * - Position\n */\n\n/* RADIO\n -------------------- */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1.5rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n}\n\n/**\n * Inline radio\n */\n\n:host(.form-radio-inline) {\n display: inline-flex;\n flex-wrap: wrap;\n align-items: center;\n margin-right: 1.5rem;\n margin-bottom: 0;\n}\n\n/**\n * Hide input\n */\n\n.form-radio-input {\n position: absolute;\n z-index: -1;\n width: 20px;\n height: 20px;\n opacity: 0;\n}\n\n.form-radio-input:disabled {\n z-index: 1;\n width: 100%;\n cursor: not-allowed;\n}\n\n/* LABEL\n -------------------- */\n\n.form-radio-label {\n position: relative;\n display: inline-flex;\n align-items: flex-start;\n margin: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-radio-label::before {\n box-sizing: border-box;\n display: block;\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n margin: 0.1rem 0.75rem 0 0;\n content: \"\";\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 50%;\n transition: border-color 0.2s ease-in-out;\n}\n\n.form-radio-label-span {\n margin-left: var(--road-spacing-02);\n color: var(--road-on-surface-weak);\n}\n\n.form-radio-label::after {\n position: absolute;\n top: 0.285rem;\n left: 0.1875rem;\n box-sizing: border-box;\n display: block;\n width: 0.875rem;\n height: 0.875rem;\n content: \"\";\n background: var(--road-grey-60);\n border: none;\n border-radius: 50%;\n transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;\n transform: scale(0);\n transform-origin: 50% 50%;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-radio-input ~ .form-radio-label:hover::before {\n border-color: var(--road-input-surface);\n }\n\n .form-radio-input:checked ~ .form-radio-label:hover::after {\n background: var(--road-input-surface-variant);\n }\n}\n\n/**\n * Checked state\n */\n\n.form-radio-input:checked ~ .form-radio-label::after {\n background: var(--road-input-surface);\n opacity: 1;\n transform: scale(1);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-radio-input.focus-visible ~ .form-radio-label::before {\n box-shadow: 0 0 0 0.125rem var(--road-grey-100-new), 0 0 0 0.1875rem var(--road-input-outline-variant);\n}\n\n.form-radio-input.focus-visible:checked ~ .form-radio-label::after {\n background: var(--road-primary-700);\n}\n\n/**\n * Disabled state\n */\n\n.form-radio-input:disabled ~ .form-radio-label,\n.form-radio-input[readonly] ~ .form-radio-label {\n cursor: not-allowed;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::before,\n.form-radio-input[readonly] ~ .form-radio-label::before {\n background: var(--road-on-surface-disabled);\n border: none;\n}\n\n.form-radio-input:disabled ~ .form-radio-label::after,\n.form-radio-input[readonly] ~ .form-radio-label::after {\n background: var(--road-grey-60);\n}\n\n/* ERROR\n -------------------- */\n\n.form-radio-input.is-invalid ~ .form-radio-label::before {\n border-color: var(--road-danger-outline);\n}\n\n/* POSITION\n -------------------- */\n\n.form-radio-inverse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n\n.form-radio-inverse::before {\n margin: 0 0 0 1rem;\n}\n\n.form-radio-inverse::after {\n right: 0.1875rem;\n left: auto;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, State, h, Listen } from '@stencil/core';\nimport './../../utils/polyfill';\n\n@Component({\n tag: 'road-radio',\n styleUrl: 'radio.css',\n scoped: true,\n})\nexport class Radio {\n\n private radioGroup: HTMLRoadRadioGroupElement | null = null;\n\n @Element() el!: HTMLRoadRadioElement;\n\n /**\n * The id of radio\n */\n @Prop() radioId: string = `road-radio-${radioIds++}`;\n\n /**\n * If `true`, the radio is selected.\n */\n @State() checked: boolean = false;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.radioId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the radio.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Value the form will get\n */\n @Prop() value?: any | null;\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.radioId}-label`;\n\n /**\n * Secondary Label for the field\n */\n @Prop() secondaryLabel?: string;\n\n /**\n * If `true`, the label and the radio are inverse and spaced\n */\n @Prop() inverse: boolean = false;\n\n /**\n * Error message for the field\n */\n @Prop() error?: boolean;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Inline multiple radio\n */\n @Prop() inline: boolean = true;\n\n /**\n * Emitted when the radio button has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n connectedCallback() {\n if (this.value === undefined) {\n this.value = this.radioId;\n }\n const radioGroup = this.radioGroup = this.el.closest('road-radio-group');\n if (radioGroup) {\n this.updateState();\n }\n }\n\n disconnectedCallback() {\n const radioGroup = this.radioGroup;\n if (radioGroup) {\n this.radioGroup = null;\n }\n }\n\n @Listen('roadChange', {target: 'window'})\n @Listen('roadchange', {target: 'window'})\n onRoadChangedChanged() {\n this.updateState();\n }\n\n private updateState = () => {\n if (this.radioGroup) {\n this.checked = this.radioGroup.value === this.value;\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 labelId = this.radioId + '-label';\n const inverseClass = this.inverse && 'form-radio-inverse';\n const isInvalidClass = this.error ? 'is-invalid' : '';\n const inlineClass = this.inline ? 'form-radio-inline' : '';\n\n return (\n <Host class={`form-radio ${inlineClass}`}>\n <input\n class={`form-radio-input ${isInvalidClass}`}\n type=\"radio\"\n id={this.radioId}\n name={this.name}\n required={this.required}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n checked={this.checked}\n aria-checked={`${this.checked}`}\n aria-labelledby={labelId}\n value={this.value}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-radio-label ${inverseClass}`} id={labelId} htmlFor={this.radioId}>{this.label} <span class=\"form-radio-label-span\">{this.secondaryLabel}</span></label>\n </Host>\n );\n }\n}\n\nlet radioIds = 0;\n"],"mappings":"mFAAA,MAAMA,EAAW,s+F,MCQJC,EAAK,M,yKAERC,KAAAC,WAA+C,KAqG/CD,KAAAE,YAAc,KACpB,GAAIF,KAAKC,WAAY,CACnBD,KAAKG,QAAUH,KAAKC,WAAWG,QAAUJ,KAAKI,K,GAI1CJ,KAAAK,QAAU,KAChBL,KAAKM,UAAUC,OACfP,KAAKQ,UAAUD,MAAM,EAGfP,KAAAS,OAAS,KACfT,KAAKU,SAASH,OACdP,KAAKW,SAASJ,MAAM,E,aA3GI,cAAcK,M,aAKZ,M,UAKLZ,KAAKa,Q,cAKA,M,cAKA,M,gCAUJ,GAAGb,KAAKa,gB,2CAUL,M,uDAeD,I,CAgB1B,iBAAAC,GACE,GAAId,KAAKI,QAAUW,UAAW,CAC5Bf,KAAKI,MAAQJ,KAAKa,O,CAEpB,MAAMZ,EAAaD,KAAKC,WAAaD,KAAKgB,GAAGC,QAAQ,oBACrD,GAAIhB,EAAY,CACdD,KAAKE,a,EAIT,oBAAAgB,GACE,MAAMjB,EAAaD,KAAKC,WACxB,GAAIA,EAAY,CACdD,KAAKC,WAAa,I,EAMtB,oBAAAkB,GACEnB,KAAKE,a,CAmBP,MAAAkB,GACE,MAAMC,EAAUrB,KAAKa,QAAU,SAC/B,MAAMS,EAAetB,KAAKuB,SAAW,qBACrC,MAAMC,EAAiBxB,KAAKyB,MAAQ,aAAe,GACnD,MAAMC,EAAc1B,KAAK2B,OAAS,oBAAsB,GAExD,OACEC,EAACC,EAAI,CAACC,MAAO,cAAcJ,KACzBE,EAAA,SACEE,MAAO,oBAAoBN,IAC3BO,KAAK,QACLC,GAAIhC,KAAKa,QACToB,KAAMjC,KAAKiC,KACXC,SAAUlC,KAAKkC,SACfC,SAAUnC,KAAKmC,SAAQ,gBACRnC,KAAKmC,SAAW,OAAS,KACxChC,QAASH,KAAKG,QAAO,eACP,GAAGH,KAAKG,UAAS,kBACdkB,EACjBjB,MAAOJ,KAAKI,MACZC,QAASL,KAAKK,QACdI,OAAQT,KAAKS,SAEfmB,EAAA,SAAOE,MAAO,oBAAoBR,IAAgBU,GAAIX,EAASe,QAASpC,KAAKa,SAAUb,KAAKqC,MAAK,IAAET,EAAA,QAAME,MAAM,yBAAyB9B,KAAKsC,iB,2BAMrJ,IAAI1B,EAAW,E"}

package/dist/roadtrip/{p-48fad2ec.entry.js → p-430e6759.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as o,a as n}from"./p-f3d586b3.js";const r=':host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:"";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}';const a=class{constructor(i){t(this,i);this.roadtabbuttonclick=e(this,"roadtabbuttonclick",7);this.roadTabButtonClick=e(this,"roadTabButtonClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.download=undefined;this.href=undefined;this.rel=undefined;this.layout="icon-start";this.selected=false;this.tab=undefined;this.target=undefined}onTabBarChanged(t){const e=t.target;const i=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(i)||e&&e.contains(this.el)){this.selected=this.tab===t.detail.tab}}selectTab(t){if(this.tab!==undefined){this.roadtabbuttonclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadTabButtonClick.emit({tab:this.tab,href:this.href,selected:this.selected});t.preventDefault()}}get hasLabel(){return!!this.el.querySelector("road-label")}get hasIcon(){return!!this.el.querySelector("road-icon")}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{hasIcon:t,hasLabel:e,tabIndex:n,href:r,rel:a,target:s,layout:l,selected:h,tab:d}=this;const c={download:this.download,href:r,rel:a,target:s};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:n,"aria-selected":h?"true":null,id:d!==undefined?`tab-button-${d}`:null,class:{"tab-selected":h,"tab-has-label":e,"tab-has-icon":t,"tab-has-label-only":e&&!t,"tab-has-icon-only":t&&!e,[`tab-layout-${l}`]:true}},i("a",Object.assign({},c,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return n(this)}};a.style=r;export{a as road_tab_button};
-//# sourceMappingURL=p-48fad2ec.entry.js.map
+import{r as t,c as e,h as i,H as o,a as n}from"./p-f3d586b3.js";const r=':host{box-sizing:border-box;font-weight:700;color:var(--tab-color);outline:0;transition:background 0.15s ease-in-out}:host(.tab-secondary){--tab-underline-selected:var(--road-secondary-600)}:host(.tab-selected){color:var(--tab-color-selected)}:host(.tab-selected) ::slotted(road-icon){color:var(--tab-color-selected)}:host(.tab-selected) .button-native::after{background:var(--tab-underline-selected);opacity:1;transform:none}:host(:hover){background:var(--tab-background-hover)}:host(.focus-visible){background:var(--tab-background-focused);outline:auto}.button-native{position:relative;box-sizing:border-box;display:flex;flex-direction:inherit;align-items:inherit;justify-content:inherit;width:100%;height:100%;min-height:3.5rem;padding:0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);margin:0;overflow:hidden;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;-webkit-user-drag:none;border-color:initial;border-style:initial;border-width:0;border-radius:inherit;border-image:initial;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.button-native::after{position:absolute;bottom:0;left:0;display:block;width:100%;height:2px;content:"";opacity:0;transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);transform:scaleX(0);transform-origin:center}.button-inner{position:relative;z-index:1;display:flex;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%}:host ::slotted(road-icon){color:var(--tab-color)}:host(.tab-layout-icon-start) ::slotted(road-icon){margin-right:0.5rem}:host(.tab-layout-icon-top) .button-inner{flex-direction:column}:host ::slotted(road-label){display:-webkit-box;max-width:12.5rem;overflow:hidden;font-size:1rem;color:var(--road-on-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;text-align:center;text-overflow:ellipsis;white-space:inherit}:host(.tab-layout-icon-top) ::slotted(road-label){margin-top:0.25rem;font-size:1rem}';const a=class{constructor(i){t(this,i);this.roadtabbuttonclick=e(this,"roadtabbuttonclick",7);this.roadTabButtonClick=e(this,"roadTabButtonClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.download=undefined;this.href=undefined;this.rel=undefined;this.layout="icon-start";this.selected=false;this.tab=undefined;this.target=undefined}onTabBarChanged(t){const e=t.target;const i=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(i)||e&&e.contains(this.el)){this.selected=this.tab===t.detail.tab}}selectTab(t){if(this.tab!==undefined){this.roadtabbuttonclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadTabButtonClick.emit({tab:this.tab,href:this.href,selected:this.selected});t.preventDefault()}}get hasLabel(){return!!this.el.querySelector("road-label")}get hasIcon(){return!!this.el.querySelector("road-icon")}get tabIndex(){const t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0}render(){const{hasIcon:t,hasLabel:e,tabIndex:n,href:r,rel:a,target:s,layout:l,selected:h,tab:d}=this;const c={download:this.download,href:r,rel:a,target:s};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:n,"aria-selected":h?"true":"false",id:d!==undefined?`tab-button-${d}`:null,class:{"tab-selected":h,"tab-has-label":e,"tab-has-icon":t,"tab-has-label-only":e&&!t,"tab-has-icon-only":t&&!e,[`tab-layout-${l}`]:true}},i("a",Object.assign({},c,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return n(this)}};a.style=r;export{a as road_tab_button};
+//# sourceMappingURL=p-430e6759.entry.js.map

package/dist/roadtrip/{p-48fad2ec.entry.js.map → p-430e6759.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/\n Tab button\n \n Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n \n /\n\n/*\n @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/\n Active state\n /\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/\n Focus state\n /\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\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 min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\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 -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ UNDERLINE\n -------------------- /\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\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: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/ LABEL\n -------------------- /\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n @slot - Content of the tab-button, 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-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\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 Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n /\n @Prop() layout?: 'icon-start' \| 'icon-top' = 'icon-start';\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 /\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() roadtabbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, 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={tabIndex}\n aria-selected={selected ? 'true' : null}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\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"],"mappings":"gEAAA,MAAMA,EAAe,ymE,MCaRC,EAAS,M,uIAqGZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EAhFyB,a,cAKT,M,yCAwBpC,eAAAI,CAAgBJ,GACd,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,GAAQhB,KAClF,MAAMkC,EAAQ,CACZC,SAAUnC,KAAKmC,SACfd,OACAW,MACAxB,UAGF,OACE4B,EAACC,EAAI,CACHhC,QAASL,KAAKK,QACdiC,QAAStC,KAAKC,QACdsC,KAAK,MACLC,SAAUb,EAAQ,gBACHZ,EAAW,OAAS,KACnC0B,GAAIzB,IAAQE,UAAY,cAAcF,IAAQ,KAC9C0B,MAAO,CACL,eAAgB3B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,OAG5BG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEP,UAAW,EAAGe,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}
1	+ {"version":3,"names":["tabButtonCss","TabButton","this","onKeyUp","ev","key","selectTab","onClick","onTabBarChanged","dispatchedFrom","target","parent","el","parentElement","composedPath","includes","contains","selected","tab","detail","undefined","roadtabbuttonclick","emit","href","roadTabButtonClick","preventDefault","hasLabel","querySelector","hasIcon","tabIndex","hasTabIndex","hasAttribute","getAttribute","render","rel","layout","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","part"],"sources":["src/components/tab-button/tab-button.css?tag=road-tab-button&encapsulation=shadow","src/components/tab-button/tab-button.tsx"],"sourcesContent":["/\n Tab button\n \n Index\n * - Button\n * - Native\n * - Underline\n * - Inner\n * - Icon\n * - Label\n \n /\n\n/*\n @prop --padding-start: Left padding of the button\n * @prop --padding-end: Right padding of the button\n * @prop --tab-color: Default color of the tab button text\n * @prop --tab-color-selected: Color of the tab button text when selected\n * @prop --tab-unerline-selected: Color of the tab button underline when selected\n * @prop --tab-background-hover: Color of the tab button when hover by a mouse\n * @prop --tab-background-focused: Color of the tab button when focused with the tab key\n /\n\n\n/ BUTTON\n -------------------- /\n\n:host {\n box-sizing: border-box;\n font-weight: 700;\n color: var(--tab-color);\n outline: 0;\n transition: background 0.15s ease-in-out;\n}\n\n/\n Active state\n /\n\n:host(.tab-secondary) {\n --tab-underline-selected: var(--road-secondary-600);\n}\n\n:host(.tab-selected) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) ::slotted(road-icon) {\n color: var(--tab-color-selected);\n}\n\n:host(.tab-selected) .button-native::after {\n background: var(--tab-underline-selected);\n opacity: 1;\n transform: none;\n}\n\n/\n Hover state\n /\n\n:host(:hover) {\n background: var(--tab-background-hover);\n}\n\n/\n Focus state\n /\n\n:host(.focus-visible) {\n background: var(--tab-background-focused);\n outline: auto;\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 min-height: 3.5rem;\n padding: 0.75rem var(--padding-end, 1.5rem) 0.75rem var(--padding-start, 1.5rem);\n margin: 0;\n overflow: hidden;\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 -webkit-user-drag: none;\n border-color: initial;\n border-style: initial;\n border-width: 0;\n border-radius: inherit;\n border-image: initial;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/ UNDERLINE\n -------------------- /\n\n.button-native::after {\n position: absolute;\n bottom: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n content: \"\";\n opacity: 0;\n transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n transform: scaleX(0);\n transform-origin: center;\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: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n/ ICON\n -------------------- /\n\n:host ::slotted(road-icon) {\n color: var(--tab-color);\n}\n\n:host(.tab-layout-icon-start) ::slotted(road-icon) {\n margin-right: 0.5rem;\n}\n\n:host(.tab-layout-icon-top) .button-inner {\n flex-direction: column;\n}\n\n/ LABEL\n -------------------- /\n\n:host ::slotted(road-label) {\n display: -webkit-box;\n max-width: 12.5rem;\n overflow: hidden;\n font-size: 1rem;\n color: var(--road-on-surface);\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n text-align: center;\n text-overflow: ellipsis;\n white-space: inherit;\n}\n\n:host(.tab-layout-icon-top) ::slotted(road-label) {\n margin-top: 0.25rem;\n font-size: 1rem;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, h } from '@stencil/core';\n\n/\n @slot - Content of the tab-button, 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-tab-button',\n styleUrl: 'tab-button.css',\n shadow: true,\n})\nexport class TabButton {\n\n @Element() el!: HTMLRoadTabButtonElement;\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 Set the layout of the text and icon in the tab bar.\n * It defaults to `'icon-start'`.\n /\n @Prop() layout?: 'icon-start' \| 'icon-top' = 'icon-start';\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 /\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() roadtabbuttonclick!: EventEmitter;\n /* @internal */\n @Event() roadTabButtonClick!: EventEmitter;\n\n @Listen('roadTabBarChanged', { target: 'window' })\n @Listen('roadTabbarchanged', { target: 'window' })\n onTabBarChanged(ev: CustomEvent) {\n const dispatchedFrom = ev.target as HTMLElement;\n const parent = this.el.parentElement as EventTarget;\n\n if ((ev.composedPath && ev.composedPath().includes(parent)) \|\| (dispatchedFrom && dispatchedFrom.contains(this.el))) {\n this.selected = this.tab === ev.detail.tab;\n }\n }\n\n private selectTab(ev: Event \| KeyboardEvent) {\n if (this.tab !== undefined) {\n this.roadtabbuttonclick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n this.roadTabButtonClick.emit({\n tab: this.tab,\n href: this.href,\n selected: this.selected,\n });\n\n ev.preventDefault();\n }\n }\n\n private get hasLabel() {\n return !!this.el.querySelector('road-label');\n }\n\n private get hasIcon() {\n return !!this.el.querySelector('road-icon');\n }\n\n private get tabIndex() {\n const hasTabIndex = this.el.hasAttribute('tabindex');\n\n if (hasTabIndex) {\n return this.el.getAttribute('tabindex');\n }\n\n return 0;\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 { hasIcon, hasLabel, tabIndex, href, rel, target, layout, 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={tabIndex}\n aria-selected={selected ? 'true' : 'false'}\n id={tab !== undefined ? `tab-button-${tab}` : null}\n class={{\n 'tab-selected': selected,\n 'tab-has-label': hasLabel,\n 'tab-has-icon': hasIcon,\n 'tab-has-label-only': hasLabel && !hasIcon,\n 'tab-has-icon-only': hasIcon && !hasLabel,\n [`tab-layout-${layout}`]: true,\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"],"mappings":"gEAAA,MAAMA,EAAe,ymE,MCaRC,EAAS,M,uIAqGZC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,2EAhFyB,a,cAKT,M,yCAwBpC,eAAAI,CAAgBJ,GACd,MAAMK,EAAiBL,EAAGM,OAC1B,MAAMC,EAAST,KAAKU,GAAGC,cAEvB,GAAKT,EAAGU,cAAgBV,EAAGU,eAAeC,SAASJ,IAAaF,GAAkBA,EAAeO,SAASd,KAAKU,IAAM,CACnHV,KAAKe,SAAWf,KAAKgB,MAAQd,EAAGe,OAAOD,G,EAInC,SAAAZ,CAAUF,GAChB,GAAIF,KAAKgB,MAAQE,UAAW,CAC1BlB,KAAKmB,mBAAmBC,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAEjBf,KAAKsB,mBAAmBF,KAAK,CAC3BJ,IAAKhB,KAAKgB,IACVK,KAAMrB,KAAKqB,KACXN,SAAUf,KAAKe,WAGjBb,EAAGqB,gB,EAIP,YAAYC,GACV,QAASxB,KAAKU,GAAGe,cAAc,a,CAGjC,WAAYC,GACV,QAAS1B,KAAKU,GAAGe,cAAc,Y,CAGjC,YAAYE,GACV,MAAMC,EAAc5B,KAAKU,GAAGmB,aAAa,YAEzC,GAAID,EAAa,CACf,OAAO5B,KAAKU,GAAGoB,aAAa,W,CAG9B,OAAO,C,CAaT,MAAAC,GACE,MAAML,QAAEA,EAAOF,SAAEA,EAAQG,SAAEA,EAAQN,KAAEA,EAAIW,IAAEA,EAAGxB,OAAEA,EAAMyB,OAAEA,EAAMlB,SAAEA,EAAQC,IAAEA,GAAQhB,KAClF,MAAMkC,EAAQ,CACZC,SAAUnC,KAAKmC,SACfd,OACAW,MACAxB,UAGF,OACE4B,EAACC,EAAI,CACHhC,QAASL,KAAKK,QACdiC,QAAStC,KAAKC,QACdsC,KAAK,MACLC,SAAUb,EAAQ,gBACHZ,EAAW,OAAS,QACnC0B,GAAIzB,IAAQE,UAAY,cAAcF,IAAQ,KAC9C0B,MAAO,CACL,eAAgB3B,EAChB,gBAAiBS,EACjB,eAAgBE,EAChB,qBAAsBF,IAAaE,EACnC,oBAAqBA,IAAYF,EACjC,CAAC,cAAcS,KAAW,OAG5BG,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEP,UAAW,EAAGe,MAAM,gBAAgBG,KAAK,WACrDT,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}

package/dist/roadtrip/p-708f262a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as o,H as i}from"./p-f3d586b3.js";const a=':host{display:block}.progress-indicator-horizontal{display:flex;padding-left:0;margin:0;font-family:var(--road-font);line-height:1.5;list-style:none}.progress-indicator-horizontal.progress-indicator-horizontal-header{background-color:var(--road-header-surface)}.progress-indicator-horizontal-item{display:flex;flex:1;flex-direction:column;text-align:center}.progress-indicator-horizontal-item:last-child{margin-top:0.125rem}.progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:"";background:var(--road-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after{position:relative;top:0.8rem;left:calc(50% + 12px);order:-1;width:calc(100% - 24px);height:2px;content:"";background:var(--road-header-surface-disabled)}.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link{cursor:not-allowed}.progress-indicator-horizontal-link{z-index:1;display:flex;flex-direction:column;align-items:center;text-decoration:none}.progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-surface-disabled);background:var(--road-surface-disabled);border-radius:50%;fill:currentColor}::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{color:currentColor}.progress-indicator-horizontal-header ::slotted([slot="progress-indicator-horizontal-icon"]) road-icon{color:currentColor}.progress-indicator-horizontal-header .progress-indicator-horizontal-icon{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--road-font-size-12);font-weight:700;color:var(--road-on-header-surface-disabled);background:var(--road-header-surface-disabled);border-radius:50%;fill:currentColor}.progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-surface-disabled)}.progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-surface-weak)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title{display:block;margin-top:0.25rem;font-size:var(--road-body-small);font-weight:700;color:var(--road-on-header-surface-disabled)}.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{display:block;font-size:var(--road-body-small);font-weight:400;color:var(--road-on-header-surface-weak)}.completed:not(:last-child)::after{background:var(--road-primary)}.progress-indicator-horizontal-header .completed:not(:last-child)::after,.progress-indicator-horizontal-header .in-progress:not(:last-child)::after{background:var(--road-header-badge)}.current .progress-indicator-horizontal-icon{color:var(--road-on-primary);background:var(--road-primary);border:0}.completed .progress-indicator-horizontal-icon,.in-progress .progress-indicator-horizontal-icon{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);color:var(--road-primary);background:var(--road-surface);border:2px solid var(--road-primary)}.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon,.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-icon{color:var(--road-header-badge);background:none;border:2px solid var(--road-header-badge)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon{width:calc(1.5rem);height:calc(1.5rem);color:var(--road-on-header-badge);background:var(--road-header-badge);border:0}.current .progress-indicator-horizontal-title,.completed .progress-indicator-horizontal-title,.in-progress .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-surface)}.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title,.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-title{font-weight:700;color:var(--road-on-header-surface)}.in-progress.progress-indicator-horizontal-item:not(:last-child)::before{position:relative;top:0.93rem;left:calc(50% + 12px);order:-1;width:calc(50% - 24px);height:2px;content:"";background:var(--road-primary)}';const t=class{constructor(o){r(this,o);this.color="default";this.numberStep=3;this.stateFirstStep=undefined;this.stateSecondStep=undefined;this.stateThirdStep=undefined;this.urlStep1=undefined;this.urlStep2=undefined;this.urlStep3=undefined}render(){const r=this.color!==undefined?`progress-indicator-horizontal progress-indicator-horizontal-${this.color}`:"progress-indicator-horizontal";const a=this.stateFirstStep!==undefined?`progress-indicator-horizontal-item ${this.stateFirstStep}`:"progress-indicator-horizontal-item";const t=this.stateSecondStep!==undefined?`progress-indicator-horizontal-item ${this.stateSecondStep}`:"progress-indicator-horizontal-item";const e=this.stateThirdStep!==undefined?`progress-indicator-horizontal-item ${this.stateThirdStep}`:"progress-indicator-horizontal-item";const n=this.urlStep1!==undefined?`${this.urlStep1}`:"#";const s=this.urlStep2!==undefined?`${this.urlStep2}`:"#";const d=this.urlStep3!==undefined?`${this.urlStep3}`:"#";return o(i,null,o("nav",null,o("ul",{class:`${r}`},o("li",{class:`${a}`},o("a",{class:"progress-indicator-horizontal-link",href:`${n}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title"})))),o("li",{class:`${t}`},o("a",{class:"progress-indicator-horizontal-link",href:`${s}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon2"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title2"})))),this.numberStep==3&&o("li",{class:`${e}`},o("a",{class:"progress-indicator-horizontal-link",href:`${d}`},o("span",{class:"progress-indicator-horizontal-icon"},o("slot",{name:"progress-indicator-horizontal-icon3"})),o("span",{class:"progress-indicator-horizontal-title"},o("slot",{name:"progress-indicator-horizontal-title3"})))))))}};t.style=a;export{t as road_progress_indicator_horizontal};
2	+ //# sourceMappingURL=p-708f262a.entry.js.map

package/dist/roadtrip/p-708f262a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["progressIndicatorHorizontalCss","Stepper","render","colorClass","this","color","undefined","stateClass","stateFirstStep","stateSecondStepClass","stateSecondStep","stateThirdStepClass","stateThirdStep","urlStep1","urlStep2","urlStep3","h","Host","class","href","name","numberStep"],"sources":["src/components/progress-indicator-horizontal/progress-indicator-horizontal.css?tag=road-progress-indicator-horizontal&encapsulation=shadow","src/components/progress-indicator-horizontal/progress-indicator-horizontal.tsx"],"sourcesContent":["/*\n * Progress-indicator-horizontal\n *\n * Index\n * - Item\n * - Link\n * - Icon\n * - Title\n * - Completed\n */\n\n:host {\n display: block;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL\n -------------------- */\n\n.progress-indicator-horizontal {\n display: flex;\n padding-left: 0;\n margin: 0;\n font-family: var(--road-font);\n line-height: 1.5;\n list-style: none;\n}\n\n.progress-indicator-horizontal.progress-indicator-horizontal-header {\n background-color: var(--road-header-surface);\n}\n\n\n/* PROGRESS INDICATOR HORIZONTAL ITEM\n -------------------- */\n\n.progress-indicator-horizontal-item {\n display: flex;\n flex: 1;\n flex-direction: column;\n text-align: center;\n}\n\n.progress-indicator-horizontal-item:last-child {\n margin-top: 0.125rem;\n}\n\n/**\n * Line between items\n */\n\n\n.progress-indicator-horizontal-item:not(:last-child)::after {\n position: relative;\n top: 0.8rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(100% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-item:not(:last-child)::after {\n position: relative;\n top: 0.8rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(100% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-header-surface-disabled);\n}\n\n\n/**\n * Disabled click for current and next steps\n */\n\n\n.progress-indicator-horizontal-item:not(.completed) .progress-indicator-horizontal-link {\n cursor: not-allowed;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL LINK\n -------------------- */\n\n.progress-indicator-horizontal-link {\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-decoration: none;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL ICON\n -------------------- */\n\n.progress-indicator-horizontal-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n font-size: var(--road-font-size-12);\n font-weight: 700;\n color: var(--road-on-surface-disabled);\n background: var(--road-surface-disabled);\n border-radius: 50%;\n fill: currentColor;\n}\n\n::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n color: currentColor;\n}\n\n.progress-indicator-horizontal-header ::slotted([slot=\"progress-indicator-horizontal-icon\"]) road-icon{\n color: currentColor;\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.5rem;\n height: 1.5rem;\n font-size: var(--road-font-size-12);\n font-weight: 700;\n color: var(--road-on-header-surface-disabled);\n background: var(--road-header-surface-disabled);\n border-radius: 50%;\n fill: currentColor;\n}\n\n/* PROGRESS INDICATOR HORIZONTAL TITLE\n -------------------- */\n\n.progress-indicator-horizontal-title {\n display: block;\n margin-top: 0.25rem;\n font-size: var(--road-body-small);\n font-weight: 700;\n color: var(--road-on-surface-disabled);\n}\n\n.progress-indicator-horizontal-title span{\n display: block;\n font-size: var(--road-body-small);\n font-weight: 400;\n color: var(--road-on-surface-weak);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title {\n display: block;\n margin-top: 0.25rem;\n font-size: var(--road-body-small);\n font-weight: 700;\n color: var(--road-on-header-surface-disabled);\n}\n\n.progress-indicator-horizontal-header .progress-indicator-horizontal-title span{\n display: block;\n font-size: var(--road-body-small);\n font-weight: 400;\n color: var(--road-on-header-surface-weak);\n}\n\n/* STEP COMPLETED\n -------------------- */\n\n.completed:not(:last-child)::after {\n background: var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed:not(:last-child)::after,\n.progress-indicator-horizontal-header .in-progress:not(:last-child)::after {\n background: var(--road-header-badge);\n}\n\n.current .progress-indicator-horizontal-icon {\n color: var(--road-on-primary);\n background: var(--road-primary);\n border: 0;\n}\n\n.completed .progress-indicator-horizontal-icon,\n.in-progress .progress-indicator-horizontal-icon{\n width: calc(1.5rem - 4px);\n height: calc(1.5rem - 4px);\n color: var(--road-primary);\n background: var(--road-surface);\n border: 2px solid var(--road-primary);\n}\n\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-icon,\n.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-icon {\n color: var(--road-header-badge);\n background: none;\n border: 2px solid var(--road-header-badge);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-icon {\n width: calc(1.5rem);\n height: calc(1.5rem);\n color: var(--road-on-header-badge);\n background: var(--road-header-badge);\n border: 0;\n}\n\n.current .progress-indicator-horizontal-title,\n.completed .progress-indicator-horizontal-title,\n.in-progress .progress-indicator-horizontal-title {\n font-weight: 700;\n color: var(--road-on-surface);\n}\n\n.progress-indicator-horizontal-header .current .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .completed .progress-indicator-horizontal-title,\n.progress-indicator-horizontal-header .in-progress .progress-indicator-horizontal-title {\n font-weight: 700;\n color: var(--road-on-header-surface);\n}\n\n/* IN PROGRESS\n-------------------- */\n\n.in-progress.progress-indicator-horizontal-item:not(:last-child)::before {\n position: relative;\n top: 0.93rem;\n left: calc(50% + 12px);\n order: -1;\n width: calc(50% - 24px);\n height: 2px;\n content: \"\";\n background: var(--road-primary);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot progress-indicator-horizontal-icon - if the state of the step 1 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title \n * @slot progress-indicator-horizontal-icon2 - if the state of the step 2 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title2 \n * @slot progress-indicator-horizontal-icon3 - if the state of the step 3 is completed add\n * `<road-icon name=\"check-small\" class=\"d-block\" style=\"color: currentColor;\"></road-icon>` by default.\n * @slot progress-indicator-horizontal-title3\n */\n\n@Component({\n tag: 'road-progress-indicator-horizontal',\n styleUrl: 'progress-indicator-horizontal.css',\n shadow: true,\n})\nexport class Stepper {\n\n /**\n * The color progress-indicator-horizontal.\n */\n @Prop({ reflect: true }) color?: 'default' | 'header' = 'default';\n\n /**\n * The nombre of steps.\n */\n @Prop() numberStep?: 3 | 2 = 3;\n\n /**\n * The color of the first step.\n */\n @Prop() stateFirstStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n /**\n * The color of the second step.\n */\n @Prop() stateSecondStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n /**\n * The color of the third step.\n */\n @Prop() stateThirdStep?: 'default' | 'current' | 'comleted' | 'in-progress';\n\n /**\n * The url of the first step.\n */\n @Prop() urlStep1?: string;\n\n /**\n * The url of the first step.\n */\n @Prop() urlStep2?: string;\n\n /**\n * The url of the first step.\n */\n @Prop() urlStep3?: string;\n \n\n render() {\n\n const colorClass = this.color !== undefined ? `progress-indicator-horizontal progress-indicator-horizontal-${this.color}` : 'progress-indicator-horizontal';\n const stateClass = this.stateFirstStep !== undefined ? `progress-indicator-horizontal-item ${this.stateFirstStep}` : 'progress-indicator-horizontal-item';\n const stateSecondStepClass = this.stateSecondStep !== undefined ? `progress-indicator-horizontal-item ${this.stateSecondStep}` : 'progress-indicator-horizontal-item';\n const stateThirdStepClass = this.stateThirdStep !== undefined ? `progress-indicator-horizontal-item ${this.stateThirdStep}` : 'progress-indicator-horizontal-item';\n const urlStep1 = this.urlStep1 !== undefined ? `${this.urlStep1}` : '#';\n const urlStep2 = this.urlStep2 !== undefined ? `${this.urlStep2}` : '#';\n const urlStep3 = this.urlStep3 !== undefined ? `${this.urlStep3}` : '#';\n\n return (\n <Host>\n <nav>\n <ul class={`${colorClass}`}>\n <li class={`${stateClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep1}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title\"/>\n </span>\n </a>\n </li>\n <li class={`${stateSecondStepClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep2}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon2\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title2\"/>\n </span>\n </a>\n </li>\n {this.numberStep == 3 && <li class={`${stateThirdStepClass}`}>\n <a class=\"progress-indicator-horizontal-link\" href={`${urlStep3}`}>\n <span class=\"progress-indicator-horizontal-icon\">\n <slot name=\"progress-indicator-horizontal-icon3\"/>\n </span>\n <span class=\"progress-indicator-horizontal-title\">\n <slot name=\"progress-indicator-horizontal-title3\"/>\n </span>\n </a>\n </li>}\n \n </ul>\n </nav>\n </Host>\n );\n }\n\n}\n"],"mappings":"6CAAA,MAAMA,EAAiC,wzI,MCmB1BC,EAAO,M,oCAKwC,U,gBAK3B,E,mKAiC5B,MAAAC,GAEE,MAAMC,EAAaC,KAAKC,QAAUC,UAAY,+DAA+DF,KAAKC,QAAU,gCAC5H,MAAME,EAAaH,KAAKI,iBAAmBF,UAAY,sCAAsCF,KAAKI,iBAAmB,qCACrH,MAAMC,EAAuBL,KAAKM,kBAAoBJ,UAAY,sCAAsCF,KAAKM,kBAAoB,qCACjI,MAAMC,EAAsBP,KAAKQ,iBAAmBN,UAAY,sCAAsCF,KAAKQ,iBAAmB,qCAC9H,MAAMC,EAAWT,KAAKS,WAAaP,UAAY,GAAGF,KAAKS,WAAa,IACpE,MAAMC,EAAWV,KAAKU,WAAaR,UAAY,GAAGF,KAAKU,WAAa,IACpE,MAAMC,EAAWX,KAAKW,WAAaT,UAAY,GAAGF,KAAKW,WAAa,IAEpE,OACEC,EAACC,EAAI,KACHD,EAAA,WACKA,EAAA,MAAIE,MAAO,GAAGf,KACda,EAAA,MAAIE,MAAO,GAAGX,KACZS,EAAA,KAAGE,MAAM,qCAAqCC,KAAM,GAAGN,KACrDG,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAMI,KAAK,wCAEbJ,EAAA,QAAME,MAAM,uCACVF,EAAA,QAAMI,KAAK,2CAIjBJ,EAAA,MAAIE,MAAO,GAAGT,KACbO,EAAA,KAAGE,MAAM,qCAAqCC,KAAM,GAAGL,KACrDE,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAMI,KAAK,yCAEbJ,EAAA,QAAME,MAAM,uCACVF,EAAA,QAAMI,KAAK,4CAIhBhB,KAAKiB,YAAc,GAAKL,EAAA,MAAIE,MAAO,GAAGP,KACrCK,EAAA,KAAGE,MAAM,qCAAqCC,KAAM,GAAGJ,KACrDC,EAAA,QAAME,MAAM,sCACVF,EAAA,QAAMI,KAAK,yCAEbJ,EAAA,QAAME,MAAM,uCACVF,EAAA,QAAMI,KAAK,8C"}

package/dist/roadtrip/{p-9ff79904.entry.js → p-73a21ee9.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as o,a}from"./p-f3d586b3.js";const r=':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 s=class{constructor(i){t(this,i);this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7);this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.disabled=false;this.download=undefined;this.href=undefined;this.rel=undefined;this.selected=false;this.tab=undefined;this.target=undefined}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}selectTab(t){if(this.tab!==undefined){if(!this.disabled){this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})}if(this.href===undefined){t.preventDefault()}}}render(){const{href:t,rel:e,target:a,selected:r,tab:s,disabled:l}=this;const n={download:this.download,href:t,rel:e,target:a};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"menu",tabindex:"0","aria-selected":r?"true":null,id:s!==undefined?`navbar-item-${s}`:null,disabled:l,class:{"navbar-item":true,"tab-selected":r,"tab-disabled":l}},i("a",Object.assign({},n,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return a(this)}};s.style=r;export{s as road_navbar_item};
-//# sourceMappingURL=p-9ff79904.entry.js.map
+import{r as t,c as e,h as i,H as o,a}from"./p-f3d586b3.js";const r=':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 s=class{constructor(i){t(this,i);this.roadnavbaritemclick=e(this,"roadnavbaritemclick",7);this.roadNavbarItemClick=e(this,"roadNavbarItemClick",7);this.onKeyUp=t=>{if(t.key==="Enter"||t.key===" "){this.selectTab(t)}};this.onClick=t=>{this.selectTab(t)};this.disabled=false;this.download=undefined;this.href=undefined;this.rel=undefined;this.selected=false;this.tab=undefined;this.target=undefined}onNavbarChanged(t){this.selected=this.tab===t.detail.tab}handleSelectedChange(t){if(t){this.el.focus()}}selectTab(t){if(this.tab!==undefined){if(!this.disabled){this.roadnavbaritemclick.emit({tab:this.tab,href:this.href,selected:this.selected});this.roadNavbarItemClick.emit({tab:this.tab,href:this.href,selected:this.selected})}if(this.href===undefined){t.preventDefault()}}}render(){const{href:t,rel:e,target:a,selected:r,tab:s,disabled:l}=this;const n={download:this.download,href:t,rel:e,target:a};return i(o,{onClick:this.onClick,onKeyup:this.onKeyUp,role:"menuitem",tabindex:"0","aria-selected":r?"true":null,id:s!==undefined?`navbar-item-${s}`:null,disabled:l,class:{"navbar-item":true,"tab-selected":r,"tab-disabled":l}},i("a",Object.assign({},n,{tabIndex:-1,class:"button-native",part:"native"}),i("span",{class:"button-inner"},i("slot",null))))}get el(){return a(this)}static get watchers(){return{selected:["handleSelectedChange"]}}};s.style=r;export{s as road_navbar_item};
+//# sourceMappingURL=p-73a21ee9.entry.js.map

package/dist/roadtrip/p-73a21ee9.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["navbarItemCss","NavbarItem","this","onKeyUp","ev","key","selectTab","onClick","onNavbarChanged","selected","tab","detail","handleSelectedChange","newValue","el","focus","undefined","disabled","roadnavbaritemclick","emit","href","roadNavbarItemClick","preventDefault","render","rel","target","attrs","download","h","Host","onKeyup","role","tabindex","id","class","Object","assign","tabIndex","part"],"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, Watch } 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 /**\n * Watch for changes to `selected` and move focus to this element if `selected` is true.\n */\n @Watch('selected')\n handleSelectedChange(newValue: boolean) {\n if (newValue) {\n this.el.focus();\n }\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=\"menuitem\"\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"],"mappings":"2DAAA,MAAMA,EAAgB,iiG,MCaTC,EAAU,M,2IA2FbC,KAAAC,QAAWC,IACjB,GAAIA,EAAGC,MAAQ,SAAWD,EAAGC,MAAQ,IAAK,CACxCH,KAAKI,UAAUF,E,GAIXF,KAAAK,QAAWH,IACjBF,KAAKI,UAAUF,EAAG,E,cA3FD,M,6EAyBiB,M,yCAyBpC,eAAAI,CAAgBJ,GACdF,KAAKO,SAAWP,KAAKQ,MAAQN,EAAGO,OAAOD,G,CAOzC,oBAAAE,CAAqBC,GACnB,GAAIA,EAAU,CACZX,KAAKY,GAAGC,O,EAIJ,SAAAT,CAAUF,GAChB,GAAIF,KAAKQ,MAAQM,UAAW,CAC1B,IAAKd,KAAKe,SAAU,CAClBf,KAAKgB,oBAAoBC,KAAK,CAC5BT,IAAKR,KAAKQ,IACVU,KAAMlB,KAAKkB,KACXX,SAAUP,KAAKO,WAEjBP,KAAKmB,oBAAoBF,KAAK,CAC5BT,IAAKR,KAAKQ,IACVU,KAAMlB,KAAKkB,KACXX,SAAUP,KAAKO,U,CAGnB,GAAGP,KAAKkB,OAASJ,UAAW,CAC1BZ,EAAGkB,gB,GAeT,MAAAC,GACE,MAAMH,KAAEA,EAAII,IAAEA,EAAGC,OAAEA,EAAMhB,SAAEA,EAAQC,IAAEA,EAAGO,SAAEA,GAAaf,KACvD,MAAMwB,EAAQ,CACZC,SAAUzB,KAAKyB,SACfP,OACAI,MACAC,UAGF,OACEG,EAACC,EAAI,CACHtB,QAASL,KAAKK,QACduB,QAAS5B,KAAKC,QACd4B,KAAK,WACLC,SAAS,IAAG,gBACGvB,EAAW,OAAS,KACnCwB,GAAIvB,IAAQM,UAAY,eAAeN,IAAQ,KAC/CO,SAAUA,EACViB,MAAO,CACL,cAAe,KACf,eAAgBzB,EAChB,eAAgBQ,IAGlBW,EAAA,IAAAO,OAAAC,OAAA,GAAOV,EAAK,CAAEW,UAAW,EAAGH,MAAM,gBAAgBI,KAAK,WACrDV,EAAA,QAAMM,MAAM,gBACVN,EAAA,e"}

package/dist/roadtrip/p-ac7b2425.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as c,c as e,h as o,H as r}from"./p-f3d586b3.js";import{c as a,b as i}from"./p-db82e012.js";import"./p-1ccae339.js";const s='.sc-road-checkbox-h{position:relative;display:block;margin-bottom:1.5rem;font-family:var(--road-font, sans-serif);font-size:var(--road-font-size-16);line-height:1.5;color:var(--road-on-surface)}.form-check-input.sc-road-checkbox{position:absolute;z-index:-1;opacity:0}.form-check-label.sc-road-checkbox{position:relative;display:inline-flex;margin:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.form-check-label.sc-road-checkbox::before{box-sizing:border-box;display:block;flex-shrink:0;width:1.25rem;height:1.25rem;margin:0 0.75rem 0 0;content:"";background:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;transition:border 0.2s ease-in-out, background 0.2s ease-in-out}.form-check-label-span.sc-road-checkbox{color:var(--road-on-surface-weak)}.form-check-icon.sc-road-checkbox{position:absolute;top:0;left:0;box-sizing:border-box;display:block;width:1.25rem;height:1.25rem;color:var(--road-primary-contrast);opacity:0;transition:opacity 0.2s ease-in-out}@media (hover: hover){.form-check-input.sc-road-checkbox:not(:disabled)~.form-check-label.sc-road-checkbox:hover::before{border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:not(:disabled):checked~.form-check-label.sc-road-checkbox:hover::before,.form-check-input.sc-road-checkbox:not(:disabled):indeterminate~.form-check-label.sc-road-checkbox:hover::before{background:var(--road-input-surface-variant)}}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{opacity:1}.form-check-input.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface);border-color:var(--road-input-surface)}.form-check-input.focus-visible.sc-road-checkbox~.form-check-label.sc-road-checkbox::before{box-shadow:0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700)}.form-check-input.focus-visible.sc-road-checkbox:checked~.form-check-label.sc-road-checkbox::before,.form-check-input.focus-visible.sc-road-checkbox:indeterminate~.form-check-label.sc-road-checkbox::before{background:var(--road-input-surface-variant);border-color:var(--road-input-surface-variant)}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox{cursor:not-allowed}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox::before,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox::before{background:var(--road-surface-disabled);border:none}.form-check-input.sc-road-checkbox:disabled~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox,.form-check-input[readonly].sc-road-checkbox~.form-check-label.sc-road-checkbox .form-check-icon.sc-road-checkbox{fill:var(--road-on-surface-disabled)}.invalid-feedback.sc-road-checkbox{display:none;flex:0 0 100%;width:100%;margin-top:0.5rem;font-size:var(--road-font-size-12);color:var(--road-danger-default)}.form-check-input.is-invalid.sc-road-checkbox~.form-check-label.sc-road-checkbox::before,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.form-check-label.sc-road-checkbox::before{border-color:var(--road-danger-outline)}.form-check-input.is-invalid.sc-road-checkbox~.invalid-feedback.sc-road-checkbox,.was-validated.sc-road-checkbox .form-check-input.sc-road-checkbox:invalid~.invalid-feedback.sc-road-checkbox{display:block}.form-checkbox-inverse.sc-road-checkbox{display:flex;flex-direction:row-reverse;justify-content:space-between}.form-checkbox-inverse.sc-road-checkbox::before{margin:0 0 0 1rem}.form-checkbox-inverse.sc-road-checkbox .form-check-icon.sc-road-checkbox{right:0;left:auto}.helper.sc-road-checkbox{margin-top:0.5rem;margin-left:2rem;font-size:var(--road-font-size-14);color:var(--road-on-surface-weak)}';const h=class{constructor(o){c(this,o);this.roadchange=e(this,"roadchange",7);this.roadChange=e(this,"roadChange",7);this.roadfocus=e(this,"roadfocus",7);this.roadFocus=e(this,"roadFocus",7);this.roadblur=e(this,"roadblur",7);this.roadBlur=e(this,"roadBlur",7);this.onClick=()=>{this.checked=!this.checked;this.indeterminate=false};this.onFocus=()=>{this.roadfocus.emit();this.roadFocus.emit()};this.onBlur=()=>{this.roadblur.emit();this.roadBlur.emit()};this.checkboxId=`road-checkbox-${t++}`;this.name=this.checkboxId;this.required=false;this.checked=false;this.indeterminate=false;this.disabled=false;this.value="on";this.label=`${this.checkboxId}-label`;this.secondaryLabel=undefined;this.inverse=false;this.error=undefined;this.helper=undefined}checkedChanged(c){this.roadchange.emit({checked:c,value:this.value});this.roadChange.emit({checked:c,value:this.value})}render(){const c=this.checkboxId+"-label";const e=this.inverse&&"form-checkbox-inverse";const s=this.error!==undefined&&!this.checked&&this.error!==""?"is-invalid":"";return o(r,null,o("input",{class:`form-check-input ${s}`,type:"checkbox",id:this.checkboxId,name:this.name,required:this.required,disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,value:this.value,"aria-checked":`${this.checked}`,"aria-disabled":this.disabled?"true":null,"aria-labelledby":c,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur}),o("label",{class:`form-check-label ${e}`,id:c,htmlFor:this.checkboxId},o("div",null,this.label," ",o("span",{class:"form-check-label-span"},this.secondaryLabel),o("slot",null)),this.checked&&!this.indeterminate&&o("road-icon",{class:"form-check-icon",icon:a}),this.indeterminate&&o("road-icon",{class:"form-check-icon",icon:i})),this.error&&this.error!==""&&o("p",{class:"invalid-feedback"},this.error),this.helper&&this.helper!==""&&o("p",{class:"helper"},this.helper))}static get watchers(){return{checked:["checkedChanged"]}}};let t=0;h.style=s;export{h as road_checkbox};
2	+ //# sourceMappingURL=p-ac7b2425.entry.js.map

package/dist/roadtrip/p-ac7b2425.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["checkboxCss","Checkbox","this","onClick","checked","indeterminate","onFocus","roadfocus","emit","roadFocus","onBlur","roadblur","roadBlur","checkboxIds","checkboxId","checkedChanged","isChecked","roadchange","value","roadChange","render","labelId","inverseClass","inverse","isInvalidClass","error","undefined","h","Host","class","type","id","name","required","disabled","htmlFor","label","secondaryLabel","icon","checkWide","navigationAddLess","helper"],"sources":["src/components/checkbox/checkbox.css?tag=road-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * Checkbox\n *\n * For accessibility, we provide a style for focus only on Tab,\n * for that add the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Checkbox\n * - Label\n * - Error\n * - Helper\n * - Position\n */\n\n\n/* CHECKBOX\n -------------------- */\n\n:host {\n position: relative;\n display: block;\n margin-bottom: 1.5rem;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-font-size-16);\n line-height: 1.5;\n color: var(--road-on-surface);\n}\n\n/**\n * Hide input\n */\n\n.form-check-input {\n position: absolute;\n z-index: -1;\n opacity: 0;\n}\n\n/* LABEL\n -------------------- */\n\n.form-check-label {\n position: relative;\n display: inline-flex;\n margin: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.form-check-label::before {\n box-sizing: border-box;\n display: block;\n flex-shrink: 0;\n width: 1.25rem;\n height: 1.25rem;\n margin: 0 0.75rem 0 0;\n content: \"\";\n background: var(--road-surface);\n border: 1px solid var(--road-input-outline);\n border-radius: 0.25rem;\n transition: border 0.2s ease-in-out, background 0.2s ease-in-out;\n}\n\n.form-check-label-span {\n color: var(--road-on-surface-weak);\n}\n\n.form-check-icon {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n display: block;\n width: 1.25rem;\n height: 1.25rem;\n color: var(--road-primary-contrast);\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n}\n\n/**\n * Hover state\n */\n\n@media (hover: hover) {\n\n .form-check-input:not(:disabled) ~ .form-check-label:hover::before {\n border-color: var(--road-input-surface-variant);\n }\n\n .form-check-input:not(:disabled):checked ~ .form-check-label:hover::before,\n .form-check-input:not(:disabled):indeterminate ~ .form-check-label:hover::before {\n background: var(--road-input-surface-variant);\n }\n}\n\n/**\n * Checked state\n */\n\n.form-check-input:checked ~ .form-check-label .form-check-icon,\n.form-check-input:indeterminate ~ .form-check-label .form-check-icon {\n opacity: 1;\n}\n\n.form-check-input:checked ~ .form-check-label::before,\n.form-check-input:indeterminate ~ .form-check-label::before {\n background: var(--road-input-surface);\n border-color: var(--road-input-surface);\n}\n\n/**\n * Focus on Tab\n */\n\n.form-check-input.focus-visible ~ .form-check-label::before {\n box-shadow: 0 0 0 0.125rem var(--road-grey-000), 0 0 0 0.1875rem var(--road-primary-700);\n}\n\n.form-check-input.focus-visible:checked ~ .form-check-label::before,\n.form-check-input.focus-visible:indeterminate ~ .form-check-label::before {\n background: var(--road-input-surface-variant);\n border-color: var(--road-input-surface-variant);\n}\n\n/**\n * Disabled state\n */\n\n.form-check-input:disabled ~ .form-check-label,\n.form-check-input[readonly] ~ .form-check-label {\n cursor: not-allowed;\n}\n\n.form-check-input:disabled ~ .form-check-label::before,\n.form-check-input[readonly] ~ .form-check-label::before {\n background: var(--road-surface-disabled);\n border: none;\n}\n\n.form-check-input:disabled ~ .form-check-label .form-check-icon,\n.form-check-input[readonly] ~ .form-check-label .form-check-icon {\n fill: var(--road-on-surface-disabled);\n}\n\n/* ERROR\n -------------------- */\n\n.invalid-feedback {\n display: none;\n flex: 0 0 100%;\n width: 100%;\n margin-top: 0.5rem;\n font-size: var(--road-font-size-12);\n color: var(--road-danger-default);\n}\n\n.form-check-input.is-invalid ~ .form-check-label::before,\n.was-validated .form-check-input:invalid ~ .form-check-label::before {\n border-color: var(--road-danger-outline);\n}\n\n.form-check-input.is-invalid ~ .invalid-feedback,\n.was-validated .form-check-input:invalid ~ .invalid-feedback {\n display: block;\n}\n\n/* POSITION\n -------------------- */\n\n.form-checkbox-inverse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n}\n\n.form-checkbox-inverse::before {\n margin: 0 0 0 1rem;\n}\n\n.form-checkbox-inverse .form-check-icon {\n right: 0;\n left: auto;\n}\n\n/* HELPER\n -------------------- */\n\n.helper {\n margin-top: 0.5rem;\n margin-left: 2rem;\n font-size: var(--road-font-size-14);\n color: var(--road-on-surface-weak);\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport { checkWide, navigationAddLess } from '../../../icons';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Adding additional elements next to the label (e.g. number of items in filters).\n */\n\n@Component({\n tag: 'road-checkbox',\n styleUrl: 'checkbox.css',\n scoped: true,\n})\nexport class Checkbox {\n\n /**\n * The id of checkbox\n */\n @Prop() checkboxId: string = `road-checkbox-${checkboxIds++}`;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.checkboxId;\n\n /**\n * If `true`, the user must fill in a value before submitting a form.\n */\n @Prop() required: boolean = false;\n\n /**\n * If `true`, the checkbox is checked.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate.\n */\n @Prop() indeterminate: boolean = false;\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Value the form will get\n */\n @Prop() value: string = 'on';\n\n /**\n * Label for the field\n */\n @Prop() label: string = `${this.checkboxId}-label`;\n\n /**\n * Secondary Label for the field\n */\n @Prop() secondaryLabel?: string;\n\n /**\n * If `true`, the label and the checkbox are inverse and spaced\n */\n @Prop() inverse: boolean = false;\n\n /**\n * Error message for the field\n */\n @Prop() error?: string;\n\n /**\n * Helper message for the field\n */\n @Prop() helper?: string;\n\n /**\n * Emitted when the checked property has changed.\n */\n @Event() roadchange!: EventEmitter<{\n checked: boolean,\n value: string | undefined | null\n }>;\n /** @internal */\n @Event() roadChange!: EventEmitter<{\n checked: boolean,\n value: string | undefined | null\n }>;\n\n /**\n * Emitted when the checkbox has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the checkbox loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n @Watch('checked')\n checkedChanged(isChecked: boolean) {\n this.roadchange.emit({\n checked: isChecked,\n value: this.value,\n });\n this.roadChange.emit({\n checked: isChecked,\n value: this.value,\n });\n }\n\n private onClick = () => {\n this.checked = !this.checked;\n this.indeterminate = false;\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 labelId = this.checkboxId + '-label';\n const inverseClass = this.inverse && 'form-checkbox-inverse';\n const isInvalidClass = this.error !== undefined && !this.checked && this.error !== '' ? 'is-invalid' : '';\n\n return (\n <Host>\n <input\n class={`form-check-input ${isInvalidClass}`}\n type=\"checkbox\"\n id={this.checkboxId}\n name={this.name}\n required={this.required}\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n checked={this.checked}\n value={this.value}\n aria-checked={`${this.checked}`}\n aria-disabled={this.disabled ? 'true' : null}\n aria-labelledby={labelId}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <label class={`form-check-label ${inverseClass}`} id={labelId} htmlFor={this.checkboxId}>\n <div>\n {this.label} <span class=\"form-check-label-span\">{this.secondaryLabel}</span><slot/>\n </div>\n {this.checked && !this.indeterminate && <road-icon class=\"form-check-icon\" icon={checkWide}></road-icon>}\n {this.indeterminate && <road-icon class=\"form-check-icon\" icon={navigationAddLess}></road-icon>}\n </label>\n {this.error && this.error !== '' && <p class=\"invalid-feedback\">{this.error}</p>}\n {this.helper && this.helper !== '' && <p class=\"helper\">{this.helper}</p>}\n </Host>\n );\n }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"4HAAA,MAAMA,EAAc,+/H,MCcPC,EAAQ,M,uPAqGXC,KAAAC,QAAU,KAChBD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,cAAgB,KAAK,EAGpBH,KAAAI,QAAU,KAChBJ,KAAKK,UAAUC,OACfN,KAAKO,UAAUD,MAAM,EAGfN,KAAAQ,OAAS,KACfR,KAAKS,SAASH,OACdN,KAAKU,SAASJ,MAAM,E,gBA5GO,iBAAiBK,M,UAKvBX,KAAKY,W,cAKA,M,aAKO,M,mBAKD,M,cAKN,M,WAKJ,K,WAKA,GAAGZ,KAAKY,mB,2CAUL,M,2CAwC3B,cAAAC,CAAeC,GACbd,KAAKe,WAAWT,KAAK,CACnBJ,QAASY,EACTE,MAAOhB,KAAKgB,QAEdhB,KAAKiB,WAAWX,KAAK,CACnBJ,QAASY,EACTE,MAAOhB,KAAKgB,O,CAmBhB,MAAAE,GACE,MAAMC,EAAUnB,KAAKY,WAAa,SAClC,MAAMQ,EAAepB,KAAKqB,SAAW,wBACrC,MAAMC,EAAiBtB,KAAKuB,QAAUC,YAAcxB,KAAKE,SAAWF,KAAKuB,QAAU,GAAK,aAAe,GAEvG,OACEE,EAACC,EAAI,KACHD,EAAA,SACEE,MAAO,oBAAoBL,IAC3BM,KAAK,WACLC,GAAI7B,KAAKY,WACTkB,KAAM9B,KAAK8B,KACXC,SAAU/B,KAAK+B,SACfC,SAAUhC,KAAKgC,SACf7B,cAAeH,KAAKG,cACpBD,QAASF,KAAKE,QACdc,MAAOhB,KAAKgB,MAAK,eACH,GAAGhB,KAAKE,UAAS,gBAChBF,KAAKgC,SAAW,OAAS,KAAI,kBAC3Bb,EACjBlB,QAASD,KAAKC,QACdG,QAASJ,KAAKI,QACdI,OAAQR,KAAKQ,SAEfiB,EAAA,SAAOE,MAAO,oBAAoBP,IAAgBS,GAAIV,EAASc,QAASjC,KAAKY,YAC3Ea,EAAA,WACGzB,KAAKkC,MAAK,IAAET,EAAA,QAAME,MAAM,yBAAyB3B,KAAKmC,gBAAsBV,EAAA,cAE9EzB,KAAKE,UAAYF,KAAKG,eAAiBsB,EAAA,aAAWE,MAAM,kBAAkBS,KAAMC,IAChFrC,KAAKG,eAAiBsB,EAAA,aAAWE,MAAM,kBAAkBS,KAAME,KAEjEtC,KAAKuB,OAASvB,KAAKuB,QAAU,IAAME,EAAA,KAAGE,MAAM,oBAAoB3B,KAAKuB,OACrEvB,KAAKuC,QAAUvC,KAAKuC,SAAW,IAAMd,EAAA,KAAGE,MAAM,UAAU3B,KAAKuC,Q,4DAMtE,IAAI5B,EAAc,E"}