npm - @c8y/ngx-components - Versions diffs - 1021.63.2 → 1021.64.0 - Mend

@c8y/ngx-components 1021.63.2 → 1021.64.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.

Files changed (62) hide show

package/fesm2022/c8y-ngx-components-ecosystem-shared.mjs CHANGED Viewed

@@ -2000,11 +2000,11 @@ class ListFiltersComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListFiltersComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AppStateService }, { token: i3.TranslateService }, { token: i2.GainsightService }, { token: i4.Router }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListFiltersComponent, selector: "c8y-list-filters", inputs: { packageTypes: "packageTypes", packageAvailabilities: "packageAvailabilities", packageContents: "packageContents" }, outputs: { filterPipeChange: "filterPipeChange" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter\n    [filterTerm]=\"currentFilterTerm\"\n    (onSearch)=\"setFilterTerm($event)\"\n  ></c8y-filter>\n\n  <div\n    class=\"dropdown m-l-8 m-r-4\"\n    *ngIf=\"predefinedFiltersVisible\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto flex-no-shrink\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"type | translate\"\n            *ngFor=\"let type of packageTypes\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"availability | translate\"\n            *ngFor=\"let availability of packageAvailabilities\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"content | translate\"\n            *ngFor=\"let content of packageContents\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n        <c8y-form-group formGroupName=\"custom\">\n          <ng-content></ng-content>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i5.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i8$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListFiltersComponent, selector: "c8y-list-filters", inputs: { packageTypes: "packageTypes", packageAvailabilities: "packageAvailabilities", packageContents: "packageContents" }, outputs: { filterPipeChange: "filterPipeChange" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter\n    [filterTerm]=\"currentFilterTerm\"\n    (onSearch)=\"setFilterTerm($event)\"\n  ></c8y-filter>\n\n  <div\n    class=\"dropdown m-l-8 m-r-4\"\n    *ngIf=\"predefinedFiltersVisible\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center gap-4 w-auto flex-no-shrink\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"type | translate\"\n            *ngFor=\"let type of packageTypes\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"availability | translate\"\n            *ngFor=\"let availability of packageAvailabilities\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"content | translate\"\n            *ngFor=\"let content of packageContents\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n        <c8y-form-group formGroupName=\"custom\">\n          <ng-content></ng-content>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgPlural, selector: "[ngPlural]", inputs: ["ngPlural"] }, { kind: "directive", type: i5.NgPluralCase, selector: "[ngPluralCase]" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.FilterInputComponent, selector: "c8y-filter", inputs: ["icon", "filterTerm"], outputs: ["onSearch"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i6.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i8$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i5.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-list-filters', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter\n    [filterTerm]=\"currentFilterTerm\"\n    (onSearch)=\"setFilterTerm($event)\"\n  ></c8y-filter>\n\n  <div\n    class=\"dropdown m-l-8 m-r-4\"\n    *ngIf=\"predefinedFiltersVisible\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center w-auto flex-no-shrink\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"type | translate\"\n            *ngFor=\"let type of packageTypes\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"availability | translate\"\n            *ngFor=\"let availability of packageAvailabilities\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"content | translate\"\n            *ngFor=\"let content of packageContents\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n        <c8y-form-group formGroupName=\"custom\">\n          <ng-content></ng-content>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-list-filters', template: "<form\n  class=\"d-flex a-i-center\"\n  [formGroup]=\"formGroup\"\n>\n  <c8y-filter\n    [filterTerm]=\"currentFilterTerm\"\n    (onSearch)=\"setFilterTerm($event)\"\n  ></c8y-filter>\n\n  <div\n    class=\"dropdown m-l-8 m-r-4\"\n    *ngIf=\"predefinedFiltersVisible\"\n    dropdown\n    (isOpenChange)=\"toggleDropdown($event)\"\n    #filtersDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"filtersDropdown.isOpen\"\n    [insideClick]=\"true\"\n  >\n    <div class=\"input-group d-inline-flex\">\n      <button\n        class=\"btn-clean form-control p-l-8 p-r-16 a-s-stretch d-flex a-i-center gap-4 w-auto flex-no-shrink\"\n        title=\"{{ 'Filters' | translate }}\"\n        dropdownToggle\n      >\n        <span [ngPlural]=\"chips.length\">\n          <ng-template ngPluralCase=\"=0\">\n            {{ 'Filters' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"=1\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filter' | translate }}\n          </ng-template>\n          <ng-template ngPluralCase=\"other\">\n            <span class=\"badge badge-info\">{{ chips.length }}</span>\n            {{ 'Filters' | translate }}\n          </ng-template>\n        </span>\n        <span class=\"caret\"></span>\n      </button>\n      <div\n        class=\"input-group-addon p-t-0 p-b-0 d-flex gap-4 a-i-center inner-scroll\"\n        *ngIf=\"chips.length > 0\"\n      >\n        <ng-container *ngFor=\"let chip of chips\">\n          <span\n            class=\"tag tag--info chip\"\n            *ngIf=\"chip[1].value\"\n          >\n            <button\n              class=\"btn btn-xs btn-clean text-10\"\n              title=\"{{ 'Remove' | translate }}\"\n              type=\"button\"\n              (click)=\"deselectChip(chip)\"\n            >\n              <i c8yIcon=\"times\"></i>\n            </button>\n            {{ chip[0] | translate | titlecase }}\n          </span>\n        </ng-container>\n      </div>\n    </div>\n    <div\n      class=\"dropdown-menu\"\n      *dropdownMenu\n    >\n      <div class=\"dropdown-form\">\n        <c8y-form-group\n          *ngIf=\"packageTypes.length\"\n          formGroupName=\"type\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Type' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"type | translate\"\n            *ngFor=\"let type of packageTypes\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"type\"\n              [value]=\"type\"\n            />\n            <span></span>\n            <span>{{ type | translate | titlecase }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageAvailabilities.length\"\n          formGroupName=\"availability\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Availability`of package based on app state`' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"availability | translate\"\n            *ngFor=\"let availability of packageAvailabilities\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"availability\"\n              [value]=\"availability\"\n            />\n            <span></span>\n            <span>{{ availability | translate }}</span>\n          </label>\n        </c8y-form-group>\n\n        <c8y-form-group\n          *ngIf=\"packageContents.length\"\n          formGroupName=\"content\"\n        >\n          <label class=\"m-b-16\">\n            {{ 'Content' | translate }}\n          </label>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"content | translate\"\n            *ngFor=\"let content of packageContents\"\n          >\n            <input\n              type=\"checkbox\"\n              [formControlName]=\"content\"\n              [value]=\"content\"\n            />\n            <span></span>\n            <span>{{ content | translate }}</span>\n          </label>\n        </c8y-form-group>\n        <c8y-form-group formGroupName=\"custom\">\n          <ng-content></ng-content>\n        </c8y-form-group>\n      </div>\n      <div class=\"p-16 d-flex gap-8 separator-top\">\n        <button\n          class=\"btn btn-default btn-sm flex-grow\"\n          title=\"{{ 'Reset' | translate }}\"\n          type=\"button\"\n          (click)=\"reset(); filtersDropdown.isOpen = false\"\n        >\n          {{ 'Reset' | translate }}\n        </button>\n\n        <button\n          class=\"btn btn-primary btn-sm flex-grow\"\n          title=\"{{ 'Apply' | translate }}\"\n          type=\"button\"\n          (click)=\"applyPredefinedFilters(); filtersDropdown.isOpen = false\"\n          [disabled]=\"formGroup.pristine && formGroup.untouched\"\n        >\n          {{ 'Apply' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.AppStateService }, { type: i3.TranslateService }, { type: i2.GainsightService }, { type: i4.Router }, { type: i4.ActivatedRoute }], propDecorators: { packageTypes: [{
                 type: Input
             }], packageAvailabilities: [{