@roadtrip/components 3.20.2 → 3.20.3
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-fb57f684.js.map +1 -1
- package/dist/cjs/road-accordion.cjs.entry.js +1 -1
- package/dist/cjs/road-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/road-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/road-dropdown.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordion.css +5 -0
- package/dist/collection/components/dropdown/dropdown.css +2 -2
- package/dist/collection/components/icon/svg/call-center-solid.svg +1 -1
- package/dist/collection/components/icon/svg/garage-solid.svg +1 -1
- package/dist/collection/components/icon/svg/vehicle-5-doors-hatchback-color.svg +1 -1
- package/dist/esm/index-7a0158a4.js.map +1 -1
- package/dist/esm/road-accordion.entry.js +1 -1
- package/dist/esm/road-accordion.entry.js.map +1 -1
- package/dist/esm/road-dropdown.entry.js +1 -1
- package/dist/esm/road-dropdown.entry.js.map +1 -1
- package/dist/icons/icons.svg +1 -1
- package/dist/icons/index.js +3 -3
- package/dist/roadtrip/p-ac7a8bca.js.map +1 -1
- package/dist/roadtrip/p-ba1249d7.entry.js +2 -0
- package/dist/roadtrip/p-ba1249d7.entry.js.map +1 -0
- package/dist/roadtrip/p-cfa6e719.entry.js +2 -0
- package/dist/roadtrip/p-cfa6e719.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/dist/roadtrip/svg/call-center-solid.svg +1 -1
- package/dist/roadtrip/svg/garage-solid.svg +1 -1
- package/dist/roadtrip/svg/vehicle-5-doors-hatchback-color.svg +1 -1
- package/hydrate/index.d.ts +31 -13
- package/hydrate/index.js +44763 -33523
- package/hydrate/index.mjs +49852 -0
- package/hydrate/package.json +7 -1
- package/icons/icons.svg +1 -1
- package/icons/index.js +3 -3
- package/package.json +1 -1
- package/dist/roadtrip/p-17ae87b0.entry.js +0 -2
- package/dist/roadtrip/p-17ae87b0.entry.js.map +0 -1
- package/dist/roadtrip/p-cdefa79c.entry.js +0 -2
- package/dist/roadtrip/p-cdefa79c.entry.js.map +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-12592729.js');
|
|
|
6
6
|
const index$1 = require('./index-fb57f684.js');
|
|
7
7
|
require('./polyfill-b1fff766.js');
|
|
8
8
|
|
|
9
|
-
const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 1rem 0.75rem;--content-padding:0.75rem 0 0;--header-padding:0.75rem 1rem;--icon-color:var(--road-icon);--max-height:none;display:block;margin-bottom:1rem}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{padding:0.75rem 0;margin:0 1rem 0.75rem}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
|
|
9
|
+
const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 1rem 0.75rem;--content-padding:0.75rem 0 0;--header-padding:0.75rem 1rem;--icon-color:var(--road-icon);--max-height:none;display:block;margin-bottom:1rem}:host(.focus-visible){border:1px solid var(--road-primary)}.accordion{--max-height:none;overflow:hidden;font-family:var(--road-font, sans-serif);font-size:var(--road-body-small);line-height:1.5;color:var(--road-on-surface);background:var(--road-surface);border:1px solid;border-color:var(--road-outline-weak);border-radius:0.25rem;transition:max-height 0.3s ease-in-out}.accordion.accordion-light{background:none;border:0}.accordion[open]{max-height:var(--max-height)}.accordion[open] .accordion-arrow{transform:rotate(-90deg)}.accordion[open] .accordion-content{padding:var(--content-padding);margin:var(--content-margin)}.accordion-light[open] .accordion-light-content{padding:0.75rem 0;margin:0 1rem 0.75rem}.accordion-light[open] .accordion-light-header::after{display:none}.accordion-trigger{box-sizing:border-box;display:block;border:1px solid transparent;border-radius:0.25rem;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.accordion-light .accordion-trigger:active{background:none}.accordion-trigger::-webkit-details-marker{display:none}.accordion-trigger.focus-visible{border-color:var(--road-primary)}.accordion-trigger:active{background:var(--road-surface-inverse)}.accordion-header{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--header-padding);font-size:var(--road-body-medium);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none}.accordion-light-header{position:relative;font-size:var(--road-body-large)}.accordion-light--small .accordion-light-header{font-size:var(--road-body-medium)}.accordion-light--border .accordion-light-header::after{position:absolute;bottom:1px;width:98.3%;height:1px;content:\"\";background:var(--road-outline-weak)}.accordion-arrow{margin-left:auto;color:var(--icon-color);transform:rotate(90deg)}.accordion-light--small .accordion-arrow{width:1.5rem;height:1.5rem}::slotted([slot=\"header\"]){display:flex;align-items:center}:host(.accordion-icon-left){width:1.5rem;height:1.5rem;margin-right:1rem}.accordion-content{padding:0 0.5rem;margin:0 1rem;overflow:hidden;font-size:var(--road-body-medium);border-top:var(--accordion-header-border) solid var(--road-outline-weak)}.accordion-light-content{border-top:1px solid var(--road-outline-weak)}.accordion-light--border .accordion-light-content{border-top:1px solid var(--road-outline-weak);border-bottom:1px solid var(--road-outline-weak)}";
|
|
10
10
|
|
|
11
11
|
const Accordion = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-accordion.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"road-accordion.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,2jFAA2jF;;MCiBnkF,SAAS;;;;;;IAyBZ,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBAtB0C,KAAK;mBAKpB,KAAK;4BAKK,KAAK;mBAKd,KAAK;;EASnC,MAAM;IAEJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,2BAA2B,GAAG,WAAW,CAAC;IAChF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,GAAG,yCAAyC,GAAG,kBAAkB,CAAC;IAC3G,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,2CAA2C,GAAG,mBAAmB,CAAC;IAC/G,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,GAAG,mDAAmD,GAAG,WAAW,CAAC;IAC1H,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,kDAAkD,GAAG,WAAW,CAAC;IACvG,QACEA,qBAAS,KAAK,EAAE,GAAG,cAAc,IAAI,cAAc,IAAI,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,IACjGA,qBAAS,KAAK,EAAC,mBAAmB,mBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IAClHA,iBAAK,KAAK,EAAE,oBAAoB,IAC9BA,kBAAM,IAAI,EAAC,WAAW,GAAE,EACxBA,kBAAM,IAAI,EAAC,QAAQ,GAAE,EACrBA,uBAAW,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAEC,yBAAiB,GAAc,CACpE,CACE,EACVD,iBAAK,KAAK,EAAE,qBAAqB,IAC/BA,qBAAO,CACH,CACE,EACV;GACH;;;;;;","names":["h","navigationChevron"],"sources":["src/components/accordion/accordion.css?tag=road-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"sourcesContent":["/*\n * Accordion\n *\n * For accessibility, we provide a style for focus only on Tab.\n * For enable this focus, load the javascript polyfill for focus-visible\n * (https://github.com/WICG/focus-visible).\n *\n * Index\n * - Accordion\n * - Button\n * - Content\n */\n\n/**\n * @prop --accordion-header-border: height of the border of the header\n * @prop --content-margin: margin of the accordion content\n * @prop --content-padding: padding of the accordion content\n * @prop --header-padding: padding of the accordion header\n * @prop --icon-color: color of the chevron icon\n * @prop --max-height: maximum height of the collapse content\n */\n\n:host {\n --accordion-header-border: 1px;\n --content-margin: 0 1rem 0.75rem;\n --content-padding: 0.75rem 0 0;\n --header-padding: 0.75rem 1rem;\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\n margin-bottom: 1rem;\n}\n\n:host(.focus-visible){\n border: 1px solid var(--road-primary);\n}\n\n/* ACCORDION\n -------------------- */\n\n.accordion {\n --max-height: none;\n overflow: hidden;\n font-family: var(--road-font, sans-serif);\n font-size: var(--road-body-small);\n line-height: 1.5;\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 transition: max-height 0.3s ease-in-out;\n}\n\n.accordion.accordion-light {\n background: none;\n border: 0;\n}\n\n/**\n * Open state\n */\n\n.accordion[open] {\n max-height: var(--max-height);\n}\n\n.accordion[open] .accordion-arrow {\n transform: rotate(-90deg);\n}\n\n.accordion[open] .accordion-content {\n padding: var(--content-padding);\n margin: var(--content-margin);\n}\n\n.accordion-light[open] .accordion-light-content {\n padding: 0.75rem 0;\n margin: 0 1rem 0.75rem;\n}\n\n.accordion-light[open] .accordion-light-header::after {\n display: none;\n}\n\n/* BUTTON\n -------------------- */\n\n.accordion-trigger {\n box-sizing: border-box;\n display: block;\n border: 1px solid transparent;\n border-radius: 0.25rem;\n outline: 0;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.accordion-light .accordion-trigger:active{\n background: none;\n}\n\n.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */\n display: none;\n}\n\n/**\n * Focus on Tab\n */\n\n.accordion-trigger.focus-visible {\n border-color: var(--road-primary);\n}\n\n/**\n * Active state\n */\n\n.accordion-trigger:active {\n background: var(--road-surface-inverse);\n}\n\n/**\n * .accordion-header is an additionnal div\n * because Safari doesn't support flexbox on <summary> element\n */\n\n.accordion-header {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: var(--header-padding);\n font-size: var(--road-body-medium);\n font-weight: 700;\n cursor: pointer;\n user-select: none;\n}\n\n.accordion-light-header {\n position: relative;\n font-size: var(--road-body-large);\n}\n\n.accordion-light--small .accordion-light-header {\n font-size: var(--road-body-medium);\n}\n\n.accordion-light--border .accordion-light-header::after {\n position: absolute;\n bottom: 1px;\n width: 98.3%;\n height: 1px;\n content: \"\";\n background: var(--road-outline-weak);\n}\n\n/**\n * Custom arrow\n */\n\n.accordion-arrow {\n margin-left: auto;\n color: var(--icon-color);\n transform: rotate(90deg);\n}\n\n.accordion-light--small .accordion-arrow {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n::slotted([slot=\"header\"]){\n display: flex;\n align-items: center;\n}\n\n:host(.accordion-icon-left){\n width: 1.5rem;\n height: 1.5rem;\n margin-right: 1rem;\n}\n\n/* CONTENT\n -------------------- */\n\n.accordion-content {\n padding: 0 0.5rem;\n margin: 0 1rem;\n overflow: hidden;\n font-size: var(--road-body-medium);\n border-top: var(--accordion-header-border) solid var(--road-outline-weak);\n}\n\n.accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n}\n\n.accordion-light--border .accordion-light-content {\n border-top: 1px solid var(--road-outline-weak);\n border-bottom: 1px solid var(--road-outline-weak);\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { navigationChevron } from '../../../icons';\nimport './../../utils/polyfill';\n\n/**\n * @slot header - Content of the header.\n * @slot - Content hidden in the accordion.\n * @slot icon-left - Icon of the alert, it should be a road-icon element.\n * `<road-icon name=\"alert-info-outline\" class=\"mr-16\"></road-icon>`\n\n */\n\n@Component({\n tag: 'road-accordion',\n styleUrl: 'accordion.css',\n shadow: true,\n})\nexport class Accordion {\n\n /**\n * Set to `true` to open the accordion and to `false` to close it.\n */\n @Prop({ mutable: true }) isOpen : boolean = false;\n\n /**\n * Set to `true` to remove border the accordion and to `false` to add border it.\n */\n @Prop() isLight : boolean = false;\n\n /**\n * Set to `true` to add a border in the header and the content only for the light accordion.\n */\n @Prop() isLightSeparator : boolean = false;\n\n /**\n * Set to `true` to add the small version only for the light accordion.\n */\n @Prop() isSmall : boolean = false;\n\n /**\n * Toggle the display when clicking header\n */\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n render() {\n\n const accordionLight = this.isLight ? 'accordion accordion-light' : 'accordion';\n const accordionLightHeader = this.isLight ? 'accordion-header accordion-light-header' : 'accordion-header';\n const accordionLightContent = this.isLight ? 'accordion-content accordion-light-content' : 'accordion-content';\n const accordionLightSeparator = this.isLightSeparator ? 'accordion accordion-light accordion-light--border' : 'accordion';\n const accordionSmall = this.isSmall ? 'accordion accordion-light accordion-light--small' : 'accordion';\n return (\n <details class={`${accordionLight} ${accordionSmall} ${accordionLightSeparator}`} open={this.isOpen}>\n <summary class=\"accordion-trigger\" aria-expanded={`${this.isOpen}`} tabindex=\"0\" role=\"button\" onClick={this.onClick}>\n <div class={accordionLightHeader}>\n <slot name=\"icon-left\"/>\n <slot name=\"header\"/>\n <road-icon class=\"accordion-arrow\" icon={navigationChevron}></road-icon>\n </div>\n </summary>\n <div class={accordionLightContent}>\n <slot/>\n </div>\n </details>\n );\n }\n}"],"version":3}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
|
|
7
|
-
const dropdownCss = ":host{--margin-top:0.5rem;display:block}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;
|
|
7
|
+
const dropdownCss = ":host{--margin-top:0.5rem;display:block;width:max-content}.dropdown{position:relative;font-family:var(--road-font)}.dropdown summary{display:block;background-color:var(--road-surface);border-radius:0.25rem;outline:none}.dropdown summary:focus,.dropdown summary.focus-visible,.dropdown summary:focus-within{background:var(--road-surface-inverse)}.dropdown summary::-webkit-details-marker{display:none}.dropdown-button{position:relative;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}.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:auto;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)}";
|
|
8
8
|
|
|
9
9
|
const Dropdown = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,
|
|
1
|
+
{"file":"road-dropdown.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,wzDAAwzD;;MCO/zD,QAAQ;;;IAWX,YAAO,GAAG;MAChB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;kBARyC,KAAK;mBACrB,KAAK;oBACJ,KAAK;;qBAEuB,QAAQ;;EAOhE,mBAAmB,CAAC,EAAc;;IAEhC,IAAK,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;MACnE,OAAO;KACR;;IAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;GACrB;EAED,MAAM;IACJ,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;IACnF,MAAM,sBAAsB,GAAG,IAAI,CAAC,QAAQ,GAAG,wCAAwC,GAAG,iBAAiB,CAAC;IAC5G,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAY,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC;IACvE,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC;IAE3E,QACEA,qBAAS,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,IACzCA,sCAAwB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,eAAY,GAAG,IAC7GA,iBAAK,KAAK,EAAE,UAAU,aAAa,EAAE,IACnCA,iBAAK,KAAK,EAAE,GAAG,qBAAqB,IAAI,sBAAsB,EAAE,IAC9DA,uBAAW,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,sBAAsB,iBAAa,MAAM,GAAa,CAC1F,CACF,CACE,EACVA,iBAAK,KAAK,EAAE,iBAAiB,cAAc,IAAI,aAAa,EAAE,IAC5DA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACE,EACV;GACH;;;;;;;","names":["h"],"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 width: max-content;\n}\n\n.dropdown {\n position: relative;\n font-family: var(--road-font);\n}\n\n.dropdown summary {\n display: block;\n background-color: var(--road-surface);\n border-radius: 0.25rem;\n outline: none;\n}\n\n.dropdown summary:focus,\n.dropdown summary.focus-visible,\n.dropdown summary:focus-within{\n background: var(--road-surface-inverse);\n}\n\n.dropdown summary::-webkit-details-marker { /* remove native arrow */\n display: none;\n}\n\n.dropdown-button{\n position: relative;\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.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: auto;\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, Element, Prop, Listen } from '@stencil/core';\n\n@Component({\n tag: 'road-dropdown',\n styleUrl: 'dropdown.css',\n shadow: true,\n})\nexport class Dropdown {\n\n @Element() el!: HTMLRoadDropdownElement;\n\n\n @Prop({ mutable: true }) isOpen: boolean = false;\n @Prop() isLight: boolean = false;\n @Prop() isMedium: boolean = false;\n @Prop({ reflect: true }) position?: 'left' | 'right';\n @Prop({ reflect: true }) direction?: 'top' | 'bottom' = 'bottom';\n\n private onClick = () => {\n this.isOpen = !this.isOpen;\n };\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(ev: MouseEvent) {\n // Check if the clicked element is the dropdown button\n if ((ev.target as HTMLElement).closest('road-dropdown') === this.el) {\n return; // Do nothing if clicked element is the dropdown button\n }\n // Close dropdown if click is outside the dropdown\n this.isOpen = false;\n }\n\n render() {\n const isLightButtonDropDown = this.isLight ? 'dropdown-button' : 'dropdown-button';\n const isMediumButtonDropDown = this.isMedium ? 'dropdown-medium-button dropdown-button' : 'dropdown-button';\n const positionClass = this.position ? `position-${this.position}` : '';\n const dropdownClass = this.position ? `dropdown-${this.position}` : '';\n const directionClass = this.direction ? `direction-${this.direction}` : '';\n\n return (\n <details class=\"dropdown\" open={this.isOpen}>\n <summary aria-expanded={this.isOpen.toString()} tabindex=\"0\" role=\"button\" onClick={this.onClick} tab-index=\"0\">\n <div class={`d-flex ${positionClass}`}>\n <div class={`${isLightButtonDropDown} ${isMediumButtonDropDown}`}>\n <road-icon name=\"navigation-more\" class=\"dropdown-button-icon\" aria-hidden=\"true\"></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"],"version":3}
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.accordion.accordion-light {
|
|
57
|
+
background: none;
|
|
57
58
|
border: 0;
|
|
58
59
|
}
|
|
59
60
|
|
|
@@ -95,6 +96,10 @@
|
|
|
95
96
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
96
97
|
}
|
|
97
98
|
|
|
99
|
+
.accordion-light .accordion-trigger:active{
|
|
100
|
+
background: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
98
103
|
.accordion-trigger::-webkit-details-marker { /* Remove chrome native arrow */
|
|
99
104
|
display: none;
|
|
100
105
|
}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
:host {
|
|
17
17
|
--margin-top: 0.5rem;
|
|
18
18
|
display: block;
|
|
19
|
+
width: max-content;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
.dropdown {
|
|
@@ -25,7 +26,6 @@
|
|
|
25
26
|
|
|
26
27
|
.dropdown summary {
|
|
27
28
|
display: block;
|
|
28
|
-
width: max-content;
|
|
29
29
|
background-color: var(--road-surface);
|
|
30
30
|
border-radius: 0.25rem;
|
|
31
31
|
outline: none;
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
.dropdown[open] .dropdown-menu.direction-top {
|
|
88
88
|
position: absolute;
|
|
89
89
|
bottom: 0;
|
|
90
|
-
left:
|
|
90
|
+
left: auto;
|
|
91
91
|
transform: translate3d(0, -56px, 0);
|
|
92
92
|
will-change: transform;
|
|
93
93
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M14.25 24.448V42.25H8.402c-2.133 0-3.652-1.882-3.652-3.917v-6.666c0-2.036 1.519-3.917 3.652-3.917h2.348v-3.31c0-4.915 2.454-9.917 6.301-13.667C20.91 7.01 26.265 4.41 32.21 4.41s11.3 2.6 15.159 6.363c3.847 3.75 6.301 8.752 6.301 13.667v3.31h1.928c2.133 0 3.652 1.881 3.652 3.917v6.666c0 2.035-1.519 3.917-3.652 3.917h-1.56c-.422 8.022-6.862 14.452-14.888 14.86a3.706 3.706 0 0 1-3.49 2.47h-3.67c-2.04 0-3.7-1.66-3.7-3.7s1.66-3.7 3.7-3.7h3.67a3.706 3.706 0 0 1 3.474 2.426c6.652-.394 11.983-5.71 12.4-12.356H49.75V24.448c0-3.78-1.935-7.834-5.186-10.967C41.324 10.361 36.876 8.25 32 8.25s-9.325 2.11-12.564 5.231c-3.25 3.133-5.186 7.187-5.186 10.967Z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M55.39 16.93h7.37v2.5h-2.27v35.04h-2.5V25.41H6.01v29.06h-2.5V19.43H1.24v-2.5h7.37v-7.4h46.78v7.4Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="m42.92 31.37 2.34 6.97h.84a1.25 1.25 0 0 1 0 2.5h-.48v8.72c0 .69-.56 1.25-1.25 1.25h-.25v1.94a1.25 1.25 0 0 1-2.5 0v-1.94H22.34v1.94a1.25 1.25 0 0 1-2.5 0v-1.94h-.25c-.69 0-1.25-.56-1.25-1.25v-8.72h-.48a1.25 1.25 0 0 1 0-2.5h.83l2.34-6.97a2.734 2.734 0 0 1 2.59-1.86h16.71c1.17 0 2.22.75 2.59 1.86Zm-19.31.64c-.1 0-.19.06-.22.16l-.01.01-2.07 6.17h21.3l-2.07-6.18a.225.225 0 0 0-.22-.16H23.61Zm2.84 12.64a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Zm14.54 0a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M45.63 10.35c0-4.69-3.81-8.5-8.5-8.5H26.77c-4.69 0-8.5 3.81-8.5 8.5v5.92l2.62 2.62c2.62-.64 7.83-.87 11.06-.87 3.23 0 8.44.24 11.06.87l2.62-2.62v-5.92Zm-2.5 6.02c-3.87-.82-10.34-.85-11.18-.85-.84 0-7.31.03-11.18.85v-6.02c0-3.31 2.69-6 6-6h10.36c3.31 0 6 2.69 6 6v6.02ZM18.27 53.71l2.5-2.14V35.11l-2.5 2.5v16.1ZM43.13 35.15v16.42l2.5 2.14V37.65l-2.5-2.5Z" /><path d="m43.13 35.09 1.73-1.73.77.77v-12.6l-2.62-2.62c-.47 1.9-2.23 4.62-3.92 6.38-1.58-.5-4.37-1.05-7.14-1.05-2.77 0-5.57.55-7.14 1.05-1.69-1.76-3.44-4.48-3.91-6.38l-2.62 2.62v12.55l.73-.73 1.77 1.77V24.21c.79 1.17 1.67 2.24 2.47 3.04v15.38c.04-.1.08-.2.12-.28l.54-1.12 1.13.53c.17.08.43.17.72.26v-14.4c1.31-.39 3.73-.88 6.21-.88s4.9.49 6.21.88v14.4c.29-.09.54-.18.72-.26l1.13-.53.54 1.12c.04.09.08.19.12.28V27.25c.8-.81 1.68-1.88 2.47-3.04v10.88h-.03Z" /><path d="M41.89 50.51c-.07-1.87-.43-6.23-1.35-8.17L40 41.22l-1.13.53c-.96.45-3.83 1.12-6.93 1.12-3.1 0-5.96-.67-6.93-1.12l-1.13-.53-.54 1.12c-.92 1.93-1.28 6.3-1.35 8.17l-3.74 3.21v.58c0 3.43 6.14 7.86 12.67 7.86h2.02c6.53 0 12.67-4.43 12.67-7.86v-.58l-3.74-3.21h.02Zm-16.62-6.03c1.67.48 4.17.89 6.68.89s5.01-.41 6.68-.89c.4 1.59.66 4.06.74 5.71-1.51.42-4.25.89-7.43.89-3.18 0-5.92-.47-7.43-.89.08-1.65.35-4.13.74-5.71h.02Zm7.69 15.17h-2.02c-5.46 0-9.33-3.26-10.05-4.89l2.64-2.26c1.67.5 4.79 1.08 8.42 1.08s6.75-.58 8.42-1.08l2.64 2.26c-.72 1.63-4.59 4.89-10.05 4.89ZM15.44 15.2a1.25 1.25 0 0 0 0 1.77l1.92 1.92-9.64 9.65 1.77 1.77L20.9 18.9l-3.69-3.69a1.25 1.25 0 0 0-1.77 0v-.01ZM56.19 28.54l-9.64-9.64 1.92-1.92c.49-.49.49-1.28 0-1.77a1.25 1.25 0 0 0-1.77 0l-3.69 3.69 11.41 11.41 1.77-1.77ZM7.79 44.58l1.76 1.77 11.22-11.24-1.76-1.77L7.79 44.58ZM44.87 33.357l-1.768 1.768 11.236 11.236 1.768-1.768L44.87 33.357Z" fill="var(--road-icon-variant, rgb(252, 183, 49))"/></svg>
|