@fluid-topics/ft-filter 1.1.48 → 1.1.50
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/build/ft-filter.js +36 -33
- package/build/ft-filter.light.js +162 -155
- package/build/ft-filter.min.js +276 -269
- package/build/ft-filter.styles.js +3 -0
- package/package.json +10 -10
package/build/ft-filter.js
CHANGED
|
@@ -58,11 +58,14 @@ class FtFilter extends FtLitElement {
|
|
|
58
58
|
<div class="ft-filter--container ${this.disabled ? "ft-filter--disabled" : ""}"
|
|
59
59
|
part="container">
|
|
60
60
|
${!this.label && !valuesSelected ? null : html `
|
|
61
|
+
|
|
61
62
|
<div class="ft-filter--header" part="header">
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
<div class="filter-label" id="id-group-${this.id}">
|
|
64
|
+
<ft-typography class="ft-filter--label" variant="overline" part="label">
|
|
65
|
+
${this.label}
|
|
66
|
+
</ft-typography>
|
|
67
|
+
<slot name="label"></slot>
|
|
68
|
+
</div>
|
|
66
69
|
${valuesSelected && !this.hideClearButton ? html `
|
|
67
70
|
<ft-button icon="close" dense @click=${this.clear} part="clear-button">
|
|
68
71
|
${this.clearButtonLabel}
|
|
@@ -80,7 +83,7 @@ class FtFilter extends FtLitElement {
|
|
|
80
83
|
@search=${this.onFilterChange}
|
|
81
84
|
@keyup=${this.onFilterChange}>
|
|
82
85
|
</div>
|
|
83
|
-
<div class="ft-filter--values">
|
|
86
|
+
<div class="ft-filter--values" role="group" aria-labelledby="id-group-${this.id}">
|
|
84
87
|
${this.renderLevels()}
|
|
85
88
|
</div>
|
|
86
89
|
<slot class="ft-filter--slot"
|
|
@@ -135,18 +138,18 @@ class FtFilter extends FtLitElement {
|
|
|
135
138
|
const rootOptionsClass = currentLevelIndex < 0 ? "ft-filter--level-center" : "ft-filter--level-left";
|
|
136
139
|
return html `
|
|
137
140
|
${this.raiseSelectedOptions && selectedOptions.length > 0 ? html `
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
141
|
+
<ft-filter-level
|
|
142
|
+
filterId="${this.id}"
|
|
143
|
+
?multivalued=${this.multivalued}
|
|
144
|
+
?disabled=${this.disabled}
|
|
145
|
+
preventNavigation
|
|
146
|
+
.options=${selectedOptions}
|
|
147
|
+
@change=${this.onChange}
|
|
148
|
+
part="values selected-values"
|
|
149
|
+
.exportpartsPrefixes=${["values", "selected-values"]}
|
|
150
|
+
></ft-filter-level>
|
|
151
|
+
<div class="ft-filter--separator">
|
|
152
|
+
` : null}
|
|
150
153
|
<ft-snap-scroll horizontal hideScrollbar
|
|
151
154
|
class="ft-filter--levels"
|
|
152
155
|
@current-element-change=${(e) => this.levelsScrollDebouncer.run(() => {
|
|
@@ -173,22 +176,22 @@ class FtFilter extends FtLitElement {
|
|
|
173
176
|
renderLevel(className, options, parent) {
|
|
174
177
|
return html `
|
|
175
178
|
<ft-filter-level
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
179
|
+
class="${className}"
|
|
180
|
+
filterId="${this.id}"
|
|
181
|
+
.filter="${this.filter}"
|
|
182
|
+
moreValuesButtonLabel="${this.moreValuesButtonLabel}"
|
|
183
|
+
?multivalued=${this.multivalued}
|
|
184
|
+
?disabled=${this.disabled || className !== "ft-filter--level-center"}
|
|
185
|
+
?hideSelectedOptions=${this.raiseSelectedOptions}
|
|
186
|
+
.parent=${parent}
|
|
187
|
+
.options=${options}
|
|
188
|
+
.displayedValuesLimit=${this.displayedValuesLimit}
|
|
189
|
+
@change=${this.onChange}
|
|
190
|
+
@go-back=${this.goBack}
|
|
191
|
+
@display-level=${this.onDisplayLevel}
|
|
192
|
+
part="values available-values"
|
|
193
|
+
.exportpartsPrefixes=${["values", "available-values"]}
|
|
194
|
+
noValuesLabel="${this.noValuesLabel}"
|
|
192
195
|
></ft-filter-level>
|
|
193
196
|
`;
|
|
194
197
|
}
|