toggle-components-library 1.35.1 → 1.36.1-beta.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.
Files changed (29) hide show
  1. package/dist/img/airship-feedback-hover.a207c947.svg +10 -0
  2. package/dist/img/airship-feedback.1f7c858c.svg +10 -0
  3. package/dist/toggle-components-library.common.js +330 -142
  4. package/dist/toggle-components-library.common.js.map +1 -1
  5. package/dist/toggle-components-library.css +1 -1
  6. package/dist/toggle-components-library.umd.js +330 -142
  7. package/dist/toggle-components-library.umd.js.map +1 -1
  8. package/dist/toggle-components-library.umd.min.js +1 -1
  9. package/dist/toggle-components-library.umd.min.js.map +1 -1
  10. package/package-lock.json +1 -1
  11. package/package.json +1 -1
  12. package/src/assets/icons/airship-feedback-hover.svg +10 -0
  13. package/src/assets/icons/airship-feedback.svg +10 -0
  14. package/src/components/buttons/ToggleMetricsButton.vue +18 -3
  15. package/src/components/cards/ToggleCommentCard.vue +63 -0
  16. package/src/components/forms/ToggleInputSelect.vue +13 -7
  17. package/src/components/forms/ToggleInputText.vue +15 -6
  18. package/src/components/metrics/ToggleMetricSingleMetric.vue +12 -7
  19. package/src/components/metrics/ToggleMetricSparkLine.vue +1 -1
  20. package/src/components/tables/ToggleTable.vue +114 -49
  21. package/src/index.js +3 -1
  22. package/src/sass/includes/_as_buttons.scss +38 -4
  23. package/src/sass/includes/_as_cards.scss +29 -0
  24. package/src/sass/includes/_as_inputs.scss +851 -838
  25. package/src/sass/includes/_as_metrics.scss +5 -0
  26. package/src/sass/includes/_as_navs.scss +16 -0
  27. package/src/sass/includes/_as_table.scss +163 -163
  28. package/dist/img/contacts-greyblue.ef6f8a9a.svg +0 -1
  29. package/dist/img/contacts-white.95d07c7a.svg +0 -1
@@ -134,4 +134,9 @@
134
134
 
135
135
  .increase-padding-bottom {
136
136
  padding-bottom: 3rem !important;
137
+ }
138
+
139
+ .toggle-metric-score-rating {
140
+ font-size: 27px;
141
+ margin-left: -8px;
137
142
  }
@@ -342,6 +342,11 @@
342
342
  &.airship-hat-icon span::before {
343
343
  background-image: url("../assets/icons/airship-hat-hover.svg");
344
344
  }
345
+
346
+ &.airship-feedback-icon a::before,
347
+ &.airship-feedback-icon span::before {
348
+ background-image: url("../assets/icons/airship-feedback-hover.svg");
349
+ }
345
350
  }
346
351
  }
347
352
 
@@ -506,6 +511,17 @@
506
511
  animation: tilt-shake 0.4s;
507
512
  background-image: url("../assets/icons/airship-audiences-hover.svg");
508
513
  }
514
+ // add feedbacl
515
+ &.airship-feedback-icon a::before,
516
+ &.airship-feedback-icon span::before {
517
+ background-image: url("../assets/icons/airship-feedback.svg");
518
+ }
519
+
520
+ &.airship-feedback-icon a:hover::before,
521
+ &.airship-feedback-icon span:hover::before {
522
+ animation: tilt-shake 0.4s;
523
+ background-image: url("../assets/icons/airship-feedback-hover.svg");
524
+ }
509
525
 
510
526
  }
511
527
  }
