@roadtrip/components 3.52.0 → 3.53.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.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +22 -10
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-card.cjs.entry.js +12 -2
- package/dist/cjs/road-card.cjs.entry.js.map +1 -1
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/components/card/card.css +10 -0
- package/dist/collection/components/card/card.js +31 -1
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/card/card.stories.js +16 -0
- package/dist/collection/components/drawer/drawer.css +41 -3
- package/dist/collection/components/drawer/drawer.js +23 -10
- package/dist/collection/components/drawer/drawer.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-badge_14.entry.js +22 -10
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-card.entry.js +12 -2
- package/dist/esm/road-card.entry.js.map +1 -1
- package/dist/esm/roadtrip.js +1 -1
- package/dist/html.html-data.json +12 -0
- package/dist/roadtrip/{p-2fef9c0f.entry.js → p-319a0ef7.entry.js} +4 -4
- package/dist/roadtrip/p-319a0ef7.entry.js.map +1 -0
- package/dist/roadtrip/p-3444d6fe.entry.js +2 -0
- package/dist/roadtrip/p-3444d6fe.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/roadtrip.esm.js.map +1 -1
- package/dist/types/components/card/card.d.ts +6 -0
- package/dist/types/components/drawer/drawer.d.ts +5 -0
- package/dist/types/components.d.ts +16 -0
- package/hydrate/index.js +37 -13
- package/hydrate/index.mjs +37 -13
- package/package.json +1 -1
- package/dist/roadtrip/p-2fef9c0f.entry.js.map +0 -1
- package/dist/roadtrip/p-4bbe3312.entry.js +0 -2
- package/dist/roadtrip/p-4bbe3312.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-fee0103c.js');
|
|
6
6
|
|
|
7
|
-
const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
|
|
7
|
+
const cardCss = ":host{position:relative;box-sizing:border-box;display:block;margin-bottom:var(--margin-bottom, 1rem);background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02);padding:var(--road-spacing-03)}:host(.card-elevation-none){box-shadow:none}:host(.card-elevation-lowest){box-shadow:var(--road-elevation-lowest)}:host(.card-elevation-average){box-shadow:var(--road-elevation-average)}:host(.is-button){border:1px solid var(--road-outline);padding:0}:host(.is-button:hover){border:1px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button:focus-visible),:host(.is-button:focus){border:1px solid var(--road-outline);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.is-disabled){cursor:not-allowed;pointer-events:none;border:1px solid var(--road-surface-disabled);background:var(--road-surface-disabled)}:host(.is-button.is-disabled) .card-native,:host(.is-button.selected.is-disabled) .card-native{background:none}:host(.is-button.selected){border:2px solid var(--road-primary);outline:none}:host(.is-button.selected:hover){border:2px solid var(--road-outline-variant);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected.is-single:hover){border:2px solid var(--road-primary);outline:2px solid var(--road-button-ghost-variant)}:host(.is-button.selected:focus-visible),:host(.is-button.selected:focus){border:2px solid var(--road-outline-variant);outline-offset:1px;outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-single:focus){border:2px solid var(--road-primary);outline:2px solid var(--road-outline-variant)}:host(.is-button.selected.is-disabled){cursor:not-allowed;pointer-events:none;outline:none;background:var(--road-surface-disabled);border:2px solid var(--road-surface-disabled)}.card-native{box-sizing:border-box;display:block;width:100%;height:100%;padding:var(--road-spacing-06);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:center;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;background:var(--road-surface);border:0;border-radius:0.25rem;outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}a,button{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}::slotted(road-icon){text-align:center}";
|
|
8
8
|
const RoadCardStyle0 = cardCss;
|
|
9
9
|
|
|
10
10
|
const Card = class {
|
|
@@ -30,6 +30,12 @@ const Card = class {
|
|
|
30
30
|
* Only applies when in button mode (button=true and no href).
|
|
31
31
|
*/
|
|
32
32
|
this.disabled = false;
|
|
33
|
+
/**
|
|
34
|
+
* Defines the selection mode.
|
|
35
|
+
* - `"single"`: only one card can be selected at a time (focus outline disabled).
|
|
36
|
+
* - `"multiple"`: multiple cards can be selected simultaneously.
|
|
37
|
+
*/
|
|
38
|
+
this.selectionMode = "multiple";
|
|
33
39
|
/**
|
|
34
40
|
* The type of the button. Only used when an `onclick` or `button` property is present.
|
|
35
41
|
*/
|
|
@@ -45,6 +51,9 @@ const Card = class {
|
|
|
45
51
|
}
|
|
46
52
|
// Toggle selected state on click for clickable cards
|
|
47
53
|
this.selected = !this.selected;
|
|
54
|
+
if (this.selectionMode === "single") {
|
|
55
|
+
e.currentTarget.blur();
|
|
56
|
+
}
|
|
48
57
|
if (this.value !== undefined) {
|
|
49
58
|
this.roadcardclick.emit({
|
|
50
59
|
value: this.value,
|
|
@@ -93,7 +102,8 @@ const Card = class {
|
|
|
93
102
|
const selectedClass = this.selected ? "selected" : "";
|
|
94
103
|
const isButtonClass = isButtonMode ? "is-button" : "";
|
|
95
104
|
const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
|
|
96
|
-
|
|
105
|
+
const singleClass = isButtonMode && this.selectionMode === "single" ? "is-single" : "";
|
|
106
|
+
return (index.h(index.Host, { key: 'fc2636b92be59ddf232b162574c3cdd3a7042a50', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}` }, this.renderCard()));
|
|
97
107
|
}
|
|
98
108
|
get el() { return index.getElement(this); }
|
|
99
109
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-card.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: block;\n margin-bottom: var(--margin-bottom, 1rem);\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: var(--road-spacing-02);\n padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n border: 1px solid var(--road-outline);\n padding: 0;\n}\n\n:host(.is-button:hover) {\n border: 1px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n border: 1px solid var(--road-outline);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n border: 1px solid var(--road-surface-disabled);\n background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n background: none;\n}\n\n:host(.is-button.selected) {\n border: 2px solid var(--road-primary);\n outline: none;\n}\n\n:host(.is-button.selected:hover) {\n border: 2px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n border: 2px solid var(--road-outline-variant);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n outline: none;\n background: var(--road-surface-disabled);\n border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n padding: var(--road-spacing-06);\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: center;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n background: var(--road-surface);\n border: 0;\n border-radius: 0.25rem;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n text-align: center;\n}\n","import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from \"@stencil/core\";\n\n/**\n * @slot - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n tag: \"road-card\",\n styleUrl: \"card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el!: HTMLRoadCardElement;\n\n /**\n * The elevation.\n */\n @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n /**\n * If `true`, a button tag will be rendered and the card will be tappable.\n */\n @Prop() button: boolean = false;\n\n /**\n * value of the card\n */\n @Prop() value?: string;\n\n /**\n * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n * Toggled automatically when the card is clicked (when clickable).\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * If `true`, the card is disabled and cannot be clicked.\n * Only applies when in button mode (button=true and no href).\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The type of the button. Only used when an `onclick` or `button` property is present.\n */\n @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n /**\n * This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n */\n @Prop() download?: string;\n\n /**\n * Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n */\n @Prop() href?: string;\n\n /**\n * Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n */\n @Prop() rel?: string;\n\n /**\n * Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n */\n @Prop() target?: string;\n\n /**\n * Emitted when the card is clicked and send the `value` of the card\n */\n @Event() roadcardclick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n /** @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n\n private isClickable(): boolean {\n return this.href !== undefined || this.button;\n }\n\n private onClick = (e: Event) => {\n // If disabled in button mode, prevent all interactions\n const isButtonMode = this.button && this.href === undefined;\n if (isButtonMode && this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Toggle selected state on click for clickable cards\n this.selected = !this.selected;\n\n if (this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [<slot />];\n }\n const { href } = this;\n const TagType = clickable\n ? href === undefined\n ? \"button\"\n : \"a\"\n : (\"div\" as any);\n const isButtonMode = this.button && href === undefined;\n const attrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: isButtonMode && this.disabled,\n \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot />\n </TagType>\n );\n }\n\n render() {\n const { elevation } = this;\n const isButtonMode = this.button && this.href === undefined;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n const selectedClass = this.selected ? \"selected\" : \"\";\n const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n return (\n <Host\n class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass}`}\n >\n {this.renderCard()}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"road-card.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/card/card.css?tag=road-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/*\n * Card\n *\n * Index\n * - Card\n * - Native\n * - Icon\n */\n\n/* CARD\n -------------------- */\n\n:host {\n position: relative;\n box-sizing: border-box;\n display: block;\n margin-bottom: var(--margin-bottom, 1rem);\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: var(--road-spacing-02);\n padding: var(--road-spacing-03);\n}\n\n:host(.card-elevation-none) {\n box-shadow: none;\n}\n\n:host(.card-elevation-lowest) {\n box-shadow: var(--road-elevation-lowest);\n}\n\n:host(.card-elevation-average) {\n box-shadow: var(--road-elevation-average);\n}\n\n/*\n* Card as a button (interactivity in Figma)\n*/\n\n:host(.is-button) {\n border: 1px solid var(--road-outline);\n padding: 0;\n}\n\n:host(.is-button:hover) {\n border: 1px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button:focus-visible),\n:host(.is-button:focus) {\n border: 1px solid var(--road-outline);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n border: 1px solid var(--road-surface-disabled);\n background: var(--road-surface-disabled);\n}\n\n:host(.is-button.is-disabled) .card-native,\n:host(.is-button.selected.is-disabled) .card-native {\n background: none;\n}\n\n:host(.is-button.selected) {\n border: 2px solid var(--road-primary);\n outline: none;\n}\n\n:host(.is-button.selected:hover) {\n border: 2px solid var(--road-outline-variant);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected.is-single:hover) {\n border: 2px solid var(--road-primary);\n outline: 2px solid var(--road-button-ghost-variant);\n}\n\n:host(.is-button.selected:focus-visible),\n:host(.is-button.selected:focus) {\n border: 2px solid var(--road-outline-variant);\n outline-offset: 1px;\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-single:focus) {\n border: 2px solid var(--road-primary);\n outline: 2px solid var(--road-outline-variant);\n}\n\n:host(.is-button.selected.is-disabled) {\n cursor: not-allowed;\n pointer-events: none;\n outline: none;\n background: var(--road-surface-disabled);\n border: 2px solid var(--road-surface-disabled);\n}\n\n/* NATIVE\n -------------------- */\n\n.card-native {\n box-sizing: border-box;\n display: block;\n width: 100%;\n height: 100%;\n padding: var(--road-spacing-06);\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: center;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n background: var(--road-surface);\n border: 0;\n border-radius: 0.25rem;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\na,\nbutton {\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n/* ICON\n -------------------- */\n\n::slotted(road-icon) {\n text-align: center;\n}\n","import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from \"@stencil/core\";\n\n/**\n * @slot - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n tag: \"road-card\",\n styleUrl: \"card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el!: HTMLRoadCardElement;\n\n /**\n * The elevation.\n */\n @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n /**\n * If `true`, a button tag will be rendered and the card will be tappable.\n */\n @Prop() button: boolean = false;\n\n /**\n * value of the card\n */\n @Prop() value?: string;\n\n /**\n * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n * Toggled automatically when the card is clicked (when clickable).\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * If `true`, the card is disabled and cannot be clicked.\n * Only applies when in button mode (button=true and no href).\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Defines the selection mode.\n * - `\"single\"`: only one card can be selected at a time (focus outline disabled).\n * - `\"multiple\"`: multiple cards can be selected simultaneously.\n */\n @Prop({ reflect: true }) selectionMode?: \"single\" | \"multiple\" = \"multiple\";\n\n\n /**\n * The type of the button. Only used when an `onclick` or `button` property is present.\n */\n @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n /**\n * This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n */\n @Prop() download?: string;\n\n /**\n * Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n */\n @Prop() href?: string;\n\n /**\n * Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n */\n @Prop() rel?: string;\n\n /**\n * Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n */\n @Prop() target?: string;\n\n /**\n * Emitted when the card is clicked and send the `value` of the card\n */\n @Event() roadcardclick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n /** @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n\n private isClickable(): boolean {\n return this.href !== undefined || this.button;\n }\n\n private onClick = (e: Event) => {\n // If disabled in button mode, prevent all interactions\n const isButtonMode = this.button && this.href === undefined;\n if (isButtonMode && this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Toggle selected state on click for clickable cards\n this.selected = !this.selected;\n if (this.selectionMode === \"single\") {\n (e.currentTarget as HTMLElement).blur();\n }\n\n if (this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [<slot />];\n }\n const { href } = this;\n const TagType = clickable\n ? href === undefined\n ? \"button\"\n : \"a\"\n : (\"div\" as any);\n const isButtonMode = this.button && href === undefined;\n const attrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: isButtonMode && this.disabled,\n \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot />\n </TagType>\n );\n }\n\n render() {\n const { elevation } = this;\n const isButtonMode = this.button && this.href === undefined;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n const selectedClass = this.selected ? \"selected\" : \"\";\n const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n const singleClass = isButtonMode && this.selectionMode === \"single\" ? \"is-single\" : \"\";\n return (\n <Host\n class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}`}\n >\n {this.renderCard()}\n </Host>\n );\n }\n}\n"],"version":3}
|
package/dist/cjs/roadtrip.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"],\"readonly\":[\"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-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"removePadding\":[1028,\"remove-padding\"],\"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\"],\"enabledFocusTrap\":[4,\"enabled-focus-trap\"],\"whitelistSelectors\":[1040],\"focusTrap\":[32],\"hasFooterContent\":[32],\"open\":[64],\"close\":[64],\"back\":[64],\"updateWhitelistSelectors\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"enabledFocusTrap\":[\"handleFocusTrapProp\"],\"isOpen\":[\"handleOpen\"]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"blockdecimal\":[4],\"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],\"success\":[4],\"helper\":[1],\"list\":[1],\"debounce\":[2],\"enforceMinMaxValue\":[64],\"focus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4],\"size\":[513]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"inverse\":[4],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\",{\"disabled\":[4]},null,{\"disabled\":[\"handleDisabledChange\"]}],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"layout\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"],\"isOpen\":[1028,\"is-open\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"pagertype\":[1],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[1],\"helper\":[1],\"size\":[513]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]}]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1],\"badge\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-status-chip.cjs\",[[1,\"road-status-chip\",{\"size\":[1]}]]],[\"road-time-range-picker.cjs\",[[6,\"road-time-range-picker\",{\"start\":[1025],\"end\":[1025],\"disabled\":[4],\"helper\":[1],\"separator\":[1],\"required\":[4],\"label\":[1],\"sizes\":[1],\"error\":[1],\"getRange\":[64]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-toggle.cjs\",[[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]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-aspect-ratio.cjs\",[[1,\"road-aspect-ratio\",{\"ratio\":[1]}]]],[\"road-asset.cjs\",[[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.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-carousel.cjs\",[[1,\"road-button-carousel\",{\"outline\":[4],\"disabled\":[516]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-global-navigation-v2.cjs\",[[1,\"road-global-navigation-v2\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"],[8,\"click\",\"onButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-item-v2.cjs\",[[1,\"road-navbar-item-v2\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-v2.cjs\",[[1,\"road-navbar-v2\",{\"compact\":[516],\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[2],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1],\"progresscalculationbase\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-card.cjs\",[[6,\"road-radio-card\",{\"name\":[1],\"disabled\":[4],\"selected\":[4],\"value\":[8],\"label\":[1],\"inline\":[4],\"isSelected\":[32],\"radioId\":[32]},[[8,\"road-radio-selected\",\"handleRadioSelected\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"helper\":[1],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"loading\":[4],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32],\"wasFocusedBeforeLoading\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[5,\"mousedown\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]],{\"loading\":[\"loadingChanged\"],\"options\":[\"onOptionsChange\"]}]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"disabled\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-toolbar-v2.cjs\",[[1,\"road-toolbar-v2\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"selected\":[516],\"disabled\":[516],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
|
|
22
|
+
return index.bootstrapLazy(JSON.parse("[[\"road-badge_14.cjs\",[[2,\"road-counter\",{\"inputId\":[1,\"input-id\"],\"min\":[2],\"max\":[2],\"step\":[1],\"value\":[2],\"size\":[1],\"dustbin\":[4],\"readonly\":[4],\"leftIconClasses\":[32],\"rightIconClasses\":[32],\"isDustbinVisible\":[32]},null,{\"value\":[\"onValueChange\"],\"readonly\":[\"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-list\",{\"lines\":[1]}],[1,\"road-toolbar\",{\"color\":[1]}],[1,\"road-drawer\",{\"isOpen\":[1028,\"is-open\"],\"removePadding\":[1028,\"remove-padding\"],\"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\"],\"enabledFocusTrap\":[4,\"enabled-focus-trap\"],\"whitelistSelectors\":[1040],\"focusTrap\":[32],\"hasFooterContent\":[32],\"hasMounted\":[32],\"open\":[64],\"close\":[64],\"back\":[64],\"updateWhitelistSelectors\":[64]},[[4,\"keyup\",\"onEscape\"]],{\"enabledFocusTrap\":[\"handleFocusTrapProp\"],\"isOpen\":[\"handleOpen\"]}],[6,\"road-input\",{\"inputId\":[1,\"input-id\"],\"autocapitalize\":[1],\"autocomplete\":[1],\"blockdecimal\":[4],\"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],\"success\":[4],\"helper\":[1],\"list\":[1],\"debounce\":[2],\"enforceMinMaxValue\":[64],\"focus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}],[1,\"road-badge\",{\"color\":[1],\"bubble\":[4],\"size\":[513]}],[1,\"road-col\"],[1,\"road-grid\"],[1,\"road-row\"],[1,\"road-button\",{\"color\":[1],\"size\":[513],\"buttonType\":[1,\"button-type\"],\"inverse\":[4],\"iconOnly\":[516,\"icon-only\"],\"disabled\":[516],\"expand\":[516],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1],\"outline\":[4]}],[1,\"road-input-group\",{\"disabled\":[4]},null,{\"disabled\":[\"handleDisabledChange\"]}],[1,\"road-label\"],[1,\"road-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"svgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIcon\"],\"src\":[\"loadIcon\"],\"icon\":[\"loadIcon\"]}]]],[\"road-duration.cjs\",[[1,\"road-duration\",{\"isOpen\":[1028,\"is-open\"],\"header\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"open\":[64],\"close\":[64]},[[0,\"roadcardclick\",\"handleClick\"]]]]],[\"road-content-card.cjs\",[[1,\"road-content-card\",{\"insetImage\":[4,\"inset-image\"]}]]],[\"road-plate-number.cjs\",[[2,\"road-plate-number\",{\"country\":[1],\"disabled\":[4],\"placeholder\":[1],\"readonly\":[4],\"value\":[1032],\"motorbike\":[4]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-profil-dropdown.cjs\",[[1,\"road-profil-dropdown\",{\"isOpen\":[1028,\"is-open\"]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-rating.cjs\",[[1,\"road-rating\",{\"size\":[513],\"rate\":[2],\"showreviews\":[4],\"readonly\":[4],\"reviews\":[2],\"reviewsText\":[1,\"reviews-text\"],\"url\":[1]}]]],[\"road-accordion.cjs\",[[1,\"road-accordion\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isLightSeparator\":[4,\"is-light-separator\"],\"isSmall\":[4,\"is-small\"]}]]],[\"road-alert.cjs\",[[1,\"road-alert\",{\"color\":[1],\"layout\":[1],\"label\":[1],\"button\":[1],\"link\":[1],\"url\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"],\"isOpen\":[1028,\"is-open\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-banner.cjs\",[[1,\"road-banner\",{\"isOpen\":[1028,\"is-open\"],\"label\":[1],\"link\":[1],\"url\":[1],\"close\":[64]}]]],[\"road-carousel.cjs\",[[1,\"road-carousel\",{\"options\":[8],\"pager\":[4],\"pagertype\":[1],\"arrows\":[4],\"update\":[64],\"updateAutoHeight\":[64],\"slideTo\":[64],\"slideNext\":[64],\"slidePrev\":[64],\"getActiveIndex\":[64],\"getPreviousIndex\":[64],\"length\":[64],\"isEnd\":[64],\"isBeginning\":[64],\"startAutoplay\":[64],\"stopAutoplay\":[64],\"lockSwipeToNext\":[64],\"lockSwipeToPrev\":[64],\"lockSwipes\":[64],\"getSwiper\":[64]},null,{\"options\":[\"optionsChanged\"]}]]],[\"road-checkbox.cjs\",[[6,\"road-checkbox\",{\"checkboxId\":[1,\"checkbox-id\"],\"name\":[1],\"required\":[4],\"checked\":[1028],\"indeterminate\":[4],\"disabled\":[4],\"value\":[1],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[1],\"helper\":[1],\"size\":[513]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-chip.cjs\",[[1,\"road-chip\",{\"color\":[1],\"outline\":[4],\"size\":[1],\"hasCloseIcon\":[4,\"has-close-icon\"]}]]],[\"road-collapse.cjs\",[[1,\"road-collapse\",{\"isOpen\":[1028,\"is-open\"],\"showMore\":[1,\"show-more\"],\"showLess\":[1,\"show-less\"],\"centered\":[4]}]]],[\"road-dialog.cjs\",[[1,\"road-dialog\",{\"isOpen\":[1028,\"is-open\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"color\":[1],\"icon\":[1],\"label\":[1],\"description\":[1],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-dropdown.cjs\",[[1,\"road-dropdown\",{\"isOpen\":[1028,\"is-open\"],\"isLight\":[4,\"is-light\"],\"isMedium\":[4,\"is-medium\"],\"position\":[513],\"direction\":[513]},[[4,\"click\",\"handleDocumentClick\"]]]]],[\"road-modal.cjs\",[[1,\"road-modal\",{\"maxWidth\":[2,\"max-width\"],\"isOpen\":[1028,\"is-open\"],\"hasInverseHeader\":[4,\"has-inverse-header\"],\"modalTitle\":[1,\"modal-title\"],\"hasCloseIcon\":[4,\"has-close-icon\"],\"open\":[64],\"close\":[64]},[[4,\"keyup\",\"onEscape\"]]]]],[\"road-phone-number-input.cjs\",[[2,\"road-phone-number-input\",{\"disabled\":[4],\"countryData\":[16],\"language\":[1],\"codeLabel\":[1,\"code-label\"],\"phoneLabel\":[1,\"phone-label\"],\"phoneValue\":[1,\"phone-value\"],\"countryCode\":[1,\"country-code\"],\"errorMessage\":[1,\"error-message\"],\"required\":[4],\"selectedCountry\":[32],\"selectedCountryCode\":[32],\"phoneNumber\":[32],\"countryOptions\":[32],\"returnObject\":[32]}]]],[\"road-range.cjs\",[[6,\"road-range\",{\"rangeId\":[1,\"range-id\"],\"value\":[1032],\"min\":[1],\"max\":[1],\"step\":[1],\"showValue\":[4,\"show-value\"],\"showTick\":[4,\"show-tick\"],\"showLabels\":[4,\"show-labels\"],\"disabled\":[4]},[[2,\"focus\",\"handleFocus\"],[2,\"blur\",\"handleBlur\"]],{\"value\":[\"valueChanged\"]}]]],[\"road-segmented-button.cjs\",[[1,\"road-segmented-button\",{\"size\":[1],\"selected\":[1028],\"tab\":[1],\"badge\":[1]},[[8,\"roadSegmentedButtonBarChanged\",\"onButtonBarChanged\"],[8,\"roadSegmentedButtonbarchanged\",\"onButtonBarChanged\"]]]]],[\"road-status-chip.cjs\",[[1,\"road-status-chip\",{\"size\":[1]}]]],[\"road-time-range-picker.cjs\",[[6,\"road-time-range-picker\",{\"start\":[1025],\"end\":[1025],\"disabled\":[4],\"helper\":[1],\"separator\":[1],\"required\":[4],\"label\":[1],\"sizes\":[1],\"error\":[1],\"getRange\":[64]}]]],[\"road-toast.cjs\",[[1,\"road-toast\",{\"isOpen\":[1028,\"is-open\"],\"color\":[1],\"label\":[1],\"timeout\":[2],\"open\":[64],\"close\":[64]},null,{\"isOpen\":[\"isOpenChanged\"]}]]],[\"road-toggle.cjs\",[[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]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-area-code.cjs\",[[2,\"road-area-code\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1025],\"triggerRender\":[1026,\"trigger-render\"],\"selectedValue\":[32]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-aspect-ratio.cjs\",[[1,\"road-aspect-ratio\",{\"ratio\":[1]}]]],[\"road-asset.cjs\",[[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.cjs\",[[6,\"road-autocomplete\",{\"options\":[16],\"visible\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[4,\"click\",\"onClickOutside\"]]]]],[\"road-button-carousel.cjs\",[[1,\"road-button-carousel\",{\"outline\":[4],\"disabled\":[516]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-button-floating.cjs\",[[1,\"road-button-floating\",{\"position\":[513],\"href\":[1],\"rel\":[1],\"target\":[1]},[[9,\"scroll\",\"onScroll\"]]]]],[\"road-carousel-item.cjs\",[[4,\"road-carousel-item\"]]],[\"road-flap.cjs\",[[1,\"road-flap\",{\"color\":[1],\"filled\":[4],\"size\":[513]}]]],[\"road-global-navigation.cjs\",[[1,\"road-global-navigation\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-global-navigation-v2.cjs\",[[1,\"road-global-navigation-v2\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"],[8,\"click\",\"onButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-illustration.cjs\",[[1,\"road-illustration\",{\"ariaLabel\":[1537,\"aria-label\"],\"ariaHidden\":[513,\"aria-hidden\"],\"name\":[1],\"src\":[1],\"illustration\":[8],\"size\":[1],\"rotate\":[1],\"lazy\":[4],\"sanitize\":[4],\"illustrationSvgContent\":[32],\"isVisible\":[32]},null,{\"name\":[\"loadIllustration\"],\"src\":[\"loadIllustration\"],\"illustration\":[\"loadIllustration\"]}]]],[\"road-navbar.cjs\",[[1,\"road-navbar\",{\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-navbar-item.cjs\",[[1,\"road-navbar-item\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-item-v2.cjs\",[[1,\"road-navbar-item-v2\",{\"disabled\":[4],\"download\":[1],\"href\":[1],\"rel\":[1],\"selected\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadNavbarChanged\",\"onNavbarChanged\"],[8,\"roadnavbarchanged\",\"onNavbarChanged\"]],{\"selected\":[\"handleSelectedChange\"]}]]],[\"road-navbar-v2.cjs\",[[1,\"road-navbar-v2\",{\"compact\":[516],\"selectedTab\":[1,\"selected-tab\"]},[[0,\"roadNavbarItemClick\",\"onNavbarChanged\"],[0,\"roadnavbaritemclick\",\"onNavbarChanged\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-progress.cjs\",[[1,\"road-progress\",{\"value\":[2],\"numbersteps\":[2],\"label\":[1],\"showstep\":[4],\"animation\":[4],\"light\":[4],\"fullwidth\":[4],\"color\":[1],\"progresscalculationbase\":[1]}]]],[\"road-progress-indicator-horizontal.cjs\",[[1,\"road-progress-indicator-horizontal\",{\"color\":[513],\"numberStep\":[2,\"number-step\"],\"stateFirstStep\":[1,\"state-first-step\"],\"stateSecondStep\":[1,\"state-second-step\"],\"stateThirdStep\":[1,\"state-third-step\"],\"urlStep1\":[1,\"url-step-1\"],\"urlStep2\":[1,\"url-step-2\"],\"urlStep3\":[1,\"url-step-3\"]}]]],[\"road-progress-indicator-vertical.cjs\",[[1,\"road-progress-indicator-vertical\"]]],[\"road-progress-indicator-vertical-item.cjs\",[[4,\"road-progress-indicator-vertical-item\"]]],[\"road-progress-tracker.cjs\",[[1,\"road-progress-tracker\"]]],[\"road-progress-tracker-item.cjs\",[[4,\"road-progress-tracker-item\"]]],[\"road-radio.cjs\",[[2,\"road-radio\",{\"radioId\":[1,\"radio-id\"],\"name\":[1],\"required\":[4],\"disabled\":[4],\"value\":[8],\"label\":[1],\"secondaryLabel\":[1,\"secondary-label\"],\"inverse\":[4],\"error\":[4],\"helper\":[1],\"inline\":[4],\"checked\":[32]},[[8,\"roadChange\",\"onRoadChangedChanged\"],[8,\"roadchange\",\"onRoadChangedChanged\"]]]]],[\"road-radio-card.cjs\",[[6,\"road-radio-card\",{\"name\":[1],\"disabled\":[4],\"selected\":[4],\"value\":[8],\"label\":[1],\"inline\":[4],\"isSelected\":[32],\"radioId\":[32]},[[8,\"road-radio-selected\",\"handleRadioSelected\"]]]]],[\"road-radio-group.cjs\",[[6,\"road-radio-group\",{\"radioGroupId\":[1,\"radio-group-id\"],\"allowEmptySelection\":[4,\"allow-empty-selection\"],\"name\":[1],\"value\":[1032],\"label\":[1],\"asterisk\":[4],\"ariaLabel\":[513,\"aria-label\"],\"error\":[1025],\"helper\":[1]},null,{\"value\":[\"valueChanged\"],\"error\":[\"errorChanged\"]}]]],[\"road-segmented-button-bar.cjs\",[[1,\"road-segmented-button-bar\",{\"selectedTab\":[1,\"selected-tab\"]},null,{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-segmented-buttons.cjs\",[[1,\"road-segmented-buttons\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-select.cjs\",[[2,\"road-select\",{\"selectId\":[1,\"select-id\"],\"options\":[16],\"autofocus\":[4],\"disabled\":[4],\"name\":[1],\"required\":[4],\"helper\":[1],\"size\":[2],\"sizes\":[1],\"label\":[1],\"error\":[1],\"value\":[1032]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-select-filter.cjs\",[[6,\"road-select-filter\",{\"options\":[16],\"parameters\":[8],\"isActive\":[4,\"is-active\"],\"onlySelect\":[4,\"only-select\"],\"loading\":[4],\"isOpen\":[32],\"currentValue\":[32],\"activeIndex\":[32],\"wasFocusedBeforeLoading\":[32]},[[0,\"roadFocus\",\"handleFocus\"],[0,\"roadfocus\",\"handleFocus\"],[0,\"roadBlur\",\"handleBlur\"],[0,\"roadblur\",\"handleBlur\"],[0,\"roadChange\",\"handleChange\"],[0,\"roadchange\",\"handleChange\"],[5,\"mousedown\",\"onClickOutside\"],[8,\"keydown\",\"handleKeydown\"]],{\"loading\":[\"loadingChanged\"],\"options\":[\"onOptionsChange\"]}]]],[\"road-skeleton.cjs\",[[1,\"road-skeleton\"]]],[\"road-spinner.cjs\",[[1,\"road-spinner\",{\"size\":[513],\"color\":[513]}]]],[\"road-switch.cjs\",[[2,\"road-switch\",{\"switchId\":[1,\"switch-id\"],\"name\":[1],\"checked\":[1028],\"disabled\":[4],\"label\":[1],\"color\":[1],\"hasLeftLabel\":[4,\"has-left-label\"],\"isSpaced\":[4,\"is-spaced\"],\"value\":[1],\"on\":[1],\"off\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"road-tab.cjs\",[[1,\"road-tab\",{\"active\":[1028],\"tab\":[1],\"setActive\":[64]},[[8,\"roadtabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-tab-bar.cjs\",[[1,\"road-tab-bar\",{\"secondary\":[4],\"expand\":[4],\"center\":[4],\"selectedTab\":[1537,\"selected-tab\"]},[[0,\"roadTabButtonClick\",\"onTabButtonClick\"]],{\"selectedTab\":[\"selectedTabChanged\"]}]]],[\"road-tab-button.cjs\",[[1,\"road-tab-button\",{\"download\":[1],\"href\":[1],\"rel\":[1],\"layout\":[1],\"selected\":[1028],\"disabled\":[1028],\"tab\":[1],\"target\":[1]},[[8,\"roadTabBarChanged\",\"onTabBarChanged\"],[8,\"roadTabbarchanged\",\"onTabBarChanged\"]]]]],[\"road-table.cjs\",[[6,\"road-table\"]]],[\"road-tabs.cjs\",[[1,\"road-tabs\",{\"selectedTab\":[32],\"select\":[64],\"getTab\":[64],\"getSelected\":[64]}]]],[\"road-tag.cjs\",[[1,\"road-tag\",{\"color\":[1],\"contrast\":[4]}]]],[\"road-text.cjs\",[[1,\"road-text\",{\"color\":[1]}]]],[\"road-textarea.cjs\",[[2,\"road-textarea\",{\"textareaId\":[1,\"textarea-id\"],\"autocapitalize\":[1],\"autofocus\":[4],\"disabled\":[4],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"sizes\":[1],\"readonly\":[4],\"required\":[4],\"spellcheck\":[4],\"resize\":[4],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"value\":[1025],\"label\":[1],\"error\":[1],\"helper\":[1]},null,{\"value\":[\"valueChanged\"]}]]],[\"road-toolbar-title.cjs\",[[1,\"road-toolbar-title\"]]],[\"road-toolbar-title-page.cjs\",[[1,\"road-toolbar-title-page\"]]],[\"road-toolbar-v2.cjs\",[[1,\"road-toolbar-v2\"]]],[\"road-tooltip.cjs\",[[1,\"road-tooltip\",{\"tooltipId\":[1,\"tooltip-id\"],\"content\":[1],\"position\":[1],\"contentAlign\":[1,\"content-align\"],\"isOpen\":[1028,\"is-open\"],\"trigger\":[1],\"open\":[64],\"close\":[64]}]]],[\"road-avatar.cjs\",[[1,\"road-avatar\",{\"size\":[513]}]]],[\"road-card.cjs\",[[1,\"road-card\",{\"elevation\":[1],\"button\":[4],\"value\":[1],\"selected\":[516],\"disabled\":[516],\"selectionMode\":[513,\"selection-mode\"],\"type\":[1],\"download\":[1],\"href\":[1],\"rel\":[1],\"target\":[1]}]]],[\"road-img.cjs\",[[1,\"road-img\",{\"alt\":[1],\"src\":[1],\"loadSrc\":[32],\"loadError\":[32]},null,{\"src\":[\"srcChanged\"]}]]]]"), options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
outline: 2px solid var(--road-button-ghost-variant);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
:host(.is-button.selected.is-single:hover) {
|
|
80
|
+
border: 2px solid var(--road-primary);
|
|
81
|
+
outline: 2px solid var(--road-button-ghost-variant);
|
|
82
|
+
}
|
|
83
|
+
|
|
79
84
|
:host(.is-button.selected:focus-visible),
|
|
80
85
|
:host(.is-button.selected:focus) {
|
|
81
86
|
border: 2px solid var(--road-outline-variant);
|
|
@@ -83,6 +88,11 @@
|
|
|
83
88
|
outline: 2px solid var(--road-outline-variant);
|
|
84
89
|
}
|
|
85
90
|
|
|
91
|
+
:host(.is-button.selected.is-single:focus) {
|
|
92
|
+
border: 2px solid var(--road-primary);
|
|
93
|
+
outline: 2px solid var(--road-outline-variant);
|
|
94
|
+
}
|
|
95
|
+
|
|
86
96
|
:host(.is-button.selected.is-disabled) {
|
|
87
97
|
cursor: not-allowed;
|
|
88
98
|
pointer-events: none;
|
|
@@ -24,6 +24,12 @@ export class Card {
|
|
|
24
24
|
* Only applies when in button mode (button=true and no href).
|
|
25
25
|
*/
|
|
26
26
|
this.disabled = false;
|
|
27
|
+
/**
|
|
28
|
+
* Defines the selection mode.
|
|
29
|
+
* - `"single"`: only one card can be selected at a time (focus outline disabled).
|
|
30
|
+
* - `"multiple"`: multiple cards can be selected simultaneously.
|
|
31
|
+
*/
|
|
32
|
+
this.selectionMode = "multiple";
|
|
27
33
|
/**
|
|
28
34
|
* The type of the button. Only used when an `onclick` or `button` property is present.
|
|
29
35
|
*/
|
|
@@ -39,6 +45,9 @@ export class Card {
|
|
|
39
45
|
}
|
|
40
46
|
// Toggle selected state on click for clickable cards
|
|
41
47
|
this.selected = !this.selected;
|
|
48
|
+
if (this.selectionMode === "single") {
|
|
49
|
+
e.currentTarget.blur();
|
|
50
|
+
}
|
|
42
51
|
if (this.value !== undefined) {
|
|
43
52
|
this.roadcardclick.emit({
|
|
44
53
|
value: this.value,
|
|
@@ -87,7 +96,8 @@ export class Card {
|
|
|
87
96
|
const selectedClass = this.selected ? "selected" : "";
|
|
88
97
|
const isButtonClass = isButtonMode ? "is-button" : "";
|
|
89
98
|
const disabledClass = isButtonMode && this.disabled ? "is-disabled" : "";
|
|
90
|
-
|
|
99
|
+
const singleClass = isButtonMode && this.selectionMode === "single" ? "is-single" : "";
|
|
100
|
+
return (h(Host, { key: 'fc2636b92be59ddf232b162574c3cdd3a7042a50', class: `${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}` }, this.renderCard()));
|
|
91
101
|
}
|
|
92
102
|
static get is() { return "road-card"; }
|
|
93
103
|
static get encapsulation() { return "shadow"; }
|
|
@@ -202,6 +212,26 @@ export class Card {
|
|
|
202
212
|
"reflect": true,
|
|
203
213
|
"defaultValue": "false"
|
|
204
214
|
},
|
|
215
|
+
"selectionMode": {
|
|
216
|
+
"type": "string",
|
|
217
|
+
"mutable": false,
|
|
218
|
+
"complexType": {
|
|
219
|
+
"original": "\"single\" | \"multiple\"",
|
|
220
|
+
"resolved": "\"multiple\" | \"single\" | undefined",
|
|
221
|
+
"references": {}
|
|
222
|
+
},
|
|
223
|
+
"required": false,
|
|
224
|
+
"optional": true,
|
|
225
|
+
"docs": {
|
|
226
|
+
"tags": [],
|
|
227
|
+
"text": "Defines the selection mode.\n- `\"single\"`: only one card can be selected at a time (focus outline disabled).\n- `\"multiple\"`: multiple cards can be selected simultaneously."
|
|
228
|
+
},
|
|
229
|
+
"getter": false,
|
|
230
|
+
"setter": false,
|
|
231
|
+
"attribute": "selection-mode",
|
|
232
|
+
"reflect": true,
|
|
233
|
+
"defaultValue": "\"multiple\""
|
|
234
|
+
},
|
|
205
235
|
"type": {
|
|
206
236
|
"type": "string",
|
|
207
237
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB;;;;GAIG;AAOH,MAAM,OAAO,IAAI;IALjB;QAQE;;WAEG;QACK,cAAS,GAAmC,MAAM,CAAC;QAE3D;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;QAOhC;;;WAGG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;;WAGG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAEnD;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QA8C/C,YAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;;YAC7B,uDAAuD;YACvD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;YAC5D,IAAI,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YAED,qDAAqD;YACrD,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n Host,\n} from \"@stencil/core\";\n\n/**\n * @slot - Content of the card.\n *\n * @part native - The native HTML button, anchor, or div element that wraps all child elements.\n */\n\n@Component({\n tag: \"road-card\",\n styleUrl: \"card.css\",\n shadow: true,\n})\nexport class Card {\n @Element() el!: HTMLRoadCardElement;\n\n /**\n * The elevation.\n */\n @Prop() elevation?: \"none\" | \"lowest\" | \"average\" = \"none\";\n\n /**\n * If `true`, a button tag will be rendered and the card will be tappable.\n */\n @Prop() button: boolean = false;\n\n /**\n * value of the card\n */\n @Prop() value?: string;\n\n /**\n * If `true`, the card has the `selected` state and the `selected` class is applied on the host.\n * Toggled automatically when the card is clicked (when clickable).\n */\n @Prop({ reflect: true }) selected: boolean = false;\n\n /**\n * If `true`, the card is disabled and cannot be clicked.\n * Only applies when in button mode (button=true and no href).\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * Defines the selection mode.\n * - `\"single\"`: only one card can be selected at a time (focus outline disabled).\n * - `\"multiple\"`: multiple cards can be selected simultaneously.\n */\n @Prop({ reflect: true }) selectionMode?: \"single\" | \"multiple\" = \"multiple\";\n\n\n /**\n * The type of the button. Only used when an `onclick` or `button` property is present.\n */\n @Prop() type: \"submit\" | \"reset\" | \"button\" = \"button\";\n\n /**\n * This attribute instructs browsers to download a URL instead of navigating to\n * it, so the user will be prompted to save it as a local file. If the attribute\n * has a value, it is used as the pre-filled file name in the Save prompt\n * (the user can still change the file name if they want).\n */\n @Prop() download?: string;\n\n /**\n * Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n */\n @Prop() href?: string;\n\n /**\n * Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n */\n @Prop() rel?: string;\n\n /**\n * Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n */\n @Prop() target?: string;\n\n /**\n * Emitted when the card is clicked and send the `value` of the card\n */\n @Event() roadcardclick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n /** @internal */\n @Event() roadCardClick!: EventEmitter<{\n value: string | undefined | null;\n label: string | undefined | null;\n }>;\n\n private isClickable(): boolean {\n return this.href !== undefined || this.button;\n }\n\n private onClick = (e: Event) => {\n // If disabled in button mode, prevent all interactions\n const isButtonMode = this.button && this.href === undefined;\n if (isButtonMode && this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n // Toggle selected state on click for clickable cards\n this.selected = !this.selected;\n if (this.selectionMode === \"single\") {\n (e.currentTarget as HTMLElement).blur();\n }\n\n if (this.value !== undefined) {\n this.roadcardclick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n this.roadCardClick.emit({\n value: this.value,\n label: this.el.querySelector(\"road-label\")?.textContent,\n });\n }\n };\n\n private renderCard() {\n const clickable = this.isClickable();\n\n if (!clickable) {\n return [<slot />];\n }\n const { href } = this;\n const TagType = clickable\n ? href === undefined\n ? \"button\"\n : \"a\"\n : (\"div\" as any);\n const isButtonMode = this.button && href === undefined;\n const attrs =\n TagType === \"button\"\n ? {\n type: this.type,\n disabled: isButtonMode && this.disabled,\n \"aria-disabled\": isButtonMode && this.disabled ? \"true\" : undefined,\n }\n : {\n download: this.download,\n href: this.href,\n rel: this.rel,\n target: this.target,\n };\n\n return (\n <TagType\n {...attrs}\n class=\"card-native\"\n part=\"native\"\n onClick={this.onClick}\n >\n <slot />\n </TagType>\n );\n }\n\n render() {\n const { elevation } = this;\n const isButtonMode = this.button && this.href === undefined;\n const elevationClass = this.elevation ? `card-elevation-${elevation}` : ``;\n const selectedClass = this.selected ? \"selected\" : \"\";\n const isButtonClass = isButtonMode ? \"is-button\" : \"\";\n const disabledClass = isButtonMode && this.disabled ? \"is-disabled\" : \"\";\n const singleClass = isButtonMode && this.selectionMode === \"single\" ? \"is-single\" : \"\";\n return (\n <Host\n class={`${elevationClass} ${selectedClass} ${isButtonClass} ${disabledClass} ${singleClass}`}\n >\n {this.renderCard()}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -34,6 +34,15 @@ export default {
|
|
|
34
34
|
description:
|
|
35
35
|
"If `true`, the card is disabled and cannot be clicked. * Only applies when in button mode (button=true and no href).",
|
|
36
36
|
},
|
|
37
|
+
selectionMode: {
|
|
38
|
+
options: ["single", "multiple"],
|
|
39
|
+
control: { type: "select" },
|
|
40
|
+
description:
|
|
41
|
+
"Defines the selection mode. `single`: only one card can be selected (focus outline disabled). `multiple`: multiple cards can be selected.",
|
|
42
|
+
table: {
|
|
43
|
+
defaultValue: { summary: "multiple" },
|
|
44
|
+
},
|
|
45
|
+
},
|
|
37
46
|
},
|
|
38
47
|
args: {
|
|
39
48
|
elevation: "none",
|
|
@@ -49,6 +58,7 @@ const Template = (args) => html`
|
|
|
49
58
|
<road-card
|
|
50
59
|
button="${ifDefined(args.button)}"
|
|
51
60
|
disabled="${ifDefined(args.disabled)}"
|
|
61
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
52
62
|
value="125"
|
|
53
63
|
elevation="${ifDefined(args.elevation)}"
|
|
54
64
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -60,6 +70,7 @@ const Template = (args) => html`
|
|
|
60
70
|
<road-card
|
|
61
71
|
button="${ifDefined(args.button)}"
|
|
62
72
|
disabled="${ifDefined(args.disabled)}"
|
|
73
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
63
74
|
value="135"
|
|
64
75
|
elevation="${ifDefined(args.elevation)}"
|
|
65
76
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -71,6 +82,7 @@ const Template = (args) => html`
|
|
|
71
82
|
<road-card
|
|
72
83
|
button="${ifDefined(args.button)}"
|
|
73
84
|
disabled="${ifDefined(args.disabled)}"
|
|
85
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
74
86
|
value="145"
|
|
75
87
|
elevation="${ifDefined(args.elevation)}"
|
|
76
88
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -82,6 +94,7 @@ const Template = (args) => html`
|
|
|
82
94
|
<road-card
|
|
83
95
|
button="${ifDefined(args.button)}"
|
|
84
96
|
disabled="${ifDefined(args.disabled)}"
|
|
97
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
85
98
|
value="155"
|
|
86
99
|
elevation="${ifDefined(args.elevation)}"
|
|
87
100
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -93,6 +106,7 @@ const Template = (args) => html`
|
|
|
93
106
|
<road-card
|
|
94
107
|
button="${ifDefined(args.button)}"
|
|
95
108
|
disabled="${ifDefined(args.disabled)}"
|
|
109
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
96
110
|
value="165"
|
|
97
111
|
elevation="${ifDefined(args.elevation)}"
|
|
98
112
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -104,6 +118,7 @@ const Template = (args) => html`
|
|
|
104
118
|
<road-card
|
|
105
119
|
button="${ifDefined(args.button)}"
|
|
106
120
|
disabled="${ifDefined(args.disabled)}"
|
|
121
|
+
selection-mode="${ifDefined(args.selectionMode)}"
|
|
107
122
|
value="175"
|
|
108
123
|
elevation="${ifDefined(args.elevation)}"
|
|
109
124
|
@roadcardclick=${args.roadcardclick}
|
|
@@ -120,6 +135,7 @@ Value.args = {
|
|
|
120
135
|
elevation: "average",
|
|
121
136
|
button: true,
|
|
122
137
|
disabled: false,
|
|
138
|
+
selectionMode: "multiple",
|
|
123
139
|
};
|
|
124
140
|
|
|
125
141
|
export const Vehicle = (args) => html`
|
|
@@ -52,8 +52,7 @@
|
|
|
52
52
|
line-height: 1.5;
|
|
53
53
|
color: var(--color);
|
|
54
54
|
visibility: hidden !important;
|
|
55
|
-
|
|
56
|
-
transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
|
|
55
|
+
transition: visibility 0s linear 0.3s;
|
|
57
56
|
|
|
58
57
|
}
|
|
59
58
|
|
|
@@ -70,6 +69,7 @@
|
|
|
70
69
|
touch-action: none;
|
|
71
70
|
cursor: pointer;
|
|
72
71
|
background: var(--road-overlay);
|
|
72
|
+
opacity: 0;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
/* DRAWER
|
|
@@ -85,6 +85,7 @@
|
|
|
85
85
|
width: 100%;
|
|
86
86
|
pointer-events: none;
|
|
87
87
|
transition: transform 0.3s ease-out;
|
|
88
|
+
opacity: 0;
|
|
88
89
|
transform: translateX(-100%);
|
|
89
90
|
}
|
|
90
91
|
|
|
@@ -275,10 +276,47 @@
|
|
|
275
276
|
|
|
276
277
|
:host(.drawer-open) {
|
|
277
278
|
visibility: visible !important;
|
|
279
|
+
transition: visibility 0s linear 0s;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
:host(.drawer-open) .drawer-overlay,
|
|
283
|
+
:host(.drawer-open) .drawer-dialog {
|
|
278
284
|
opacity: 1;
|
|
279
|
-
transition: opacity 0.3s ease-out, visibility 0s linear 0s;
|
|
280
285
|
}
|
|
281
286
|
|
|
282
287
|
:host(.drawer-open) .road-drawer-wrapper .drawer-dialog {
|
|
283
288
|
transform: none;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
292
|
+
/**
|
|
293
|
+
* Fade overlay & dialog in even when mounted already open.
|
|
294
|
+
*/
|
|
295
|
+
:host(.drawer-open) .drawer-overlay,
|
|
296
|
+
:host(.drawer-open) .drawer-dialog {
|
|
297
|
+
animation: road-drawer-fade-in 0.3s ease-out both;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.drawer-overlay,
|
|
301
|
+
.drawer-dialog {
|
|
302
|
+
animation: road-drawer-fade-out 0.3s ease-out both;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
@keyframes road-drawer-fade-in {
|
|
306
|
+
from {
|
|
307
|
+
opacity: 0;
|
|
308
|
+
}
|
|
309
|
+
to {
|
|
310
|
+
opacity: 1;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
@keyframes road-drawer-fade-out {
|
|
315
|
+
from {
|
|
316
|
+
opacity: 1;
|
|
317
|
+
}
|
|
318
|
+
to {
|
|
319
|
+
opacity: 0;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
284
322
|
}
|
|
@@ -53,6 +53,11 @@ export class Drawer {
|
|
|
53
53
|
* Footer Content state
|
|
54
54
|
*/
|
|
55
55
|
this.hasFooterContent = false;
|
|
56
|
+
/**
|
|
57
|
+
* Used to ensure open transitions run when the drawer
|
|
58
|
+
* is initially mounted with `isOpen=true`.
|
|
59
|
+
*/
|
|
60
|
+
this.hasMounted = false;
|
|
56
61
|
this.onFooterSlotChange = (event) => {
|
|
57
62
|
const slot = event.target;
|
|
58
63
|
this.hasFooterContent = slot.assignedElements().length > 0;
|
|
@@ -149,18 +154,19 @@ export class Drawer {
|
|
|
149
154
|
}, 100); // Timeout is used to ensure the drawer has been rendered when client wants to update the property at the same time
|
|
150
155
|
}
|
|
151
156
|
handleOpen(openValue) {
|
|
152
|
-
var _a;
|
|
157
|
+
var _a, _b;
|
|
158
|
+
const dialog = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.drawer-dialog');
|
|
153
159
|
if (openValue === true) {
|
|
154
160
|
this.onOpen.emit();
|
|
155
|
-
|
|
161
|
+
dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
|
|
156
162
|
if (this.enabledFocusTrap) {
|
|
157
163
|
this.getOrCreateFocusTrap().activate();
|
|
158
164
|
}
|
|
159
165
|
}, { once: true });
|
|
160
166
|
}
|
|
161
167
|
else {
|
|
162
|
-
(
|
|
163
|
-
|
|
168
|
+
(_b = this.focusTrap) === null || _b === void 0 ? void 0 : _b.deactivate();
|
|
169
|
+
dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener("transitionend", () => {
|
|
164
170
|
this.onClose.emit();
|
|
165
171
|
this.el.shadowRoot &&
|
|
166
172
|
(this.el.shadowRoot.querySelector(".drawer-body").scrollTop = 0);
|
|
@@ -179,9 +185,14 @@ export class Drawer {
|
|
|
179
185
|
this.el.querySelectorAll('[data-dismiss="modal"]').forEach((item) => {
|
|
180
186
|
item.addEventListener("click", () => this.close());
|
|
181
187
|
});
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
188
|
+
// Wait for the first paint so the "closed" transform can be applied,
|
|
189
|
+
// then open on the next frame to allow CSS transitions to run.
|
|
190
|
+
requestAnimationFrame(() => {
|
|
191
|
+
this.hasMounted = true;
|
|
192
|
+
if (this.isOpen) {
|
|
193
|
+
this.handleOpen(true);
|
|
194
|
+
}
|
|
195
|
+
});
|
|
185
196
|
}
|
|
186
197
|
getOrCreateFocusTrap(elements) {
|
|
187
198
|
var _a;
|
|
@@ -211,7 +222,8 @@ export class Drawer {
|
|
|
211
222
|
}
|
|
212
223
|
render() {
|
|
213
224
|
var _a, _b, _c;
|
|
214
|
-
const
|
|
225
|
+
const isEffectivelyOpen = this.isOpen && this.hasMounted;
|
|
226
|
+
const drawerIsOpenClass = isEffectivelyOpen ? "drawer-open" : "";
|
|
215
227
|
const removePaddingClass = this.removePadding ? "remove-padding" : "";
|
|
216
228
|
const inverseHeaderClass = this.hasInverseHeader
|
|
217
229
|
? "drawer-header-inverse"
|
|
@@ -223,7 +235,7 @@ export class Drawer {
|
|
|
223
235
|
const backIconElement = this.hasBackIcon ? (h("button", { type: "button", class: "drawer-action", "aria-label": ariaLabelBack, onClick: this.onClickBack }, h("road-icon", { icon: navigationChevron, rotate: "180" }), this.backText)) : null;
|
|
224
236
|
const closeIconElement = this.hasCloseIcon ? (h("button", { type: "button", class: "drawer-close", onClick: this.onClick, "aria-label": ariaLabelClose }, h("road-icon", { icon: navigationClose, "aria-hidden": "true" }))) : null;
|
|
225
237
|
const drawerWidthValue = this.position === "bottom" ? "100%" : `${this.drawerWidth}px`;
|
|
226
|
-
return (h(Host, { key: '
|
|
238
|
+
return (h(Host, { key: 'ecd747ab4372bed7cefb4647dfaf9404c7206b53', class: `${drawerIsOpenClass} drawer-${this.position}`, tabindex: "0", role: "dialog", "aria-label": ariaLabel }, h("div", { key: '1d5760b82a095696e30867669f607d5c3608c308', class: "road-drawer-wrapper" }, h("div", { key: '4d519361b71dd228e7a35a1ee20f741911e0752f', class: "drawer-overlay", onClick: this.onClick, tabindex: "-1" }), h("div", { key: '36dc3dac85b6784b66f5a12476be608d2b43c40c', class: "drawer-dialog", style: { maxWidth: drawerWidthValue }, role: "document" }, h("div", { key: '74a7d03928a6919fa6cd95c6a66a61c9bf225e20', class: "drawer-content" }, h("header", { key: 'f4c543d1ea08ee62ea3a9f93e34499a7f5c81fa5', class: `drawer-header ${inverseHeaderClass} ${drawerDelimiterClass}` }, backIconElement, this.drawerTitle ? (h("h2", { class: "drawer-title" }, this.drawerTitle)) : (h("div", { class: "drawer-title" }, h("slot", { name: "title" }))), closeIconElement), h("div", { key: '796030c5a5cf6661aa4c1f4c10cc039e0e550d4c', class: `drawer-body ${removePaddingClass}` }, h("slot", { key: '8c0bdfa660ace789ea5a01ada7ce3cd9c5cc3d4a' })), h("footer", { key: 'a52a747ea4c5de885fc440ac4f8247f5c9ab88b0', class: `drawer-footer ${removePaddingClass}`, hidden: !this.hasFooterContent }, h("slot", { key: '0bef80d08a9e6078f025768eb88f93df86517fb9', name: "footer", onSlotchange: this.onFooterSlotChange })))))));
|
|
227
239
|
}
|
|
228
240
|
static get is() { return "road-drawer"; }
|
|
229
241
|
static get encapsulation() { return "shadow"; }
|
|
@@ -517,7 +529,8 @@ export class Drawer {
|
|
|
517
529
|
static get states() {
|
|
518
530
|
return {
|
|
519
531
|
"focusTrap": {},
|
|
520
|
-
"hasFooterContent": {}
|
|
532
|
+
"hasFooterContent": {},
|
|
533
|
+
"hasMounted": {}
|
|
521
534
|
};
|
|
522
535
|
}
|
|
523
536
|
static get events() {
|