@empathyco/x-components 3.0.0-alpha.395 → 3.0.0-alpha.396
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/CHANGELOG.md +9 -0
- package/design-system/deprecated-full-theme.css +135 -135
- package/docs/API-reference/components/facets/x-components.filters/editable-number-range-filter.md +55 -7
- package/js/x-modules/facets/components/filters/editable-number-range-filter.vue.js +5 -0
- package/js/x-modules/facets/components/filters/editable-number-range-filter.vue.js.map +1 -1
- package/js/x-modules/facets/components/filters/editable-number-range-filter.vue_rollup-plugin-vue_script.vue.js +2 -1
- package/js/x-modules/facets/components/filters/editable-number-range-filter.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
- package/types/x-modules/facets/components/filters/editable-number-range-filter.vue.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.396](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.395...@empathyco/x-components@3.0.0-alpha.396) (2023-07-26)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* improve customization and add prop classes to editable-number-range-filter (#1253) ([fda4cc6](https://github.com/empathyco/x/commit/fda4cc69be19399647ba1128ebb872b8eb36e011))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [3.0.0-alpha.395](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.394...@empathyco/x-components@3.0.0-alpha.395) (2023-07-25)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -3286,49 +3286,6 @@
|
|
|
3286
3286
|
[dir="rtl"] .x-border-radius--bottom-right-20 {
|
|
3287
3287
|
border-bottom-left-radius: var(--x-size-base-20) !important;
|
|
3288
3288
|
}
|
|
3289
|
-
.x-background--lead {
|
|
3290
|
-
background-color: var(--x-color-base-lead) !important;
|
|
3291
|
-
}
|
|
3292
|
-
|
|
3293
|
-
.x-background--auxiliary {
|
|
3294
|
-
background-color: var(--x-color-base-auxiliary) !important;
|
|
3295
|
-
}
|
|
3296
|
-
|
|
3297
|
-
.x-background--neutral-10 {
|
|
3298
|
-
background-color: var(--x-color-base-neutral-10) !important;
|
|
3299
|
-
}
|
|
3300
|
-
|
|
3301
|
-
.x-background--neutral-35 {
|
|
3302
|
-
background-color: var(--x-color-base-neutral-35) !important;
|
|
3303
|
-
}
|
|
3304
|
-
|
|
3305
|
-
.x-background--neutral-70 {
|
|
3306
|
-
background-color: var(--x-color-base-neutral-70) !important;
|
|
3307
|
-
}
|
|
3308
|
-
|
|
3309
|
-
.x-background--neutral-95 {
|
|
3310
|
-
background-color: var(--x-color-base-neutral-95) !important;
|
|
3311
|
-
}
|
|
3312
|
-
|
|
3313
|
-
.x-background--neutral-100 {
|
|
3314
|
-
background-color: var(--x-color-base-neutral-100) !important;
|
|
3315
|
-
}
|
|
3316
|
-
|
|
3317
|
-
.x-background--accent {
|
|
3318
|
-
background-color: var(--x-color-base-accent) !important;
|
|
3319
|
-
}
|
|
3320
|
-
|
|
3321
|
-
.x-background--enable {
|
|
3322
|
-
background-color: var(--x-color-base-enable) !important;
|
|
3323
|
-
}
|
|
3324
|
-
|
|
3325
|
-
.x-background--disable {
|
|
3326
|
-
background-color: var(--x-color-base-disable) !important;
|
|
3327
|
-
}
|
|
3328
|
-
|
|
3329
|
-
.x-background--transparent {
|
|
3330
|
-
background-color: var(--x-color-base-transparent) !important;
|
|
3331
|
-
}
|
|
3332
3289
|
.x-border-color--lead {
|
|
3333
3290
|
border-color: var(--x-color-base-lead) !important;
|
|
3334
3291
|
}
|
|
@@ -3372,6 +3329,49 @@
|
|
|
3372
3329
|
.x-border-color--transparent {
|
|
3373
3330
|
border-color: var(--x-color-base-transparent) !important;
|
|
3374
3331
|
}
|
|
3332
|
+
.x-background--lead {
|
|
3333
|
+
background-color: var(--x-color-base-lead) !important;
|
|
3334
|
+
}
|
|
3335
|
+
|
|
3336
|
+
.x-background--auxiliary {
|
|
3337
|
+
background-color: var(--x-color-base-auxiliary) !important;
|
|
3338
|
+
}
|
|
3339
|
+
|
|
3340
|
+
.x-background--neutral-10 {
|
|
3341
|
+
background-color: var(--x-color-base-neutral-10) !important;
|
|
3342
|
+
}
|
|
3343
|
+
|
|
3344
|
+
.x-background--neutral-35 {
|
|
3345
|
+
background-color: var(--x-color-base-neutral-35) !important;
|
|
3346
|
+
}
|
|
3347
|
+
|
|
3348
|
+
.x-background--neutral-70 {
|
|
3349
|
+
background-color: var(--x-color-base-neutral-70) !important;
|
|
3350
|
+
}
|
|
3351
|
+
|
|
3352
|
+
.x-background--neutral-95 {
|
|
3353
|
+
background-color: var(--x-color-base-neutral-95) !important;
|
|
3354
|
+
}
|
|
3355
|
+
|
|
3356
|
+
.x-background--neutral-100 {
|
|
3357
|
+
background-color: var(--x-color-base-neutral-100) !important;
|
|
3358
|
+
}
|
|
3359
|
+
|
|
3360
|
+
.x-background--accent {
|
|
3361
|
+
background-color: var(--x-color-base-accent) !important;
|
|
3362
|
+
}
|
|
3363
|
+
|
|
3364
|
+
.x-background--enable {
|
|
3365
|
+
background-color: var(--x-color-base-enable) !important;
|
|
3366
|
+
}
|
|
3367
|
+
|
|
3368
|
+
.x-background--disable {
|
|
3369
|
+
background-color: var(--x-color-base-disable) !important;
|
|
3370
|
+
}
|
|
3371
|
+
|
|
3372
|
+
.x-background--transparent {
|
|
3373
|
+
background-color: var(--x-color-base-transparent) !important;
|
|
3374
|
+
}
|
|
3375
3375
|
.x-text--stroke.x-text {
|
|
3376
3376
|
--x-string-text-decoration: line-through;
|
|
3377
3377
|
}
|
|
@@ -4516,28 +4516,6 @@
|
|
|
4516
4516
|
--x-size-padding-row-05: var(--x-size-base-05);
|
|
4517
4517
|
--x-size-padding-row-06: var(--x-size-base-06);
|
|
4518
4518
|
}
|
|
4519
|
-
:root {
|
|
4520
|
-
--x-size-gap-row-01: var(--x-size-base-01);
|
|
4521
|
-
--x-size-gap-row-02: var(--x-size-base-02);
|
|
4522
|
-
--x-size-gap-row-03: var(--x-size-base-03);
|
|
4523
|
-
--x-size-gap-row-04: var(--x-size-base-04);
|
|
4524
|
-
--x-size-gap-row-05: var(--x-size-base-05);
|
|
4525
|
-
--x-size-gap-row-06: var(--x-size-base-06);
|
|
4526
|
-
--x-size-gap-row-07: var(--x-size-base-07);
|
|
4527
|
-
--x-size-gap-row-08: var(--x-size-base-08);
|
|
4528
|
-
--x-size-gap-row-09: var(--x-size-base-09);
|
|
4529
|
-
--x-size-gap-row-10: var(--x-size-base-10);
|
|
4530
|
-
--x-size-gap-row-11: var(--x-size-base-11);
|
|
4531
|
-
--x-size-gap-row-12: var(--x-size-base-12);
|
|
4532
|
-
--x-size-gap-row-13: var(--x-size-base-13);
|
|
4533
|
-
--x-size-gap-row-14: var(--x-size-base-14);
|
|
4534
|
-
--x-size-gap-row-15: var(--x-size-base-15);
|
|
4535
|
-
--x-size-gap-row-16: var(--x-size-base-16);
|
|
4536
|
-
--x-size-gap-row-17: var(--x-size-base-17);
|
|
4537
|
-
--x-size-gap-row-18: var(--x-size-base-18);
|
|
4538
|
-
--x-size-gap-row-19: var(--x-size-base-19);
|
|
4539
|
-
--x-size-gap-row-20: var(--x-size-base-20);
|
|
4540
|
-
}
|
|
4541
4519
|
/* @deprecated */
|
|
4542
4520
|
:root {
|
|
4543
4521
|
--x-size-padding-row-02: var(--x-size-base-02);
|
|
@@ -4589,6 +4567,28 @@
|
|
|
4589
4567
|
--x-size-gap-row-19: var(--x-size-base-19);
|
|
4590
4568
|
--x-size-gap-row-20: var(--x-size-base-20);
|
|
4591
4569
|
}
|
|
4570
|
+
:root {
|
|
4571
|
+
--x-size-gap-row-01: var(--x-size-base-01);
|
|
4572
|
+
--x-size-gap-row-02: var(--x-size-base-02);
|
|
4573
|
+
--x-size-gap-row-03: var(--x-size-base-03);
|
|
4574
|
+
--x-size-gap-row-04: var(--x-size-base-04);
|
|
4575
|
+
--x-size-gap-row-05: var(--x-size-base-05);
|
|
4576
|
+
--x-size-gap-row-06: var(--x-size-base-06);
|
|
4577
|
+
--x-size-gap-row-07: var(--x-size-base-07);
|
|
4578
|
+
--x-size-gap-row-08: var(--x-size-base-08);
|
|
4579
|
+
--x-size-gap-row-09: var(--x-size-base-09);
|
|
4580
|
+
--x-size-gap-row-10: var(--x-size-base-10);
|
|
4581
|
+
--x-size-gap-row-11: var(--x-size-base-11);
|
|
4582
|
+
--x-size-gap-row-12: var(--x-size-base-12);
|
|
4583
|
+
--x-size-gap-row-13: var(--x-size-base-13);
|
|
4584
|
+
--x-size-gap-row-14: var(--x-size-base-14);
|
|
4585
|
+
--x-size-gap-row-15: var(--x-size-base-15);
|
|
4586
|
+
--x-size-gap-row-16: var(--x-size-base-16);
|
|
4587
|
+
--x-size-gap-row-17: var(--x-size-base-17);
|
|
4588
|
+
--x-size-gap-row-18: var(--x-size-base-18);
|
|
4589
|
+
--x-size-gap-row-19: var(--x-size-base-19);
|
|
4590
|
+
--x-size-gap-row-20: var(--x-size-base-20);
|
|
4591
|
+
}
|
|
4592
4592
|
|
|
4593
4593
|
.x-row--gap-01 {
|
|
4594
4594
|
--x-size-gap-row: var(--x-size-gap-row-01);
|
|
@@ -5590,22 +5590,6 @@
|
|
|
5590
5590
|
--x-size-font-message-default: var(--x-size-font-title3);
|
|
5591
5591
|
--x-number-font-weight-message-default: var(--x-number-font-weight-title3);
|
|
5592
5592
|
}
|
|
5593
|
-
/* @deprecated */
|
|
5594
|
-
:root {
|
|
5595
|
-
--x-size-padding-list-01: var(--x-size-base-01);
|
|
5596
|
-
--x-size-padding-list-02: var(--x-size-base-02);
|
|
5597
|
-
--x-size-padding-list-03: var(--x-size-base-03);
|
|
5598
|
-
--x-size-padding-list-04: var(--x-size-base-04);
|
|
5599
|
-
--x-size-padding-list-05: var(--x-size-base-05);
|
|
5600
|
-
--x-size-padding-list-06: var(--x-size-base-06);
|
|
5601
|
-
--x-size-padding-list-07: var(--x-size-base-07);
|
|
5602
|
-
--x-size-padding-list-08: var(--x-size-base-08);
|
|
5603
|
-
--x-size-padding-list-09: var(--x-size-base-09);
|
|
5604
|
-
--x-size-padding-list-10: var(--x-size-base-10);
|
|
5605
|
-
--x-size-padding-list-11: var(--x-size-base-11);
|
|
5606
|
-
--x-size-padding-list-12: var(--x-size-base-12);
|
|
5607
|
-
--x-size-padding-list-13: var(--x-size-base-13);
|
|
5608
|
-
}
|
|
5609
5593
|
:root {
|
|
5610
5594
|
--x-string-justify-message-default: center;
|
|
5611
5595
|
--x-size-gap-message-default: var(--x-size-base-03);
|
|
@@ -5693,6 +5677,22 @@
|
|
|
5693
5677
|
--x-size-padding-list-12: var(--x-size-base-12);
|
|
5694
5678
|
--x-size-padding-list-13: var(--x-size-base-13);
|
|
5695
5679
|
}
|
|
5680
|
+
/* @deprecated */
|
|
5681
|
+
:root {
|
|
5682
|
+
--x-size-padding-list-01: var(--x-size-base-01);
|
|
5683
|
+
--x-size-padding-list-02: var(--x-size-base-02);
|
|
5684
|
+
--x-size-padding-list-03: var(--x-size-base-03);
|
|
5685
|
+
--x-size-padding-list-04: var(--x-size-base-04);
|
|
5686
|
+
--x-size-padding-list-05: var(--x-size-base-05);
|
|
5687
|
+
--x-size-padding-list-06: var(--x-size-base-06);
|
|
5688
|
+
--x-size-padding-list-07: var(--x-size-base-07);
|
|
5689
|
+
--x-size-padding-list-08: var(--x-size-base-08);
|
|
5690
|
+
--x-size-padding-list-09: var(--x-size-base-09);
|
|
5691
|
+
--x-size-padding-list-10: var(--x-size-base-10);
|
|
5692
|
+
--x-size-padding-list-11: var(--x-size-base-11);
|
|
5693
|
+
--x-size-padding-list-12: var(--x-size-base-12);
|
|
5694
|
+
--x-size-padding-list-13: var(--x-size-base-13);
|
|
5695
|
+
}
|
|
5696
5696
|
|
|
5697
5697
|
/* @deprecated */
|
|
5698
5698
|
[class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
|
|
@@ -7391,11 +7391,6 @@
|
|
|
7391
7391
|
--x-size-gap-grid: var(--x-size-base-03);
|
|
7392
7392
|
--x-size-min-width-grid-item: 150px;
|
|
7393
7393
|
}
|
|
7394
|
-
:root {
|
|
7395
|
-
--x-size-padding-grid: 0;
|
|
7396
|
-
--x-size-gap-grid: var(--x-size-base-03);
|
|
7397
|
-
--x-size-min-width-grid-item: 150px;
|
|
7398
|
-
}
|
|
7399
7394
|
|
|
7400
7395
|
.x-grid-list {
|
|
7401
7396
|
margin: 0;
|
|
@@ -7852,6 +7847,18 @@
|
|
|
7852
7847
|
--x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7853
7848
|
--x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7854
7849
|
}
|
|
7850
|
+
:root {
|
|
7851
|
+
--x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
|
|
7852
|
+
--x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
|
|
7853
|
+
--x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
|
|
7854
|
+
--x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
|
|
7855
|
+
--x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
|
|
7856
|
+
--x-size-padding-facet-header-card: var(--x-size-base-03);
|
|
7857
|
+
--x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7858
|
+
--x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7859
|
+
--x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7860
|
+
--x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7861
|
+
}
|
|
7855
7862
|
|
|
7856
7863
|
.x-facet--card.x-facet,
|
|
7857
7864
|
.x-facet--card .x-facet {
|
|
@@ -7869,18 +7876,6 @@
|
|
|
7869
7876
|
:root {
|
|
7870
7877
|
--x-size-width-dropdown-xl: 282px;
|
|
7871
7878
|
}
|
|
7872
|
-
:root {
|
|
7873
|
-
--x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
|
|
7874
|
-
--x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
|
|
7875
|
-
--x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
|
|
7876
|
-
--x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
|
|
7877
|
-
--x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
|
|
7878
|
-
--x-size-padding-facet-header-card: var(--x-size-base-03);
|
|
7879
|
-
--x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7880
|
-
--x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7881
|
-
--x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7882
|
-
--x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
|
|
7883
|
-
}
|
|
7884
7879
|
:root {
|
|
7885
7880
|
--x-size-width-dropdown-xl: 282px;
|
|
7886
7881
|
}
|
|
@@ -7983,6 +7978,30 @@
|
|
|
7983
7978
|
--x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
7984
7979
|
--x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
7985
7980
|
}
|
|
7981
|
+
:root {
|
|
7982
|
+
--x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
|
|
7983
|
+
--x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
|
|
7984
|
+
--x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
|
|
7985
|
+
--x-size-padding-right-dropdown-item-line: 0;
|
|
7986
|
+
--x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
|
|
7987
|
+
--x-size-padding-left-dropdown-item-line: 0;
|
|
7988
|
+
--x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
|
|
7989
|
+
--x-size-padding-right-dropdown-toggle-line: 0;
|
|
7990
|
+
--x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
|
|
7991
|
+
--x-size-padding-left-dropdown-toggle-line: 0;
|
|
7992
|
+
--x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
|
|
7993
|
+
--x-size-border-width-top-dropdown-toggle-line: 0;
|
|
7994
|
+
--x-size-border-width-right-dropdown-toggle-line: 0;
|
|
7995
|
+
--x-size-border-width-bottom-dropdown-toggle-line: var(
|
|
7996
|
+
--x-size-border-width-dropdown-toggle-line
|
|
7997
|
+
);
|
|
7998
|
+
--x-size-border-width-left-dropdown-toggle-line: 0;
|
|
7999
|
+
--x-size-border-width-dropdown-list-line: 0;
|
|
8000
|
+
--x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8001
|
+
--x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8002
|
+
--x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8003
|
+
--x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8004
|
+
}
|
|
7986
8005
|
|
|
7987
8006
|
.x-dropdown--line {
|
|
7988
8007
|
--x-size-padding-top-dropdown-item-default: var(--x-size-padding-top-dropdown-item-line);
|
|
@@ -8023,32 +8042,15 @@
|
|
|
8023
8042
|
);
|
|
8024
8043
|
}
|
|
8025
8044
|
:root {
|
|
8026
|
-
--x-size-
|
|
8027
|
-
--x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
|
|
8028
|
-
--x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
|
|
8029
|
-
--x-size-padding-right-dropdown-item-line: 0;
|
|
8030
|
-
--x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
|
|
8031
|
-
--x-size-padding-left-dropdown-item-line: 0;
|
|
8032
|
-
--x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
|
|
8033
|
-
--x-size-padding-right-dropdown-toggle-line: 0;
|
|
8034
|
-
--x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
|
|
8035
|
-
--x-size-padding-left-dropdown-toggle-line: 0;
|
|
8036
|
-
--x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
|
|
8037
|
-
--x-size-border-width-top-dropdown-toggle-line: 0;
|
|
8038
|
-
--x-size-border-width-right-dropdown-toggle-line: 0;
|
|
8039
|
-
--x-size-border-width-bottom-dropdown-toggle-line: var(
|
|
8040
|
-
--x-size-border-width-dropdown-toggle-line
|
|
8041
|
-
);
|
|
8042
|
-
--x-size-border-width-left-dropdown-toggle-line: 0;
|
|
8043
|
-
--x-size-border-width-dropdown-list-line: 0;
|
|
8044
|
-
--x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8045
|
-
--x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8046
|
-
--x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8047
|
-
--x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
|
|
8045
|
+
--x-size-width-dropdown-l: 202px;
|
|
8048
8046
|
}
|
|
8049
8047
|
:root {
|
|
8050
8048
|
--x-size-width-dropdown-l: 202px;
|
|
8051
8049
|
}
|
|
8050
|
+
|
|
8051
|
+
.x-dropdown.x-dropdown--l {
|
|
8052
|
+
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
|
|
8053
|
+
}
|
|
8052
8054
|
:root {
|
|
8053
8055
|
--x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
|
|
8054
8056
|
--x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
|
|
@@ -8461,6 +8463,16 @@
|
|
|
8461
8463
|
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8462
8464
|
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8463
8465
|
}
|
|
8466
|
+
:root {
|
|
8467
|
+
--x-color-background-button-secondary: transparent;
|
|
8468
|
+
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
8469
|
+
--x-color-text-button-secondary: var(--x-color-border-button-default);
|
|
8470
|
+
--x-size-border-width-button-secondary: var(--x-size-border-width-base);
|
|
8471
|
+
--x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8472
|
+
--x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8473
|
+
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8474
|
+
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8475
|
+
}
|
|
8464
8476
|
|
|
8465
8477
|
.x-button--secondary.x-button,
|
|
8466
8478
|
.x-button--secondary .x-button {
|
|
@@ -8472,16 +8484,6 @@
|
|
|
8472
8484
|
--x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-secondary);
|
|
8473
8485
|
--x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
|
|
8474
8486
|
}
|
|
8475
|
-
:root {
|
|
8476
|
-
--x-color-background-button-secondary: transparent;
|
|
8477
|
-
--x-color-border-button-secondary: var(--x-color-border-button-default);
|
|
8478
|
-
--x-color-text-button-secondary: var(--x-color-border-button-default);
|
|
8479
|
-
--x-size-border-width-button-secondary: var(--x-size-border-width-base);
|
|
8480
|
-
--x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8481
|
-
--x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8482
|
-
--x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8483
|
-
--x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
|
|
8484
|
-
}
|
|
8485
8487
|
:root {
|
|
8486
8488
|
--x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
|
|
8487
8489
|
--x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
|
|
@@ -8840,9 +8842,7 @@
|
|
|
8840
8842
|
--x-size-border-width-base: 1px;
|
|
8841
8843
|
}
|
|
8842
8844
|
:root {
|
|
8843
|
-
--x-size-
|
|
8844
|
-
|
|
8845
|
-
|
|
8846
|
-
.x-dropdown.x-dropdown--l {
|
|
8847
|
-
--x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
|
|
8845
|
+
--x-size-padding-grid: 0;
|
|
8846
|
+
--x-size-gap-grid: var(--x-size-base-03);
|
|
8847
|
+
--x-size-min-width-grid-item: 150px;
|
|
8848
8848
|
}
|
package/docs/API-reference/components/facets/x-components.filters/editable-number-range-filter.md
CHANGED
|
@@ -28,11 +28,11 @@ True by default.
|
|
|
28
28
|
|
|
29
29
|
## Slots
|
|
30
30
|
|
|
31
|
-
| Name | Description | Bindings<br />(name - type - description)
|
|
32
|
-
| -------------------------- | ------------------------------------------------- |
|
|
33
|
-
| <code>default</code> | Empty slot used to customize the whole component. | <br /><br /><br /><br /><br /><br />
|
|
34
|
-
| <code>apply-content</code> | Slot used to customize the apply button content. | None
|
|
35
|
-
| <code>clear-content</code> | Slot used to customize the clear button content. | None
|
|
31
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
32
|
+
| -------------------------- | ------------------------------------------------- | ------------------------------------------ |
|
|
33
|
+
| <code>default</code> | Empty slot used to customize the whole component. | <br /><br /><br /><br /><br /><br /><br /> |
|
|
34
|
+
| <code>apply-content</code> | Slot used to customize the apply button content. | None |
|
|
35
|
+
| <code>clear-content</code> | Slot used to customize the clear button content. | None |
|
|
36
36
|
|
|
37
37
|
## Example
|
|
38
38
|
|
|
@@ -153,11 +153,20 @@ True by default.
|
|
|
153
153
|
<template>
|
|
154
154
|
<EditableNumberRangeFilter
|
|
155
155
|
:filter="editableFilter"
|
|
156
|
-
#default="{
|
|
156
|
+
#default="{
|
|
157
|
+
min,
|
|
158
|
+
max,
|
|
159
|
+
setMin,
|
|
160
|
+
setMax,
|
|
161
|
+
emitUserModifiedFilter,
|
|
162
|
+
clearValues,
|
|
163
|
+
hasError,
|
|
164
|
+
isAnyRange
|
|
165
|
+
}"
|
|
157
166
|
>
|
|
158
167
|
<button @click="emitUserModifiedFilter">✅ Apply!</button>
|
|
159
168
|
<button @click="clearValues">🗑 Clear!</button>
|
|
160
|
-
<input :value="min" @change="setMin($event.target.valueAsNumber)" />
|
|
169
|
+
<input :value="!isAnyRange ? min : null" @change="setMin($event.target.valueAsNumber)" />
|
|
161
170
|
<input :value="max" @change="setMax($event.target.valueAsNumber)" />
|
|
162
171
|
<div class="has-error" v-if="hasError">⚠️ Invalid range values</div>
|
|
163
172
|
</EditableNumberRangeFilter>
|
|
@@ -188,6 +197,45 @@ True by default.
|
|
|
188
197
|
</script>
|
|
189
198
|
```
|
|
190
199
|
|
|
200
|
+
### Customizing the items with classes
|
|
201
|
+
|
|
202
|
+
The `buttonsClass` and `inputsClass` props can be used to add classes to the inputs and buttons of
|
|
203
|
+
the component.
|
|
204
|
+
|
|
205
|
+
```
|
|
206
|
+
<template>
|
|
207
|
+
<EditableNumberRangeFilter
|
|
208
|
+
:filter="editableFilter"
|
|
209
|
+
:inputsClass="'my-inputs-class'"
|
|
210
|
+
:buttonsClass="'my-buttons-class'"
|
|
211
|
+
/>
|
|
212
|
+
</template>
|
|
213
|
+
|
|
214
|
+
<script>
|
|
215
|
+
import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';
|
|
216
|
+
|
|
217
|
+
export default {
|
|
218
|
+
components: {
|
|
219
|
+
EditableNumberRangeFilter
|
|
220
|
+
},
|
|
221
|
+
data() {
|
|
222
|
+
return {
|
|
223
|
+
editableFilter: {
|
|
224
|
+
facetId: 'age',
|
|
225
|
+
id: 'age:primary',
|
|
226
|
+
label: 'primary',
|
|
227
|
+
modelName: 'EditableNumberRangeFilter',
|
|
228
|
+
range: {
|
|
229
|
+
min: null,
|
|
230
|
+
max: null
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
</script>
|
|
237
|
+
```
|
|
238
|
+
|
|
191
239
|
## Events
|
|
192
240
|
|
|
193
241
|
A list of events that the component will emit:
|
|
@@ -24,6 +24,7 @@ var __vue_render__ = function () {
|
|
|
24
24
|
_c("input", {
|
|
25
25
|
staticClass:
|
|
26
26
|
"x-editable-number-range-filter__input x-editable-number-range-filter__input--min x-input",
|
|
27
|
+
class: _vm.inputsClass,
|
|
27
28
|
attrs: {
|
|
28
29
|
name: "min",
|
|
29
30
|
type: "number",
|
|
@@ -40,6 +41,7 @@ var __vue_render__ = function () {
|
|
|
40
41
|
_c("input", {
|
|
41
42
|
staticClass:
|
|
42
43
|
"x-editable-number-range-filter__input x-editable-number-range-filter__input--max x-input",
|
|
44
|
+
class: _vm.inputsClass,
|
|
43
45
|
attrs: {
|
|
44
46
|
name: "max",
|
|
45
47
|
type: "number",
|
|
@@ -59,6 +61,7 @@ var __vue_render__ = function () {
|
|
|
59
61
|
{
|
|
60
62
|
staticClass:
|
|
61
63
|
"x-editable-number-range-filter__apply x-button",
|
|
64
|
+
class: _vm.buttonsClass,
|
|
62
65
|
attrs: {
|
|
63
66
|
disabled: _vm.hasError,
|
|
64
67
|
"data-test": "range-apply",
|
|
@@ -79,6 +82,7 @@ var __vue_render__ = function () {
|
|
|
79
82
|
{
|
|
80
83
|
staticClass:
|
|
81
84
|
"x-editable-number-range-filter__clear x-button",
|
|
85
|
+
class: _vm.buttonsClass,
|
|
82
86
|
attrs: { "data-test": "range-clear" },
|
|
83
87
|
on: { click: _vm.clearValues },
|
|
84
88
|
},
|
|
@@ -101,6 +105,7 @@ var __vue_render__ = function () {
|
|
|
101
105
|
emitUserModifiedFilter: _vm.emitUserModifiedFilter,
|
|
102
106
|
clearValues: _vm.clearValues,
|
|
103
107
|
hasError: _vm.hasError,
|
|
108
|
+
isAnyRange: _vm.isAnyRange,
|
|
104
109
|
}
|
|
105
110
|
),
|
|
106
111
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable-number-range-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue"],"sourcesContent":["<template>\n <div\n class=\"x-editable-number-range-filter\"\n :class=\"cssClasses\"\n data-test=\"editable-number-range-filter\"\n >\n <!--\n @slot Empty slot used to customize the whole component.\n @binding {min} number - Component min value.\n @binding {max} number - Component max value.\n @binding {setMin} function - Component min setter.\n @binding {setMax} function - Component max setter.\n @binding {emitUserModifiedFilter} function - It emits the\n `UserModifiedEditableNumberRangeFilter` X event.\n @binding {clearValues} function - It sets component min and max values to null.\n @binding {hasError} boolean - Returns true when there is an error with component values.\n -->\n <slot v-bind=\"{ min, max, setMin, setMax, emitUserModifiedFilter, clearValues, hasError }\">\n <!-- eslint-disable max-len -->\n <input\n @change=\"setMin($event.target.valueAsNumber)\"\n name=\"min\"\n type=\"number\"\n class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--min x-input\"\n :value=\"!isAnyRange ? min : null\"\n data-test=\"range-min\"\n :aria-label=\"rangeFilterMin\"\n />\n\n <input\n @change=\"setMax($event.target.valueAsNumber)\"\n name=\"max\"\n type=\"number\"\n class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--max x-input\"\n :value=\"max\"\n data-test=\"range-max\"\n :aria-label=\"rangeFilterMax\"\n />\n <!-- eslint-enable max-len -->\n\n <button\n v-if=\"!isInstant\"\n @click=\"emitUserModifiedFilter\"\n class=\"x-editable-number-range-filter__apply x-button\"\n :disabled=\"hasError\"\n data-test=\"range-apply\"\n >\n <!--\n @slot Slot used to customize the apply button content.\n -->\n <slot name=\"apply-content\">✓</slot>\n </button>\n\n <button\n v-if=\"renderClearButton\"\n @click=\"clearValues\"\n class=\"x-editable-number-range-filter__clear x-button\"\n data-test=\"range-clear\"\n >\n <!--\n @slot Slot used to customize the clear button content.\n -->\n <slot name=\"clear-content\">𐄂</slot>\n </button>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n EditableNumberRangeFilter as EditableNumberRangeFilterModel,\n RangeValue\n } from '@empathyco/x-types';\n import { Component, Prop, Vue, Watch } from 'vue-property-decorator';\n import { VueCSSClasses } from '../../../../utils/types';\n import { facetsXModule } from '../../x-module';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { XOn } from '../../../../components';\n\n /**\n * Renders an editable number range filter. It has two input fields to handle min and max values,\n * emitting the needed events when clicked.\n *\n * It provides a default slot, with some utils bind, to customize the whole component; and two\n * named slots `apply-content` and `clear-content` to override each button content.\n *\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class EditableNumberRangeFilter extends Vue {\n /**\n * Component min value.\n *\n * @internal\n */\n protected min: RangeValue['min'] = null;\n /**\n * Component max value.\n *\n * @internal\n */\n protected max: RangeValue['max'] = null;\n\n /**\n * The filter data to render and edit.\n *\n * @public\n */\n @Prop({ required: true })\n public filter!: EditableNumberRangeFilterModel;\n\n /**\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * @public\n */\n @Prop({ default: false })\n public isInstant!: boolean;\n\n /**\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Prop({ default: true })\n public hasClearButton!: boolean;\n\n /**\n * It watches the filter range values passed as property and updates component range values if\n * they change.\n *\n * @param newRange - New range value.\n *\n * @internal\n */\n @Watch('filter.range', { immediate: true, deep: true })\n onFilterChanged(newRange: RangeValue): void {\n this.min = newRange.min;\n this.max = newRange.max;\n }\n\n /**\n * It watches range values in order to emit the event with the change if `isInstant`\n * property is true.\n *\n * @internal\n */\n @Watch('range', { deep: true })\n protected instantEmitUserModifiedFilter(): void {\n if (this.isInstant) {\n this.emitUserModifiedFilter();\n }\n }\n\n /**\n * It resets the min/max range values to null if the\n * {@link FacetsXEvents.UserClickedClearAllFilters} event is fired.\n *\n * @public\n */\n @XOn('UserClickedClearAllFilters')\n resetRanges(): void {\n this.clearValues();\n }\n\n /**\n * Dynamic CSS classes.\n *\n * @returns Object which contains dynamic CSS classes.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return { 'x-editable-number-range-filter--error': this.hasError };\n }\n\n /**\n * Returns {@link @empathyco/x-types#RangeValue | RangeValue} with component min and max\n * values.\n *\n * @returns Range value object with component values.\n *\n * @internal\n */\n protected get range(): RangeValue {\n return { min: this.min, max: this.max };\n }\n\n /**\n * It returns true if the property `hasClearButton` is true and there are values to clear.\n *\n * @returns True if the clear button has to be rendered.\n *\n * @internal\n */\n protected get renderClearButton(): boolean {\n return this.hasClearButton && !this.isAnyRange;\n }\n\n /**\n * It checks if component min and max values are valid.\n *\n * @returns True if there is any error in the component min and max values.\n *\n * @internal\n */\n protected get hasError(): boolean {\n return this.min !== null && this.max !== null && this.min > this.max;\n }\n\n /**\n * It checks if component min and max values are different from the ones within the filter\n * provided as property.\n *\n * @returns True if they are different.\n *\n * @internal\n */\n protected get areValuesDifferent(): boolean {\n return this.min !== this.filter.range.min || this.max !== this.filter.range.max;\n }\n\n /**\n * Checks if the range of the filter allows any value, which happens when the min is\n * null or 0 and the max is null.\n *\n * @returns True if the range of the filter allows any value.\n *\n * @internal\n */\n protected get isAnyRange(): boolean {\n return !this.min && this.max === null;\n }\n\n /**\n * It returns the number if possible or null otherwise.\n *\n * @param value - Value.\n * @returns The element value as a number if possible or null.\n *\n * @internal\n */\n protected parseRangeValue(value: number): number | null {\n return isNaN(value) ? null : value;\n }\n\n /**\n * `min` setter.\n *\n * @param value - The component `min` value to be set.\n *\n * @internal\n */\n protected setMin(value: number): void {\n this.min = this.parseRangeValue(value);\n }\n\n /**\n * `max` setter.\n *\n * @param value - The component `max` value to be set.\n *\n * @internal\n */\n protected setMax(value: number): void {\n this.max = this.parseRangeValue(value);\n }\n\n /**\n * It sets component `min` and `max` values to null , and it emits the change if component is\n * working in instant mode.\n *\n * @internal\n */\n protected clearValues(): void {\n this.min = null;\n this.max = null;\n }\n\n /**\n * It emits {@link FacetsXEvents.UserModifiedEditableNumberRangeFilter} event if there are no\n * errors and component `min` and `max` values are different than `filter.range` ones.\n *\n * @internal\n */\n protected emitUserModifiedFilter(): void {\n if (!this.hasError && this.areValuesDifferent) {\n this.$x.emit('UserModifiedEditableNumberRangeFilter', {\n ...this.filter,\n range: this.range\n });\n }\n }\n\n protected rangeFilterMin = 'minimum amount';\n protected rangeFilterMax = 'maximum amount';\n }\n</script>\n\n<style lang=\"scss\">\n .x-editable-number-range-filter {\n &--error {\n .x-editable-number-range-filter__input {\n border-color: red;\n }\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders an editable number range filter. It has two input fields to handle min and max values,\nemitting the needed events when clicked.\n\nIt provides a default slot, with some utils bind, to customize the whole component; and two named\nslots `apply-content` and `clear-content` to override each button content.\n\nIf `instant` prop is true, the needed events are emitted immediately; else, apply button is rendered\nto confirm to do it. False by default.\n\nIf `clear` prop is true, clear button, which sets to null component min and max values, is rendered.\nTrue by default.\n\n### Basic usage\n\n```vue\n<template>\n <EditableNumberRangeFilter :filter=\"editableFilter\" />\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Properties\n\n```vue\n<template>\n <EditableNumberRangeFilter :filter=\"editableFilter\" :isInstant=\"true\" :hasClearButton=\"false\" />\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customizing content slots\n\n```vue\n<template>\n <EditableNumberRangeFilter :filter=\"editableFilter\">\n <template name=\"apply-content\">Apply</template>\n <template name=\"clear-content\">Clear</template>\n </EditableNumberRangeFilter>\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customizing default slot\n\n```vue\n<template>\n <EditableNumberRangeFilter\n :filter=\"editableFilter\"\n #default=\"{ min, max, setMin, setMax, emitUserModifiedFilter, clearValues, hasError }\"\n >\n <button @click=\"emitUserModifiedFilter\">✅ Apply!</button>\n <button @click=\"clearValues\">🗑 Clear!</button>\n <input :value=\"min\" @change=\"setMin($event.target.valueAsNumber)\" />\n <input :value=\"max\" @change=\"setMax($event.target.valueAsNumber)\" />\n <div class=\"has-error\" v-if=\"hasError\">⚠️ Invalid range values</div>\n </EditableNumberRangeFilter>\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserModifiedEditableNumberRangeFilter`: this event is emitted instantly after typing the value or\n clicking the submit button. The event payload in both cases is an object containing the filter and\n the new value for the range.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"editable-number-range-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue"],"sourcesContent":["<template>\n <div\n class=\"x-editable-number-range-filter\"\n :class=\"cssClasses\"\n data-test=\"editable-number-range-filter\"\n >\n <!--\n @slot Empty slot used to customize the whole component.\n @binding {min} number - Component min value.\n @binding {max} number - Component max value.\n @binding {setMin} function - Component min setter.\n @binding {setMax} function - Component max setter.\n @binding {emitUserModifiedFilter} function - It emits the\n `UserModifiedEditableNumberRangeFilter` X event.\n @binding {clearValues} function - It sets component min and max values to null.\n @binding {hasError} boolean - Returns true when there is an error with component values.\n -->\n <slot\n v-bind=\"{\n min,\n max,\n setMin,\n setMax,\n emitUserModifiedFilter,\n clearValues,\n hasError,\n isAnyRange\n }\"\n >\n <!-- eslint-disable max-len -->\n <input\n @change=\"setMin($event.target.valueAsNumber)\"\n name=\"min\"\n type=\"number\"\n class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--min x-input\"\n :class=\"inputsClass\"\n :value=\"!isAnyRange ? min : null\"\n data-test=\"range-min\"\n :aria-label=\"rangeFilterMin\"\n />\n\n <input\n @change=\"setMax($event.target.valueAsNumber)\"\n name=\"max\"\n type=\"number\"\n class=\"x-editable-number-range-filter__input x-editable-number-range-filter__input--max x-input\"\n :class=\"inputsClass\"\n :value=\"max\"\n data-test=\"range-max\"\n :aria-label=\"rangeFilterMax\"\n />\n <!-- eslint-enable max-len -->\n\n <button\n v-if=\"!isInstant\"\n @click=\"emitUserModifiedFilter\"\n class=\"x-editable-number-range-filter__apply x-button\"\n :class=\"buttonsClass\"\n :disabled=\"hasError\"\n data-test=\"range-apply\"\n >\n <!--\n @slot Slot used to customize the apply button content.\n -->\n <slot name=\"apply-content\">✓</slot>\n </button>\n\n <button\n v-if=\"renderClearButton\"\n @click=\"clearValues\"\n class=\"x-editable-number-range-filter__clear x-button\"\n :class=\"buttonsClass\"\n data-test=\"range-clear\"\n >\n <!--\n @slot Slot used to customize the clear button content.\n -->\n <slot name=\"clear-content\">𐄂</slot>\n </button>\n </slot>\n </div>\n</template>\n\n<script lang=\"ts\">\n import {\n EditableNumberRangeFilter as EditableNumberRangeFilterModel,\n RangeValue\n } from '@empathyco/x-types';\n import { Component, Prop, Vue, Watch } from 'vue-property-decorator';\n import { VueCSSClasses } from '../../../../utils/types';\n import { facetsXModule } from '../../x-module';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { XOn } from '../../../../components';\n import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin';\n\n /**\n * Renders an editable number range filter. It has two input fields to handle min and max values,\n * emitting the needed events when clicked.\n *\n * It provides a default slot, with some utils bind, to customize the whole component; and two\n * named slots `apply-content` and `clear-content` to override each button content.\n *\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule), dynamicPropsMixin(['inputsClass', 'buttonsClass'])]\n })\n export default class EditableNumberRangeFilter extends Vue {\n /**\n * Component min value.\n *\n * @internal\n */\n protected min: RangeValue['min'] = null;\n /**\n * Component max value.\n *\n * @internal\n */\n protected max: RangeValue['max'] = null;\n\n /**\n * The filter data to render and edit.\n *\n * @public\n */\n @Prop({ required: true })\n public filter!: EditableNumberRangeFilterModel;\n\n /**\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * @public\n */\n @Prop({ default: false })\n public isInstant!: boolean;\n\n /**\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Prop({ default: true })\n public hasClearButton!: boolean;\n\n /**\n * It watches the filter range values passed as property and updates component range values if\n * they change.\n *\n * @param newRange - New range value.\n *\n * @internal\n */\n @Watch('filter.range', { immediate: true, deep: true })\n onFilterChanged(newRange: RangeValue): void {\n this.min = newRange.min;\n this.max = newRange.max;\n }\n\n /**\n * It watches range values in order to emit the event with the change if `isInstant`\n * property is true.\n *\n * @internal\n */\n @Watch('range', { deep: true })\n protected instantEmitUserModifiedFilter(): void {\n if (this.isInstant) {\n this.emitUserModifiedFilter();\n }\n }\n\n /**\n * It resets the min/max range values to null if the\n * {@link FacetsXEvents.UserClickedClearAllFilters} event is fired.\n *\n * @public\n */\n @XOn('UserClickedClearAllFilters')\n resetRanges(): void {\n this.clearValues();\n }\n\n /**\n * Dynamic CSS classes.\n *\n * @returns Object which contains dynamic CSS classes.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return { 'x-editable-number-range-filter--error': this.hasError };\n }\n\n /**\n * Returns {@link @empathyco/x-types#RangeValue | RangeValue} with component min and max\n * values.\n *\n * @returns Range value object with component values.\n *\n * @internal\n */\n protected get range(): RangeValue {\n return { min: this.min, max: this.max };\n }\n\n /**\n * It returns true if the property `hasClearButton` is true and there are values to clear.\n *\n * @returns True if the clear button has to be rendered.\n *\n * @internal\n */\n protected get renderClearButton(): boolean {\n return this.hasClearButton && !this.isAnyRange;\n }\n\n /**\n * It checks if component min and max values are valid.\n *\n * @returns True if there is any error in the component min and max values.\n *\n * @internal\n */\n protected get hasError(): boolean {\n return this.min !== null && this.max !== null && this.min > this.max;\n }\n\n /**\n * It checks if component min and max values are different from the ones within the filter\n * provided as property.\n *\n * @returns True if they are different.\n *\n * @internal\n */\n protected get areValuesDifferent(): boolean {\n return this.min !== this.filter.range.min || this.max !== this.filter.range.max;\n }\n\n /**\n * Checks if the range of the filter allows any value, which happens when the min is\n * null or 0 and the max is null.\n *\n * @returns True if the range of the filter allows any value.\n *\n * @internal\n */\n protected get isAnyRange(): boolean {\n return !this.min && this.max === null;\n }\n\n /**\n * It returns the number if possible or null otherwise.\n *\n * @param value - Value.\n * @returns The element value as a number if possible or null.\n *\n * @internal\n */\n protected parseRangeValue(value: number): number | null {\n return isNaN(value) ? null : value;\n }\n\n /**\n * `min` setter.\n *\n * @param value - The component `min` value to be set.\n *\n * @internal\n */\n protected setMin(value: number): void {\n this.min = this.parseRangeValue(value);\n }\n\n /**\n * `max` setter.\n *\n * @param value - The component `max` value to be set.\n *\n * @internal\n */\n protected setMax(value: number): void {\n this.max = this.parseRangeValue(value);\n }\n\n /**\n * It sets component `min` and `max` values to null , and it emits the change if component is\n * working in instant mode.\n *\n * @internal\n */\n protected clearValues(): void {\n this.min = null;\n this.max = null;\n }\n\n /**\n * It emits {@link FacetsXEvents.UserModifiedEditableNumberRangeFilter} event if there are no\n * errors and component `min` and `max` values are different than `filter.range` ones.\n *\n * @internal\n */\n protected emitUserModifiedFilter(): void {\n if (!this.hasError && this.areValuesDifferent) {\n this.$x.emit('UserModifiedEditableNumberRangeFilter', {\n ...this.filter,\n range: this.range\n });\n }\n }\n\n protected rangeFilterMin = 'minimum amount';\n protected rangeFilterMax = 'maximum amount';\n }\n</script>\n\n<style lang=\"scss\">\n .x-editable-number-range-filter {\n &--error {\n .x-editable-number-range-filter__input {\n border-color: red;\n }\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders an editable number range filter. It has two input fields to handle min and max values,\nemitting the needed events when clicked.\n\nIt provides a default slot, with some utils bind, to customize the whole component; and two named\nslots `apply-content` and `clear-content` to override each button content.\n\nIf `instant` prop is true, the needed events are emitted immediately; else, apply button is rendered\nto confirm to do it. False by default.\n\nIf `clear` prop is true, clear button, which sets to null component min and max values, is rendered.\nTrue by default.\n\n### Basic usage\n\n```vue\n<template>\n <EditableNumberRangeFilter :filter=\"editableFilter\" />\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Properties\n\n```vue\n<template>\n <EditableNumberRangeFilter :filter=\"editableFilter\" :isInstant=\"true\" :hasClearButton=\"false\" />\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customizing content slots\n\n```vue\n<template>\n <EditableNumberRangeFilter :filter=\"editableFilter\">\n <template name=\"apply-content\">Apply</template>\n <template name=\"clear-content\">Clear</template>\n </EditableNumberRangeFilter>\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customizing default slot\n\n```vue\n<template>\n <EditableNumberRangeFilter\n :filter=\"editableFilter\"\n #default=\"{\n min,\n max,\n setMin,\n setMax,\n emitUserModifiedFilter,\n clearValues,\n hasError,\n isAnyRange\n }\"\n >\n <button @click=\"emitUserModifiedFilter\">✅ Apply!</button>\n <button @click=\"clearValues\">🗑 Clear!</button>\n <input :value=\"!isAnyRange ? min : null\" @change=\"setMin($event.target.valueAsNumber)\" />\n <input :value=\"max\" @change=\"setMax($event.target.valueAsNumber)\" />\n <div class=\"has-error\" v-if=\"hasError\">⚠️ Invalid range values</div>\n </EditableNumberRangeFilter>\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonsClass` and `inputsClass` props can be used to add classes to the inputs and buttons of\nthe component.\n\n```\n<template>\n <EditableNumberRangeFilter\n :filter=\"editableFilter\"\n :inputsClass=\"'my-inputs-class'\"\n :buttonsClass=\"'my-buttons-class'\"\n />\n</template>\n\n<script>\n import { EditableNumberRangeFilter } from '@empathyco/x-components/facets';\n\n export default {\n components: {\n EditableNumberRangeFilter\n },\n data() {\n return {\n editableFilter: {\n facetId: 'age',\n id: 'age:primary',\n label: 'primary',\n modelName: 'EditableNumberRangeFilter',\n range: {\n min: null,\n max: null\n }\n }\n };\n }\n };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserModifiedEditableNumberRangeFilter`: this event is emitted instantly after typing the value or\n clicking the submit button. The event payload in both cases is an object containing the filter and\n the new value for the range.\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -146,6 +146,7 @@ import '../../../../components/snippet-callbacks.vue.js';
|
|
|
146
146
|
import { XOn } from '../../../../components/decorators/bus.decorators.js';
|
|
147
147
|
import 'vue-class-component';
|
|
148
148
|
import '../../../../components/items-list-injection.mixin.js';
|
|
149
|
+
import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin.js';
|
|
149
150
|
|
|
150
151
|
/**
|
|
151
152
|
* Renders an editable number range filter. It has two input fields to handle min and max values,
|
|
@@ -351,7 +352,7 @@ __decorate([
|
|
|
351
352
|
], EditableNumberRangeFilter.prototype, "resetRanges", null);
|
|
352
353
|
EditableNumberRangeFilter = __decorate([
|
|
353
354
|
Component({
|
|
354
|
-
mixins: [xComponentMixin(facetsXModule)]
|
|
355
|
+
mixins: [xComponentMixin(facetsXModule), dynamicPropsMixin(['inputsClass', 'buttonsClass'])]
|
|
355
356
|
})
|
|
356
357
|
], EditableNumberRangeFilter);
|
|
357
358
|
var script = EditableNumberRangeFilter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable-number-range-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n import {\n EditableNumberRangeFilter as EditableNumberRangeFilterModel,\n RangeValue\n } from '@empathyco/x-types';\n import { Component, Prop, Vue, Watch } from 'vue-property-decorator';\n import { VueCSSClasses } from '../../../../utils/types';\n import { facetsXModule } from '../../x-module';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { XOn } from '../../../../components';\n\n /**\n * Renders an editable number range filter. It has two input fields to handle min and max values,\n * emitting the needed events when clicked.\n *\n * It provides a default slot, with some utils bind, to customize the whole component; and two\n * named slots `apply-content` and `clear-content` to override each button content.\n *\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule)]\n })\n export default class EditableNumberRangeFilter extends Vue {\n /**\n * Component min value.\n *\n * @internal\n */\n protected min: RangeValue['min'] = null;\n /**\n * Component max value.\n *\n * @internal\n */\n protected max: RangeValue['max'] = null;\n\n /**\n * The filter data to render and edit.\n *\n * @public\n */\n @Prop({ required: true })\n public filter!: EditableNumberRangeFilterModel;\n\n /**\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * @public\n */\n @Prop({ default: false })\n public isInstant!: boolean;\n\n /**\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Prop({ default: true })\n public hasClearButton!: boolean;\n\n /**\n * It watches the filter range values passed as property and updates component range values if\n * they change.\n *\n * @param newRange - New range value.\n *\n * @internal\n */\n @Watch('filter.range', { immediate: true, deep: true })\n onFilterChanged(newRange: RangeValue): void {\n this.min = newRange.min;\n this.max = newRange.max;\n }\n\n /**\n * It watches range values in order to emit the event with the change if `isInstant`\n * property is true.\n *\n * @internal\n */\n @Watch('range', { deep: true })\n protected instantEmitUserModifiedFilter(): void {\n if (this.isInstant) {\n this.emitUserModifiedFilter();\n }\n }\n\n /**\n * It resets the min/max range values to null if the\n * {@link FacetsXEvents.UserClickedClearAllFilters} event is fired.\n *\n * @public\n */\n @XOn('UserClickedClearAllFilters')\n resetRanges(): void {\n this.clearValues();\n }\n\n /**\n * Dynamic CSS classes.\n *\n * @returns Object which contains dynamic CSS classes.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return { 'x-editable-number-range-filter--error': this.hasError };\n }\n\n /**\n * Returns {@link @empathyco/x-types#RangeValue | RangeValue} with component min and max\n * values.\n *\n * @returns Range value object with component values.\n *\n * @internal\n */\n protected get range(): RangeValue {\n return { min: this.min, max: this.max };\n }\n\n /**\n * It returns true if the property `hasClearButton` is true and there are values to clear.\n *\n * @returns True if the clear button has to be rendered.\n *\n * @internal\n */\n protected get renderClearButton(): boolean {\n return this.hasClearButton && !this.isAnyRange;\n }\n\n /**\n * It checks if component min and max values are valid.\n *\n * @returns True if there is any error in the component min and max values.\n *\n * @internal\n */\n protected get hasError(): boolean {\n return this.min !== null && this.max !== null && this.min > this.max;\n }\n\n /**\n * It checks if component min and max values are different from the ones within the filter\n * provided as property.\n *\n * @returns True if they are different.\n *\n * @internal\n */\n protected get areValuesDifferent(): boolean {\n return this.min !== this.filter.range.min || this.max !== this.filter.range.max;\n }\n\n /**\n * Checks if the range of the filter allows any value, which happens when the min is\n * null or 0 and the max is null.\n *\n * @returns True if the range of the filter allows any value.\n *\n * @internal\n */\n protected get isAnyRange(): boolean {\n return !this.min && this.max === null;\n }\n\n /**\n * It returns the number if possible or null otherwise.\n *\n * @param value - Value.\n * @returns The element value as a number if possible or null.\n *\n * @internal\n */\n protected parseRangeValue(value: number): number | null {\n return isNaN(value) ? null : value;\n }\n\n /**\n * `min` setter.\n *\n * @param value - The component `min` value to be set.\n *\n * @internal\n */\n protected setMin(value: number): void {\n this.min = this.parseRangeValue(value);\n }\n\n /**\n * `max` setter.\n *\n * @param value - The component `max` value to be set.\n *\n * @internal\n */\n protected setMax(value: number): void {\n this.max = this.parseRangeValue(value);\n }\n\n /**\n * It sets component `min` and `max` values to null , and it emits the change if component is\n * working in instant mode.\n *\n * @internal\n */\n protected clearValues(): void {\n this.min = null;\n this.max = null;\n }\n\n /**\n * It emits {@link FacetsXEvents.UserModifiedEditableNumberRangeFilter} event if there are no\n * errors and component `min` and `max` values are different than `filter.range` ones.\n *\n * @internal\n */\n protected emitUserModifiedFilter(): void {\n if (!this.hasError && this.areValuesDifferent) {\n this.$x.emit('UserModifiedEditableNumberRangeFilter', {\n ...this.filter,\n range: this.range\n });\n }\n }\n\n protected rangeFilterMin = 'minimum amount';\n protected rangeFilterMax = 'maximum amount';\n }\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"editable-number-range-filter.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n import {\n EditableNumberRangeFilter as EditableNumberRangeFilterModel,\n RangeValue\n } from '@empathyco/x-types';\n import { Component, Prop, Vue, Watch } from 'vue-property-decorator';\n import { VueCSSClasses } from '../../../../utils/types';\n import { facetsXModule } from '../../x-module';\n import { xComponentMixin } from '../../../../components/x-component.mixin';\n import { XOn } from '../../../../components';\n import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin';\n\n /**\n * Renders an editable number range filter. It has two input fields to handle min and max values,\n * emitting the needed events when clicked.\n *\n * It provides a default slot, with some utils bind, to customize the whole component; and two\n * named slots `apply-content` and `clear-content` to override each button content.\n *\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(facetsXModule), dynamicPropsMixin(['inputsClass', 'buttonsClass'])]\n })\n export default class EditableNumberRangeFilter extends Vue {\n /**\n * Component min value.\n *\n * @internal\n */\n protected min: RangeValue['min'] = null;\n /**\n * Component max value.\n *\n * @internal\n */\n protected max: RangeValue['max'] = null;\n\n /**\n * The filter data to render and edit.\n *\n * @public\n */\n @Prop({ required: true })\n public filter!: EditableNumberRangeFilterModel;\n\n /**\n * If `instant` prop is true, the needed events are emitted immediately; else, apply button is\n * rendered to confirm to do it. False by default.\n *\n * @public\n */\n @Prop({ default: false })\n public isInstant!: boolean;\n\n /**\n * If `clear` prop is true, clear button, which sets to null component min and max values, is\n * rendered. True by default.\n *\n * @public\n */\n @Prop({ default: true })\n public hasClearButton!: boolean;\n\n /**\n * It watches the filter range values passed as property and updates component range values if\n * they change.\n *\n * @param newRange - New range value.\n *\n * @internal\n */\n @Watch('filter.range', { immediate: true, deep: true })\n onFilterChanged(newRange: RangeValue): void {\n this.min = newRange.min;\n this.max = newRange.max;\n }\n\n /**\n * It watches range values in order to emit the event with the change if `isInstant`\n * property is true.\n *\n * @internal\n */\n @Watch('range', { deep: true })\n protected instantEmitUserModifiedFilter(): void {\n if (this.isInstant) {\n this.emitUserModifiedFilter();\n }\n }\n\n /**\n * It resets the min/max range values to null if the\n * {@link FacetsXEvents.UserClickedClearAllFilters} event is fired.\n *\n * @public\n */\n @XOn('UserClickedClearAllFilters')\n resetRanges(): void {\n this.clearValues();\n }\n\n /**\n * Dynamic CSS classes.\n *\n * @returns Object which contains dynamic CSS classes.\n *\n * @internal\n */\n protected get cssClasses(): VueCSSClasses {\n return { 'x-editable-number-range-filter--error': this.hasError };\n }\n\n /**\n * Returns {@link @empathyco/x-types#RangeValue | RangeValue} with component min and max\n * values.\n *\n * @returns Range value object with component values.\n *\n * @internal\n */\n protected get range(): RangeValue {\n return { min: this.min, max: this.max };\n }\n\n /**\n * It returns true if the property `hasClearButton` is true and there are values to clear.\n *\n * @returns True if the clear button has to be rendered.\n *\n * @internal\n */\n protected get renderClearButton(): boolean {\n return this.hasClearButton && !this.isAnyRange;\n }\n\n /**\n * It checks if component min and max values are valid.\n *\n * @returns True if there is any error in the component min and max values.\n *\n * @internal\n */\n protected get hasError(): boolean {\n return this.min !== null && this.max !== null && this.min > this.max;\n }\n\n /**\n * It checks if component min and max values are different from the ones within the filter\n * provided as property.\n *\n * @returns True if they are different.\n *\n * @internal\n */\n protected get areValuesDifferent(): boolean {\n return this.min !== this.filter.range.min || this.max !== this.filter.range.max;\n }\n\n /**\n * Checks if the range of the filter allows any value, which happens when the min is\n * null or 0 and the max is null.\n *\n * @returns True if the range of the filter allows any value.\n *\n * @internal\n */\n protected get isAnyRange(): boolean {\n return !this.min && this.max === null;\n }\n\n /**\n * It returns the number if possible or null otherwise.\n *\n * @param value - Value.\n * @returns The element value as a number if possible or null.\n *\n * @internal\n */\n protected parseRangeValue(value: number): number | null {\n return isNaN(value) ? null : value;\n }\n\n /**\n * `min` setter.\n *\n * @param value - The component `min` value to be set.\n *\n * @internal\n */\n protected setMin(value: number): void {\n this.min = this.parseRangeValue(value);\n }\n\n /**\n * `max` setter.\n *\n * @param value - The component `max` value to be set.\n *\n * @internal\n */\n protected setMax(value: number): void {\n this.max = this.parseRangeValue(value);\n }\n\n /**\n * It sets component `min` and `max` values to null , and it emits the change if component is\n * working in instant mode.\n *\n * @internal\n */\n protected clearValues(): void {\n this.min = null;\n this.max = null;\n }\n\n /**\n * It emits {@link FacetsXEvents.UserModifiedEditableNumberRangeFilter} event if there are no\n * errors and component `min` and `max` values are different than `filter.range` ones.\n *\n * @internal\n */\n protected emitUserModifiedFilter(): void {\n if (!this.hasError && this.areValuesDifferent) {\n this.$x.emit('UserModifiedEditableNumberRangeFilter', {\n ...this.filter,\n range: this.range\n });\n }\n }\n\n protected rangeFilterMin = 'minimum amount';\n protected rangeFilterMax = 'maximum amount';\n }\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FE;;;;;;;;;;;;;;AAcG;AAIY,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,GAAG,CAAA;AAA3C,IAAA,WAAA,GAAA;;AACb;;;;AAIG;QACO,IAAG,CAAA,GAAA,GAAsB,IAAI,CAAC;AACxC;;;;AAIG;QACO,IAAG,CAAA,GAAA,GAAsB,IAAI,CAAC;QAmM9B,IAAc,CAAA,cAAA,GAAG,gBAAgB,CAAC;QAClC,IAAc,CAAA,cAAA,GAAG,gBAAgB,CAAC;KAC7C;AAzKC;;;;;;;AAOG;AAEH,IAAA,eAAe,CAAC,QAAoB,EAAA;AAClC,QAAA,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;AACxB,QAAA,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC;KACzB;AAED;;;;;AAKG;IAEO,6BAA6B,GAAA;QACrC,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,sBAAsB,EAAE,CAAC;AAC/B,SAAA;KACF;AAED;;;;;AAKG;IAEH,WAAW,GAAA;QACT,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;AAED;;;;;;AAMG;AACH,IAAA,IAAc,UAAU,GAAA;AACtB,QAAA,OAAO,EAAE,uCAAuC,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;KACnE;AAED;;;;;;;AAOG;AACH,IAAA,IAAc,KAAK,GAAA;AACjB,QAAA,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;KACzC;AAED;;;;;;AAMG;AACH,IAAA,IAAc,iBAAiB,GAAA;QAC7B,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;KAChD;AAED;;;;;;AAMG;AACH,IAAA,IAAc,QAAQ,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;KACtE;AAED;;;;;;;AAOG;AACH,IAAA,IAAc,kBAAkB,GAAA;QAC9B,OAAO,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;KACjF;AAED;;;;;;;AAOG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC;KACvC;AAED;;;;;;;AAOG;AACO,IAAA,eAAe,CAAC,KAAa,EAAA;AACrC,QAAA,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;KACpC;AAED;;;;;;AAMG;AACO,IAAA,MAAM,CAAC,KAAa,EAAA;QAC5B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACxC;AAED;;;;;;AAMG;AACO,IAAA,MAAM,CAAC,KAAa,EAAA;QAC5B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACxC;AAED;;;;;AAKG;IACO,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;AAChB,QAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;KACjB;AAED;;;;;AAKG;IACO,sBAAsB,GAAA;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAC7C,YAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uCAAuC,EAAE;gBACpD,GAAG,IAAI,CAAC,MAAM;gBACd,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,aAAA,CAAC,CAAC;AACJ,SAAA;KACF;CAIF,CAAA;AA7LC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACsB,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS/C,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACE,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACQ,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAWhC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAItD,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,IAAA,CAAA,CAAA;AASD,UAAA,CAAA;IADC,KAAK,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAK9B,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,+BAAA,EAAA,IAAA,CAAA,CAAA;AASD,UAAA,CAAA;IADC,GAAG,CAAC,4BAA4B,CAAC;AAGjC,CAAA,EAAA,yBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,IAAA,CAAA,CAAA;AA5EkB,yBAAyB,GAAA,UAAA,CAAA;AAH7C,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;KAC7F,CAAC;AACmB,CAAA,EAAA,yBAAyB,CAiN7C,CAAA;aAjNoB,yBAAyB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.396",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -143,5 +143,5 @@
|
|
|
143
143
|
"access": "public",
|
|
144
144
|
"directory": "dist"
|
|
145
145
|
},
|
|
146
|
-
"gitHead": "
|
|
146
|
+
"gitHead": "4688fe6f3a7c8c63b52d2e60b80261eda4c404e2"
|
|
147
147
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable-number-range-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"editable-number-range-filter.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../../src/x-modules/facets/components/filters/editable-number-range-filter.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAoFE,OAAO,EACL,yBAAyB,IAAI,8BAA8B,EAC3D,UAAU,EACX,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAmB,GAAG,EAAS,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;;;;;;;;;;;;;GAcG;AAIH,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,GAAG;IACxD;;;;OAIG;IACH,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,CAAQ;IACxC;;;;OAIG;IACH,SAAS,CAAC,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,CAAQ;IAExC;;;;OAIG;IAEI,MAAM,EAAG,8BAA8B,CAAC;IAE/C;;;;;OAKG;IAEI,SAAS,EAAG,OAAO,CAAC;IAE3B;;;;;OAKG;IAEI,cAAc,EAAG,OAAO,CAAC;IAEhC;;;;;;;OAOG;IAEH,eAAe,CAAC,QAAQ,EAAE,UAAU,GAAG,IAAI;IAK3C;;;;;OAKG;IAEH,SAAS,CAAC,6BAA6B,IAAI,IAAI;IAM/C;;;;;OAKG;IAEH,WAAW,IAAI,IAAI;IAInB;;;;;;OAMG;IACH,SAAS,KAAK,UAAU,IAAI,aAAa,CAExC;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,KAAK,IAAI,UAAU,CAEhC;IAED;;;;;;OAMG;IACH,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;IAED;;;;;;OAMG;IACH,SAAS,KAAK,QAAQ,IAAI,OAAO,CAEhC;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,kBAAkB,IAAI,OAAO,CAE1C;IAED;;;;;;;OAOG;IACH,SAAS,KAAK,UAAU,IAAI,OAAO,CAElC;IAED;;;;;;;OAOG;IACH,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAIvD;;;;;;OAMG;IACH,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;;;;;OAMG;IACH,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;;;;OAKG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAK7B;;;;;OAKG;IACH,SAAS,CAAC,sBAAsB,IAAI,IAAI;IASxC,SAAS,CAAC,cAAc,SAAoB;IAC5C,SAAS,CAAC,cAAc,SAAoB;CAC7C"}
|