@roadtrip/components 3.24.0 → 3.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/road-accordion.cjs.entry.js +1 -1
- package/dist/cjs/road-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/road-avatar.cjs.entry.js +1 -1
- package/dist/cjs/road-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js +2 -2
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-chip.cjs.entry.js +1 -1
- package/dist/cjs/road-chip.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-navbar.cjs.entry.js +1 -1
- package/dist/cjs/road-navbar.cjs.entry.js.map +1 -1
- package/dist/cjs/road-plate-number.cjs.entry.js +1 -1
- package/dist/cjs/road-plate-number.cjs.entry.js.map +1 -1
- package/dist/cjs/road-segmented-button.cjs.entry.js +1 -1
- package/dist/cjs/road-segmented-button.cjs.entry.js.map +1 -1
- package/dist/cjs/road-select.cjs.entry.js +1 -1
- package/dist/cjs/road-select.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tab-button.cjs.entry.js +1 -1
- package/dist/cjs/road-tab-button.cjs.entry.js.map +1 -1
- package/dist/cjs/road-textarea.cjs.entry.js +1 -1
- package/dist/cjs/road-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/road-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/accordion/accordion.css +4 -7
- package/dist/collection/components/accordion/accordion.stories.js +10 -2
- package/dist/collection/components/avatar/avatar.css +5 -2
- package/dist/collection/components/button/button.css +0 -1
- package/dist/collection/components/chip/chip.css +2 -0
- package/dist/collection/components/dropdown/dropdown.css +5 -4
- package/dist/collection/components/global-navigation/global-navigation.stories.js +4 -4
- package/dist/collection/components/navbar/navbar.css +2 -2
- package/dist/collection/components/navbar/navbar.stories.js +1 -1
- package/dist/collection/components/plate-number/plate-number.css +1 -3
- package/dist/collection/components/segmented-button/segmented-button.css +1 -1
- package/dist/collection/components/select/select.css +0 -5
- package/dist/collection/components/tab-button/tab-button.css +6 -1
- package/dist/collection/components/textarea/textarea.css +0 -1
- package/dist/collection/components/toolbar/toolbar.css +3 -3
- package/dist/collection/components/tooltip/tooltip.css +2 -2
- package/dist/collection/components/tooltip/tooltip.stories.js +2 -2
- package/dist/esm/road-accordion.entry.js +1 -1
- package/dist/esm/road-accordion.entry.js.map +1 -1
- package/dist/esm/road-avatar.entry.js +1 -1
- package/dist/esm/road-avatar.entry.js.map +1 -1
- package/dist/esm/road-badge_14.entry.js +2 -2
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-chip.entry.js +1 -1
- package/dist/esm/road-chip.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-navbar.entry.js +1 -1
- package/dist/esm/road-navbar.entry.js.map +1 -1
- package/dist/esm/road-plate-number.entry.js +1 -1
- package/dist/esm/road-plate-number.entry.js.map +1 -1
- package/dist/esm/road-segmented-button.entry.js +1 -1
- package/dist/esm/road-segmented-button.entry.js.map +1 -1
- package/dist/esm/road-select.entry.js +1 -1
- package/dist/esm/road-select.entry.js.map +1 -1
- package/dist/esm/road-tab-button.entry.js +1 -1
- package/dist/esm/road-tab-button.entry.js.map +1 -1
- package/dist/esm/road-textarea.entry.js +1 -1
- package/dist/esm/road-textarea.entry.js.map +1 -1
- package/dist/esm/road-tooltip.entry.js +1 -1
- package/dist/esm/road-tooltip.entry.js.map +1 -1
- package/dist/roadtrip/p-10903095.entry.js +2 -0
- package/dist/roadtrip/p-10903095.entry.js.map +1 -0
- package/dist/roadtrip/p-48fad2ec.entry.js +2 -0
- package/dist/roadtrip/p-48fad2ec.entry.js.map +1 -0
- package/dist/roadtrip/{p-31cf9b61.entry.js → p-548b3e44.entry.js} +2 -2
- package/dist/roadtrip/{p-31cf9b61.entry.js.map → p-548b3e44.entry.js.map} +1 -1
- package/dist/roadtrip/p-631eca8b.entry.js +2 -0
- package/dist/roadtrip/p-631eca8b.entry.js.map +1 -0
- package/dist/roadtrip/p-6ff5ec7c.entry.js +2 -0
- package/dist/roadtrip/p-6ff5ec7c.entry.js.map +1 -0
- package/dist/roadtrip/p-73f81e81.entry.js +2 -0
- package/dist/roadtrip/p-73f81e81.entry.js.map +1 -0
- package/dist/roadtrip/p-98cd42c5.entry.js +2 -0
- package/dist/roadtrip/p-98cd42c5.entry.js.map +1 -0
- package/dist/roadtrip/p-a0cde368.entry.js +2 -0
- package/dist/roadtrip/p-a0cde368.entry.js.map +1 -0
- package/dist/roadtrip/{p-5829857c.entry.js → p-a77727f2.entry.js} +2 -2
- package/dist/roadtrip/{p-5829857c.entry.js.map → p-a77727f2.entry.js.map} +1 -1
- package/dist/roadtrip/p-d9c73068.entry.js +2 -0
- package/dist/roadtrip/{p-0c4ae774.entry.js.map → p-d9c73068.entry.js.map} +1 -1
- package/dist/roadtrip/p-f0a7c904.entry.js +2 -0
- package/dist/roadtrip/p-f0a7c904.entry.js.map +1 -0
- package/dist/roadtrip/p-fc41f5e6.entry.js +2 -0
- package/dist/roadtrip/p-fc41f5e6.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.css +1 -1
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/hydrate/index.js +13 -13
- package/package.json +1 -1
- package/dist/roadtrip/p-08b0be1b.entry.js +0 -2
- package/dist/roadtrip/p-08b0be1b.entry.js.map +0 -1
- package/dist/roadtrip/p-0c4ae774.entry.js +0 -2
- package/dist/roadtrip/p-14ecc91e.entry.js +0 -2
- package/dist/roadtrip/p-14ecc91e.entry.js.map +0 -1
- package/dist/roadtrip/p-172d4877.entry.js +0 -2
- package/dist/roadtrip/p-172d4877.entry.js.map +0 -1
- package/dist/roadtrip/p-38099006.entry.js +0 -2
- package/dist/roadtrip/p-38099006.entry.js.map +0 -1
- package/dist/roadtrip/p-3c2da24f.entry.js +0 -2
- package/dist/roadtrip/p-3c2da24f.entry.js.map +0 -1
- package/dist/roadtrip/p-4001ab77.entry.js +0 -2
- package/dist/roadtrip/p-4001ab77.entry.js.map +0 -1
- package/dist/roadtrip/p-78e9bbd5.entry.js +0 -2
- package/dist/roadtrip/p-78e9bbd5.entry.js.map +0 -1
- package/dist/roadtrip/p-b65252b7.entry.js +0 -2
- package/dist/roadtrip/p-b65252b7.entry.js.map +0 -1
- package/dist/roadtrip/p-cfa6e719.entry.js +0 -2
- package/dist/roadtrip/p-cfa6e719.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 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--icon-color:var(--road-icon);--max-height:none;display:block}
|
|
9
|
+
const accordionCss = ":host{--accordion-header-border:1px;--content-margin:0 var(--road-spacing-05) var(--road-spacing-04);--content-padding:var(--road-spacing-04) 0 0;--header-padding:var(--road-spacing-04) var(--road-spacing-05);--header-padding-vertical:var(--road-spacing-04);--icon-color:var(--road-icon);--max-height:none;display:block}.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{margin:0 0 var(--road-spacing-04)}.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;-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;padding:var(--header-padding-vertical) 0;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,woFAAwoF;;MCiBhpF,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 horizontal and vertical of the accordion header\n * @prop --header-padding-vertical: 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 var(--road-spacing-05) var(--road-spacing-04);\n --content-padding: var(--road-spacing-04) 0 0;\n --header-padding: var(--road-spacing-04) var(--road-spacing-05);\n --header-padding-vertical: var(--road-spacing-04);\n --icon-color: var(--road-icon);\n --max-height: none;\n\n display: block;\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 margin: 0 0 var(--road-spacing-04);\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 -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 padding: var(--header-padding-vertical) 0;\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 avatarCss = ":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover)
|
|
7
|
+
const avatarCss = ":host{--avatar-background:var(--road-primary);--avatar-width:3rem;--avatar-color:var(--road-grey-100-new);position:relative;display:flex;align-items:center;justify-content:center;width:var(--avatar-width);height:var(--avatar-width);font-weight:700;color:var(--avatar-color);background:var(--avatar-background);border-radius:var(--avatar-width);transition:box-shadow 0.5s}:host(:hover){box-shadow:0 0 0 4px var(--road-primary-80)}:host(.focus-visible),:host(:focus){outline:auto}:host ::slotted(road-icon){fill:var(--road-icon-inverse)}:host(.avatar-sm){width:2.625rem;height:2.625rem;font-size:1.25rem}:host(.avatar-md){width:3.5rem;height:3.5rem;font-size:var(--road-font-size-32)}:host(.avatar-lg){width:4rem;height:4rem;font-size:2.375rem}::slotted(road-img),::slotted(img){width:100%;height:100%;object-fit:cover;overflow:hidden;border-radius:var(--avatar-width)}::slotted(road-badge){position:absolute;top:0;right:0}";
|
|
8
8
|
|
|
9
9
|
const Avatar = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"road-avatar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,25BAA25B;;MCUh6B,MAAM;;;gBAKqC,IAAI;;EAE1D,MAAM;IAEJ,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC;IAGvE,QAEEA,QAACC,UAAI,IACH,KAAK,EAAE,GAAG,SAAS,EAAE,IAErBD,qBAAO,CACF,EAEP;GACH;;;;;;","names":["h","Host"],"sources":["src/components/avatar/avatar.css?tag=road-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * Avatar\n *\n * Index\n * - Avatar\n * - Image\n * - Badge\n */\n\n/**\n * @prop --avatar-background: background color of the avatar\n * @prop --avatar-width: width & height of the avatar\n */\n\n/* AVATAR\n -------------------- */\n\n:host {\n --avatar-background: var(--road-primary);\n --avatar-width: 3rem;\n --avatar-color: var(--road-grey-100-new);\n\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--avatar-width);\n height: var(--avatar-width);\n font-weight: 700;\n color: var(--avatar-color);\n background: var(--avatar-background);\n border-radius: var(--avatar-width);\n transition: box-shadow 0.5s;\n}\n\n:host(:hover){\n box-shadow: 0 0 0 4px var(--road-primary-80);\n}\n\n:host(.focus-visible),\n:host(:focus){\n outline: auto;\n}\n\n\n\n:host ::slotted(road-icon) {\n fill: var(--road-icon-inverse);\n}\n\n\n/* SIZE\n -------------------- */\n\n:host(.avatar-sm) {\n width: 2.625rem;\n height: 2.625rem;\n font-size: 1.25rem;\n}\n\n:host(.avatar-md) {\n width: 3.5rem;\n height: 3.5rem;\n font-size: var(--road-font-size-32);\n}\n\n:host(.avatar-lg) {\n width: 4rem;\n height: 4rem;\n font-size: 2.375rem;\n}\n\n\n/* IMAGE\n -------------------- */\n\n::slotted(road-img),\n::slotted(img) {\n width: 100%;\n height: 100%;\n object-fit: cover;\n overflow: hidden;\n border-radius: var(--avatar-width);\n}\n\n/* BADGE\n -------------------- */\n\n::slotted(road-badge) {\n position: absolute;\n top: 0;\n right: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * @slot - Image of the avatar.\n */\n@Component({\n tag: 'road-avatar',\n styleUrl: 'avatar.css',\n shadow: true,\n})\nexport class Avatar {\n\n /**\n * The Avatar size.\n */\n @Prop({ reflect: true }) size?: 'sm' | 'md' | 'lg' = 'md';\n\n render() {\n\n const sizeClass = this.size !== undefined ? `avatar-${this.size}` : '';\n\n\n return (\n\n <Host\n class={`${sizeClass}`}\n >\n <slot/>\n </Host>\n \n );\n }\n\n}\n"],"version":3}
|
|
@@ -24,7 +24,7 @@ const Badge = class {
|
|
|
24
24
|
};
|
|
25
25
|
Badge.style = badgeCss;
|
|
26
26
|
|
|
27
|
-
const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){text-decoration:underline;outline:auto}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none
|
|
27
|
+
const buttonCss = ":host{--border-radius:0.25rem;--font-size:var(--road-button-medium);--margin-bottom:1rem;--padding-start:1.5rem;--padding-end:1.5rem;box-sizing:border-box;display:inline-flex;display:-webkit-inline-flex;align-items:center;justify-content:center;height:3rem;padding:0;margin-bottom:var(--margin-bottom);font-family:var(--road-font, sans-serif);font-size:var(--font-size);font-weight:700;line-height:1.375;color:var(--road-grey-10);text-decoration:none;white-space:nowrap;vertical-align:middle;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);transition:background 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:hover){text-decoration:none}:host(.focus-visible){text-decoration:underline;outline:auto}.button-native{position:relative;display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;padding:0 var(--padding-end) 0 var(--padding-start);margin:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;color:inherit;text-align:inherit;text-decoration:none;text-indent:inherit;text-overflow:inherit;text-transform:inherit;letter-spacing:inherit;white-space:inherit;cursor:pointer;background:transparent;border:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}:host(.btn-default:not([disabled]).focus-visible){background:var(--road-grey-80)}:host(.btn-primary){color:var(--road-on-button-primary);background:var(--road-button-primary)}:host(.btn-primary) ::slotted(road-icon){color:var(--road-on-button-primary)}:host(.btn-primary:not([disabled]):hover),:host(.btn-primary:not([disabled]).focus-visible){background:var(--road-button-primary-variant);outline:0}:host(.btn-secondary){color:var(--road-on-button-secondary);background:var(--road-button-secondary)}:host(.btn-secondary) ::slotted(road-icon){color:var(--road-on-button-secondary)}:host(.btn-secondary:not([disabled]):hover),:host(.btn-secondary:not([disabled]).focus-visible){background:var(--road-button-secondary-variant)}:host(.btn-link){font-weight:400;color:var(--road-link-primary);text-decoration:underline;background:transparent}:host(.btn-link:not([disabled]):hover),:host(.btn-link:not([disabled]).focus-visible){color:var(--road-primary-30)}:host(.btn-outline-primary),:host(.btn-outline-secondary),:host(.btn-outline-default){background:transparent}:host(.btn-outline-default){color:var(--road-on-surface-weak);background:var(--road-surface);border-color:var(--road-outline)}:host(.btn-outline-default) ::slotted(road-icon){color:var(--road-on-surface-weak)}:host(.btn-outline-default:hover),:host(.btn-outline-default.focus-visible){background:var(--road-grey-80)}:host(.btn-ghost) ::slotted(road-icon){color:var(--road-icon)}:host(.btn-ghost:hover),:host(.btn-ghost.focus-visible){background:var(--road-button-ghost-variant)}:host([aria-disabled].btn-outline-primary){background:none}:host(.btn-outline-primary){color:var(--road-button-primary);border-color:var(--road-button-tertiary-outline)}:host(.btn-outline-primary) ::slotted(road-icon){color:var(--road-button-primary)}:host(.btn-outline-primary:hover),:host(.btn-outline-primary.focus-visible){background:var(--road-button-tertiary-variant)}:host(.btn-outline-secondary){color:var(--road-button-secondary);border-color:var(--road-button-secondary)}:host(.btn-outline-secondary) ::slotted(road-icon){color:var(--road-button-secondary)}:host(.btn-outline-secondary:hover),:host(.btn-outline-secondary.focus-visible){background:var(--road-button-tertiary-variant)}:host([aria-disabled]){color:var(--road-on-surface-disabled);pointer-events:none;cursor:not-allowed;background-color:var(--road-surface-disabled);border-color:1px solid var(--road-surface-disabled)}:host([aria-disabled]) ::slotted(road-icon){color:var(--road-on-surface-disabled)}.button-native:disabled{cursor:not-allowed}::slotted([slot=\"start\"]){margin-right:0.5rem}::slotted([slot=\"end\"]){margin-left:0.5rem}:host(.btn-xl){height:3.5rem}:host(.btn-xl) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-xl){width:56px}:host(.btn-lg){height:3rem}:host(.btn-lg) ::slotted(road-icon){width:2rem;height:2rem}:host(.btn-icon.btn-lg){width:48px}:host(.btn-md){--font-size:var(--road-font-size-14);height:2.5rem}:host(.btn-md) ::slotted(road-icon){width:1.5rem;height:1.5rem}:host(.btn-icon.btn-md){width:40px}:host(.btn-sm){--font-size:var(--road-font-size-14);height:2rem}:host(.btn-sm) ::slotted(road-icon){width:1.25rem;height:1.25rem}:host(.btn-icon.btn-sm){width:32px}:host(.btn-block){width:100%}:host(.btn-icon) .button-native{padding:0}::slotted(road-badge){position:absolute;top:4px;left:calc(50% + 0.375rem);box-sizing:border-box;height:auto}";
|
|
28
28
|
|
|
29
29
|
const Button = class {
|
|
30
30
|
constructor(hostRef) {
|
|
@@ -17959,7 +17959,7 @@ const Row = class {
|
|
|
17959
17959
|
};
|
|
17960
17960
|
Row.style = rowCss;
|
|
17961
17961
|
|
|
17962
|
-
const toolbarCss = ":host{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline)}.toolbar-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}.toolbar-title-container{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}.toolbar-title{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title{font-size:var(--road-font-size-21);text-align:center}}.toolbar-content{flex:1 1 0%;min-width:0;max-width:100%}.toolbar .logo{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}.toolbar .app-name{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}::slotted([slot=\"start\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline);border-radius:0}::slotted([slot=\"end\"]),::slotted([slot=\"secondary\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline);border-radius:0}:host(.toolbar-primary){color:var(--road-on-header-surface);background:var(--road-header-surface)}:host(.toolbar-secondary){color:var(--road-on-secondary);background:var(--road-secondary)}";
|
|
17962
|
+
const toolbarCss = ":host{position:relative;box-sizing:border-box;display:block;width:100%;contain:content;color:var(--road-on-surface);background:var(--road-surface);border-bottom:1px solid var(--road-outline-weak)}.toolbar-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-height:3.73rem;contain:content;overflow:hidden}.toolbar-title-container{position:relative;top:0;left:0;display:flex;flex:1;align-items:center;width:100%;height:100%;text-align:center}.toolbar-title{display:block;width:100%;font-size:var(--road-font-size-18);font-weight:700;text-align:left;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}@media (min-width: 1200px){.toolbar-title{font-size:var(--road-font-size-21);text-align:center}}.toolbar-content{flex:1 1 0%;min-width:0;max-width:100%}.toolbar .logo{position:relative;z-index:1;padding-left:1rem;margin-bottom:0;font-size:var(--road-font-size-14);font-weight:400}.toolbar .app-name{margin-left:1rem;font-size:var(--road-font-size-20);font-weight:700}::slotted([slot=\"start\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;align-self:auto;font-size:var(--road-font-size-14);font-weight:400;border-right:1px solid var(--road-outline-weak);border-radius:0}::slotted([slot=\"end\"]),::slotted([slot=\"secondary\"]){--margin-bottom:0;--padding-start:0.5rem;--padding-end:0.5rem;font-size:var(--road-font-size-14);font-weight:400;border-left:1px solid var(--road-outline-weak);border-radius:0}:host(.toolbar-primary){color:var(--road-on-header-surface);background:var(--road-header-surface)}:host(.toolbar-secondary){color:var(--road-on-secondary);background:var(--road-secondary)}";
|
|
17963
17963
|
|
|
17964
17964
|
const Toolbar = class {
|
|
17965
17965
|
constructor(hostRef) {
|