@@ -16,37 +16,37 @@ table.toggle-table {
16
16
  border-radius:0;
17
17
  border:none;
18
18
  .toggle-input{
19
- margin-top:11px;
20
- padding:1px 3px 1px 3px;
21
- font-size:14px;
22
- height:1.5rem;
19
+ margin-top:11px;
20
+ padding:1px 3px 1px 3px;
21
+ font-size:14px;
22
+ height:1.5rem;
23
23
  }
24
24
  .toggle-input-label{
25
- display: none;
25
+ display: none;
26
26
  }
27
27
  .toggle-date-input-container{
28
- .toggle-date-input-calendar-icon{
29
- .toggle-input{
30
- background:transparent;
31
- padding:3px 1rem 3px 0.1rem;
32
- margin-top: 10px;
33
- }
34
- }
35
- .toggle-clear{
36
- display: none;
28
+ .toggle-date-input-calendar-icon{
29
+ .toggle-input{
30
+ background:transparent;
31
+ padding:3px 1rem 3px 0.1rem;
32
+ margin-top: 10px;
37
33
  }
34
+ }
35
+ .toggle-clear{
36
+ display: none;
37
+ }
38
38
  }
39
39
 
40
40
  }
41
41
 
42
42
  thead {
43
43
  th.toggle-table-th {
44
- padding: 0 10px 20px 0;
44
+ padding: 0;
45
45
  border: none;
46
46
  text-align: left;
47
- @include toggle-global-font-config;
48
- font-weight: bold;
49
- font-size: $toggle-font-size-small;
47
+ @include toggle-global-font-config;
48
+ font-weight: bold;
49
+ font-size: $toggle-font-size-small;
50
50
 
51
51
  &:hover {
52
52
  .search {
@@ -54,7 +54,7 @@ table.toggle-table {
54
54
  }
55
55
  }
56
56
 
57
-
57
+
58
58
  }
59
59
 
60
60
 
@@ -75,7 +75,6 @@ table.toggle-table {
75
75
  text-indent: 1px;
76
76
  text-overflow: '';
77
77
 
78
- background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
79
78
  background-size: 15px;
80
79
  padding : 0.5rem 0rem 0.5rem 1rem;
81
80
  }
@@ -97,24 +96,24 @@ table.toggle-table {
97
96
  }
98
97
 
99
98
  td.toggle-tablee-td {
100
- @include toggle-global-font-config;
101
-
102
- font-size: $toggle-font-size-small;
103
- padding: 1rem 0;
104
- padding-left:1rem;
99
+ @include toggle-global-font-config;
105
100
 
106
- cursor: pointer;
107
- vertical-align: middle;
108
- text-overflow: ellipsis;
109
- overflow: hidden;
110
- max-width: 80px;
111
- border: none;
112
- text-align: left;
101
+ font-size: $toggle-font-size-small;
102
+ padding: 1rem 0;
103
+ padding-left:1rem;
113
104
 
114
- &:has(.toggle-three-dots-container) {
115
- overflow: inherit;
116
- text-align: right;
117
- }
105
+ cursor: pointer;
106
+ vertical-align: middle;
107
+ text-overflow: ellipsis;
108
+ overflow: hidden;
109
+ max-width: 80px;
110
+ border: none;
111
+ text-align: left;
112
+
113
+ &:has(.toggle-three-dots-container) {
114
+ overflow: inherit;
115
+ text-align: right;
116
+ }
118
117
  }
119
118
 
120
119
  tr.toggle-tablee-tr {
@@ -129,18 +128,18 @@ table.toggle-table {
129
128
  border-bottom-left-radius: 10px;
130
129
  }
131
130
 
132
- td.toggle-tablee-td:last-child {
133
- border-top-right-radius: 10px;
134
- border-bottom-right-radius: 10px;
135
- }
131
+ td.toggle-tablee-td:last-child {
132
+ border-top-right-radius: 10px;
133
+ border-bottom-right-radius: 10px;
134
+ }
136
135
 
137
- td.toggle-tablee-td {
138
- .toggle-button {
139
- &.neutral {
140
- padding: 0.2rem 0.9rem 0.2rem 0.9rem;
141
- }
142
- }
136
+ td.toggle-tablee-td {
137
+ .toggle-button {
138
+ &.neutral {
139
+ padding: 0.2rem 0.9rem 0.2rem 0.9rem;
140
+ }
143
141
  }
142
+ }
144
143
 
145
144
 
146
145
  }
@@ -148,159 +147,160 @@ table.toggle-table {
148
147
  opacity: 0.5;
149
148
  cursor: not-allowed;
150
149
  }
151
-
150
+
152
151
  }
153
152
 
154
153
  .toggle-date-input-calendar-icon{
155
154
  &:after{
156
- content: '';
157
- }
155
+ content: '';
156
+ }
158
157
  .toggle-input{
159
- font-size: 12px;
160
- padding-right:0px !important;
158
+ font-size: 12px;
159
+ padding-right:0px !important;
161
160
  }
162
- }
163
-
161
+ }
162
+
164
163
  }
