@symphony-talent/component-library 3.88.0 → 3.90.0

package/esm2020/lib/templates/admin-list/admin-list.component.mjs

@@ -4,9 +4,9 @@ export class AdminListTemplateComponent {
     constructor() { }
 }
 AdminListTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] });
+AdminListTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: AdminListTemplateComponent, selector: "symphony-admin-list-template", ngImport: i0, template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:2px solid #000}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: AdminListTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:5px solid #000}\n"] }]
+            args: [{ selector: 'symphony-admin-list-template', template: "<div class=\"sfx\">\n  <!---->\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"sfx-page-title\">\n      <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-12 colmd-9 col-lg-9 sfx-pl-0\">\n          <ng-content select=\"[sfx-header]\"></ng-content>\n        </div>\n        <span class=\"pull-right sfx-create-new\">\n          <ng-content select=\"[sfx-page-action]\"></ng-content>\n        </span>\n      </div>\n    </div>\n  </section>\n  <section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12\">\n    <div class=\"row\">\n      <ng-content select=\"[sfx-filter-area]\"></ng-content>\n    </div>\n  </section>\n  <section class=\"sfx-title-wrap\">\n    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n      <div class=\"col-xs-12 col-sm-12 col-md-5 col-lg-5 sfx-pl-0 sfx-mt-10\">\n        <ng-content select=\"[sfx-title]\"></ng-content>\n      </div>\n      <span class=\"pull-right sfx-create-new\">\n        <ng-content select=\"[sfx-grid-action]\"></ng-content>\n      </span>\n    </div>\n  </section>\n  <section class=\"sfx-grid-wrap grid-with-dropdown\">\n    <ng-content select=\"[sfx-grid]\"></ng-content>\n  </section>\n</div>\n", styles: [".sfx-page-title{margin-top:3.125rem;margin-bottom:1.875rem}.sfx-title-wrap{display:inline-block;width:100%;border-bottom:2px solid #000}\n"] }]
         }], ctorParameters: function () { return []; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWRtaW4tbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3RlbXBsYXRlcy9hZG1pbi1saXN0L2FkbWluLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi90ZW1wbGF0ZXMvYWRtaW4tbGlzdC9hZG1pbi1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBTzFDLE1BQU0sT0FBTywwQkFBMEI7SUFDckMsZ0JBQWUsQ0FBQzs7dUhBREwsMEJBQTBCOzJHQUExQiwwQkFBMEIsb0VDUHZDLDhyQ0FpQ0E7MkZEMUJhLDBCQUEwQjtrQkFMdEMsU0FBUzsrQkFDRSw4QkFBOEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3ltcGhvbnktYWRtaW4tbGlzdC10ZW1wbGF0ZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9hZG1pbi1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWRtaW4tbGlzdC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBBZG1pbkxpc3RUZW1wbGF0ZUNvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKCkge31cbn1cbiIsIjxkaXYgY2xhc3M9XCJzZnhcIj5cbiAgPCEtLS0tPlxuICA8c2VjdGlvbiBjbGFzcz1cImNvbC14cy0xMiBjb2wtc20tMTIgY29sLW1kLTEyIGNvbC1sZy0xMlwiPlxuICAgIDxkaXYgY2xhc3M9XCJzZngtcGFnZS10aXRsZVwiPlxuICAgICAgPGRpdiBjbGFzcz1cInJvd1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29sLXhzLTEyIGNvbC1zbS0xMiBjb2xtZC05IGNvbC1sZy05IHNmeC1wbC0wXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NmeC1oZWFkZXJdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJwdWxsLXJpZ2h0IHNmeC1jcmVhdGUtbmV3XCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NmeC1wYWdlLWFjdGlvbl1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L3NlY3Rpb24+XG4gIDxzZWN0aW9uIGNsYXNzPVwiY29sLXhzLTEyIGNvbC1zbS0xMiBjb2wtbWQtMTIgY29sLWxnLTEyXCI+XG4gICAgPGRpdiBjbGFzcz1cInJvd1wiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW3NmeC1maWx0ZXItYXJlYV1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvc2VjdGlvbj5cbiAgPHNlY3Rpb24gY2xhc3M9XCJzZngtdGl0bGUtd3JhcFwiPlxuICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgY29sLXNtLTEyIGNvbC1tZC0xMiBjb2wtbGctMTIgc2Z4LW1iLTMwIHNmeC1wLTBcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgY29sLXNtLTEyIGNvbC1tZC01IGNvbC1sZy01IHNmeC1wbC0wIHNmeC1tdC0xMFwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbc2Z4LXRpdGxlXVwiPjwvbmctY29udGVudD5cbiAgICAgIDwvZGl2PlxuICAgICAgPHNwYW4gY2xhc3M9XCJwdWxsLXJpZ2h0IHNmeC1jcmVhdGUtbmV3XCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzZngtZ3JpZC1hY3Rpb25dXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9zcGFuPlxuICAgIDwvZGl2PlxuICA8L3NlY3Rpb24+XG4gIDxzZWN0aW9uIGNsYXNzPVwic2Z4LWdyaWQtd3JhcCBncmlkLXdpdGgtZHJvcGRvd25cIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbc2Z4LWdyaWRdXCI+PC9uZy1jb250ZW50PlxuICA8L3NlY3Rpb24+XG48L2Rpdj5cbiJdfQ==

package/esm2020/projects/component-library/lib/atoms/contextual-menu/contextual-menu.component.mjs

@@ -16,10 +16,10 @@ export class ContextualMenuComponent {
     }
 }
 ContextualMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"], directives: [{ type: i1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trimId": i3.TrimIdPipe } });
+ContextualMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: ContextualMenuComponent, selector: "symphony-contextual-menu", inputs: { model: "model" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:500}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#E4E7EF;color:#000}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"], directives: [{ type: i1.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "trimId": i3.TrimIdPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: ContextualMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-contextual-menu', template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:600}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"] }]
+            args: [{ selector: 'symphony-contextual-menu', template: "<div class=\"btn-group\" [ngClass]=\"{ 'is-inverse': model.isInverse }\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    [ngClass]=\"{\n      'has-border': model.hasBorder\n    }\"\n    aria-controls=\"dropdown-basic\"\n    aria-label=\"more-actions-menu\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let item of model.items\">\n      <a\n        class=\"dropdown-item\"\n        href=\"#\" id=\"dropdown-item-{{item | trimId}}\"\n        (click)=\"$event.preventDefault(); onItemClick(item)\"\n        >{{ item }}</a\n      >\n    </li>\n  </ul>\n</div>\n", styles: [".btn-group .has-border{border-radius:50%;border:2px solid #000;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.btn-group button.dropdown-toggle.btn{display:flex;align-items:center;justify-content:center;background:#ffffff;padding:0;font-size:18px;line-height:26px;box-shadow:none;width:40px;height:40px;min-height:40px;border-radius:50%!important;color:#000}.btn-group button.dropdown-toggle.btn:hover{background:#000000;color:#fff!important}.btn-group button.dropdown-toggle.btn .si-more-options{font-size:18px}.btn-group .dropdown-menu{min-width:240px;margin-top:10px;border:none;border-radius:10px;padding-top:20px;padding-bottom:20px;right:-10px;left:auto;box-shadow:0 0 30px rgba(0,0,0,.2);max-height:none;overflow:inherit}.btn-group .dropdown-menu li a.dropdown-item{padding:0 20px;line-height:40px;color:#000;font-weight:500}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#E4E7EF;color:#000}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{content:\"\\e252\";font-family:Glyphicons Halflings!important;font-size:14px;transform:rotate(180deg);display:inline-block;position:absolute;top:-13px;right:23px;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn{background:#000;color:#fff}.btn-group.is-inverse button.dropdown-toggle.btn:hover{background:#fff;color:#000!important}.btn-group.open button.dropdown-toggle.btn{background:#000000;color:#fff}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], itemClick: [{

package/esm2020/projects/component-library/lib/atoms/filter-area/filter-area.component.mjs

@@ -4,9 +4,9 @@ export class FilterAreaComponent {
     constructor() { }
 }
 FilterAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterAreaComponent, selector: "symphony-filter-area", ngImport: i0, template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <div class=\"sfx-d-inline-block sfx-txt-white\">\n            <ng-content select=\"[title]\"></ng-content>\n        </div>     \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[more-options]\"></ng-content>\n        </div>   \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[load-last]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[advance-search-icon]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right sfx-txt-white\">\n            <ng-content select=\"[advance-search]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#000000;padding:1.875rem 2.5rem}\n"] });
+FilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: FilterAreaComponent, selector: "symphony-filter-area", ngImport: i0, template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <div class=\"sfx-d-inline-block sfx-txt-white\">\n            <ng-content select=\"[title]\"></ng-content>\n        </div>     \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[more-options]\"></ng-content>\n        </div>   \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[load-last]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[advance-search-icon]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right sfx-txt-white\">\n            <ng-content select=\"[advance-search]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#D2D8E5;padding:1.875rem 2.5rem;border-radius:0px 0px 1.25rem 1.25rem}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: FilterAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-filter-area', template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <div class=\"sfx-d-inline-block sfx-txt-white\">\n            <ng-content select=\"[title]\"></ng-content>\n        </div>     \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[more-options]\"></ng-content>\n        </div>   \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[load-last]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[advance-search-icon]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right sfx-txt-white\">\n            <ng-content select=\"[advance-search]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#000000;padding:1.875rem 2.5rem}\n"] }]
+            args: [{ selector: 'symphony-filter-area', template: "<div class=\"sfx-filter-section\">\n    <div class=\"sfx-border-bottom-mdm-black-1 sfx-mb-20 sfx-pb-20 sfx-mt-10 sfx-d-inline-block sfx-wid-100\">\n        <div class=\"sfx-d-inline-block sfx-txt-white\">\n            <ng-content select=\"[title]\"></ng-content>\n        </div>     \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[more-options]\"></ng-content>\n        </div>   \n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[load-last]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right\">\n            <ng-content select=\"[advance-search-icon]\"></ng-content>\n        </div>\n        <div class=\"sfx-d-inline-block sfx-ml-10 pull-right sfx-txt-white\">\n            <ng-content select=\"[advance-search]\"></ng-content>\n        </div>\n    </div>\n    <div class=\"row\">\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter1]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter2]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter3]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter4]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter5]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter6]\"></ng-content>\n        </div>\n        <div class=\"col-xs-12 col-sm-6 col-md-3 col-lg-3 sfx-mb-25\">\n            <ng-content select=\"[filter7]\"></ng-content>\n        </div>\n    </div>\n</div>", styles: [".sfx-filter-section{background:#D2D8E5;padding:1.875rem 2.5rem;border-radius:0px 0px 1.25rem 1.25rem}\n"] }]
         }], ctorParameters: function () { return []; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLWFyZWEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9hdG9tcy9maWx0ZXItYXJlYS9maWx0ZXItYXJlYS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2F0b21zL2ZpbHRlci1hcmVhL2ZpbHRlci1hcmVhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBTzFDLE1BQU0sT0FBTyxtQkFBbUI7SUFDOUIsZ0JBQWUsQ0FBQzs7Z0hBREwsbUJBQW1CO29HQUFuQixtQkFBbUIsNERDUGhDLGk4REF5Q007MkZEbENPLG1CQUFtQjtrQkFML0IsU0FBUzsrQkFDRSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3ltcGhvbnktZmlsdGVyLWFyZWEnLFxuICB0ZW1wbGF0ZVVybDogJy4vZmlsdGVyLWFyZWEuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9maWx0ZXItYXJlYS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGaWx0ZXJBcmVhQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoKSB7fVxufVxuIiwiPGRpdiBjbGFzcz1cInNmeC1maWx0ZXItc2VjdGlvblwiPlxuICAgIDxkaXYgY2xhc3M9XCJzZngtYm9yZGVyLWJvdHRvbS1tZG0tYmxhY2stMSBzZngtbWItMjAgc2Z4LXBiLTIwIHNmeC1tdC0xMCBzZngtZC1pbmxpbmUtYmxvY2sgc2Z4LXdpZC0xMDBcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNmeC1kLWlubGluZS1ibG9jayBzZngtdHh0LXdoaXRlXCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbdGl0bGVdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj4gICAgIFxuICAgICAgICA8ZGl2IGNsYXNzPVwic2Z4LWQtaW5saW5lLWJsb2NrIHNmeC1tbC0xMCBwdWxsLXJpZ2h0XCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbW9yZS1vcHRpb25zXVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+ICAgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJzZngtZC1pbmxpbmUtYmxvY2sgc2Z4LW1sLTEwIHB1bGwtcmlnaHRcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltsb2FkLWxhc3RdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNmeC1kLWlubGluZS1ibG9jayBzZngtbWwtMTAgcHVsbC1yaWdodFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2FkdmFuY2Utc2VhcmNoLWljb25dXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInNmeC1kLWlubGluZS1ibG9jayBzZngtbWwtMTAgcHVsbC1yaWdodCBzZngtdHh0LXdoaXRlXCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbYWR2YW5jZS1zZWFyY2hdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicm93XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgY29sLXNtLTYgY29sLW1kLTMgY29sLWxnLTMgc2Z4LW1iLTI1XCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZmlsdGVyMV1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29sLXhzLTEyIGNvbC1zbS02IGNvbC1tZC0zIGNvbC1sZy0zIHNmeC1tYi0yNVwiPlxuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ZpbHRlcjJdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbC14cy0xMiBjb2wtc20tNiBjb2wtbWQtMyBjb2wtbGctMyBzZngtbWItMjVcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltmaWx0ZXIzXVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgY29sLXNtLTYgY29sLW1kLTMgY29sLWxnLTMgc2Z4LW1iLTI1XCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZmlsdGVyNF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY29sLXhzLTEyIGNvbC1zbS02IGNvbC1tZC0zIGNvbC1sZy0zIHNmeC1tYi0yNVwiPlxuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2ZpbHRlcjVdXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbC14cy0xMiBjb2wtc20tNiBjb2wtbWQtMyBjb2wtbGctMyBzZngtbWItMjVcIj5cbiAgICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltmaWx0ZXI2XVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb2wteHMtMTIgY29sLXNtLTYgY29sLW1kLTMgY29sLWxnLTMgc2Z4LW1iLTI1XCI+XG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbZmlsdGVyN11cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+Il19

package/esm2020/projects/component-library/lib/atoms/icon-wrapper/icon-wrapper.component.mjs

@@ -12,10 +12,10 @@ export class IconWrapperComponent {
     }
 }
 IconWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: { isInverse: "isInverse", hasHoverWithoutBorder: "hasHoverWithoutBorder" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+IconWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: IconWrapperComponent, selector: "symphony-icon-wrapper", inputs: { isInverse: "isInverse", hasHoverWithoutBorder: "hasHoverWithoutBorder" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid #334860;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover{background:#334860;color:#fff}.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: IconWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-icon-wrapper', template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid black;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover,.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"] }]
+            args: [{ selector: 'symphony-icon-wrapper', template: "<div\n  class=\"icon-wrapper\"\n  [ngClass]=\"{ 'is-inverse': isInverse, 'hoverWithoutBorder': hasHoverWithoutBorder}\"\n  (click)=\"onClick()\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".icon-wrapper{border-radius:50%;border:2px solid #334860;height:40px;width:40px;padding:9px 0;cursor:pointer;text-align:center}.icon-wrapper:hover{background:#334860;color:#fff}.icon-wrapper.is-inverse{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}.icon-wrapper.hoverWithoutBorder{border:none;line-height:30px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isInverse: [{
                 type: Input
             }], hasHoverWithoutBorder: [{

package/esm2020/projects/component-library/lib/atoms/input-dropdown/input-dropdown.component.mjs

@@ -22,10 +22,10 @@ export class InputDropdownComponent {
     }
 }
 InputDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-dropdown-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle sfx-ellipse\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n    <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  </button>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff!important;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff!important;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+InputDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputDropdownComponent, selector: "symphony-input-dropdown", inputs: { inputDropdownListModel: "inputDropdownListModel", disableBtn: "disableBtn", isInverse: "isInverse", isRequired: "isRequired" }, outputs: { selectItem: "selectItem", clearSelection: "clearSelection" }, ngImport: i0, template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-dropdown-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle sfx-ellipse\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n    <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  </button>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-weight:500;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#000!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#000!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:#fff;border-color:#334860;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#000}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#E4E7EF;color:#000}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#000}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#fff;color:#000!important;border-color:#334860}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#000}.is-inverse button.dropdown-toggle.btn{color:#000!important;border-color:#334860}.is-inverse i{color:#000}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-dropdown', template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-dropdown-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle sfx-ellipse\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n    <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  </button>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-family:neuzeit_groteskbold;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#fff!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#fff!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:transparent;border-color:#d0d0d0;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#fff}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;font-family:neuzeit_groteskbold,sans-serif;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#fff}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff!important;border-color:#000}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#fff}.is-inverse button.dropdown-toggle.btn{color:#fff!important;border-color:#565656}.is-inverse i{color:#fff}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"] }]
+            args: [{ selector: 'symphony-input-dropdown', template: "<div\n  *ngIf=\"inputDropdownListModel.componentHeading\"\n  class=\"sfx-dropdown-label sfx-d-inline-block\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n>\n  {{ inputDropdownListModel.componentHeading }}\n  <span class=\"requiredField\" *ngIf=\"isRequired\">*</span>\n</div>\n<div\n  class=\"btn-group sfx-dropdown sfx-d-inline-block sfx-wid-100\"\n  [ngClass]=\"{ 'is-inverse': isInverse }\"\n  [isDisabled]=\"disableBtn\"\n  dropdown\n>\n  <button\n    id=\"moreDrop\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle sfx-ellipse\"\n    aria-controls=\"dropdown-basic\"\n  >\n    {{ inputDropdownListModel.selectedName }}\n    <i *ngIf=\"!disableBtn\" class=\"si-arrow-hide-reveal\"></i>\n  </button>\n  <hr />\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"moreDrop\"\n    [ngClass]=\"{ 'sfx-pb-0': inputDropdownListModel.showClearButton === true }\"\n  >\n    <li\n      *ngFor=\"let action of inputDropdownListModel.dropdownList\"\n      [ngClass]=\"{ disabled: action.isDisabled }\"\n      (click)=\"itemClick(action)\"\n    >\n      <a class=\"dropdown-item\" href=\"javascript:;\">{{ action.name }}</a>\n    </li>\n    <div\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n      class=\"divider dropdown-divider\"\n    ></div>\n    <a\n      class=\"sfx-filter-item-footer\"\n      *ngIf=\"inputDropdownListModel.showClearButton\"\n    >\n      <button\n        type=\"button\"\n        (click)=\"onClearSelection()\"\n        class=\"pull-left sfx-clear-button\"\n      >\n        Clear All\n      </button>\n    </a>\n  </ul>\n</div>\n", styles: [".sfx-dropdown-label{font-weight:500;line-height:25px;margin-bottom:.27rem;margin-left:calc(.3rem + 1px)}.sfx-dropdown{min-width:100%}.sfx-dropdown.open button.dropdown-toggle.btn:hover{color:#000!important}.sfx-dropdown.open button.dropdown-toggle.btn:focus{color:#000!important}.sfx-dropdown hr{margin:0;border-top:none;height:1px;width:100%}.sfx-dropdown button.dropdown-toggle.btn{width:calc(100% - .6rem);height:40px;background:#fff;border-color:#334860;color:#000!important;margin:.3rem;text-align:left;box-shadow:none;padding:10px 15px;min-height:40px;border-radius:4px!important;text-transform:none}.sfx-dropdown button.dropdown-toggle.btn:before{color:#000}.sfx-dropdown button.dropdown-toggle.btn:disabled{opacity:1;background:#1d1d1d;border-color:#1d1d1d}.sfx-dropdown button.dropdown-toggle.btn:disabled:before{color:#565656}.sfx-dropdown i{position:absolute;right:6px;top:12px;transform:rotate(180deg);z-index:10;transition:linear .1s;font-size:18px}.sfx-dropdown .dropdown-menu{box-shadow:0 10px 10px rgba(0,0,0,.2);background:#fff;width:100%;border:none;max-height:280px;overflow-y:auto;padding:0 0 10px;margin:0;border-radius:0}.sfx-dropdown .dropdown-menu li a.dropdown-item{padding:.625rem 1.25rem;color:#000;word-break:break-word;white-space:normal}.sfx-dropdown .dropdown-menu li a.dropdown-item:hover{background:#E4E7EF;color:#000}.sfx-dropdown ::-webkit-scrollbar{width:10px}.sfx-dropdown ::-webkit-scrollbar-track{background:#fff}.sfx-dropdown ::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}.sfx-dropdown ::-webkit-scrollbar-thumb:hover{background:#555}.sfx-dropdown.btn-group.open{background:#fff;box-shadow:0 10px 10px rgba(0,0,0,.2)}.sfx-dropdown.btn-group.open i{transform:rotate(0);color:#000}.sfx-dropdown.btn-group.open hr{margin:0;border-top:1px solid #d0d0d0;width:100%;height:0}.sfx-dropdown.btn-group.open button.dropdown-toggle.btn{background:#fff;color:#000!important;border-color:#334860}.sfx-dropdown .sfx-clear-button{background:transparent;border:none;color:#000;font-family:neuzeit_groteskbold;padding:15px 20px 26px}.is-inverse.sfx-dropdown-label{color:#000}.is-inverse button.dropdown-toggle.btn{color:#000!important;border-color:#334860}.is-inverse i{color:#000}.sfx-pb-0{padding-bottom:0!important}.requiredField{color:#000!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { inputDropdownListModel: [{
                 type: Input
             }], disableBtn: [{

package/esm2020/projects/component-library/lib/atoms/input-search-checkbox-dropdown/input-search-checkbox-dropdown.component.mjs

@@ -176,10 +176,10 @@ export class InputSearchCheckboxDropdownComponent {
     }
 }
 InputSearchCheckboxDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, deps: [{ token: i1.CapitalizeFirstCharacterPipe }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_one\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_two\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"{{ conditionSelectionId }}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"], components: [{ type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": i1.CapitalizeFirstCharacterPipe } });
+InputSearchCheckboxDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputSearchCheckboxDropdownComponent, selector: "symphony-input-search-checkbox-dropdown", inputs: { isDisabled: "isDisabled", multiSelectSearch: "multiSelectSearch", enablePlaceHolder: "enablePlaceHolder", scrollHeightPercentage: "scrollHeightPercentage", isLoadingData: "isLoadingData", isLoadingInitialData: "isLoadingInitialData", isInverse: "isInverse", size: "size" }, outputs: { deselectItem: "deselectItem", selectItem: "selectItem", searchInputChange: "searchInputChange", selectionRetain: "selectionRetain", clearAll: "clearAll", conditionCheck: "conditionCheck", createNewItem: "createNewItem", scrollEnd: "scrollEnd", initializeDropdown: "initializeDropdown" }, viewQueries: [{ propertyName: "pop", first: true, predicate: ["pop"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_one\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_two\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"{{ conditionSelectionId }}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#ac4463}.invalid-control{border:1px solid #AC4463!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#712ace;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"], components: [{ type: i2.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i3.InputToggleComponent, selector: "symphony-input-toggle", inputs: ["isToggled", "isInverse"], outputs: ["toggleClick"] }, { type: i4.SfxLoaderComponent, selector: "symphony-sfx-loader", inputs: ["leftStyle", "message"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.BsDropdownDirective, selector: "[bsDropdown],[dropdown]", inputs: ["autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen", "placement", "triggers", "container", "dropup"], outputs: ["onShown", "onHidden", "isOpenChange"], exportAs: ["bs-dropdown"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.PopoverDirective, selector: "[popover]", inputs: ["outsideClick", "containerClass", "isOpen", "adaptivePosition", "popover", "popoverContext", "popoverTitle", "placement", "triggers", "container", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { type: i6.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "capitalizeFirstCharacter": i1.CapitalizeFirstCharacterPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputSearchCheckboxDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_one\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_two\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"{{ conditionSelectionId }}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#d60000}.invalid-control{border:1px solid #d60000!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#eb0d8b;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"] }]
+            args: [{ selector: 'symphony-input-search-checkbox-dropdown', template: "\n<div [ngClass]=\"{ 'isInverse': isInverse }\">\n  <div\n    *ngIf=\"multiSelectSearch.componentHeading\"\n    class=\"sfx-filter-label sfx-d-inline-block\"\n  >\n    <b\n      >{{ enablePlaceHolder ? \"\" : multiSelectSearch.componentHeading }}\n      <span *ngIf=\"multiSelectSearch.required\" class=\"requiredField\">*</span>\n    </b>\n  </div>\n  <div *ngIf=\"multiSelectSearch.condition\" class=\"sfx-switch-field pull-right\">\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_one\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' AND ')\"\n      [checked]=\"multiSelectSearch.condition === ' AND '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_one\"\n      >and</label\n    >\n    <input\n      type=\"radio\"\n      id=\"radio_{{ conditionSelectionId }}_two\"\n      name=\"radio_{{ conditionSelectionId }}\"\n      value=\"yes\"\n      (click)=\"onConditionClick(' OR ')\"\n      [checked]=\"multiSelectSearch.condition === ' OR '\"\n    />\n    <label class=\"Font400\" for=\"radio_{{ conditionSelectionId }}_two\">or</label>\n  </div>\n  <div\n    class=\"sfx-custom-dropdown-wrap\"\n    [ngClass]=\"{ open: openDropdown }\"\n    dropdown\n    #dropdown=\"bs-dropdown\"\n    (onShown)=\"toggleDropdown()\"\n    [insideClick]=\"true\"\n    (onHidden)=\"onOkClick(true)\"\n  >\n    <input\n      [ngClass]=\"{ 'invalid-control': isInvalid }\"\n      (click)=\"dropdown.isOpen = true\"\n      type=\"text\"\n      id=\"{{ conditionSelectionId }}\"\n      [(ngModel)]=\"multiSelectSearch.searchInput\"\n      (ngModelChange)=\"onSearchInputChange()\"\n      dropdownToggle\n      popover=\"{{ popOverText() }}\"\n      containerClass=\"sfx-input-popover\"\n      triggers=\"\"\n      placement=\"top\"\n      #pop=\"bs-popover\"\n      (mouseenter)=\"showPop()\"\n      (mouseleave)=\"onPopMouseLeave()\"\n      (focus)=\"onFocusClick(true)\"\n      (blur)=\"onFocusClick(false)\"\n      class=\"sfx-placeholder\"\n      placeholder=\"{{\n        enablePlaceHolder ? multiSelectSearch.componentHeading : ''\n      }}\"\n      autocomplete=\"off\"\n      [disabled]=\"isDisabled\"\n    />\n    <symphony-icon [size]=\"size\" [icon]=\"'si-search-new'\"></symphony-icon>\n    <div *dropdownMenu>\n      <div class=\"sfx-custom-dropdown\" *ngIf=\"openDropdown\">\n        <div *ngIf=\"multiSelectSearch.isSelectAllEnabled\" class=\"sfx-select-all-toggle\">\n          <span class=\"sfx-font-bold sfx-mr-10\">Select All</span>\n          <symphony-input-toggle\n          [isToggled]=\"isAllToggled\"\n          [isInverse]=\"false\"\n          (toggleClick)=\"onToggleClick($event)\"\n          ></symphony-input-toggle>\n        </div>\n        <!-- Create And Add Tags -->\n        <div\n          class=\"sfx-create-new-items\"\n          *ngIf=\"\n            multiSelectSearch.labelCreateNewItems &&\n            multiSelectSearch.showCreateNewItems\n          \"\n          (click)=\"onCreateNewItem()\"\n          [ngClass]=\"{\n            'sfx-font-bold': multiSelectSearch.showCreateNewModal\n          }\"\n        >\n          {{ multiSelectSearch.labelCreateNewItems }}\n          <span\n            class=\"sfx-font-bold\"\n            *ngIf=\"!multiSelectSearch.showCreateNewModal\"\n            >&nbsp;&apos;\n            {{ multiSelectSearch.searchInput | capitalizeFirstCharacter }}&apos;\n          </span>\n          <i class=\"sfx-icon-Plus sfx-create-new-items-icon\"></i>\n        </div>\n        <!-- Create And Add Tags ends here -->\n        <!-- selected list div -->\n        <div\n          class=\"sfx-dropdown-selected sfx-custom-scroll\"\n          *ngIf=\"multiSelectSearch.selectedDropdownList.length > 0 && !multiSelectSearch.isSelectAllEnabled\"\n        >\n          <div\n            class=\"sfx-d-inline-block\"\n            *ngFor=\"let selectedItem of multiSelectSearch.selectedDropdownList\"\n          >\n            <div\n              (click)=\"onDeselectItem(selectedItem); $event.stopPropagation()\"\n              class=\"sfx-checkbox sfx-d-inline-block\"\n            >\n              <input\n                type=\"checkbox\"\n                checked\n                class=\"sfx-checkbox-input\"\n                id=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ selectedItem.id }}_{{ selectedItem.name }}\"\n                >{{ selectedItem.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"selectedItem.additionalInfo\"\n                  class=\"selected-additional-info\"\n                >\n                  {{ selectedItem.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n        </div>\n        <!-- selected list div ends here -->\n        <!-- Search list  -->\n        <div\n          class=\"sfx-dropdown-unselected sfx-custom-scroll\"\n          (scroll)=\"scrollHandler($event)\"\n          *ngIf=\"multiSelectSearch.searchedDropdownList.length > 0\"\n        >\n          <div\n            id=\"dropdown-triggers-manually\"\n            *ngFor=\"\n              let filterDropdownOption of multiSelectSearch.searchedDropdownList\n            \"\n          >\n            <div class=\"sfx-checkbox\">\n              <input\n                type=\"checkbox\"\n                id=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                class=\"sfx-checkbox-input\"\n                [disabled]=\"multiSelectSearch.hasMaxSelections\"\n                (click)=\"\n                onSelectItem(filterDropdownOption); $event.stopPropagation()\n                \"\n                [(ngModel)]=\"filterDropdownOption.isChecked\"\n              />\n              <label\n                class=\"Font400\"\n                for=\"{{ filterDropdownOption.id }}_{{\n                  filterDropdownOption.name\n                }}\"\n                >{{ filterDropdownOption.name | capitalizeFirstCharacter }}\n                <br />\n                <span\n                  *ngIf=\"filterDropdownOption.additionalInfo\"\n                  class=\"additional-info\"\n                >\n                  {{ filterDropdownOption.additionalInfo }}</span\n                >\n              </label>\n            </div>\n            <div></div>\n          </div>\n          <div>\n            <symphony-sfx-loader\n              [hidden]=\"!isLoadingData\"\n            ></symphony-sfx-loader>\n          </div>\n        </div>\n        <symphony-sfx-loader\n          [hidden]=\"!isLoadingInitialData\"\n        ></symphony-sfx-loader>\n        <!-- search list ends here -->\n        <!-- Footer -->\n        <div *ngIf=\"openDropdown\" class=\"sfx-filter-item-footer\">\n          <button\n            type=\"button\"\n            class=\"pull-left\"\n            [disabled]=\"\n              !(\n                multiSelectSearch.selectedDropdownList &&\n                multiSelectSearch.selectedDropdownList.length > 0\n              )\n            \"\n            (click)=\"onClearAllClick()\"\n          >\n            Clear All\n          </button>\n          <a href=\"javascript:;\" (click)=\"onOkClick()\" class=\"pull-right\">OK</a>\n        </div>\n        <!-- End Footer -->\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"isInvalid\" class=\"error-message\">\n    Please select a valid option\n  </div>\n</div>", styles: [".sfx-input-popover{word-wrap:break-word;max-width:100%}.sfx-placeholder:-ms-input-placeholder{color:#000}.sfx-placeholder::-moz-placeholder{color:#000}.sfx-placeholder::placeholder{color:#000}.requiredField{color:#000}.error-message{color:#ac4463}.invalid-control{border:1px solid #AC4463!important}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #000;border-right:2px solid #000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000}.sfx-custom-dropdown-wrap{position:relative;padding:.3rem;width:100%}.sfx-custom-dropdown-wrap input{width:100%;border:1px solid #d0d0d0;height:40px;border-radius:4px;background:#fff;color:#000;outline:none;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.sfx-custom-dropdown-wrap symphony-icon{right:17px;bottom:13px;position:absolute;color:#000;z-index:2}.sfx-custom-dropdown-wrap .sfx-custom-dropdown{background:#fff;position:absolute;width:100%;z-index:4;left:0;border-width:0px 1px 1px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox{margin:0;padding:.625rem 1.25rem}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover{background:#000;color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked{position:relative}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input~label{color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#fff;border-right-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#000;border-color:#fff}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected{border-bottom:1px solid #d9d9d9;padding-bottom:.625rem;padding-top:.625rem;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover{background:#fff;color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked),.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked{position:absolute}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input~label{color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:not(:checked)~label:after{border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:before{border-bottom-color:#000;border-right-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected .sfx-checkbox:hover .sfx-checkbox-input:checked~label:after{background-color:#fff;border-color:#000}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected{padding-bottom:.625rem;padding-top:.625rem;border-bottom:1px solid #d9d9d9;max-height:220px;overflow-y:auto}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-select-all-toggle{padding:15px 20px;border-bottom:1px solid #d9d9d9}.sfx-custom-dropdown-wrap.open{background:#fff}.sfx-custom-dropdown-wrap.open .tree-node-checkbox{height:auto;width:auto}.sfx-custom-dropdown-wrap.open .sfx-create-new-items{padding:.625rem 1.5625rem .625rem 1.25rem;position:relative;border-bottom:1px solid #d0d0d0;cursor:pointer}.sfx-custom-dropdown-wrap.open .sfx-create-new-items .sfx-create-new-items-icon{font-size:.625rem;position:absolute;right:.9375rem;top:.9375rem}.sfx-custom-dropdown-wrap.open input{z-index:2;position:relative;background:#000;color:#fff}.sfx-custom-dropdown-wrap.open symphony-icon{color:#fff}.sfx-custom-dropdown-wrap.open:after{content:\" \";position:absolute;top:0;left:0;display:inline-block;width:100%;height:100%;z-index:1;border-width:1px 1px 0px 1px;border-style:solid;border-color:#d9d9d9}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar{width:12px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-track,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-track{box-shadow:inset 0 0 3px transparent;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:30px}.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-selected::-webkit-scrollbar-thumb:hover,.sfx-custom-dropdown-wrap .sfx-custom-dropdown .sfx-dropdown-unselected::-webkit-scrollbar-thumb:hover{cursor:pointer}.sfx-filter-item-footer{display:inline-block;width:100%;padding:1.875rem 1.25rem 1.5625rem;font-family:neuzeit_groteskbold,sans-serif}.sfx-filter-item-footer a{cursor:pointer}.sfx-filter-item-footer button{color:#712ace;background:transparent;border:none;padding:0}.sfx-filter-item-footer button:disabled{opacity:.5;cursor:not-allowed}.sfx-checkbox .sfx-checkbox-input~label{color:#fff}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:before{border-bottom:2px solid #fff;border-right:2px solid #fff}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#212121;border:2px solid #fff}.sfx-checkbox{margin:10px 0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sfx-checkbox .sfx-checkbox-input:not(:checked),.sfx-checkbox .sfx-checkbox-input:checked{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.sfx-checkbox .sfx-checkbox-input~label{display:inline-block;position:relative;cursor:pointer;height:100%;line-height:20px;font-size:14px;color:#000;padding-left:36px;font-family:neuzeit_groteskbold,sans-serif;margin:0;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{transform:translateZ(0);transition:all 0s ease-in;position:absolute;content:\"\";left:0;border-radius:2px}.sfx-checkbox .sfx-checkbox-input~label:after{position:absolute;content:\"\";left:0;border-radius:2px;top:0}.sfx-checkbox .sfx-checkbox-input~label .additional-info,.sfx-checkbox .sfx-checkbox-input~label .selected-additional-info{font-size:12px;color:#565656}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{width:9px;height:15px;border:none;top:1px;left:0;transform:rotate(37deg) scale(.1);transform-origin:100% 100%}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{width:20px;height:20px;border:2px solid #000;z-index:0;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:checked~label:before{top:3px;left:3px;width:6px;height:12px;border-top:0px solid transparent;border-left:0px solid transparent;border-bottom:2px solid #000;border-right:2px solid #000;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(37deg) scale(1);transform-origin:100% 100%;border-radius:0}.sfx-checkbox .sfx-checkbox-input:checked~label:after{width:20px;height:20px;background-color:#fff;border:2px solid #000;border-radius:4px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}.sfx-checkbox:hover .sfx-checkbox-input~label .additional-info{color:#fff}.sfx-filter-label{font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;padding-left:.3rem;line-height:25px}.isInverse .sfx-filter-label{color:#fff}.isInverse .sfx-custom-dropdown-wrap input{background:#000;border-color:#565656;color:#fff}.isInverse .sfx-custom-dropdown-wrap symphony-icon{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CapitalizeFirstCharacterPipe }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { pop: [{
                 type: ViewChild,
                 args: ['pop', { static: false }]

package/esm2020/projects/component-library/lib/atoms/input-text/input-text.component.mjs

@@ -26,10 +26,10 @@ export class InputTextComponent {
     }
 }
 InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n<div class=\"sfx-p-5\">\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputTextComponent, selector: "symphony-input-text", inputs: { placeholder: "placeholder", icon: "icon", label: "label", isInverse: "isInverse", size: "size" }, outputs: { textChange: "textChange" }, ngImport: i0, template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n<div class=\"sfx-p-5\">\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#000}.input-text-wrap.input-secondary .input-text{background-color:#fff;border-color:#334860}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#000}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#000}.input-text-wrap.input-secondary .input-text::placeholder{color:#000}.input-text-wrap .input-text-label{display:block;font-weight:500;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #334860;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n<div class=\"sfx-p-5\">\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #d0d0d0;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
+            args: [{ selector: 'symphony-input-text', template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" *ngIf=\"label\" class=\"input-text-label\">{{\n    label\n  }}</label>\n<div class=\"sfx-p-5\">\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [size]=\"size\" [icon]=\"icon\"></symphony-icon>\n</div>\n</div>\n", styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#000}.input-text-wrap.input-secondary .input-text{background-color:#fff;border-color:#334860}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#000}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#000}.input-text-wrap.input-secondary .input-text::placeholder{color:#000}.input-text-wrap .input-text-label{display:block;font-weight:500;margin-bottom:.3rem;line-height:25px;margin-left:.3rem}.input-text-wrap .input-text{width:100%;height:40px;border:1px solid #334860;border-radius:4px;padding-left:.9375rem;padding-right:1.875rem;line-height:25px}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{position:absolute;right:17px;font-size:14px;bottom:13px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], icon: [{

package/esm2020/projects/component-library/lib/atoms/input-toggle/input-toggle.component.mjs

@@ -11,10 +11,10 @@ export class InputToggleComponent {
     }
 }
 InputToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputToggleComponent, selector: "symphony-input-toggle", inputs: { isToggled: "isToggled", isInverse: "isInverse" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+InputToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: InputToggleComponent, selector: "symphony-input-toggle", inputs: { isToggled: "isToggled", isInverse: "isInverse" }, outputs: { toggleClick: "toggleClick" }, ngImport: i0, template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#2b8ff3}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: InputToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-input-toggle', template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#000}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
+            args: [{ selector: 'symphony-input-toggle', template: "<label class=\"switch\">\n  <input\n    aria-label=\"toggle-active-state\"\n    [checked]=\"isToggled\"\n    type=\"checkbox\"\n    (click)=\"toggleClicked()\"\n    [ngClass]=\"{ 'is-inverse': isInverse }\"\n  />\n  <span class=\"slider round\"></span>\n</label>\n", styles: [".switch{position:relative;vertical-align:middle;display:inline-block;width:30px;height:14px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:\"\";height:10px;width:10px;left:2px;bottom:2px;background-color:#fff;transition:.4s}.slider.round{border-radius:16px}.slider.round.round:before{border-radius:50%}input:checked+.slider{background-color:#2b8ff3}input:checked+.slider:before{transform:translate(15px)}input:focus+.slider{box-shadow:0 0 1px #2196f3}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { isToggled: [{
                 type: Input
             }], isInverse: [{

package/esm2020/projects/component-library/lib/atoms/two-column-filter-area/two-column-filter-area.component.mjs

@@ -5,10 +5,10 @@ export class TwoColumnFilterAreaComponent {
     constructor() { }
 }
 TwoColumnFilterAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TwoColumnFilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: { height: "height" }, ngImport: i0, template: "<section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n  <div class=\"sfx-filter-section\" [ngStyle]=\"{ height: height }\">\n    <div class=\"row\">\n      <!-- select dropdown for event type -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background-color:#000;padding:2.625rem 1.875rem 2.825rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TwoColumnFilterAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: TwoColumnFilterAreaComponent, selector: "symphony-two-column-filter-area", inputs: { height: "height" }, ngImport: i0, template: "<section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n  <div class=\"sfx-filter-section\" [ngStyle]=\"{ height: height }\">\n    <div class=\"row\">\n      <!-- select dropdown for event type -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background:#D2D8E5;padding:1.875rem 2.5rem;border-radius:0px 0px 1.25rem 1.25rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: TwoColumnFilterAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-two-column-filter-area', template: "<section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n  <div class=\"sfx-filter-section\" [ngStyle]=\"{ height: height }\">\n    <div class=\"row\">\n      <!-- select dropdown for event type -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background-color:#000;padding:2.625rem 1.875rem 2.825rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"] }]
+            args: [{ selector: 'symphony-two-column-filter-area', template: "<section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n  <div class=\"sfx-filter-section\" [ngStyle]=\"{ height: height }\">\n    <div class=\"row\">\n      <!-- select dropdown for event type -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-filter-items-wrap\">\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n", styles: [".sfx-filter-section{background:#D2D8E5;padding:1.875rem 2.5rem;border-radius:0px 0px 1.25rem 1.25rem}.sfx-filter-items-wrap{padding:0 .6375rem}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { height: [{
                 type: Input
             }] } });

package/esm2020/projects/component-library/lib/molecules/card/card.component.mjs

@@ -16,13 +16,13 @@ export class CardComponent {
     }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: CardComponent, selector: "symphony-card", inputs: { cardModel: "cardModel" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"card-item-wrapper\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\" title=\"{{ cardModel.description }}\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:170px}.card-item{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-item .card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"], components: [{ type: i1.IconComponent, selector: "symphony-icon", inputs: ["icon", "isSecondary", "size", "iconColor"], outputs: ["clicked"] }, { type: i2.H4Component, selector: "symphony-h4", inputs: ["text", "isSecondary"] }, { type: i3.ParagraphComponent, selector: "symphony-paragraph", inputs: ["text", "isSecondary", "isFontBold"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'symphony-card', template: "<div class=\"card-item-wrapper\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:0;padding-bottom:50%}.card-item{position:absolute;width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"] }]
+            args: [{ selector: 'symphony-card', template: "<div class=\"card-item-wrapper\">\n  <div class=\"card-item\" (click)=\"onClick()\">\n    <div class=\"card-title-wrap sfx-d-flex\">\n      <div class=\"card-icon\">\n        <symphony-icon [icon]=\"cardModel.icon\"></symphony-icon>\n      </div>\n      <div class=\"card-title\">\n        <symphony-h4>{{ cardModel.title }}</symphony-h4>\n      </div>\n    </div>\n    <div class=\"card-description\" title=\"{{ cardModel.description }}\">\n      <symphony-paragraph>{{ cardModel.description }}</symphony-paragraph>\n    </div>\n  </div>\n</div>\n", styles: [".card-item-wrapper{position:relative;width:100%;height:170px}.card-item{width:100%;height:100%;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:10px;padding:20px;transition:.2s;cursor:pointer}.card-item:hover{background-color:#000}.card-item:hover *{color:#fff}.card-item .card-description{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-title-wrap{margin-bottom:11px}.card-icon{padding-right:15px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { cardModel: [{
                 type: Input
             }], clicked: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21vbGVjdWxlcy9jYXJkL2NhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvY2FyZC9jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBUXZFLE1BQU0sT0FBTyxhQUFhO0lBT3hCO1FBTlMsY0FBUyxHQUF1QjtZQUN2QyxLQUFLLEVBQUUsRUFBRTtZQUNULFdBQVcsRUFBRSxFQUFFO1NBQ2hCLENBQUM7UUFDUSxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztJQUVuQyxDQUFDO0lBRWhCLE9BQU87UUFDTCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBc0IsQ0FBQyxDQUFDO0lBQ2pELENBQUM7OzBHQVhVLGFBQWE7OEZBQWIsYUFBYSwwSENSMUIsZ2dCQWVBOzJGRFBhLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsZUFBZTswRUFLaEIsU0FBUztzQkFBakIsS0FBSztnQkFJSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhcmRNb2RlbCB9IGZyb20gJy4vY2FyZC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N5bXBob255LWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNhcmRNb2RlbDogUGFydGlhbDxDYXJkTW9kZWw+ID0ge1xuICAgIHRpdGxlOiAnJyxcbiAgICBkZXNjcmlwdGlvbjogJycsXG4gIH07XG4gIEBPdXRwdXQoKSBjbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxDYXJkTW9kZWw+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG9uQ2xpY2soKSB7XG4gICAgdGhpcy5jbGlja2VkLmVtaXQodGhpcy5jYXJkTW9kZWwgYXMgQ2FyZE1vZGVsKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNhcmQtaXRlbS13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJjYXJkLWl0ZW1cIiAoY2xpY2spPVwib25DbGljaygpXCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcmQtdGl0bGUtd3JhcCBzZngtZC1mbGV4XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1pY29uXCI+XG4gICAgICAgIDxzeW1waG9ueS1pY29uIFtpY29uXT1cImNhcmRNb2RlbC5pY29uXCI+PC9zeW1waG9ueS1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC10aXRsZVwiPlxuICAgICAgICA8c3ltcGhvbnktaDQ+e3sgY2FyZE1vZGVsLnRpdGxlIH19PC9zeW1waG9ueS1oND5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLWRlc2NyaXB0aW9uXCI+XG4gICAgICA8c3ltcGhvbnktcGFyYWdyYXBoPnt7IGNhcmRNb2RlbC5kZXNjcmlwdGlvbiB9fTwvc3ltcGhvbnktcGFyYWdyYXBoPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL21vbGVjdWxlcy9jYXJkL2NhcmQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9tb2xlY3VsZXMvY2FyZC9jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBUXZFLE1BQU0sT0FBTyxhQUFhO0lBT3hCO1FBTlMsY0FBUyxHQUF1QjtZQUN2QyxLQUFLLEVBQUUsRUFBRTtZQUNULFdBQVcsRUFBRSxFQUFFO1NBQ2hCLENBQUM7UUFDUSxZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztJQUVuQyxDQUFDO0lBRWhCLE9BQU87UUFDTCxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBc0IsQ0FBQyxDQUFDO0lBQ2pELENBQUM7OzBHQVhVLGFBQWE7OEZBQWIsYUFBYSwwSENSMUIsc2lCQWVBOzJGRFBhLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsZUFBZTswRUFLaEIsU0FBUztzQkFBakIsS0FBSztnQkFJSSxPQUFPO3NCQUFoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhcmRNb2RlbCB9IGZyb20gJy4vY2FyZC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N5bXBob255LWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NhcmQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNhcmRNb2RlbDogUGFydGlhbDxDYXJkTW9kZWw+ID0ge1xuICAgIHRpdGxlOiAnJyxcbiAgICBkZXNjcmlwdGlvbjogJycsXG4gIH07XG4gIEBPdXRwdXQoKSBjbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxDYXJkTW9kZWw+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG9uQ2xpY2soKSB7XG4gICAgdGhpcy5jbGlja2VkLmVtaXQodGhpcy5jYXJkTW9kZWwgYXMgQ2FyZE1vZGVsKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImNhcmQtaXRlbS13cmFwcGVyXCI+XG4gIDxkaXYgY2xhc3M9XCJjYXJkLWl0ZW1cIiAoY2xpY2spPVwib25DbGljaygpXCI+XG4gICAgPGRpdiBjbGFzcz1cImNhcmQtdGl0bGUtd3JhcCBzZngtZC1mbGV4XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1pY29uXCI+XG4gICAgICAgIDxzeW1waG9ueS1pY29uIFtpY29uXT1cImNhcmRNb2RlbC5pY29uXCI+PC9zeW1waG9ueS1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY2FyZC10aXRsZVwiPlxuICAgICAgICA8c3ltcGhvbnktaDQ+e3sgY2FyZE1vZGVsLnRpdGxlIH19PC9zeW1waG9ueS1oND5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjYXJkLWRlc2NyaXB0aW9uXCIgdGl0bGU9XCJ7eyBjYXJkTW9kZWwuZGVzY3JpcHRpb24gfX1cIj5cbiAgICAgIDxzeW1waG9ueS1wYXJhZ3JhcGg+e3sgY2FyZE1vZGVsLmRlc2NyaXB0aW9uIH19PC9zeW1waG9ueS1wYXJhZ3JhcGg+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=