@roadtrip/components 3.16.0 → 3.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/road-badge_14.cjs.entry.js +1 -1
- package/dist/cjs/road-badge_14.cjs.entry.js.map +1 -1
- package/dist/cjs/road-tab-bar.cjs.entry.js +1 -1
- package/dist/cjs/road-tab-bar.cjs.entry.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.stories.js +4 -4
- package/dist/collection/components/item/item.css +4 -2
- package/dist/collection/components/tab-bar/tab-bar.css +1 -1
- package/dist/esm/road-badge_14.entry.js +1 -1
- package/dist/esm/road-badge_14.entry.js.map +1 -1
- package/dist/esm/road-tab-bar.entry.js +1 -1
- package/dist/esm/road-tab-bar.entry.js.map +1 -1
- package/dist/roadtrip/{p-afe28f05.entry.js → p-2e25c08d.entry.js} +2 -2
- package/dist/roadtrip/{p-afe28f05.entry.js.map → p-2e25c08d.entry.js.map} +1 -1
- package/dist/roadtrip/p-e214386f.entry.js +2 -0
- package/dist/roadtrip/p-e214386f.entry.js.map +1 -0
- package/dist/roadtrip/roadtrip.esm.js +1 -1
- package/hydrate/index.js +2 -2
- package/package.json +1 -1
- package/dist/roadtrip/p-b65f0a62.entry.js +0 -2
- package/dist/roadtrip/p-b65f0a62.entry.js.map +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-12592729.js');
|
|
6
6
|
require('./polyfill-b1fff766.js');
|
|
7
7
|
|
|
8
|
-
const tabBarCss = ":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-
|
|
8
|
+
const tabBarCss = ":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-outline-weak);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){flex-grow:1}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";
|
|
9
9
|
|
|
10
10
|
const TabBar = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG
|
|
1
|
+
{"file":"road-tab-bar.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,+0BAA+0B;;MCYp1B,MAAM;;;;;qBAOa,KAAK;kBAKT,KAAK;kBAKL,KAAK;;;EAO/B,kBAAkB;IAChB,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,EAAE;MAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;QAC1B,GAAG,EAAE,IAAI,CAAC,WAAW;OACtB,CAAC,CAAC;KACJ;GACF;EAOD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3C,QACEA,QAACC,UAAI,IACH,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;QACL,YAAY,EAAE,MAAM;QACpB,YAAY,EAAE,MAAM;QACpB,eAAe,EAAE,SAAS;OAC3B,IAEDD,qBAAO,CACF,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["src/components/tab-bar/tab-bar.css?tag=road-tab-bar&encapsulation=shadow","src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/*\n * Tab bar\n *\n */\n\n/**\n * @prop --tab-background: background color of the tab bar\n */\n\n\n:host {\n --tab-bar-background: var(--road-surface);\n --tab-color: var(--road-on-surface-weak);\n --tab-color-selected: var(--road-on-surface);\n --tab-underline-selected: var(--road-primary);\n --tab-background: var(--road-surface);\n --tab-background-hover: var(--road-surface-inverse);\n --tab-background-focused: var(--road-grey-70);\n\n display: flex;\n width: 100%;\n margin: 0;\n overflow: scroll;\n overflow-x: inherit;\n font-family: var(--road-font, sans-serif);\n line-height: 1.5;\n color: var(--road-on-surface-weak);\n list-style: none;\n background: var(--tab-bar-background);\n border-bottom: 1px solid var(--road-outline-weak);\n fill: currentColor;\n scrollbar-width: none;\n}\n\n:host(::-webkit-scrollbar) {\n display: none;\n}\n\n:host(.tab-expand) ::slotted(road-tab-button) {\n flex-grow: 1;\n}\n\n:host(.tab-secondary) ::slotted(road-tab-button) {\n --tab-underline-selected: var(--road-secondary);\n}\n\n:host(.tab-center) {\n justify-content: center;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot - Content of the tabBar, it should be road-tab-button elements.\n */\n\n@Component({\n tag: 'road-tab-bar',\n styleUrl: 'tab-bar.css',\n shadow: true,\n})\nexport class TabBar {\n\n @Element() el!: HTMLRoadTabBarElement;\n\n /**\n * The color to use the color Secondary from your application's color palette.\n */\n @Prop() secondary: boolean = false;\n\n /**\n * Set to `true` to expand buttons width to take the full size of the bar.\n */\n @Prop() expand: boolean = false;\n\n /**\n * Set to `true` to center buttons in the bar.\n */\n @Prop() center: boolean = false;\n\n /**\n * The selected tab component\n */\n @Prop() selectedTab?: string;\n @Watch('selectedTab')\n selectedTabChanged() {\n if (this.selectedTab !== undefined) {\n this.roadtabbarchanged.emit({\n tab: this.selectedTab,\n });\n this.roadTabBarChanged.emit({\n tab: this.selectedTab,\n });\n }\n }\n\n /** @internal */\n @Event() roadtabbarchanged!: EventEmitter;\n /** @internal */\n @Event() roadTabBarChanged!: EventEmitter;\n\n componentWillLoad() {\n this.selectedTabChanged();\n }\n\n render() {\n const { expand, center, secondary } = this;\n return (\n <Host\n role=\"tablist\"\n class={{\n 'tab-expand': expand,\n 'tab-center': center,\n 'tab-secondary': secondary,\n }}\n >\n <slot/>\n </Host>\n );\n }\n}"],"version":3}
|
|
@@ -53,25 +53,25 @@ export default {
|
|
|
53
53
|
'is-light': null,
|
|
54
54
|
'is-medium': null,
|
|
55
55
|
list: `<road-list slot="list">
|
|
56
|
-
<road-item button
|
|
56
|
+
<road-item button class="border-0">
|
|
57
57
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
58
58
|
<road-label>
|
|
59
59
|
Label
|
|
60
60
|
</road-label>
|
|
61
61
|
</road-item>
|
|
62
|
-
<road-item button
|
|
62
|
+
<road-item button class="border-0">
|
|
63
63
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
64
64
|
<road-label>
|
|
65
65
|
Label
|
|
66
66
|
</road-label>
|
|
67
67
|
</road-item>
|
|
68
|
-
<road-item button
|
|
68
|
+
<road-item button class="border-0">
|
|
69
69
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
70
70
|
<road-label>
|
|
71
71
|
Label
|
|
72
72
|
</road-label>
|
|
73
73
|
</road-item>
|
|
74
|
-
<road-item button
|
|
74
|
+
<road-item button class="border-0">
|
|
75
75
|
<road-icon slot="start" name="picture" size="md"></road-icon>
|
|
76
76
|
<road-label>
|
|
77
77
|
Label
|
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
overflow: hidden;
|
|
33
33
|
font-size: var(--road-font-size-14);
|
|
34
34
|
text-decoration: none;
|
|
35
|
+
border: 1px solid var(--road-outline-weak);
|
|
36
|
+
border-radius: var(--border-radius);
|
|
35
37
|
outline: none;
|
|
36
38
|
}
|
|
37
39
|
|
|
@@ -55,6 +57,7 @@
|
|
|
55
57
|
display: flex;
|
|
56
58
|
align-items: inherit;
|
|
57
59
|
justify-content: inherit;
|
|
60
|
+
width: 100%;
|
|
58
61
|
padding: var(--road-spacing-05);
|
|
59
62
|
margin: 0;
|
|
60
63
|
overflow: inherit;
|
|
@@ -63,8 +66,7 @@
|
|
|
63
66
|
color: var(--road-on-surface);
|
|
64
67
|
text-align: left;
|
|
65
68
|
background-color: var(--background-color);
|
|
66
|
-
border:
|
|
67
|
-
border-radius: var(--border-radius);
|
|
69
|
+
border: 2px solid var(--road-surface);
|
|
68
70
|
outline: none;
|
|
69
71
|
transition: background 0.15s ease-in-out;
|
|
70
72
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
@@ -626,7 +626,7 @@ const InputGroup = class {
|
|
|
626
626
|
};
|
|
627
627
|
InputGroup.style = inputGroupCss;
|
|
628
628
|
|
|
629
|
-
const itemCss = ":host{--border-radius:var(--road-spacing-02);--background-color:var(--road-surface);--detail-color:var(--road-icon);position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-size:var(--road-font-size-14);text-decoration:none;outline:none}.layout-vertical{display:flex;flex-direction:column;max-width:224px}.layout-vertical .item-inner{align-items:flex-start}.item-native{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:inherit;justify-content:inherit;padding:var(--road-spacing-05);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-on-surface);text-align:left;background-color:var(--background-color);border:
|
|
629
|
+
const itemCss = ":host{--border-radius:var(--road-spacing-02);--background-color:var(--road-surface);--detail-color:var(--road-icon);position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;overflow:hidden;font-size:var(--road-font-size-14);text-decoration:none;border:1px solid var(--road-outline-weak);border-radius:var(--border-radius);outline:none}.layout-vertical{display:flex;flex-direction:column;max-width:224px}.layout-vertical .item-inner{align-items:flex-start}.item-native{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:inherit;justify-content:inherit;width:100%;padding:var(--road-spacing-05);margin:0;overflow:inherit;font-family:inherit;font-size:inherit;color:var(--road-on-surface);text-align:left;background-color:var(--background-color);border:2px solid var(--road-surface);outline:none;transition:background 0.15s ease-in-out;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}.item-active{border:2px solid var(--road-outline-variant)}button.item-native:not(:disabled):not(.item-active):hover,button.item-native:not(:disabled):not(.item-active):focus{border:2px solid var(--road-outline-variant)}.item-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{position:relative;box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:center;align-self:stretch;width:100%;min-height:inherit;padding:var(--inner-padding);overflow:inherit;text-align:inherit;text-decoration:none;border-color:var(--road-grey-70);border-style:solid;border-width:var(--inner-border-width, 0);outline:0}.input-wrapper{box-sizing:border-box;display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;overflow:inherit;text-overflow:ellipsis}.input-wrapper-info-title{font-size:var(--road-font-size-16);font-weight:700}.input-wrapper-info-text{margin:0;font-size:var(--road-font-size-16);font-weight:400;color:var(--road-on-surface-weak)}.item-detail-icon{color:var(--detail-color)}::slotted(road-icon){flex-shrink:0;margin-right:0.5rem}::slotted(road-img){flex-shrink:0;margin-right:0.5rem}.layout-vertical ::slotted(road-img){margin-bottom:0.5rem}::slotted(road-label) p{color:var(--road-on-surface-weak)}::slotted(road-button){--padding-start:0.5rem;--padding-end:0.5rem;--margin-bottom:0}:host(.item-lines-none){--border-width:0 !important;--inner-border-width:0 !important}:host(.item-lines-full){--border-width:0 0 1px 0 !important;--inner-border-width:0 !important}:host(.item-lines-inset){--inner-border-width:0 0 1px 0 !important}";
|
|
630
630
|
|
|
631
631
|
const Item = class {
|
|
632
632
|
constructor(hostRef) {
|