@fluid-topics/ft-filter 0.2.14 → 0.2.17

package/build/ft-filter-level.d.ts

@@ -27,6 +27,7 @@ export declare class FtFilterLevel extends FtLitElement {
     preventNavigation: boolean;
     private filter;
     private moreValuesButtonLabel;
+    private noValuesLabel?;
     displayedValuesLimit: number;
     private container?;
     private displayedPages;

package/build/ft-filter-level.js

@@ -68,6 +68,7 @@ export class FtFilterLevel extends FtLitElement {
             <div class="ft-filter-level--container ${this.disabled ? "ft-filter--disabled" : ""}">
                 ${this.parent == null ? null : html `
                     <div tabindex="0"
+                         part="controls go-back"
                          class="ft-filter-level--go-back"
                          ?disabled=${this.disabled}
                          @keyup=${this.goBackOnKeyPress}
@@ -77,6 +78,11 @@ export class FtFilterLevel extends FtLitElement {
                         <ft-typography variant="body2">${this.parent.label}</ft-typography>
                     </div>
                 `}
+                ${this.options.length === 0 && this.noValuesLabel ? html `
+                    <ft-typography class="ft-filter-level--no-values" element="span" variant="body2">
+                        ${this.noValuesLabel}
+                    </ft-typography>
+                ` : nothing}
                 ${repeat(limitedOptions, option => option.value, option => {
             var _a;
             return html `
@@ -84,6 +90,7 @@ export class FtFilterLevel extends FtLitElement {
                                 ${this.multivalued ? this.buildMultiValuedOption(option) : this.buildMonoValuedOption(option)}
                                 ${this.preventNavigation || option.selected || ((_a = option.subOptions) !== null && _a !== void 0 ? _a : []).length === 0 ? nothing : html `
                                     <ft-button icon="chevron_right"
+                                               part="controls navigate-hierarchy"
                                                label="${option.label}"
                                                ?disabled=${this.disabled}
                                                tooltipPosition="left"
@@ -97,6 +104,7 @@ export class FtFilterLevel extends FtLitElement {
                             class="ft-filter-level--display-more"
                             icon="expand_more"
                             dense trailingIcon
+                            part="controls display-more"
                             @click=${this.displayMore}>
                         ${this.moreValuesButtonLabel}
                     </ft-button>
@@ -121,6 +129,7 @@ export class FtFilterLevel extends FtLitElement {
         var _a;
         return html `
             <ft-checkbox name="${this.id}"
+                         part="multivalued-option"
                          .checked=${option.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some(o => o.selected)}
@@ -132,6 +141,7 @@ export class FtFilterLevel extends FtLitElement {
     buildMonoValuedOption(option) {
         return html `
             <ft-radio name="${this.id + Math.round(Math.random() * 1000000)}"
+                      part="monovalued-option"
                       .checked=${option.selected}
                       ?disabled=${this.disabled}
                       @click=${(e) => this.optionsChanged(e, option)}
@@ -226,6 +236,11 @@ FtFilterLevel.styles = [
                 margin-left: -10px;
                 word-break: break-word;
             }
+            
+            .ft-filter-level--no-values {    
+                margin: 10px 0;
+                color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
+            }
         `
 ];
 __decorate([
@@ -255,6 +270,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtFilterLevel.prototype, "moreValuesButtonLabel", void 0);
+__decorate([
+    property({ type: String })
+], FtFilterLevel.prototype, "noValuesLabel", void 0);
 __decorate([
     property({ type: Number })
 ], FtFilterLevel.prototype, "displayedValuesLimit", void 0);

package/build/ft-filter.d.ts

@@ -7,6 +7,7 @@ export interface FtFilterProperties {
     filterPlaceHolder?: string;
     clearButtonLabel?: string;
     moreValuesButtonLabel?: string;
+    noValuesLabel?: string;
     options: Array<FtFilterOptionProperties>;
     multivalued?: boolean;
     disabled?: boolean;
@@ -33,6 +34,7 @@ export declare class FtFilter extends FtLitElement implements FtFilterProperties
     filterPlaceHolder: string;
     clearButtonLabel: string;
     moreValuesButtonLabel: string;
+    noValuesLabel: string;
     options: Array<FtFilterOptionProperties>;
     multivalued: boolean;
     disabled: boolean;