@roadtrip/components 3.20.1 → 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/cjs/road-tabs.cjs.entry.js +14 -1
- package/dist/cjs/road-tabs.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/collection/components/tabs/tabs.js +14 -1
- package/dist/collection/components/tabs/tabs.js.map +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/esm/road-tabs.entry.js +14 -1
- package/dist/esm/road-tabs.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/p-f64453a3.entry.js +2 -0
- package/dist/roadtrip/p-f64453a3.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 +44764 -33511
- 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
- package/dist/roadtrip/p-db7cb1c8.entry.js +0 -2
- package/dist/roadtrip/p-db7cb1c8.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}
|
|
@@ -22,8 +22,21 @@ const Tabs = class {
|
|
|
22
22
|
}
|
|
23
23
|
async componentWillLoad() {
|
|
24
24
|
const tabs = this.tabs;
|
|
25
|
+
const tabBar = this.el.querySelector('road-tab-bar');
|
|
26
|
+
const selectedTabId = tabBar ? tabBar.getAttribute('selected-tab') : null;
|
|
25
27
|
if (tabs.length > 0) {
|
|
26
|
-
|
|
28
|
+
if (selectedTabId) {
|
|
29
|
+
const selectedTab = tabs.find(tab => tab.tab === selectedTabId);
|
|
30
|
+
if (selectedTab) {
|
|
31
|
+
await this.select(selectedTab);
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
await this.select(tabs[0]);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
await this.select(tabs[0]);
|
|
39
|
+
}
|
|
27
40
|
}
|
|
28
41
|
}
|
|
29
42
|
componentWillRender() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,wCAAwC;;MCW3C,IAAI;;;;;;;IAEP,kBAAa,GAAG,KAAK,CAAC;
|
|
1
|
+
{"file":"road-tabs.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/tabs/tabs.css?tag=road-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * Tabs\n *\n */\n\n:host {\n position: relative;\n display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n tag: 'road-tabs',\n styleUrl: 'tabs.css',\n shadow: true,\n})\nexport class Tabs {\n\n private transitioning = false;\n private leavingTab?: HTMLRoadTabElement;\n\n @Element() el!: HTMLRoadTabsElement;\n\n @State() selectedTab?: HTMLRoadTabElement;\n\n /**\n * Emitted when the navigation is about to transition to a new component.\n */\n @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n /** @internal */\n @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n /**\n * Emitted when the navigation has finished transitioning to a new component.\n */\n @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n /** @internal */\n @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n async componentWillLoad() {\n const tabs = this.tabs;\n const tabBar = this.el.querySelector('road-tab-bar');\n const selectedTabId = tabBar ? tabBar.getAttribute('selected-tab') : null;\n \n if (tabs.length > 0) {\n if (selectedTabId) {\n const selectedTab = tabs.find(tab => tab.tab === selectedTabId);\n if (selectedTab) {\n await this.select(selectedTab);\n } else {\n await this.select(tabs[0]);\n }\n } else {\n await this.select(tabs[0]);\n }\n }\n }\n\n componentWillRender() {\n const tabBar = this.el.querySelector('road-tab-bar');\n if (tabBar) {\n const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n tabBar.selectedTab = tab;\n }\n }\n\n /**\n * Select a tab by the value of its `tab` property or an element reference.\n *\n * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n */\n @Method()\n async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n const selectedTab = getTab(this.tabs, tab);\n if (!this.shouldSwitch(selectedTab)) {\n return false;\n }\n await this.setActive(selectedTab);\n this.tabSwitch();\n\n return true;\n }\n\n /**\n * Get a specific tab by the value of its `tab` property or an element reference.\n *\n * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n */\n @Method()\n async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n return getTab(this.tabs, tab);\n }\n\n /**\n * Get the currently selected tab.\n */\n @Method()\n getSelected(): Promise<string | undefined> {\n return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n }\n\n private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n if (this.transitioning) {\n return Promise.reject('transitioning already happening');\n }\n\n this.transitioning = true;\n this.leavingTab = this.selectedTab;\n this.selectedTab = selectedTab;\n this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n selectedTab.active = true;\n return Promise.resolve();\n }\n\n private tabSwitch() {\n const selectedTab = this.selectedTab;\n const leavingTab = this.leavingTab;\n\n this.leavingTab = undefined;\n this.transitioning = false;\n if (!selectedTab) {\n return;\n }\n\n if (leavingTab !== selectedTab) {\n if (leavingTab) {\n leavingTab.active = false;\n }\n this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n }\n }\n\n private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n const leavingTab = this.selectedTab;\n return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('road-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent) => {\n const { tab } = ev.detail;\n this.select(tab);\n };\n\n render() {\n return (\n <Host\n onRoadTabButtonClick={this.onTabClicked}\n >\n <slot name=\"top\"/>\n <div class=\"tabs-inner\">\n <slot/>\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n const tabEl = (typeof tab === 'string')\n ? tabs.find(t => t.tab === tab)\n : tab;\n\n if (!tabEl) {\n console.error(`tab with id: \"${tabEl}\" does not exist`);\n }\n return tabEl;\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>
|
|
@@ -14,8 +14,21 @@ export class Tabs {
|
|
|
14
14
|
}
|
|
15
15
|
async componentWillLoad() {
|
|
16
16
|
const tabs = this.tabs;
|
|
17
|
+
const tabBar = this.el.querySelector('road-tab-bar');
|
|
18
|
+
const selectedTabId = tabBar ? tabBar.getAttribute('selected-tab') : null;
|
|
17
19
|
if (tabs.length > 0) {
|
|
18
|
-
|
|
20
|
+
if (selectedTabId) {
|
|
21
|
+
const selectedTab = tabs.find(tab => tab.tab === selectedTabId);
|
|
22
|
+
if (selectedTab) {
|
|
23
|
+
await this.select(selectedTab);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
await this.select(tabs[0]);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
await this.select(tabs[0]);
|
|
31
|
+
}
|
|
19
32
|
}
|
|
20
33
|
}
|
|
21
34
|
componentWillRender() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEhG;;;GAGG;AAMH,MAAM,OAAO,IAAI;;IAEP,kBAAa,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n tag: 'road-tabs',\n styleUrl: 'tabs.css',\n shadow: true,\n})\nexport class Tabs {\n\n private transitioning = false;\n private leavingTab?: HTMLRoadTabElement;\n\n @Element() el!: HTMLRoadTabsElement;\n\n @State() selectedTab?: HTMLRoadTabElement;\n\n /**\n * Emitted when the navigation is about to transition to a new component.\n */\n @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n /** @internal */\n @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n /**\n * Emitted when the navigation has finished transitioning to a new component.\n */\n @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n /** @internal */\n @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n async componentWillLoad() {\n const tabs = this.tabs;\n const tabBar = this.el.querySelector('road-tab-bar');\n const selectedTabId = tabBar ? tabBar.getAttribute('selected-tab') : null;\n \n if (tabs.length > 0) {\n if (selectedTabId) {\n const selectedTab = tabs.find(tab => tab.tab === selectedTabId);\n if (selectedTab) {\n await this.select(selectedTab);\n } else {\n await this.select(tabs[0]);\n }\n } else {\n await this.select(tabs[0]);\n }\n }\n }\n\n componentWillRender() {\n const tabBar = this.el.querySelector('road-tab-bar');\n if (tabBar) {\n const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n tabBar.selectedTab = tab;\n }\n }\n\n /**\n * Select a tab by the value of its `tab` property or an element reference.\n *\n * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n */\n @Method()\n async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n const selectedTab = getTab(this.tabs, tab);\n if (!this.shouldSwitch(selectedTab)) {\n return false;\n }\n await this.setActive(selectedTab);\n this.tabSwitch();\n\n return true;\n }\n\n /**\n * Get a specific tab by the value of its `tab` property or an element reference.\n *\n * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n */\n @Method()\n async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n return getTab(this.tabs, tab);\n }\n\n /**\n * Get the currently selected tab.\n */\n @Method()\n getSelected(): Promise<string | undefined> {\n return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n }\n\n private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n if (this.transitioning) {\n return Promise.reject('transitioning already happening');\n }\n\n this.transitioning = true;\n this.leavingTab = this.selectedTab;\n this.selectedTab = selectedTab;\n this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n selectedTab.active = true;\n return Promise.resolve();\n }\n\n private tabSwitch() {\n const selectedTab = this.selectedTab;\n const leavingTab = this.leavingTab;\n\n this.leavingTab = undefined;\n this.transitioning = false;\n if (!selectedTab) {\n return;\n }\n\n if (leavingTab !== selectedTab) {\n if (leavingTab) {\n leavingTab.active = false;\n }\n this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n }\n }\n\n private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n const leavingTab = this.selectedTab;\n return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('road-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent) => {\n const { tab } = ev.detail;\n this.select(tab);\n };\n\n render() {\n return (\n <Host\n onRoadTabButtonClick={this.onTabClicked}\n >\n <slot name=\"top\"/>\n <div class=\"tabs-inner\">\n <slot/>\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n const tabEl = (typeof tab === 'string')\n ? tabs.find(t => t.tab === tab)\n : tab;\n\n if (!tabEl) {\n console.error(`tab with id: \"${tabEl}\" does not exist`);\n }\n return tabEl;\n};"]}
|