165
164
 
166
165
 
167
166
 
168
167
 
169
168
  .toggle-table-any-search-active {
170
- .toggle-table-th-inner {
171
- height:74px;
172
- }
169
+ .toggle-table-th-inner {
170
+ height:74px;
171
+ }
173
172
  }
174
173
  .toggle-table-th-inner {
175
- line-height: 1em;
176
- position: relative;
177
- display: block;
178
- height: 20px;
179
- margin: 0 4px 8px 4px;
180
- padding: 10px;
181
- border:1px solid transparent;
182
- border-radius: 4px;
183
- box-sizing:border-box;
184
- transition: height .5s;
185
-
186
- .toggle-table-search-active & {
187
- z-index: 25;
188
- //overflow: hidden;
189
- background-color: white;
190
- border:1px solid #FFA300;
191
- input {
192
- cursor: text;
193
- pointer-events: auto;
194
- }
195
- .toggle-table-close-search {
196
- display: inline-block;
197
- }
174
+ line-height: 1em;
175
+ position: relative;
176
+ display: block;
177
+ height: 50px;
178
+ margin: 0 4px 8px 4px;
179
+ padding: 10px;
180
+ border:1px solid transparent;
181
+ border-radius: 4px;
182
+ box-sizing:border-box;
183
+ transition: height .5s;
184
+
185
+ .toggle-table-search-active & {
186
+ z-index: 25;
187
+ //overflow: hidden;
188
+ background-color: white;
189
+ border:1px solid #FFA300;
190
+ input {
191
+ cursor: text;
192
+ pointer-events: auto;
198
193
  }
199
- .toggle-table-searchable & {
200
- .toggle-table-th-title {
201
- position: relative;
202
- display: inline-block;
203
- &:after {
204
- display: block;
205
- content:'';
206
- position: absolute;
207
- right: -15px;
208
- top: 3px;
209
- background: url(../assets/icons/search.svg) no-repeat;
210
- width: 10px;
211
- height: 10px;
212
- opacity: 0.3;
213
- }
214
- }
215
- &:hover .toggle-table-th-title:after {
216
- opacity: 1;
217
- }
194
+ .toggle-table-close-search {
195
+ display: inline-block;
218
196
  }
219
- .toggle-table-searchable.toggle-table-search-active & {
220
- .toggle-table-th-title:after {
221
- display: none;
222
- }
197
+ }
198
+ .toggle-table-searchable & {
199
+ cursor: pointer;
200
+ .toggle-table-th-title {
201
+ position: relative;
202
+ display: inline-block;
203
+ &:after {
204
+ display: block;
205
+ content:'';
206
+ position: absolute;
207
+ right: -15px;
208
+ top: 3px;
209
+ background: url(../assets/icons/search.svg) no-repeat;
210
+ width: 10px;
211
+ height: 10px;
212
+ opacity: 0.3;
213
+ }
214
+ }
215
+ &:hover .toggle-table-th-title:after {
216
+ opacity: 1;
217
+ }
218
+ }
219
+ .toggle-table-searchable.toggle-table-search-active & {
220
+ .toggle-table-th-title:after {
221
+ display: none;
223
222
  }
223
+ }
224
224
  }
225
225
 
226
226
 
227
227
  .toggle-table-close-search {
228
- position: absolute;
229
- top: 12px;
230
- right: 10px;
231
- display: block;
232
- opacity: 0.3;
233
- cursor:pointer;
228
+ position: absolute;
229
+ top: 12px;
230
+ right: 10px;
231
+ display: block;
232
+ opacity: 0.3;
233
+ cursor:pointer;
234
234
  }
235
235
  .toggle-table-close-search {
236
- background: url(../assets/icons/grey_cross.svg) no-repeat;
237
- width: 12px;
238
- height: 12px;
239
- display: none;
240
- float: right;
241
- &:hover {
242
- opacity: 1;
243
- }
236
+ background: url(../assets/icons/grey_cross.svg) no-repeat;
237
+ width: 12px;
238
+ height: 12px;
239
+ display: none;
240
+ float: right;
241
+ &:hover {
242
+ opacity: 1;
243
+ }
244
244
  }
245
245
 
246
246
  .arrow-order {
247
- background: url(/img/icons/arrow-right-blue-small.svg);
248
- position: absolute;
249
- top: 50%;
250
- margin-top: -10px;
251
- right: 15px;
252
- width: 20px;
253
- height: 20px;
254
- display: none;
247
+ background: url(/img/icons/arrow-right-blue-small.svg);
248
+ position: absolute;
249
+ top: 50%;
250
+ margin-top: -10px;
251
+ right: 15px;
252
+ width: 20px;
253
+ height: 20px;
254
+ display: none;
255
255
  }
256
256
 
257
257
 
258
258
 
259
259
  .toggle-pagination {
260
260
 
261
- ul, li {
262
- list-style: none;
263
- }
264
- ul {
265
- margin: 0;
266
- padding: 0;
267
- li {
268
- float: left;
269
-
270
- button {
271
- border: none;
272
- cursor: pointer;
273
- padding: 0 10px;
274
- color: #354B64;
275
- background-color: transparent;
276
- &:disabled {
277
- color: rgba(24, 158, 209, 0.7);
278
- font-weight: bold;
279
- }
280
- }
261
+ ul, li {
262
+ list-style: none;
263
+ }
264
+ ul {
265
+ margin: 0;
266
+ padding: 0;
267
+ li {
268
+ float: left;
281
269
 
282
- .toggle-pagination-prev, .toggle-pagination-next {
283
- text-indent: -99999px;
284
- width: 25px;
285
- height: 25px;
286
- }
270
+ button {
271
+ border: none;
272
+ cursor: pointer;
273
+ padding: 0 10px;
274
+ color: #354B64;
275
+ background-color: transparent;
276
+ &:disabled {
277
+ color: rgba(24, 158, 209, 0.7);
278
+ font-weight: bold;
279
+ }
280
+ }
287
281
 
288
- .toggle-pagination-prev{
289
- background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
290
- margin-right: 10px;
282
+ .toggle-pagination-prev, .toggle-pagination-next {
283
+ text-indent: -99999px;
284
+ width: 25px;
285
+ height: 25px;
286
+ }
291
287
 
292
- &:hover {
293
- background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
294
- }
295
- }
288
+ .toggle-pagination-prev{
289
+ background: url(../assets/icons/arrow-left-blue.svg) no-repeat;
290
+ margin-right: 10px;
296
291
 
297
- .toggle-pagination-next{
298
- background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
299
- margin-left: 10px;
300
- &:hover {
301
- background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
302
- }
303
- }
292
+ &:hover {
293
+ background: url(../assets/icons/arrow-left-blue-hover.svg) no-repeat;
304
294
  }
295
+ }
296
+
297
+ .toggle-pagination-next{
298
+ background: url(../assets/icons/arrow-right-blue.svg) no-repeat;
299
+ margin-left: 10px;
300
+ &:hover {
301
+ background: url(../assets/icons/arrow-right-blue-hover.svg) no-repeat;
302
+ }
303
+ }
305
304
  }
305
+ }
306
306
  }
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#6d90b4}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:#fff}</style><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>