@brightspace-ui-labs/facet-filter-sort 5.3.0 → 5.5.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.
- package/README.md +2 -46
- package/custom-elements.json +8 -319
- package/lang/ar.js +0 -5
- package/lang/cy.js +0 -5
- package/lang/da.js +0 -5
- package/lang/de.js +0 -5
- package/lang/en.js +0 -5
- package/lang/es-es.js +0 -5
- package/lang/es.js +0 -5
- package/lang/fr-fr.js +0 -5
- package/lang/fr.js +0 -5
- package/lang/hi.js +0 -5
- package/lang/ja.js +0 -5
- package/lang/ko.js +0 -5
- package/lang/nl.js +0 -5
- package/lang/pt.js +0 -5
- package/lang/sv.js +0 -5
- package/lang/tr.js +0 -5
- package/lang/zh-cn.js +0 -5
- package/lang/zh-tw.js +0 -5
- package/package.json +1 -2
- package/components/applied-filters/applied-core-filters.js +0 -154
- package/components/search-facets/search-facets-grouping.js +0 -143
- package/components/search-facets/search-facets-option.js +0 -96
- package/components/search-facets/search-facets.js +0 -62
- package/components/search-results-count/search-results-count.js +0 -76
package/README.md
CHANGED
|
@@ -16,9 +16,7 @@
|
|
|
16
16
|
> - [x] Demo page
|
|
17
17
|
> - [ ] README documentation
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Collection of (search) facet, filter, and sort components
|
|
19
|
+
Collection of old filter and sort components. Use the `d2l-filter` in [BrightspaceUI/core](https://github.com/BrightspaceUI/core/tree/main/components/filter). A sort dropdown component will be coming to `core` eventually.
|
|
22
20
|
|
|
23
21
|
## Installation
|
|
24
22
|
|
|
@@ -28,26 +26,7 @@ npm install @brightspace-ui-labs/facet-filter-sort
|
|
|
28
26
|
|
|
29
27
|
## Components
|
|
30
28
|
|
|
31
|
-
- [d2l-labs-search-facets](#d2l-labs-search-facets)
|
|
32
|
-
- [d2l-labs-search-results-count](#d2l-labs-search-results-count)
|
|
33
29
|
- [d2l-labs-sort-by-dropdown](#d2l-labs-sort-by-dropdown)
|
|
34
|
-
- [d2l-labs-applied-core-filters](#d2l-labs-applied-core-filters)
|
|
35
|
-
|
|
36
|
-
### d2l-labs-search-facets
|
|
37
|
-
|
|
38
|
-
<img src="/images/d2l-labs-search-facets.png?raw=true" width="450">
|
|
39
|
-
|
|
40
|
-
#### Usage
|
|
41
|
-
|
|
42
|
-
To Do
|
|
43
|
-
|
|
44
|
-
### d2l-labs-search-results-count
|
|
45
|
-
|
|
46
|
-
<img src="/images/d2l-labs-search-results-count.png?raw=true" width="450">
|
|
47
|
-
|
|
48
|
-
#### Usage
|
|
49
|
-
|
|
50
|
-
To Do
|
|
51
30
|
|
|
52
31
|
### d2l-labs-sort-by-dropdown
|
|
53
32
|
|
|
@@ -61,7 +40,6 @@ To Do
|
|
|
61
40
|
|
|
62
41
|
- [d2l-labs-filter-dropdown](#d2l-labs-filter-dropdown)
|
|
63
42
|
- [d2l-labs-applied-filters](#d2l-labs-applied-filters)
|
|
64
|
-
- [d2l-labs-applied-core-filters](#d2l-labs-applied-core-filters)
|
|
65
43
|
|
|
66
44
|
### d2l-labs-filter-dropdown
|
|
67
45
|
|
|
@@ -157,7 +135,7 @@ Note that for the header and opener text overrides, if the terms are to reflect
|
|
|
157
135
|
|
|
158
136
|
### d2l-labs-applied-filters
|
|
159
137
|
|
|
160
|
-
A multi-select-list allowing the user to see (and remove) the currently applied filters. Works with the `d2l-labs-filter-dropdown` above.
|
|
138
|
+
A multi-select-list allowing the user to see (and remove) the currently applied filters. Works with the `d2l-labs-filter-dropdown` above.
|
|
161
139
|
|
|
162
140
|
NOTE: This component uses the `slotchange` event and so will not work if you require IE support
|
|
163
141
|
|
|
@@ -178,28 +156,6 @@ This also works if the `d2l-labs-filter-dropdown` is a child in the shadow-dom o
|
|
|
178
156
|
<d2l-labs-filter-dropdown id="filter"> ... </d2l-labs-filter-dropdown>
|
|
179
157
|
```
|
|
180
158
|
|
|
181
|
-
### d2l-labs-applied-core-filters
|
|
182
|
-
|
|
183
|
-
**DEPRECATED: Use [`d2l-filter-tags`](https://github.com/BrightspaceUI/core/tree/main/components/filter#tags-for-applied-filters-d2l-filter-tags) in `BrightspaceUI/core`.**
|
|
184
|
-
|
|
185
|
-
The same design as the deprecated `d2l-labs-applied-filters` above, but this version works with the `d2l-filter` component in `core`. It supports hooking up to multiple filters and will be migrated to `core` once designs are finalized.
|
|
186
|
-
|
|
187
|
-
#### Attributes
|
|
188
|
-
|
|
189
|
-
- `filter-ids`: Ids (space-delimited) of the filter components to subscribe to
|
|
190
|
-
- `label-text` (optional): The text displayed in this component's label. Defaults to "Applied Filters:".
|
|
191
|
-
|
|
192
|
-
#### Usage
|
|
193
|
-
|
|
194
|
-
Set the `filter-ids` param to the ids of the `d2l-filter`s that you want to track.
|
|
195
|
-
The `d2l-filter`s must be in the same DOM scope.
|
|
196
|
-
|
|
197
|
-
```html
|
|
198
|
-
<d2l-filter id="course"> ... </d2l-filter>
|
|
199
|
-
<d2l-filter id="role"> ... </d2l-filter>
|
|
200
|
-
<d2l-labs-applied-core-filters filter-ids="course role"></d2l-labs-applied-core-filters>
|
|
201
|
-
```
|
|
202
|
-
|
|
203
159
|
## Developing
|
|
204
160
|
|
|
205
161
|
After cloning the repo, run `npm install` to install dependencies.
|
package/custom-elements.json
CHANGED
|
@@ -1,39 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "experimental",
|
|
3
3
|
"tags": [
|
|
4
|
-
{
|
|
5
|
-
"name": "d2l-labs-applied-core-filters",
|
|
6
|
-
"path": "./components/applied-filters/applied-core-filters.js",
|
|
7
|
-
"description": "A multi-select-list allowing the user to see (and remove) the currently applied filters, adjusted to work with the new core d2l-filter.",
|
|
8
|
-
"attributes": [
|
|
9
|
-
{
|
|
10
|
-
"name": "filter-ids",
|
|
11
|
-
"description": "Ids (space-delimited) of the filter components to subscribe to",
|
|
12
|
-
"type": "string"
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
"name": "label-text",
|
|
16
|
-
"description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
|
|
17
|
-
"type": "string",
|
|
18
|
-
"default": "\"\""
|
|
19
|
-
}
|
|
20
|
-
],
|
|
21
|
-
"properties": [
|
|
22
|
-
{
|
|
23
|
-
"name": "filterIds",
|
|
24
|
-
"attribute": "filter-ids",
|
|
25
|
-
"description": "Ids (space-delimited) of the filter components to subscribe to",
|
|
26
|
-
"type": "string"
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"name": "labelText",
|
|
30
|
-
"attribute": "label-text",
|
|
31
|
-
"description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
|
|
32
|
-
"type": "string",
|
|
33
|
-
"default": "\"\""
|
|
34
|
-
}
|
|
35
|
-
]
|
|
36
|
-
},
|
|
37
4
|
{
|
|
38
5
|
"name": "d2l-labs-applied-filters",
|
|
39
6
|
"path": "./components/applied-filters/applied-filters.js",
|
|
@@ -64,6 +31,10 @@
|
|
|
64
31
|
"description": "Optional: The text displayed in this component's label. Default: \"Applied Filters:\"",
|
|
65
32
|
"type": "string",
|
|
66
33
|
"default": "\"\""
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "documentLocaleSettings",
|
|
37
|
+
"default": "\"getDocumentLocaleSettings()\""
|
|
67
38
|
}
|
|
68
39
|
]
|
|
69
40
|
},
|
|
@@ -154,6 +125,10 @@
|
|
|
154
125
|
"type": "number",
|
|
155
126
|
"default": "0"
|
|
156
127
|
},
|
|
128
|
+
{
|
|
129
|
+
"name": "documentLocaleSettings",
|
|
130
|
+
"default": "\"getDocumentLocaleSettings()\""
|
|
131
|
+
},
|
|
157
132
|
{
|
|
158
133
|
"name": "text",
|
|
159
134
|
"attribute": "text",
|
|
@@ -471,292 +446,6 @@
|
|
|
471
446
|
}
|
|
472
447
|
]
|
|
473
448
|
},
|
|
474
|
-
{
|
|
475
|
-
"name": "d2l-labs-search-facets-grouping",
|
|
476
|
-
"path": "./components/search-facets/search-facets-grouping.js",
|
|
477
|
-
"description": "A grouping of search facet options that keeps tracks of selected options",
|
|
478
|
-
"attributes": [
|
|
479
|
-
{
|
|
480
|
-
"name": "has-more",
|
|
481
|
-
"description": "Indicates whether this grouping has more options to be added later. Controls\nthe visibility of the 'More' button",
|
|
482
|
-
"type": "boolean",
|
|
483
|
-
"default": "false"
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
"name": "text",
|
|
487
|
-
"description": "The name of the grouping",
|
|
488
|
-
"type": "string",
|
|
489
|
-
"default": "\"\""
|
|
490
|
-
},
|
|
491
|
-
{
|
|
492
|
-
"name": "value",
|
|
493
|
-
"description": "The value of the grouping name",
|
|
494
|
-
"type": "string",
|
|
495
|
-
"default": "\"\""
|
|
496
|
-
}
|
|
497
|
-
],
|
|
498
|
-
"properties": [
|
|
499
|
-
{
|
|
500
|
-
"name": "hasMore",
|
|
501
|
-
"attribute": "has-more",
|
|
502
|
-
"description": "Indicates whether this grouping has more options to be added later. Controls\nthe visibility of the 'More' button",
|
|
503
|
-
"type": "boolean",
|
|
504
|
-
"default": "false"
|
|
505
|
-
},
|
|
506
|
-
{
|
|
507
|
-
"name": "text",
|
|
508
|
-
"attribute": "text",
|
|
509
|
-
"description": "The name of the grouping",
|
|
510
|
-
"type": "string",
|
|
511
|
-
"default": "\"\""
|
|
512
|
-
},
|
|
513
|
-
{
|
|
514
|
-
"name": "value",
|
|
515
|
-
"attribute": "value",
|
|
516
|
-
"description": "The value of the grouping name",
|
|
517
|
-
"type": "string",
|
|
518
|
-
"default": "\"\""
|
|
519
|
-
},
|
|
520
|
-
{
|
|
521
|
-
"name": "rootPath",
|
|
522
|
-
"type": "string"
|
|
523
|
-
},
|
|
524
|
-
{
|
|
525
|
-
"name": "importPath",
|
|
526
|
-
"type": "string"
|
|
527
|
-
},
|
|
528
|
-
{
|
|
529
|
-
"name": "root",
|
|
530
|
-
"type": "HTMLElement | StampedTemplate | ShadowRoot | null"
|
|
531
|
-
},
|
|
532
|
-
{
|
|
533
|
-
"name": "$",
|
|
534
|
-
"type": "{ [key: string]: Element; }"
|
|
535
|
-
},
|
|
536
|
-
{
|
|
537
|
-
"name": "PROPERTY_EFFECT_TYPES"
|
|
538
|
-
}
|
|
539
|
-
],
|
|
540
|
-
"events": [
|
|
541
|
-
{
|
|
542
|
-
"name": "d2l-labs-search-facets-grouping-change",
|
|
543
|
-
"description": "Dispatched when the search group changes"
|
|
544
|
-
},
|
|
545
|
-
{
|
|
546
|
-
"name": "d2l-labs-search-facets-grouping-has-more",
|
|
547
|
-
"description": "Dispatched when the more button is clicked"
|
|
548
|
-
}
|
|
549
|
-
],
|
|
550
|
-
"slots": [
|
|
551
|
-
{
|
|
552
|
-
"name": "",
|
|
553
|
-
"description": "Contains the search facets in the group"
|
|
554
|
-
}
|
|
555
|
-
]
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
"name": "d2l-labs-search-facets-option",
|
|
559
|
-
"path": "./components/search-facets/search-facets-option.js",
|
|
560
|
-
"description": "Search facet option, with a count to display the number of results",
|
|
561
|
-
"attributes": [
|
|
562
|
-
{
|
|
563
|
-
"name": "checked",
|
|
564
|
-
"description": "Whether the option is selected or not. This property matches the value of\nthe d2l-input-checkbox",
|
|
565
|
-
"type": "boolean"
|
|
566
|
-
},
|
|
567
|
-
{
|
|
568
|
-
"name": "count",
|
|
569
|
-
"description": "The number of search results for this option",
|
|
570
|
-
"type": "number"
|
|
571
|
-
},
|
|
572
|
-
{
|
|
573
|
-
"name": "disabled",
|
|
574
|
-
"description": "Whether this option should be disabled",
|
|
575
|
-
"type": "boolean",
|
|
576
|
-
"default": "false"
|
|
577
|
-
},
|
|
578
|
-
{
|
|
579
|
-
"name": "text",
|
|
580
|
-
"description": "The text for this option",
|
|
581
|
-
"type": "string",
|
|
582
|
-
"default": "\"\""
|
|
583
|
-
},
|
|
584
|
-
{
|
|
585
|
-
"name": "value",
|
|
586
|
-
"description": "The value of this option",
|
|
587
|
-
"type": "string",
|
|
588
|
-
"default": "\"\""
|
|
589
|
-
}
|
|
590
|
-
],
|
|
591
|
-
"properties": [
|
|
592
|
-
{
|
|
593
|
-
"name": "checked",
|
|
594
|
-
"attribute": "checked",
|
|
595
|
-
"description": "Whether the option is selected or not. This property matches the value of\nthe d2l-input-checkbox",
|
|
596
|
-
"type": "boolean"
|
|
597
|
-
},
|
|
598
|
-
{
|
|
599
|
-
"name": "count",
|
|
600
|
-
"attribute": "count",
|
|
601
|
-
"description": "The number of search results for this option",
|
|
602
|
-
"type": "number"
|
|
603
|
-
},
|
|
604
|
-
{
|
|
605
|
-
"name": "disabled",
|
|
606
|
-
"attribute": "disabled",
|
|
607
|
-
"description": "Whether this option should be disabled",
|
|
608
|
-
"type": "boolean",
|
|
609
|
-
"default": "false"
|
|
610
|
-
},
|
|
611
|
-
{
|
|
612
|
-
"name": "text",
|
|
613
|
-
"attribute": "text",
|
|
614
|
-
"description": "The text for this option",
|
|
615
|
-
"type": "string",
|
|
616
|
-
"default": "\"\""
|
|
617
|
-
},
|
|
618
|
-
{
|
|
619
|
-
"name": "value",
|
|
620
|
-
"attribute": "value",
|
|
621
|
-
"description": "The value of this option",
|
|
622
|
-
"type": "string",
|
|
623
|
-
"default": "\"\""
|
|
624
|
-
},
|
|
625
|
-
{
|
|
626
|
-
"name": "rootPath",
|
|
627
|
-
"type": "string"
|
|
628
|
-
},
|
|
629
|
-
{
|
|
630
|
-
"name": "importPath",
|
|
631
|
-
"type": "string"
|
|
632
|
-
},
|
|
633
|
-
{
|
|
634
|
-
"name": "root",
|
|
635
|
-
"type": "HTMLElement | StampedTemplate | ShadowRoot | null"
|
|
636
|
-
},
|
|
637
|
-
{
|
|
638
|
-
"name": "$",
|
|
639
|
-
"type": "{ [key: string]: Element; }"
|
|
640
|
-
},
|
|
641
|
-
{
|
|
642
|
-
"name": "PROPERTY_EFFECT_TYPES"
|
|
643
|
-
}
|
|
644
|
-
],
|
|
645
|
-
"events": [
|
|
646
|
-
{
|
|
647
|
-
"name": "d2l-labs-search-facets-option-change",
|
|
648
|
-
"description": "Dispatched when the checked value of an option changes"
|
|
649
|
-
}
|
|
650
|
-
]
|
|
651
|
-
},
|
|
652
|
-
{
|
|
653
|
-
"name": "d2l-labs-search-facets",
|
|
654
|
-
"path": "./components/search-facets/search-facets.js",
|
|
655
|
-
"description": "Polymer-based web component for D2L search facets.",
|
|
656
|
-
"properties": [
|
|
657
|
-
{
|
|
658
|
-
"name": "rootPath",
|
|
659
|
-
"type": "string"
|
|
660
|
-
},
|
|
661
|
-
{
|
|
662
|
-
"name": "importPath",
|
|
663
|
-
"type": "string"
|
|
664
|
-
},
|
|
665
|
-
{
|
|
666
|
-
"name": "root",
|
|
667
|
-
"type": "HTMLElement | StampedTemplate | ShadowRoot | null"
|
|
668
|
-
},
|
|
669
|
-
{
|
|
670
|
-
"name": "$",
|
|
671
|
-
"type": "{ [key: string]: Element; }"
|
|
672
|
-
},
|
|
673
|
-
{
|
|
674
|
-
"name": "PROPERTY_EFFECT_TYPES"
|
|
675
|
-
}
|
|
676
|
-
],
|
|
677
|
-
"events": [
|
|
678
|
-
{
|
|
679
|
-
"name": "d2l-labs-search-facets-change",
|
|
680
|
-
"description": "Dispatched when the search facets group changes"
|
|
681
|
-
}
|
|
682
|
-
]
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
"name": "d2l-labs-search-results-count",
|
|
686
|
-
"path": "./components/search-results-count/search-results-count.js",
|
|
687
|
-
"description": "`<d2l-labs-search-results-count>`\nPolymer-based web component for D2L search result",
|
|
688
|
-
"attributes": [
|
|
689
|
-
{
|
|
690
|
-
"name": "range-start",
|
|
691
|
-
"description": "Range start",
|
|
692
|
-
"type": "number"
|
|
693
|
-
},
|
|
694
|
-
{
|
|
695
|
-
"name": "range-end",
|
|
696
|
-
"description": "Range end",
|
|
697
|
-
"type": "number"
|
|
698
|
-
},
|
|
699
|
-
{
|
|
700
|
-
"name": "total-count",
|
|
701
|
-
"description": "Total count",
|
|
702
|
-
"type": "number",
|
|
703
|
-
"default": "0"
|
|
704
|
-
},
|
|
705
|
-
{
|
|
706
|
-
"name": "query",
|
|
707
|
-
"description": "Search query",
|
|
708
|
-
"type": "string",
|
|
709
|
-
"default": "\"\""
|
|
710
|
-
}
|
|
711
|
-
],
|
|
712
|
-
"properties": [
|
|
713
|
-
{
|
|
714
|
-
"name": "rangeStart",
|
|
715
|
-
"attribute": "range-start",
|
|
716
|
-
"description": "Range start",
|
|
717
|
-
"type": "number"
|
|
718
|
-
},
|
|
719
|
-
{
|
|
720
|
-
"name": "rangeEnd",
|
|
721
|
-
"attribute": "range-end",
|
|
722
|
-
"description": "Range end",
|
|
723
|
-
"type": "number"
|
|
724
|
-
},
|
|
725
|
-
{
|
|
726
|
-
"name": "totalCount",
|
|
727
|
-
"attribute": "total-count",
|
|
728
|
-
"description": "Total count",
|
|
729
|
-
"type": "number",
|
|
730
|
-
"default": "0"
|
|
731
|
-
},
|
|
732
|
-
{
|
|
733
|
-
"name": "query",
|
|
734
|
-
"attribute": "query",
|
|
735
|
-
"description": "Search query",
|
|
736
|
-
"type": "string",
|
|
737
|
-
"default": "\"\""
|
|
738
|
-
},
|
|
739
|
-
{
|
|
740
|
-
"name": "rootPath",
|
|
741
|
-
"type": "string"
|
|
742
|
-
},
|
|
743
|
-
{
|
|
744
|
-
"name": "importPath",
|
|
745
|
-
"type": "string"
|
|
746
|
-
},
|
|
747
|
-
{
|
|
748
|
-
"name": "root",
|
|
749
|
-
"type": "HTMLElement | StampedTemplate | ShadowRoot | null"
|
|
750
|
-
},
|
|
751
|
-
{
|
|
752
|
-
"name": "$",
|
|
753
|
-
"type": "{ [key: string]: Element; }"
|
|
754
|
-
},
|
|
755
|
-
{
|
|
756
|
-
"name": "PROPERTY_EFFECT_TYPES"
|
|
757
|
-
}
|
|
758
|
-
]
|
|
759
|
-
},
|
|
760
449
|
{
|
|
761
450
|
"name": "d2l-labs-sort-by-dropdown-option",
|
|
762
451
|
"path": "./components/sort-by-dropdown/sort-by-dropdown-option.js",
|
package/lang/ar.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "تصفية حسب",
|
|
14
14
|
"filterMultiple": "عامل التصفية: {numOptions} من عوامل التصفية",
|
|
15
15
|
"filterSingle": "عامل التصفية: عامل تصفية واحد",
|
|
16
|
-
"more": "المزيد",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} من أصل {totalCount} من النتائج",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} من أصل {totalCount} من نتائج \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} من النتائج",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} من النتائج لـ \"{query}\"",
|
|
21
16
|
"sort": "فرز",
|
|
22
17
|
"sortWithOption": "فرز: {option}"
|
|
23
18
|
};
|
package/lang/cy.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Hidlo yn ôl",
|
|
14
14
|
"filterMultiple": "Hidlo: {numOptions} Hidlydd",
|
|
15
15
|
"filterSingle": "Hidlo: 1 Hidlydd",
|
|
16
|
-
"more": "Mwy",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} o {totalCount} o ganlyniadau",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} o {totalCount} o ganlyniadau ar gyfer \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} o ganlyniadau",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} o ganlyniadau ar gyfer \"{query}\"",
|
|
21
16
|
"sort": "Trefnu",
|
|
22
17
|
"sortWithOption": "Trefnu: {option}"
|
|
23
18
|
};
|
package/lang/da.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrer efter",
|
|
14
14
|
"filterMultiple": "Filter: {numOptions} filtre",
|
|
15
15
|
"filterSingle": "Filtrer: 1 filter",
|
|
16
|
-
"more": "Flere",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} af {totalCount} resultater",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} af {totalCount} resultater for \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} resultater",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} resultater for \"{query}\"",
|
|
21
16
|
"sort": "Sortér",
|
|
22
17
|
"sortWithOption": "Sortér: {option}"
|
|
23
18
|
};
|
package/lang/de.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtern nach",
|
|
14
14
|
"filterMultiple": "Filter: {numOptions} Filter",
|
|
15
15
|
"filterSingle": "Filter: 1 Filter",
|
|
16
|
-
"more": "Mehr",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} von {totalCount} Ergebnissen",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} von {totalCount} Ergebnissen für \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} Ergebnisse",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} Ergebnisse für \"{query}\"",
|
|
21
16
|
"sort": "Sortieren",
|
|
22
17
|
"sortWithOption": "Sortieren: {option}"
|
|
23
18
|
};
|
package/lang/en.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filter By",
|
|
14
14
|
"filterMultiple": "Filter: {numOptions} Filters",
|
|
15
15
|
"filterSingle": "Filter: 1 Filter",
|
|
16
|
-
"more": "More",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} of {totalCount} results",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} of {totalCount} results for \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} results",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} results for \"{query}\"",
|
|
21
16
|
"sort": "Sort",
|
|
22
17
|
"sortWithOption": "Sort: {option}"
|
|
23
18
|
};
|
package/lang/es-es.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrar por",
|
|
14
14
|
"filterMultiple": "Filtro: {numOptions} filtros",
|
|
15
15
|
"filterSingle": "Filtro: 1 filtro",
|
|
16
|
-
"more": "Más",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} de {totalCount} resultados",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} de {totalCount} resultados para \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} resultados",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} resultados para \"{query}\"",
|
|
21
16
|
"sort": "Ordenar",
|
|
22
17
|
"sortWithOption": "Ordenar: {option}"
|
|
23
18
|
};
|
package/lang/es.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrar por",
|
|
14
14
|
"filterMultiple": "Filtro: {numOptions} filtros",
|
|
15
15
|
"filterSingle": "Filtro: 1 filtro",
|
|
16
|
-
"more": "Más",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} de {totalCount} resultados",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} de {totalCount} resultados para \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} resultados",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} resultados para \"{query}\"",
|
|
21
16
|
"sort": "Ordenar",
|
|
22
17
|
"sortWithOption": "Ordenar: {option}"
|
|
23
18
|
};
|
package/lang/fr-fr.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrer par",
|
|
14
14
|
"filterMultiple": "Filtre : {numOptions} filtres",
|
|
15
15
|
"filterSingle": "Filtre : 1 filtre",
|
|
16
|
-
"more": "Plus",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} résultats sur {totalCount}",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} résultats sur {totalCount} pour « {query} »",
|
|
19
|
-
"searchResults": "{totalCount} résultats",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} résultats pour « {query} »",
|
|
21
16
|
"sort": "Trier",
|
|
22
17
|
"sortWithOption": "Trier : {option}"
|
|
23
18
|
};
|
package/lang/fr.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrer à l’aide de",
|
|
14
14
|
"filterMultiple": "Filtre : Filtres {numOptions}",
|
|
15
15
|
"filterSingle": "Filtre : 1 filtre",
|
|
16
|
-
"more": "Plus",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} de {totalCount} résultats",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} de {totalCount} résultats pour « {query} »",
|
|
19
|
-
"searchResults": "{totalCount} résultats",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} résultats pour « {query} »",
|
|
21
16
|
"sort": "Trier",
|
|
22
17
|
"sortWithOption": "Trier : {option}"
|
|
23
18
|
};
|
package/lang/hi.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "इसके अनुसार फ़िल्टर करें",
|
|
14
14
|
"filterMultiple": "फ़िल्टर करें: {numOptions} फ़िल्टर",
|
|
15
15
|
"filterSingle": "फ़िल्टर: 1 फ़िल्टर",
|
|
16
|
-
"more": "अधिक",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {totalCount} में से {rangeEnd} परिणाम",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - \"{query}\" के लिए {totalCount} में से {rangeEnd} परिणाम",
|
|
19
|
-
"searchResults": "{totalCount} परिणाम",
|
|
20
|
-
"searchResultsForQuery": "\"{query}\" के लिए {totalCount} परिणाम",
|
|
21
16
|
"sort": "सॉर्ट करें",
|
|
22
17
|
"sortWithOption": "सॉर्ट करें: {option}"
|
|
23
18
|
};
|
package/lang/ja.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "フィルタの条件",
|
|
14
14
|
"filterMultiple": "フィルタ数: {numOptions}",
|
|
15
15
|
"filterSingle": "フィルタ数: 1",
|
|
16
|
-
"more": "その他",
|
|
17
|
-
"searchPagedResults": "結果 {totalCount} 件中の {rangeStart}~{rangeEnd}",
|
|
18
|
-
"searchPagedResultsForQuery": "「{query}」の結果 {totalCount} 件中の {rangeStart}~{rangeEnd}",
|
|
19
|
-
"searchResults": "結果 {totalCount} 件",
|
|
20
|
-
"searchResultsForQuery": "「{query}」の結果 {totalCount} 件",
|
|
21
16
|
"sort": "並べ替え",
|
|
22
17
|
"sortWithOption": "並べ替え: {option}"
|
|
23
18
|
};
|
package/lang/ko.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "필터링 기준",
|
|
14
14
|
"filterMultiple": "필터: {numOptions}개 필터",
|
|
15
15
|
"filterSingle": "필터: 1개 필터",
|
|
16
|
-
"more": "더 보기",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd}/{totalCount}개 결과",
|
|
18
|
-
"searchPagedResultsForQuery": "\"{query}\"에 대한 {rangeStart} - {rangeEnd}/{totalCount}개 결과",
|
|
19
|
-
"searchResults": "{totalCount}개 결과",
|
|
20
|
-
"searchResultsForQuery": "\"{query}\"에 대한 {totalCount}개 결과",
|
|
21
16
|
"sort": "정렬",
|
|
22
17
|
"sortWithOption": "정렬: {option}"
|
|
23
18
|
};
|
package/lang/nl.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filteren op",
|
|
14
14
|
"filterMultiple": "Filter: {numOptions} filters",
|
|
15
15
|
"filterSingle": "Filter: 1 filter",
|
|
16
|
-
"more": "Meer",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} van {totalCount} resultaten",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd} van {totalCount} resultaten voor \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} resultaten",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} resultaten voor \"{query}\"",
|
|
21
16
|
"sort": "Sorteren",
|
|
22
17
|
"sortWithOption": "Sorteren: {option}"
|
|
23
18
|
};
|
package/lang/pt.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrar por",
|
|
14
14
|
"filterMultiple": "Filtro: {numOptions} filtros",
|
|
15
15
|
"filterSingle": "Filtros: 1",
|
|
16
|
-
"more": "Mais",
|
|
17
|
-
"searchPagedResults": "{rangeStart} – {rangeEnd} de {totalCount} resultados",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} – {rangeEnd} de {totalCount} resultados para \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} resultados",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} resultados para \"{query}\"",
|
|
21
16
|
"sort": "Classificar",
|
|
22
17
|
"sortWithOption": "Classificação: {option}"
|
|
23
18
|
};
|
package/lang/sv.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtrera efter",
|
|
14
14
|
"filterMultiple": "Filter: {numOptions} filter",
|
|
15
15
|
"filterSingle": "Filter: 1 filter",
|
|
16
|
-
"more": "Mer",
|
|
17
|
-
"searchPagedResults": "{rangeStart}–{rangeEnd} av {totalCount} resultat",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart}–{rangeEnd} av {totalCount} resultat för \"{query}\"",
|
|
19
|
-
"searchResults": "{totalCount} resultat",
|
|
20
|
-
"searchResultsForQuery": "{totalCount} resultat för \"{query}\"",
|
|
21
16
|
"sort": "Sortera",
|
|
22
17
|
"sortWithOption": "Sortera: {option}"
|
|
23
18
|
};
|
package/lang/tr.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "Filtreleme Ölçütü",
|
|
14
14
|
"filterMultiple": "Filtre: {numOptions} Filtre",
|
|
15
15
|
"filterSingle": "Filtre: 1 Filtre",
|
|
16
|
-
"more": "Daha Fazla",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} / {totalCount} sonuç",
|
|
18
|
-
"searchPagedResultsForQuery": "\"{query}\" için {rangeStart} - {rangeEnd} / {totalCount} sonuç",
|
|
19
|
-
"searchResults": "{totalCount} sonuç",
|
|
20
|
-
"searchResultsForQuery": "\"{query}\" için {totalCount} sonuç",
|
|
21
16
|
"sort": "Sırala",
|
|
22
17
|
"sortWithOption": "Sırala: {option}"
|
|
23
18
|
};
|
package/lang/zh-cn.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "筛选条件",
|
|
14
14
|
"filterMultiple": "筛选:{numOptions} 个筛选条件",
|
|
15
15
|
"filterSingle": "筛选:1 个筛选条件",
|
|
16
|
-
"more": "更多内容",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd} 个结果,共 {totalCount} 个",
|
|
18
|
-
"searchPagedResultsForQuery": "\"{query}\" 的 {rangeStart} - {rangeEnd} 个结果,共 {totalCount} 个",
|
|
19
|
-
"searchResults": "{totalCount} 个结果",
|
|
20
|
-
"searchResultsForQuery": "\"{query}\" 的 {totalCount} 个结果",
|
|
21
16
|
"sort": "排序",
|
|
22
17
|
"sortWithOption": "排序:{option}"
|
|
23
18
|
};
|
package/lang/zh-tw.js
CHANGED
|
@@ -13,11 +13,6 @@ export default {
|
|
|
13
13
|
"filterBy": "篩選依據",
|
|
14
14
|
"filterMultiple": "篩選器:{numOptions} 個篩選器",
|
|
15
15
|
"filterSingle": "篩選器:1 個篩選器",
|
|
16
|
-
"more": "較多",
|
|
17
|
-
"searchPagedResults": "{rangeStart} - {rangeEnd},總共 {totalCount} 個結果",
|
|
18
|
-
"searchPagedResultsForQuery": "{rangeStart} - {rangeEnd},「{query}」共有 {totalCount} 個結果",
|
|
19
|
-
"searchResults": "{totalCount} 個結果",
|
|
20
|
-
"searchResultsForQuery": "「{query}」共有 {totalCount} 個結果",
|
|
21
16
|
"sort": "排序",
|
|
22
17
|
"sortWithOption": "排序:{option}"
|
|
23
18
|
};
|
package/package.json
CHANGED
|
@@ -44,11 +44,10 @@
|
|
|
44
44
|
"sinon": "^13",
|
|
45
45
|
"stylelint": "^14"
|
|
46
46
|
},
|
|
47
|
-
"version": "5.
|
|
47
|
+
"version": "5.5.0",
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@brightspace-ui/core": "^2",
|
|
50
50
|
"@brightspace-ui/localize-behavior": "^2",
|
|
51
|
-
"@brightspace-ui/typography": "^8",
|
|
52
51
|
"@brightspace-ui-labs/multi-select": "^6",
|
|
53
52
|
"lit-element": "^3",
|
|
54
53
|
"lit-html": "^2",
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import '@brightspace-ui/core/components/button/button-subtle.js';
|
|
2
|
-
import '@brightspace-ui-labs/multi-select/multi-select-list.js';
|
|
3
|
-
import '@brightspace-ui-labs/multi-select/multi-select-list-item.js';
|
|
4
|
-
import { css, html, LitElement } from 'lit-element';
|
|
5
|
-
import { announce } from '@brightspace-ui/core/helpers/announce.js';
|
|
6
|
-
import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
7
|
-
import { FilterLocalizeMixin } from '../localize-mixin.js';
|
|
8
|
-
import { IdSubscriberController } from '@brightspace-ui/core/controllers/subscriber/subscriberControllers.js';
|
|
9
|
-
import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
|
|
10
|
-
|
|
11
|
-
const CLEAR_FILTERS_THRESHOLD = 4;
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* A multi-select-list allowing the user to see (and remove) the currently applied filters, adjusted to work with the new core d2l-filter.
|
|
15
|
-
*/
|
|
16
|
-
class D2lLabsAppliedCoreFilters extends RtlMixin(FilterLocalizeMixin(LitElement)) {
|
|
17
|
-
static get properties() {
|
|
18
|
-
return {
|
|
19
|
-
/**
|
|
20
|
-
* Ids (space-delimited) of the filter components to subscribe to
|
|
21
|
-
* @type {string}
|
|
22
|
-
*/
|
|
23
|
-
filterIds: { type: String, attribute: 'filter-ids' },
|
|
24
|
-
/**
|
|
25
|
-
* Optional: The text displayed in this component's label. Default: "Applied Filters:"
|
|
26
|
-
*/
|
|
27
|
-
labelText: { type: String, attribute: 'label-text' }
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
static get styles() {
|
|
32
|
-
return [bodyCompactStyles, css`
|
|
33
|
-
:host {
|
|
34
|
-
display: block;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
d2l-labs-multi-select-list {
|
|
38
|
-
flex: 1;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.d2l-labs-applied-filters-wrapper {
|
|
42
|
-
display: flex;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.d2l-labs-applied-filters-label {
|
|
46
|
-
display: inline-block;
|
|
47
|
-
font-weight: bold;
|
|
48
|
-
margin-right: 0.25rem;
|
|
49
|
-
padding-top: 0.3rem;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
:host([dir="rtl"]) .d2l-labs-applied-filters-label {
|
|
53
|
-
margin-left: 0.25rem;
|
|
54
|
-
margin-right: 0;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.d2l-labs-applied-filters-none-label {
|
|
58
|
-
color: var(--d2l-color-corundum);
|
|
59
|
-
display: inline-block;
|
|
60
|
-
font-style: italic;
|
|
61
|
-
padding-top: 0.3rem;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
#d2l-clear-filters-button {
|
|
65
|
-
margin-left: 3px;
|
|
66
|
-
margin-right: 3px;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
#d2l-list-holder {
|
|
70
|
-
flex: 1;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([hidden]) {
|
|
74
|
-
display: none;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
[hidden] {
|
|
78
|
-
display: none;
|
|
79
|
-
}
|
|
80
|
-
`];
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
constructor() {
|
|
84
|
-
super();
|
|
85
|
-
this.labelText = '';
|
|
86
|
-
|
|
87
|
-
this._allActiveFilters = new Map();
|
|
88
|
-
this._filters = new IdSubscriberController(this,
|
|
89
|
-
{ onUnsubscribe: this._removeLostFilter.bind(this) },
|
|
90
|
-
{ idPropertyName: 'filterIds' }
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
render() {
|
|
95
|
-
let numActiveFilters = 0;
|
|
96
|
-
const allActiveFilters = Array.from(this._allActiveFilters);
|
|
97
|
-
let filters = html`
|
|
98
|
-
<d2l-labs-multi-select-list
|
|
99
|
-
collapsable
|
|
100
|
-
aria-labelledby="d2l-labs-applied-filters-label">
|
|
101
|
-
${allActiveFilters.map(filter => filter[1].map((value, index) => { numActiveFilters++; return html`
|
|
102
|
-
<d2l-labs-multi-select-list-item
|
|
103
|
-
text="${value.text}"
|
|
104
|
-
deletable
|
|
105
|
-
data-filter-id="${filter[0]}"
|
|
106
|
-
data-index="${index}"
|
|
107
|
-
@d2l-labs-multi-select-list-item-deleted="${this._multiSelectItemDeleted}">
|
|
108
|
-
</d2l-labs-multi-select-list-item>
|
|
109
|
-
`;}))}
|
|
110
|
-
</d2l-labs-multi-select-list>
|
|
111
|
-
`;
|
|
112
|
-
if (numActiveFilters === 0) filters = html`<span class="d2l-labs-applied-filters-none-label d2l-body-compact">${this.localize('noActiveFilters')}</span>`;
|
|
113
|
-
|
|
114
|
-
return html`
|
|
115
|
-
<div class="d2l-labs-applied-filters-wrapper">
|
|
116
|
-
<span id="d2l-labs-applied-filters-label" class="d2l-labs-applied-filters-label d2l-body-compact">${this.labelText || this.localize('appliedFilters')}</span>
|
|
117
|
-
<div id="d2l-list-holder">
|
|
118
|
-
${filters}
|
|
119
|
-
<d2l-button-subtle id="d2l-clear-filters-button" text="${this.localize('clearFilters')}" ?hidden="${numActiveFilters < CLEAR_FILTERS_THRESHOLD}" @click="${this._clearFiltersClicked}"></d2l-button-subtle>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
`;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
updateActiveFilters(filterId, activeFilters) {
|
|
126
|
-
this._allActiveFilters.set(filterId, activeFilters);
|
|
127
|
-
this.requestUpdate();
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
_clearFiltersClicked() {
|
|
131
|
-
this._filters.registries.forEach((filter, index) => {
|
|
132
|
-
if (index === 0) filter.focus();
|
|
133
|
-
filter.requestFilterClearAll();
|
|
134
|
-
});
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
_multiSelectItemDeleted(e) {
|
|
138
|
-
const filterId = e.target.getAttribute('data-filter-id');
|
|
139
|
-
const filterValueIndex = e.target.getAttribute('data-index');
|
|
140
|
-
const filterValue = this._allActiveFilters.get(filterId)[filterValueIndex];
|
|
141
|
-
const filter = this._filters.registries.find(filter => filter.id === filterId);
|
|
142
|
-
filter.requestFilterValueClear(filterValue.keyObject);
|
|
143
|
-
|
|
144
|
-
announce(this.localize('filterRemoved', 'filterText', e.target.text));
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
_removeLostFilter(filterId) {
|
|
148
|
-
this._allActiveFilters.delete(filterId);
|
|
149
|
-
this.requestUpdate();
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
customElements.define('d2l-labs-applied-core-filters', D2lLabsAppliedCoreFilters);
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
import '@brightspace-ui/core/components/colors/colors.js';
|
|
2
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox-spacer.js';
|
|
3
|
-
import '@brightspace-ui/typography/d2l-typography-shared-styles.js';
|
|
4
|
-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
5
|
-
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
6
|
-
import { LocalizeBehavior } from '../localize-behavior.js';
|
|
7
|
-
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* A grouping of search facet options that keeps tracks of selected options
|
|
11
|
-
* @slot - Contains the search facets in the group
|
|
12
|
-
* @fires d2l-labs-search-facets-grouping-change - Dispatched when the search group changes
|
|
13
|
-
* @fires d2l-labs-search-facets-grouping-has-more - Dispatched when the more button is clicked
|
|
14
|
-
*/
|
|
15
|
-
class LabsSearchFacetsGrouping extends mixinBehaviors(
|
|
16
|
-
[
|
|
17
|
-
LocalizeBehavior
|
|
18
|
-
],
|
|
19
|
-
PolymerElement
|
|
20
|
-
) {
|
|
21
|
-
static get properties() {
|
|
22
|
-
return {
|
|
23
|
-
/**
|
|
24
|
-
* Reference to bound listener functions to be removed in disconnectedCallback
|
|
25
|
-
*/
|
|
26
|
-
_boundListeners: {
|
|
27
|
-
type: Object,
|
|
28
|
-
value: function() {
|
|
29
|
-
return {
|
|
30
|
-
_onFacetOptionChange: null
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
/**
|
|
35
|
-
* Indicates whether this grouping has more options to be added later. Controls
|
|
36
|
-
* the visibility of the 'More' button
|
|
37
|
-
*/
|
|
38
|
-
hasMore: {
|
|
39
|
-
type: Boolean,
|
|
40
|
-
value: false
|
|
41
|
-
},
|
|
42
|
-
/**
|
|
43
|
-
* The name of the grouping
|
|
44
|
-
*/
|
|
45
|
-
text: {
|
|
46
|
-
type: String,
|
|
47
|
-
value: ''
|
|
48
|
-
},
|
|
49
|
-
/**
|
|
50
|
-
* The value of the grouping name
|
|
51
|
-
*/
|
|
52
|
-
value: {
|
|
53
|
-
type: String,
|
|
54
|
-
value: ''
|
|
55
|
-
},
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
static get is() { return 'd2l-labs-search-facets-grouping'; }
|
|
60
|
-
|
|
61
|
-
static get template() {
|
|
62
|
-
return html`
|
|
63
|
-
<style>
|
|
64
|
-
:host {
|
|
65
|
-
display: block;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.d2l-labs-search-facets-grouping-fieldset {
|
|
69
|
-
border: none;
|
|
70
|
-
margin: 0;
|
|
71
|
-
padding: 0;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.d2l-labs-search-facets-grouping-legend {
|
|
75
|
-
@apply --d2l-body-compact-text;
|
|
76
|
-
font-weight: bold;
|
|
77
|
-
margin-bottom: 0.4rem;
|
|
78
|
-
padding: 0;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.d2l-labs-search-facets-grouping-show-more > button {
|
|
82
|
-
@apply --d2l-body-compact-text;
|
|
83
|
-
border: none;
|
|
84
|
-
color: var(--d2l-color-celestine);
|
|
85
|
-
font-family: inherit;
|
|
86
|
-
outline: none;
|
|
87
|
-
padding: 0;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.d2l-labs-search-facets-grouping-show-more > button:hover,
|
|
91
|
-
.d2l-labs-search-facets-grouping-show-more > button:focus {
|
|
92
|
-
cursor: pointer;
|
|
93
|
-
font-weight: bold;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
</style>
|
|
97
|
-
<fieldset class="d2l-labs-search-facets-grouping-fieldset">
|
|
98
|
-
<legend class="d2l-labs-search-facets-grouping-legend">[[text]]</legend>
|
|
99
|
-
<slot></slot>
|
|
100
|
-
<template is="dom-if" if="[[hasMore]]">
|
|
101
|
-
<d2l-input-checkbox-spacer class="d2l-labs-search-facets-grouping-show-more">
|
|
102
|
-
<button on-click="_onMoreClicked">[[localize('more')]]</button>
|
|
103
|
-
</d2l-input-checkbox-spacer>
|
|
104
|
-
</template>
|
|
105
|
-
</fieldset>
|
|
106
|
-
`;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
connectedCallback() {
|
|
110
|
-
super.connectedCallback();
|
|
111
|
-
|
|
112
|
-
afterNextRender(this, () => {
|
|
113
|
-
this._boundListeners._onFacetOptionChange = this._onFacetOptionChange.bind(this);
|
|
114
|
-
|
|
115
|
-
this.addEventListener('d2l-labs-search-facets-option-change',
|
|
116
|
-
this._boundListeners._onFacetOptionChange);
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
disconnectedCallback() {
|
|
121
|
-
super.disconnectedCallback();
|
|
122
|
-
this.removeEventListener('d2l-labs-search-facets-option-change',
|
|
123
|
-
this._boundListeners._onFacetOptionChange);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
_onFacetOptionChange(e) {
|
|
127
|
-
this.dispatchEvent(new CustomEvent('d2l-labs-search-facets-grouping-change', {
|
|
128
|
-
bubbles: true,
|
|
129
|
-
composed: true,
|
|
130
|
-
detail: Object.assign({}, e.detail, { grouping: this.value })
|
|
131
|
-
}));
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
_onMoreClicked() {
|
|
135
|
-
this.dispatchEvent(new CustomEvent('d2l-labs-search-facets-grouping-has-more', {
|
|
136
|
-
bubbles: true,
|
|
137
|
-
composed: true,
|
|
138
|
-
detail: { grouping: this.value }
|
|
139
|
-
}));
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
customElements.define(LabsSearchFacetsGrouping.is, LabsSearchFacetsGrouping);
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import '@brightspace-ui/core/components/inputs/input-checkbox.js';
|
|
2
|
-
import '@brightspace-ui/localize-behavior/d2l-localize-behavior.js';
|
|
3
|
-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
4
|
-
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Search facet option, with a count to display the number of results
|
|
8
|
-
* @fires d2l-labs-search-facets-option-change - Dispatched when the checked value of an option changes
|
|
9
|
-
*/
|
|
10
|
-
class LabsSearchFacetsOption extends mixinBehaviors(
|
|
11
|
-
[
|
|
12
|
-
D2L.PolymerBehaviors.LocalizeBehavior
|
|
13
|
-
],
|
|
14
|
-
PolymerElement
|
|
15
|
-
) {
|
|
16
|
-
static get properties() {
|
|
17
|
-
return {
|
|
18
|
-
/**
|
|
19
|
-
* The text displayed for this option. Adds the count next to the text if present
|
|
20
|
-
*/
|
|
21
|
-
_facetText: {
|
|
22
|
-
type: String,
|
|
23
|
-
value: '',
|
|
24
|
-
computed: '_getFacetText(text, count)'
|
|
25
|
-
},
|
|
26
|
-
/**
|
|
27
|
-
* Whether the option is selected or not. This property matches the value of
|
|
28
|
-
* the d2l-input-checkbox
|
|
29
|
-
*/
|
|
30
|
-
checked: {
|
|
31
|
-
type: Boolean,
|
|
32
|
-
reflectToAttribute: true
|
|
33
|
-
},
|
|
34
|
-
/**
|
|
35
|
-
* The number of search results for this option
|
|
36
|
-
*/
|
|
37
|
-
count: {
|
|
38
|
-
type: Number
|
|
39
|
-
},
|
|
40
|
-
/**
|
|
41
|
-
* Whether this option should be disabled
|
|
42
|
-
*/
|
|
43
|
-
disabled: {
|
|
44
|
-
type: Boolean,
|
|
45
|
-
reflectToAttribute: true,
|
|
46
|
-
value: false
|
|
47
|
-
},
|
|
48
|
-
/**
|
|
49
|
-
* The text for this option
|
|
50
|
-
*/
|
|
51
|
-
text: {
|
|
52
|
-
type: String,
|
|
53
|
-
value: ''
|
|
54
|
-
},
|
|
55
|
-
/**
|
|
56
|
-
* The value of this option
|
|
57
|
-
*/
|
|
58
|
-
value: {
|
|
59
|
-
type: String,
|
|
60
|
-
value: ''
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
static get is() { return 'd2l-labs-search-facets-option'; }
|
|
66
|
-
|
|
67
|
-
static get template() {
|
|
68
|
-
return html`
|
|
69
|
-
<style>
|
|
70
|
-
:host {
|
|
71
|
-
display: block;
|
|
72
|
-
}
|
|
73
|
-
</style>
|
|
74
|
-
<d2l-input-checkbox checked="[[checked]]" disabled="[[disabled]]" name="[[text]]" on-change="_handleChange" class="d2l-labs-search-facets-option-checkbox">[[_facetText]]</d2l-input-checkbox>
|
|
75
|
-
`;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
_getFacetText(text, count) {
|
|
79
|
-
if (count) {
|
|
80
|
-
return document.dir === 'rtl'
|
|
81
|
-
? `(${this.formatNumber(count)}) ${text}`
|
|
82
|
-
: `${text} (${this.formatNumber(count)})`;
|
|
83
|
-
}
|
|
84
|
-
return text;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
_handleChange(e) {
|
|
88
|
-
this.dispatchEvent(new CustomEvent('d2l-labs-search-facets-option-change', {
|
|
89
|
-
bubbles: true,
|
|
90
|
-
composed: true,
|
|
91
|
-
detail: { checked: e.target.checked, option: this.value }
|
|
92
|
-
}));
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
customElements.define(LabsSearchFacetsOption.is, LabsSearchFacetsOption);
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
2
|
-
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Polymer-based web component for D2L search facets.
|
|
6
|
-
* @fires d2l-labs-search-facets-change - Dispatched when the search facets group changes
|
|
7
|
-
*/
|
|
8
|
-
class LabsSearchFacets extends PolymerElement {
|
|
9
|
-
static get properties() {
|
|
10
|
-
return {
|
|
11
|
-
/**
|
|
12
|
-
* Reference to bound listener functions to be removed in disconnectedCallback
|
|
13
|
-
*/
|
|
14
|
-
_boundListeners: {
|
|
15
|
-
type: Object,
|
|
16
|
-
value: function() {
|
|
17
|
-
return {
|
|
18
|
-
_onFacetGroupingChange: null
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
static get is() { return 'd2l-labs-search-facets'; }
|
|
26
|
-
|
|
27
|
-
static get template() {
|
|
28
|
-
return html`
|
|
29
|
-
<style>
|
|
30
|
-
:host {
|
|
31
|
-
display: block;
|
|
32
|
-
}
|
|
33
|
-
</style>
|
|
34
|
-
<slot></slot>
|
|
35
|
-
`;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
connectedCallback() {
|
|
39
|
-
super.connectedCallback();
|
|
40
|
-
|
|
41
|
-
afterNextRender(this, () => {
|
|
42
|
-
this._boundListeners._onFacetGroupingChange = this._onFacetGroupingChange.bind(this);
|
|
43
|
-
this.addEventListener('d2l-labs-search-facets-grouping-change',
|
|
44
|
-
this._boundListeners._onFacetGroupingChange);
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
disconnectedCallback() {
|
|
49
|
-
super.disconnectedCallback();
|
|
50
|
-
|
|
51
|
-
this.removeEventListener('d2l-labs-search-facets-grouping-change',
|
|
52
|
-
this._boundListeners._onFacetGroupingChange);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
_onFacetGroupingChange(e) {
|
|
56
|
-
this.dispatchEvent(new CustomEvent('d2l-labs-search-facets-change', {
|
|
57
|
-
bubbles: true, composed: true, detail: e.detail
|
|
58
|
-
}));
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
customElements.define(LabsSearchFacets.is, LabsSearchFacets);
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
2
|
-
import { LocalizeBehavior } from '../localize-behavior.js';
|
|
3
|
-
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* `<d2l-labs-search-results-count>`
|
|
7
|
-
* Polymer-based web component for D2L search result
|
|
8
|
-
*/
|
|
9
|
-
class LabsSearchResultsCount extends mixinBehaviors(
|
|
10
|
-
[
|
|
11
|
-
LocalizeBehavior
|
|
12
|
-
],
|
|
13
|
-
PolymerElement
|
|
14
|
-
) {
|
|
15
|
-
static get properties() {
|
|
16
|
-
return {
|
|
17
|
-
/**
|
|
18
|
-
* Displayed text
|
|
19
|
-
*/
|
|
20
|
-
_text: {
|
|
21
|
-
type: String,
|
|
22
|
-
value: ''
|
|
23
|
-
},
|
|
24
|
-
/**
|
|
25
|
-
* Range start
|
|
26
|
-
*/
|
|
27
|
-
rangeStart: {
|
|
28
|
-
type: Number
|
|
29
|
-
},
|
|
30
|
-
/**
|
|
31
|
-
* Range end
|
|
32
|
-
*/
|
|
33
|
-
rangeEnd: {
|
|
34
|
-
type: Number
|
|
35
|
-
},
|
|
36
|
-
/**
|
|
37
|
-
* Total count
|
|
38
|
-
*/
|
|
39
|
-
totalCount: {
|
|
40
|
-
type: Number,
|
|
41
|
-
value: 0
|
|
42
|
-
},
|
|
43
|
-
/**
|
|
44
|
-
* Search query
|
|
45
|
-
*/
|
|
46
|
-
query: {
|
|
47
|
-
type: String,
|
|
48
|
-
value: ''
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
static get is() { return 'd2l-labs-search-results-count'; }
|
|
54
|
-
|
|
55
|
-
static get template() {
|
|
56
|
-
return html`
|
|
57
|
-
[[_text]]
|
|
58
|
-
`;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
connectedCallback() {
|
|
62
|
-
super.connectedCallback();
|
|
63
|
-
if (this.rangeStart && this.rangeEnd) {
|
|
64
|
-
this._text = this.query
|
|
65
|
-
? this.localize('searchPagedResultsForQuery',
|
|
66
|
-
'rangeStart', this.rangeStart, 'rangeEnd', this.rangeEnd, 'totalCount', this.totalCount, 'query', this.query)
|
|
67
|
-
: this.localize('searchPagedResults',
|
|
68
|
-
'rangeStart', this.rangeStart, 'rangeEnd', this.rangeEnd, 'totalCount', this.totalCount);
|
|
69
|
-
} else {
|
|
70
|
-
this._text = this.query
|
|
71
|
-
? this.localize('searchResultsForQuery', 'totalCount', this.totalCount, 'query', this.query)
|
|
72
|
-
: this.localize('searchResults', 'totalCount', this.totalCount);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
customElements.define(LabsSearchResultsCount.is, LabsSearchResultsCount);
|