toggle-components-library 1.37.0-beta.20 → 1.37.0-beta.30

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.37.0-beta.20",
3
+ "version": "1.37.0-beta.30",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#abb7c5"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
@@ -21,7 +21,8 @@
21
21
  v-model="inputVal"
22
22
  @blur="isInputActive = false"
23
23
  @focus="isInputActive = true"
24
- />
24
+ >
25
+ <div v-if="size == 'table'" class="toggle-input-currency-table-hover-pencil"></div>
25
26
  <label
26
27
  class="toggle-input-label-error"
27
28
  v-if="isInvalid"
@@ -75,7 +76,7 @@ export default {
75
76
  size: {
76
77
  type: String,
77
78
  validator: function (value) {
78
- return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
79
+ return ['extra-small', 'small', 'medium', 'large', 'full', 'table'].indexOf(value) !== -1
79
80
  }
80
81
  },
81
82
  required: {
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <div>
3
- <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere || toggle}]">{{label}}</h3>
3
+ <h3 :class="['toggle-metric metric-label', {'metric-label-atmosphere': atmosphere}]">{{label}}</h3>
4
4
  <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
5
- <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere || toggle }, { 'metric-value-small': small}]" v-else>{{metricValue}}
5
+ <h1 :class="['toggle-metric metric-value', { 'metric-value-atmosphere': atmosphere }, { 'metric-value-small': small}]" v-else>{{metricValue}}
6
6
  <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
7
- <span v-if="(atmosphere || toggle) && live == true" :class="['toggle-metric-live-icon', {'toggle-metric-live-icon-toggle': toggle}]"></span>
7
+ <span v-if="atmosphere && live == true" class="toggle-metric-live-icon"></span>
8
8
  </h1>
9
9
  </div>
10
10
  </template>
@@ -82,7 +82,7 @@ export default {
82
82
  type: String,
83
83
  default: "default",
84
84
  validator: function (value) {
85
- return ['default', 'atmosphere', 'toggle'].indexOf(value) !== -1
85
+ return ['default', 'atmosphere'].indexOf(value) !== -1
86
86
  }
87
87
  },
88
88
  metricSize: {
@@ -128,9 +128,6 @@ export default {
128
128
  atmosphere() {
129
129
  return this.metricStyle === 'atmosphere';
130
130
  },
131
- toggle() {
132
- return this.metricStyle === 'toggle';
133
- },
134
131
  small() {
135
132
  return this.metricSize === 'small';
136
133
  }
@@ -51,8 +51,27 @@
51
51
  &.height-extra-large {
52
52
  height: 15rem;
53
53
  }
54
+ &.table {
55
+ margin-top: 0 !important;
56
+ }
57
+ &.table:focus + .toggle-input-currency-table-hover-pencil {
58
+ display:none;
59
+ }
54
60
 
55
61
  }
62
+ .toggle-input-currency-table-hover-pencil{
63
+ display: block;
64
+ background: url('../assets/icons/edit-icon.svg') no-repeat;
65
+ background-size: 1.25rem;
66
+ background-position: center;
67
+ cursor: pointer;
68
+ width: 1.25rem;
69
+ height: 1.25rem;
70
+ position: absolute;
71
+ right: 1rem;
72
+ top: 50%;
73
+ transform: translateY(-50%);
74
+ }
56
75
 
57
76
  .toggle-input-search-options-container{
58
77
  position:relative;
@@ -164,8 +164,4 @@
164
164
  height: 19px;
165
165
  width: 19px;
166
166
  margin: 17px 0 0 5px;
167
- }
168
-
169
- .toggle-metric-live-icon-toggle {
170
- background-image: url('../assets/icons/bolt-solid-toggle.svg') !important;
171
167
  }
@@ -1,9 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#3180FF"/>
5
- <stop offset="1" stop-color="#38ABFF"/>
6
- </linearGradient>
7
- </defs>
8
- <path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
9
- </svg>
@@ -1,9 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6.922" height="12.381" viewBox="0 0 6.922 12.381">
2
- <defs>
3
- <linearGradient id="linear-gradient" x1="0.343" y1="-0.06" x2="0.923" y2="2.008" gradientUnits="objectBoundingBox">
4
- <stop offset="0" stop-color="#3180FF"/>
5
- <stop offset="1" stop-color="#38ABFF"/>
6
- </linearGradient>
7
- </defs>
8
- <path id="bolt-solid" d="M37.679,1.07a.944.944,0,0,0-.191-.931.469.469,0,0,0-.719.044L32.156,5.6a.961.961,0,0,0-.16.854.616.616,0,0,0,.541.5h2.009L33.16,11.294a.944.944,0,0,0,.191.931.469.469,0,0,0,.719-.044l4.613-5.417a.961.961,0,0,0,.16-.854.612.612,0,0,0-.541-.5H36.293Z" transform="translate(-31.959 0.009)" fill="url(#linear-gradient)"/>
9
- </svg>