@roadtrip/components 3.13.3 → 3.14.1
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/index-12592729.js +8 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/road-button-floating.cjs.entry.js +1 -1
- package/dist/cjs/road-button-floating.cjs.entry.js.map +1 -1
- package/dist/cjs/road-content-card.cjs.entry.js +23 -0
- package/dist/cjs/road-content-card.cjs.entry.js.map +1 -0
- package/dist/cjs/road-dropdown.cjs.entry.js +3 -2
- package/dist/cjs/road-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js +1 -1
- package/dist/cjs/road-phone-number-input.cjs.entry.js.map +1 -1
- package/dist/cjs/roadtrip.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/button-floating/button-floating.css +4 -3
- package/dist/collection/components/content-card/content-card.css +82 -0
- package/dist/collection/components/content-card/content-card.js +51 -0
- package/dist/collection/components/content-card/content-card.js.map +1 -0
- package/dist/collection/components/content-card/content-card.stories.js +47 -0
- package/dist/collection/components/dropdown/dropdown.css +11 -1
- package/dist/collection/components/dropdown/dropdown.js +3 -2
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/phone-number-input/phone-number-input.css +25 -23
- package/dist/esm/index-52302079.js +8 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/road-button-floating.entry.js +1 -1
- package/dist/esm/road-button-floating.entry.js.map +1 -1
- package/dist/esm/road-content-card.entry.js +19 -0
- package/dist/esm/road-content-card.entry.js.map +1 -0
- package/dist/esm/road-dropdown.entry.js +3 -2
- package/dist/esm/road-dropdown.entry.js.map +1 -1
- package/dist/esm/road-phone-number-input.entry.js +1 -1
- package/dist/esm/road-phone-number-input.entry.js.map +1 -1
- package/dist/esm/roadtrip.js +1 -1
- package/dist/html.html-data.json +20 -1
- package/dist/roadtrip/p-09bfd80b.entry.js +2 -0
- package/dist/roadtrip/p-09bfd80b.entry.js.map +1 -0
- package/dist/roadtrip/p-2a866428.entry.js +2 -0
- package/dist/roadtrip/p-2a866428.entry.js.map +1 -0
- package/dist/roadtrip/p-5053b01a.entry.js +2 -0
- package/dist/roadtrip/p-5053b01a.entry.js.map +1 -0
- package/dist/roadtrip/{p-96b80b11.entry.js → p-c3c92152.entry.js} +2 -2
- package/dist/roadtrip/{p-96b80b11.entry.js.map → p-c3c92152.entry.js.map} +1 -1
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/roadtrip.esm.js.map +1 -1
- package/dist/types/components/content-card/content-card.d.ts +13 -0
- package/dist/types/components/dropdown/dropdown.d.ts +1 -1
- package/dist/types/components.d.ts +23 -2
- package/hydrate/index.js +36 -4
- package/package.json +1 -1
- package/dist/roadtrip/p-00e51171.entry.js +0 -2
- package/dist/roadtrip/p-00e51171.entry.js.map +0 -1
- package/dist/roadtrip/p-4ec82d24.entry.js +0 -2
- package/dist/roadtrip/p-4ec82d24.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-button-floating.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,
|
|
1
|
+
{"file":"road-button-floating.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,wvDAAwvD;;MCgBrwD,MAAM;;;;;;;IA6DT,YAAO,GAAG,CAAC,EAAS;MAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,IAAK,IAAI,CAAC,EAAU,CAAC,YAAY,EAAE;;;;QAIvD,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACrC,IAAI,IAAI,EAAE;UACR,EAAE,CAAC,cAAc,EAAE,CAAC;UAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;UACpD,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;UAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;UAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;UACnB,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;OACF;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;MACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,WAAM,GAAG;MACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;MACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;oBAhFmE,OAAO;;;;;EAuC1E,QAAQ;IACN,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;IACtC,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;MACrC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;KACzC;IACD,IAAI,cAAc,GAAG,GAAG,EAAG;MACvB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;MACnC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;KAC3C;GACF;EAiCH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAU,CAAC;IAChE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IAErF,QACE,EAAC,IAAI,IACH,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,aAAa,EAAE,IAEzB,EAAC,OAAO,IACN,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,OAAO,GAAE,EACpB,eAAO,CACC,CACL,EACP;GACH;;;;;;;","names":[],"sources":["src/components/button-floating/button-floating.css?tag=road-button-floating&encapsulation=shadow","src/components/button-floating/button-floating.tsx"],"sourcesContent":["/*\n * Button floating\n *\n *\n * Index\n * - Button\n */\n\n\n/* BUTTON\n -------------------- */\n\n:host {\n position: fixed;\n right: 1rem;\n bottom: 1rem;\n z-index: 2;\n box-sizing: border-box;\n display: block;\n align-items: center;\n max-width: 3.5rem;\n height: 3.5rem;\n padding: 0.6rem 0.75rem 0.75rem;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-button-medium);\n font-weight: 700;\n line-height: 1.375;\n color: var(--road-on-button-fab);\n text-decoration: none;\n white-space: nowrap;\n background: var(--road-button-fab);\n border: 1px solid transparent;\n border-radius: 2rem;\n box-shadow: var(--road-elevation-average);\n transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n:host(.position-left) {\n right: auto;\n left: 1rem;\n}\n\n:host(.position-center) {\n right: 0;\n left: 0;\n margin: 0 auto;\n}\n\n:host(.scroll-up) {\n display: block;\n max-width: 3.5rem;\n}\n\n:host(.position-center.scroll-up) {\n display: flex;\n max-width: max-content;\n}\n\n\n:host(.scroll-down) .button-native{\n display: flex;\n}\n\n:host(.position-center.scroll-down) .button-native{\n display: flex;\n}\n\n:host(.position-center) .button-native{\n display: flex;\n}\n\n:host(.scroll-down) {\n display: flex;\n max-width: max-content;\n}\n\n\n\n:host ::slotted(road-icon) {\n margin-right: 0.5rem;\n color: var(--road-on-button-secondary);\n}\n\n\n:host(:hover) {\n background-color: var(--road-button-fab-variant);\n}\n\n:host(.focus-visible) {\n outline: 0;\n}\n\n/**\n * Native button\n */\n\n.button-native {\n position: relative;\n z-index: 1;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n color: inherit;\n text-align: inherit;\n text-decoration: none;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n letter-spacing: inherit;\n white-space: inherit;\n cursor: pointer;\n background: transparent;\n border: none;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n\n/* DISABLED\n -------------------- */\n\n:host([aria-disabled]) {\n pointer-events: none;\n opacity: 0.16;\n}\n\n.button-native:disabled {\n cursor: not-allowed;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h, Listen } from '@stencil/core';\n\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the button.\n * @slot start - Left content of the button text, usually for icon.\n *\n * @part native - The native HTML button or anchor element that wraps all child elements.\n */\n\n@Component({\n tag: 'road-button-floating',\n styleUrl: 'button-floating.css',\n shadow: true,\n})\nexport class Button {\n\n @Element() el!: HTMLRoadButtonElement;\n\n /**\n * position.\n */\n @Prop({ reflect: true }) position?: 'left' | 'center' | 'right' = 'right';\n\n\n /**\n * Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered.\n */\n @Prop() href?: string;\n\n /**\n * Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).\n */\n @Prop() rel?: string;\n\n /**\n * Specifies where to display the linked URL.\n * Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.\n */\n @Prop() target?: string;\n\n /**\n * Emitted when the button has focus.\n */\n @Event() roadfocus!: EventEmitter<void>;\n /** @internal */\n @Event() roadFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the button loses focus.\n */\n @Event() roadblur!: EventEmitter<void>;\n /** @internal */\n @Event() roadBlur!: EventEmitter<void>;\n\n\n @Listen('scroll', {target: 'window'})\n\n onScroll() {\n const positionScroll = window.scrollY;\n if (positionScroll < 300 ) {\n this.el.classList.add(\"scroll-down\");\n this.el.classList.remove(\"scroll-up\");\n }\n if (positionScroll > 300 ) {\n this.el.classList.add(\"scroll-up\");\n this.el.classList.remove(\"scroll-down\");\n }\n }\n\n\n\n\n private onClick = (ev: Event) => {\n if (this.el.shadowRoot && (this.el as any).attachShadow) {\n // this button wants to specifically submit a form\n // climb up the dom to see if we're in a <form>\n // and if so, then use JS to submit it\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n };\n\n private onFocus = () => {\n this.roadfocus.emit();\n this.roadFocus.emit();\n };\n\n private onBlur = () => {\n this.roadblur.emit();\n this.roadBlur.emit();\n };\n\n render() {\n const TagType = this.href === undefined ? 'button' : 'a' as any;\n const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n\n return (\n <Host\n onClick={this.onClick}\n class={`${positionClass}`}\n >\n <TagType\n class=\"button-native\"\n part=\"native\"\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <slot name=\"start\"/>\n <slot/>\n </TagType>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-52302079.js';
|
|
2
|
+
|
|
3
|
+
const contentCardCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;align-items:flex-start;justify-content:center;width:100%;margin:0 0 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--road-surface);border:1px solid var(--road-outline-weak);border-radius:var(--road-spacing-02)}.content-card-image{width:-webkit-fill-available;padding:var(--road-spacing-05) var(--road-spacing-05) 0}.content-card-description{width:-webkit-fill-available;padding:var(--road-spacing-03) var(--road-spacing-05) var(--road-spacing-05)}.content-card-description-title{padding:var(--road-spacing-03) 0;margin:0;font-size:var(--road-font-size-16);font-weight:700;color:var(--road-on-surface)}.content-card-description-text{padding-bottom:var(--road-spacing-03);margin:0;font-size:var(--road-font-size-16)}.content-card-description-buttons{display:flex;flex-direction:column}@media (min-width: 768px){.content-card-image{padding:var(--road-spacing-06) var(--road-spacing-06) 0}.content-card-description{padding:var(--road-spacing-04) var(--road-spacing-06) var(--road-spacing-06)}.content-card-description-buttons{flex-direction:row}.content-card-description-buttons ::slotted(road-button){margin-right:var(--road-spacing-04)}.content-card-description-buttons ::slotted(road-button):last-child{margin-right:0}}";
|
|
4
|
+
|
|
5
|
+
const ContentCard = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.insetImage = false;
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
const insetImageClass = this.insetImage ? '' : 'content-card-image';
|
|
12
|
+
return (h(Host, null, h("road-img", { src: "https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png", alt: "loi montagne", class: insetImageClass }), h("div", { class: "content-card-description" }, h("road-label", { class: "content-card-description-title" }, h("slot", { name: "label" })), h("p", { class: "content-card-description-text" }, h("slot", { name: "description" })), h("div", { class: "content-card-description-buttons" }, h("slot", null)))));
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
ContentCard.style = contentCardCss;
|
|
16
|
+
|
|
17
|
+
export { ContentCard as road_content_card };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=road-content-card.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"road-content-card.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+yCAA+yC;;MCczzC,WAAW;;;sBAKY,KAAK;;EAGvC,MAAM;IAEJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,oBAAoB,CAAC;IAEpE,QACE,EAAC,IAAI,QACH,gBAAU,GAAG,EAAC,8EAA8E,EAAC,GAAG,EAAC,cAAc,EAAC,KAAK,EAAE,eAAe,GAAa,EACnJ,WAAK,KAAK,EAAC,0BAA0B,IACnC,kBAAY,KAAK,EAAC,gCAAgC,IAChD,YAAM,IAAI,EAAC,OAAO,GAAE,CACT,EACb,SAAG,KAAK,EAAC,+BAA+B,IACtC,YAAM,IAAI,EAAC,aAAa,GAAE,CACxB,EACJ,WAAK,KAAK,EAAC,kCAAkC,IAC3C,eAAQ,CACJ,CACF,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/content-card/content-card.css?tag=road-content-card&encapsulation=shadow","src/components/content-card/content-card.tsx"],"sourcesContent":["/*\n * ContentCard\n *\n * Index\n * - Card\n */\n\n/* ContentCARD\n -------------------- */\n\n:host {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n margin: 0 0 1rem;\n cursor: pointer;\n user-select: none;\n background: var(--road-surface);\n border: 1px solid var(--road-outline-weak);\n border-radius: var(--road-spacing-02);\n}\n\n\n.content-card-image{\n width: -webkit-fill-available;\n padding: var(--road-spacing-05) var(--road-spacing-05) 0;\n}\n\n\n.content-card-description {\n width: -webkit-fill-available;\n padding: var(--road-spacing-03) var(--road-spacing-05) var(--road-spacing-05);\n}\n\n.content-card-description-title {\n padding: var(--road-spacing-03) 0;\n margin: 0;\n font-size: var(--road-font-size-16);\n font-weight: 700;\n color: var(--road-on-surface);\n}\n\n.content-card-description-text {\n padding-bottom: var(--road-spacing-03);\n margin: 0;\n font-size: var(--road-font-size-16);\n}\n\n.content-card-description-buttons {\n display: flex;\n flex-direction: column;\n}\n\n\n@media (min-width: 768px) {\n\n .content-card-image{\n padding: var(--road-spacing-06) var(--road-spacing-06) 0;\n }\n\n .content-card-description {\n padding: var(--road-spacing-04) var(--road-spacing-06) var(--road-spacing-06);\n }\n\n .content-card-description-buttons{\n flex-direction: row;\n }\n\n .content-card-description-buttons ::slotted(road-button){\n margin-right: var(--road-spacing-04);\n }\n\n .content-card-description-buttons ::slotted(road-button):last-child{\n margin-right: 0;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n* @slot label - Content of the title.\n* @slot description - Content of the description.\n* @slot - Content buttons sections - Minimum 1 button 2 max\n\n*/\n\n@Component({\n tag: 'road-content-card',\n styleUrl: 'content-card.css',\n shadow: true,\n})\nexport class ContentCard {\n\n /**\n * Set to `true` to add padding around img.\n */\n @Prop() insetImage : boolean = false;\n\n\n render() {\n\n const insetImageClass = this.insetImage ? '' : 'content-card-image';\n\n return (\n <Host>\n <road-img src=\"https://s1.medias-norauto.fr/visuals/desktop/fr/banners/blog_loimontagne.png\" alt=\"loi montagne\" class={insetImageClass}></road-img>\n <div class=\"content-card-description\">\n <road-label class=\"content-card-description-title\">\n <slot name=\"label\"/>\n </road-label>\n <p class=\"content-card-description-text\">\n <slot name=\"description\"/>\n </p>\n <div class=\"content-card-description-buttons\">\n <slot />\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-52302079.js';
|
|
2
2
|
|
|
3
|
-
const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:
|
|
3
|
+
const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;outline:none}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;cursor:pointer;border-radius:0.25rem}.dropdown-medium-button{width:2.5rem;height:2.5rem}.dropdown-button:hover{background:var(--road-grey-200)}.position-right{display:flex;justify-content:flex-end}.bg-white{background:var(--road-grey-000)}.dropdown-button-icon{width:2.5rem;height:2.5rem}.dropdown-medium-button .dropdown-button-icon{width:1.75rem;height:1.75rem}.dropdown[open] .dropdown-menu{transform:scaleY(1)}.dropdown[open] .dropdown-menu.direction-top{position:absolute;bottom:0;left:0;transform:translate3d(0, -56px, 0);will-change:transform}.dropdown-menu{position:absolute;z-index:1;display:flex;flex-direction:column;width:100%;min-width:16.875rem;padding:0.5rem 0;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;box-shadow:var(--road-elevation-low);transition:transform 0.2s ease-in-out;transform:scaleY(0);transform-origin:0 0}.dropdown-left{left:0}.dropdown-right{right:0}.dropdown-item{min-height:40px;padding:0 1rem;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);text-align:left;text-decoration:none;cursor:pointer;background:var(--road-surface);border:none;outline:none}.dropdown-item-border{border-color:var(--road-outline-weak);border-bottom:1px solid}.dropdown-item:hover,.dropdown-item.focus-visible{background:var(--road-surface-inverse)}";
|
|
4
4
|
|
|
5
5
|
const Dropdown = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -21,8 +21,9 @@ const Dropdown = class {
|
|
|
21
21
|
const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';
|
|
22
22
|
const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';
|
|
23
23
|
const positionClass = this.position !== undefined ? `position-${this.position}` : '';
|
|
24
|
+
const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';
|
|
24
25
|
const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';
|
|
25
|
-
return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass}` }, h("slot", { name: "list" }))));
|
|
26
|
+
return (h("details", { class: "dropdown", open: this.isOpen }, h("summary", { "aria-expanded": `${this.isOpen}`, tabindex: "0", role: "button", onClick: this.onClick }, h("div", { class: `d-flex ${positionClass}` }, h("div", { class: `${isLightButtonDropDown} ${isMediumButtonDropDown}` }, h("road-icon", { name: "navigation-more", class: "dropdown-button-icon" })))), h("div", { class: `dropdown-menu ${directionClass} ${dropdownClass}` }, h("slot", { name: "list" }))));
|
|
26
27
|
}
|
|
27
28
|
};
|
|
28
29
|
Dropdown.style = dropdownCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-dropdown.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,
|
|
1
|
+
{"file":"road-dropdown.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,2qDAA2qD;;MCalrD,QAAQ;;;;;;IA8BX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBA3B0C,KAAK;mBAKnB,KAAK;oBAKJ,KAAK;;qBAUsB,QAAQ;;EASlE,MAAM;IAEJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,GAAG,iBAAiB,GAAG,0BAA0B,CAAC;IACpG,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,GAAG,wCAAwC,GAAG,0BAA0B,CAAC;IAC7H,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACrF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACrF,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAGzF,QACE,eAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzC,gCAAwB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxF,WAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnC,WAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9D,iBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,GAAa,CACvE,CACF,CACE,EACV,WAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5D,YAAM,IAAI,EAAC,MAAM,GAAE,CACf,CACE,EACV;GACH;;;;;;","names":[],"sources":["src/components/dropdown/dropdown.css?tag=road-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * Dropdown\n *\n * Index\n * - Dropdown\n * - Dropdown menu\n */\n\n/**\n * @prop --margin-top: Top margin of the menu\n */\n\n/* DROPDOWN\n -------------------- */\n\n:host {\n --margin-top: 0.5rem;\n display: block;\n}\n\n.dropdown {\n position: relative;\n font-family: var(--road-font);\n}\n\n.dropdown summary {\n display: block;\n outline: none;\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n display: none;\n}\n\n.dropdown-button{\n position: relative;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3.5rem;\n height: 3.5rem;\n cursor: pointer;\n border-radius: 0.25rem;\n}\n\n.dropdown-medium-button{\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.dropdown-button:hover{\n background: var(--road-grey-200);\n}\n\n.position-right{\n display: flex;\n justify-content: flex-end;\n}\n\n.bg-white{\n background: var(--road-grey-000);\n}\n\n.dropdown-button-icon{\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.dropdown-medium-button .dropdown-button-icon{\n width: 1.75rem;\n height: 1.75rem;\n}\n\n/**\n * Open state\n */\n\n.dropdown[open] .dropdown-menu {\n transform: scaleY(1);\n}\n\n.dropdown[open] .dropdown-menu.direction-top {\n position: absolute;\n bottom: 0;\n left: 0;\n transform: translate3d(0, -56px, 0);\n will-change: transform;\n}\n\n/* MENU\n -------------------- */\n\n.dropdown-menu {\n position: absolute;\n z-index: 1;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-width: 16.875rem;\n padding: 0.5rem 0;\n color: var(--road-on-surface);\n background: var(--road-surface);\n border: 1px solid;\n border-color: var(--road-outline-weak);\n border-radius: 0.25rem;\n box-shadow: var(--road-elevation-low);\n transition: transform 0.2s ease-in-out;\n transform: scaleY(0);\n transform-origin: 0 0;\n}\n\n.dropdown-left {\n left: 0;\n}\n\n.dropdown-right {\n right: 0;\n}\n\n\n/* ITEM\n -------------------- */\n\n.dropdown-item {\n min-height: 40px;\n padding: 0 1rem;\n font-size: var(--road-body-medium);\n line-height: 1.5;\n color: var(--road-on-surface);\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n background: var(--road-surface);\n border: none;\n outline: none;\n}\n\n.dropdown-item-border {\n border-color: var(--road-outline-weak);\n border-bottom: 1px solid;\n}\n\n/**\n * Hover state\n */\n\n.dropdown-item:hover,\n.dropdown-item.focus-visible {\n background: var(--road-surface-inverse);\n}\n\n\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @slot - Element how will open the dropdown when clicked\n * @slot list - List of item values (you can add border with lines=`full` but not on the last item)\n)\n */\n\n@Component({\n tag: 'road-dropdown',\n styleUrl: 'dropdown.css',\n shadow: true,\n})\nexport class Dropdown {\n\n /**\n * Set to `true` to open the dropdown menu and to `false` to close it.\n */\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /**\n * If you want to remove background of the dropdown button\n */\n @Prop() isLight : boolean = false;\n \n /**\n * If you want a medium dropdown\n */\n @Prop() isMedium : boolean = false;\n\n /**\n * The button position.\n */\n @Prop({ reflect: true }) position?: 'left' | 'right';\n\n /**\n * The opening direction.\n */\n @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n /**\n * Toggle the display when clicking element in slot\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const isLightButtonDropDown = this.isLight == true ? `dropdown-button` : 'dropdown-button bg-white';\n const isMediumButtonDropDown = this.isMedium == true ? `dropdown-medium-button dropdown-button` : 'dropdown-button bg-white';\n const positionClass = this.position !== undefined ? `position-${this.position}` : '';\n const dropdownClass = this.position !== undefined ? `dropdown-${this.position}` : '';\n const directionClass = this.direction !== undefined ? `direction-${this.direction}` : '';\n\n\n return (\n <details class=\"dropdown\" open={this.isOpen}>\n <summary aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={`d-flex ${positionClass}`}>\n <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\"></road-icon>\n </div>\n </div>\n </summary>\n <div class={`dropdown-menu ${directionClass} ${dropdownClass}`}>\n <slot name=\"list\"/>\n </div>\n </details>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1193,7 +1193,7 @@ i18n.phonenumbers.AsYouTypeFormatter.prototype.inputDigitHelper_=function(a){var
|
|
|
1193
1193
|
});
|
|
1194
1194
|
});
|
|
1195
1195
|
|
|
1196
|
-
const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0
|
|
1196
|
+
const phoneNumberInputCss = ".sc-road-phone-number-input-h #phone-number.sc-road-phone-number-input .invalid-feedback.sc-road-input.sc-road-phone-number-input{margin-left:-4.5rem}.is-invalid.sc-road-phone-number-input .form-control.sc-road-input.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.road-phone-input-select.sc-road-phone-number-input{position:relative;display:block;margin-bottom:1rem;font-family:var(--road-font, sans-serif);color:var(--road-on-surface);background-color:var(--road-surface);border:1px solid var(--road-input-outline);border-radius:0.25rem;border-top-right-radius:0;border-bottom-right-radius:0;box-shadow:none;-webkit-appearance:none;appearance:none;width:5rem;height:3.5rem}.sc-road-phone-number-input-h .is-error.sc-road-phone-number-input{border-color:var(--road-danger-outline)}.form-select-area.sc-road-phone-number-input{box-sizing:border-box;display:block;width:100%;height:3rem;padding:0.75rem 3rem 0 2rem;margin:0;font-size:var(--road-body-medium);line-height:1.5;color:var(--road-on-surface);background:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0icmdiYSgyMywgMzAsIDUyLCAwLjcyKSI+PHBhdGggZD0iTTIzIDI2bDkgMTIgOS0xMnoiLz48L3N2Zz4=\") no-repeat right -5px center/2.5rem 2rem;position:absolute;top:0;left:0;height:100%;width:95%;z-index:1;border:0;-webkit-appearance:none;appearance:none;opacity:1;cursor:pointer}.form-select-area.sc-road-phone-number-input:-moz-focusring{color:transparent;text-shadow:0 0 0 #000000}.form-select-area.sc-road-phone-number-input::-ms-expand{display:none}.form-select-area.sc-road-phone-number-input::placeholder{color:var(--road-on-surface-extra-weak)}@media (hover: hover){.form-select-area.sc-road-phone-number-input:not(:disabled):hover{border-color:var(--road-input-outline-variant)}}.form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.625) translateY(-0.625rem)}.form-select-area.sc-road-phone-number-input:not(:disabled):focus{border-color:var(--road-input-outline-variant);outline:0}.form-select-area.sc-road-phone-number-input:disabled,.form-select-area[readonly].sc-road-phone-number-input{color:transparent;cursor:not-allowed;background:var(--road-surface-disabled);opacity:1}.form-select-area-label.sc-road-phone-number-input{position:absolute;top:0.9rem;left:1rem;display:block;font-size:var(--road-font-size-18);line-height:1.5;color:var(--road-on-surface-extra-weak);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.form-select-area.sc-road-phone-number-input:required~.form-select-area-label.sc-road-phone-number-input::after{color:var(--road-on-danger-surface);content:\" *\"}.form-select-area-value.sc-road-phone-number-input{position:absolute;top:1.4rem;left:1rem;display:block;font-size:var(--road-label-medium);line-height:1.5;color:var(--road-on-surface);pointer-events:none;transition:transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transform-origin:0 0}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input{height:3.5rem;padding:0.75rem 0 0 1rem}.select-xl.sc-road-phone-number-input-h .form-select-area-label.sc-road-phone-number-input{top:1rem}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:focus~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[required].sc-road-phone-number-input:valid~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area.has-value.sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"date\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input,.select-xl.sc-road-phone-number-input-h .form-select-area[type=\"time\"].sc-road-phone-number-input~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.select-xl.sc-road-phone-number-input-h .form-select-area.sc-road-phone-number-input:placeholder-shown~.form-select-area-label.sc-road-phone-number-input{transform:scale(0.75) translateY(-0.625rem)}.invalid-feedback.sc-road-phone-number-input{display:none;width:100%;margin-top:0.5rem;font-size:var(--road-body-small);color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid{border-color:var(--road-on-danger-surface)}.form-select-area.is-invalid.sc-road-phone-number-input~.invalid-feedback.sc-road-phone-number-input,.was-validated.sc-road-phone-number-input .form-select-area.sc-road-phone-number-input:invalid~.invalid-feedback.sc-road-phone-number-input{display:block}.form-select-area.sc-road-phone-number-input option.sc-road-phone-number-input:checked::after{position:absolute;top:0;left:0;content:attr(data-content)}.form-select-area.sc-road-phone-number-input::after{position:absolute;top:0;left:0;content:var(--selected-content, '')}";
|
|
1197
1197
|
|
|
1198
1198
|
let selectIds = 0;
|
|
1199
1199
|
const RoadPhoneNumberInput = class {
|