@neovici/cosmoz-tabs 8.10.0 → 8.10.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/package.json +1 -1
- package/src/cosmoz-tab-card.js +7 -9
- package/src/cosmoz-tab.js +30 -29
package/package.json
CHANGED
package/src/cosmoz-tab-card.js
CHANGED
|
@@ -56,7 +56,7 @@ const CosmozTabCard = (host) => {
|
|
|
56
56
|
>
|
|
57
57
|
<slot name="collapse-icon">${collapseIcon}</slot>
|
|
58
58
|
</div>
|
|
59
|
-
|
|
59
|
+
`,
|
|
60
60
|
)}
|
|
61
61
|
<h1 class="heading" @click=${toggleCollapsed} part="heading">
|
|
62
62
|
${heading}<slot name="after-title"></slot>
|
|
@@ -77,15 +77,12 @@ const style = css`
|
|
|
77
77
|
position: relative;
|
|
78
78
|
box-sizing: border-box;
|
|
79
79
|
background-color: var(--cosmoz-tab-card-bg-color, white);
|
|
80
|
-
border-radius:
|
|
81
|
-
|
|
80
|
+
border-radius: 10px;
|
|
81
|
+
border: 1px solid rgb(229, 230, 236);
|
|
82
|
+
margin: 10px 5px 0;
|
|
82
83
|
align-self: flex-start;
|
|
83
84
|
padding: var(--cosmoz-tab-card-padding, 0);
|
|
84
85
|
width: var(--cosmoz-tab-card-width, 300px);
|
|
85
|
-
box-shadow: var(
|
|
86
|
-
--cosmoz-shadow-2dp,
|
|
87
|
-
var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5)
|
|
88
|
-
);
|
|
89
86
|
}
|
|
90
87
|
|
|
91
88
|
.collapse {
|
|
@@ -110,9 +107,10 @@ const style = css`
|
|
|
110
107
|
|
|
111
108
|
.heading {
|
|
112
109
|
font-family: inherit;
|
|
113
|
-
font-size:
|
|
110
|
+
font-size: 15px;
|
|
114
111
|
font-weight: 400;
|
|
115
112
|
flex: 1;
|
|
113
|
+
color: rgb(0, 0, 0);
|
|
116
114
|
}
|
|
117
115
|
|
|
118
116
|
.collapse-icon {
|
|
@@ -137,5 +135,5 @@ customElements.define(
|
|
|
137
135
|
component(CosmozTabCard, {
|
|
138
136
|
observedAttributes: ['heading', 'collapsable', 'collapsed'],
|
|
139
137
|
styleSheets: [style],
|
|
140
|
-
})
|
|
138
|
+
}),
|
|
141
139
|
);
|
package/src/cosmoz-tab.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
// @license Copyright (C) 2015 Neovici AB - Apache 2 License
|
|
2
2
|
import './cosmoz-tab-card.js';
|
|
3
|
-
import {
|
|
4
|
-
html,
|
|
5
|
-
component
|
|
6
|
-
} from '@pionjs/pion';
|
|
3
|
+
import { html, component } from '@pionjs/pion';
|
|
7
4
|
import { useTab } from './use-tab';
|
|
8
5
|
|
|
9
6
|
/**
|
|
@@ -26,7 +23,7 @@ Custom property | Description | Default
|
|
|
26
23
|
`--cosmoz-tab-header-accordion` | Mixin applied to the header when the tab is in accordion mode | `{}`
|
|
27
24
|
`--cosmoz-tab-header-accordion-selected` | Mixin applied to the header when the tab is selected in accordion mode | `{}`
|
|
28
25
|
*/
|
|
29
|
-
const CosmozTab = host => {
|
|
26
|
+
const CosmozTab = (host) => {
|
|
30
27
|
const { onSlot } = useTab(host);
|
|
31
28
|
return html`
|
|
32
29
|
<style>
|
|
@@ -35,6 +32,7 @@ const CosmozTab = host => {
|
|
|
35
32
|
position: relative;
|
|
36
33
|
flex-direction: column;
|
|
37
34
|
flex: 1 1 auto;
|
|
35
|
+
padding: 0 5px;
|
|
38
36
|
max-height: 100%;
|
|
39
37
|
}
|
|
40
38
|
|
|
@@ -48,29 +46,32 @@ const CosmozTab = host => {
|
|
|
48
46
|
}
|
|
49
47
|
</style>
|
|
50
48
|
|
|
51
|
-
<slot @slotchange=${
|
|
52
|
-
`;
|
|
49
|
+
<slot @slotchange=${onSlot}></slot>
|
|
50
|
+
`;
|
|
53
51
|
};
|
|
54
52
|
|
|
55
|
-
customElements.define(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
53
|
+
customElements.define(
|
|
54
|
+
'cosmoz-tab',
|
|
55
|
+
class extends component(CosmozTab, {
|
|
56
|
+
observedAttributes: [
|
|
57
|
+
'hidden',
|
|
58
|
+
'disabled',
|
|
59
|
+
'heading',
|
|
60
|
+
'badge',
|
|
61
|
+
'icon',
|
|
62
|
+
'icon-style',
|
|
63
|
+
'icon-color',
|
|
64
|
+
'selected-icon',
|
|
65
|
+
'is-selected',
|
|
66
|
+
],
|
|
67
|
+
}) {
|
|
68
|
+
// TODO: drop this when haunted better handles native properties
|
|
69
|
+
set hidden(val) {
|
|
70
|
+
super.hidden = val;
|
|
71
|
+
this._scheduler.update();
|
|
72
|
+
}
|
|
73
|
+
get hidden() {
|
|
74
|
+
return super.hidden;
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
);
|