@fluid-topics/ft-filter 0.2.16 → 0.2.19

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;

package/build/ft-filter.js

@@ -34,6 +34,7 @@ export class FtFilter extends FtLitElement {
         this.filterPlaceHolder = "Filter {0}";
         this.clearButtonLabel = "Clear";
         this.moreValuesButtonLabel = "More";
+        this.noValuesLabel = "No values available";
         this.options = [];
         this.multivalued = false;
         this.disabled = false;
@@ -134,7 +135,8 @@ export class FtFilter extends FtLitElement {
                         preventNavigation
                         .options=${selectedOptions}
                         @change=${this.onChange}
-                        part="selected-values"
+                        part="values selected-values"
+                        .exportpartsPrefixes=${["values", "selected-values"]}
                 ></ft-filter-level>
                 <div class="ft-filter--separator">
             ` : null}
@@ -177,7 +179,9 @@ export class FtFilter extends FtLitElement {
                     @change=${this.onChange}
                     @go-back=${this.goBack}
                     @display-level=${this.onDisplayLevel}
-                    part="values"
+                    part="values available-values"
+                    .exportpartsPrefixes=${["values", "available-values"]}
+                    noValuesLabel="${this.noValuesLabel}"
             ></ft-filter-level>
         `;
     }
@@ -264,7 +268,6 @@ FtFilter.styles = [
                 max-height: 100%;
                 max-width: 100%;
                 color: ${FtFilterCssVariables.colorOnSurface};
-                background: ${FtFilterCssVariables.colorSurface};
             }
 
             .ft-filter--header {
@@ -317,10 +320,14 @@ FtFilter.styles = [
                 border: 1px solid ${FtFilterCssVariables.colorOutline};
                 padding: 4px;
                 background-color: ${FtFilterCssVariables.colorSurface};
-                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
+                color: ${FtFilterCssVariables.colorOnSurface};
                 outline-color: ${FtFilterCssVariables.colorPrimary};
             }
 
+            input::placeholder {
+                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
+            }
+
             .ft-filter--values {
                 flex-grow: 1;
                 flex-shrink: 1;
@@ -372,6 +379,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FtFilter.prototype, "moreValuesButtonLabel", void 0);
+__decorate([
+    property({ type: String })
+], FtFilter.prototype, "noValuesLabel", void 0);
 __decorate([
     jsonProperty([])
 ], FtFilter.prototype, "options", void 0);