@neovici/cosmoz-tabs 9.2.0 → 9.2.2

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/cosmoz-tab-card.js +45 -36
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neovici/cosmoz-tabs",
3
- "version": "9.2.0",
3
+ "version": "9.2.2",
4
4
  "description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
5
5
  "keywords": [
6
6
  "web-components"
package/src/cosmoz-tab-card.js CHANGED
@@ -1,18 +1,8 @@
1
1
  // @license Copyright (C) 2015 Neovici AB - Apache 2 License
2
2
  import { html, component, useState, useEffect } from '@pionjs/pion';
3
- import '@neovici/cosmoz-collapse';
4
3
  import { when } from 'lit-html/directives/when.js';
5
4
  import { css } from './utils';
6
-
7
- const collapseIcon = html`<svg
8
- width="16"
9
- height="16"
10
- viewBox="0 0 16 16"
11
- fill="none"
12
- xmlns="http://www.w3.org/2000/svg"
13
- >
14
- <path d="M5 1L10 8L5 15" stroke="#101010" stroke-width="1.5" />
15
- </svg>`;
5
+ import '@neovici/cosmoz-collapse';
16
6
 
17
7
  /**
18
8
 
@@ -33,6 +23,19 @@ Custom property | Description | Default
33
23
  `--cosmoz-tab-card-content-padding` | Card content padding | `initial`
34
24
  */
35
25
 
26
+ const expandMoreIcon = () => html`
27
+ <svg
28
+ class="expand-more-icon"
29
+ viewBox="0 0 24 24"
30
+ preserveAspectRatio="xMidYMid meet"
31
+ focusable="false"
32
+ width="24"
33
+ height="24"
34
+ >
35
+ <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
36
+ </svg>
37
+ `;
38
+
36
39
  const CosmozTabCard = (host) => {
37
40
  const { heading, collapsable, collapsed: isCollapsed } = host,
38
41
  [collapsed, setCollapsed] = useState(Boolean(isCollapsed)),
@@ -45,30 +48,34 @@ const CosmozTabCard = (host) => {
45
48
  host.toggleAttribute('collapsed', collapsed);
46
49
  }, [collapsed]);
47
50
 
48
- return html`<div class="header" part="header">
49
- ${when(
50
- collapsable,
51
- () => html`
52
- <div
53
- @click=${toggleCollapsed}
54
- class="collapse-icon"
55
- part="collapse-icon"
56
- >
57
- <slot name="collapse-icon">${collapseIcon}</slot>
58
- </div>
59
- `,
60
- )}
61
- <h1 class="heading" @click=${toggleCollapsed} part="heading">
62
- ${heading}<slot name="after-title"></slot>
63
- </h1>
64
- <slot name="card-actions"></slot>
65
- </div>
51
+ return html`${when(
52
+ heading,
53
+ () =>
54
+ html`<div class="header" part="header">
55
+ ${when(
56
+ collapsable,
57
+ () => html`
58
+ <div
59
+ @click=${toggleCollapsed}
60
+ class="collapse-icon"
61
+ part="collapse-icon"
62
+ >
63
+ <slot name="collapse-icon">${expandMoreIcon()}</slot>
64
+ </div>
65
+ `,
66
+ )}
67
+ <h1 class="heading" @click=${toggleCollapsed} part="heading">
68
+ ${heading}<slot name="after-title"></slot>
69
+ </h1>
70
+ <slot name="card-actions"></slot>
71
+ </div>`,
72
+ )}
66
73
 
67
74
  <cosmoz-collapse class="collapse" ?opened=${!collapsed}>
68
75
  <div class="content" part="content">
69
76
  <slot></slot>
70
77
  </div>
71
- </cosmoz-collapse> `;
78
+ </cosmoz-collapse>`;
72
79
  };
73
80
 
74
81
  const style = css`
@@ -77,7 +84,7 @@ const style = css`
77
84
  position: relative;
78
85
  box-sizing: border-box;
79
86
  background-color: var(--cosmoz-tab-card-bg-color, white);
80
- border-radius: var(cosmoz-tab-card-border-radius, 10px);
87
+ border-radius: var(--cosmoz-tab-card-border-radius, 10px);
81
88
  border: 1px solid var(--cosmoz-tab-card-border-color, rgb(229, 230, 236));
82
89
  margin: var(--cosmoz-tab-card-margin, 10px);
83
90
  align-self: flex-start;
@@ -106,17 +113,18 @@ const style = css`
106
113
  }
107
114
 
108
115
  .header {
116
+ min-height: 40px;
109
117
  display: flex;
110
118
  align-items: center;
111
- gap: 8px;
119
+ gap: 10px;
112
120
  background-color: var(--cosmoz-tab-card-bg-color, white);
113
121
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
114
122
  }
115
123
 
116
124
  .heading {
117
125
  font-family: inherit;
118
- font-size: 15px;
119
- font-weight: 400;
126
+ font-size: 17px;
127
+ font-weight: 500;
120
128
  flex: 1;
121
129
  color: var(--cosmoz-tab-card-heading-color, rgb(0, 0, 0));
122
130
  }
@@ -124,11 +132,12 @@ const style = css`
124
132
  .collapse-icon {
125
133
  order: var(--cosmoz-tab-card-collapse-icon-order);
126
134
  transition: transform 250ms linear;
127
- transform: rotate(90deg);
135
+ transform: rotate(0deg);
136
+ margin: 0 0 0 -5px;
128
137
  }
129
138
 
130
139
  :host([collapsed]) .collapse-icon {
131
- transform: rotate(0deg);
140
+ transform: rotate(-90deg);
132
141
  }
133
142
 
134
143
  :host([collapsable]) .collapse-icon,