ngx-sfc-common 0.0.6 → 0.0.8

package/esm2020/lib/ngx-sfc-common.module.mjs

@@ -5,7 +5,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { DOCUMENT_PROVIDERS, WINDOW_PROVIDERS } from './services';
 import { ClickOutsideDirective, ShowHideElementDirective, ThrowElementOnHoverDirective, TemplateReferenceDirective, MouseDownDirective, ComponentSizeDirective, DestroyParentDirective, DomChangesDirective, ScrollTrackerDirective, ScrollIntoViewDirective } from './directives';
 import { SwitchMultiCasePipe } from './pipes';
-import { ButtonComponent, TooltipComponent, DelimeterComponent, BounceLoaderComponent, CircleLoaderComponent, ModalComponent, ModalOpenOnClickDirective, ModalOpenDirective, DefaultModalHeaderComponent, DefaultModalFooterComponent, HamburgerComponent, DotsComponent, ToggleSwitcherComponent, CheckmarkComponent, TemplateContentComponent, CloseComponent, PaginationComponent, SortingComponent, LoadContainerComponent, LoadMoreButtonComponent } from './components';
+import { ButtonComponent, TooltipComponent, DelimeterComponent, BounceLoaderComponent, CircleLoaderComponent, ModalComponent, ModalOpenOnClickDirective, ModalOpenDirective, DefaultModalHeaderComponent, DefaultModalFooterComponent, HamburgerComponent, HamburgerMenuComponent, DotsComponent, ToggleSwitcherComponent, CheckmarkComponent, TemplateContentComponent, CloseComponent, PaginationComponent, SortingComponent, LoadContainerComponent, LoadMoreButtonComponent, IconComponent } from './components';
 import * as i0 from "@angular/core";
 export class NgxSfcCommonModule {
 }
@@ -31,11 +31,13 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         TemplateContentComponent,
         CloseComponent,
         HamburgerComponent,
+        HamburgerMenuComponent,
         DotsComponent,
         PaginationComponent,
         SortingComponent,
         LoadMoreButtonComponent,
         LoadContainerComponent,
+        IconComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -70,10 +72,12 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ToggleSwitcherComponent,
         DotsComponent,
         HamburgerComponent,
+        HamburgerMenuComponent,
         PaginationComponent,
         SortingComponent,
         LoadMoreButtonComponent,
         LoadContainerComponent,
+        IconComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -112,11 +116,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         TemplateContentComponent,
                         CloseComponent,
                         HamburgerComponent,
+                        HamburgerMenuComponent,
                         DotsComponent,
                         PaginationComponent,
                         SortingComponent,
                         LoadMoreButtonComponent,
                         LoadContainerComponent,
+                        IconComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -156,10 +162,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ToggleSwitcherComponent,
                         DotsComponent,
                         HamburgerComponent,
+                        HamburgerMenuComponent,
                         PaginationComponent,
                         SortingComponent,
                         LoadMoreButtonComponent,
                         LoadContainerComponent,
+                        IconComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -175,4 +183,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                     providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNmYy1jb21tb24ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21tb24vc3JjL2xpYi9uZ3gtc2ZjLWNvbW1vbi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUNMLGtCQUFrQixFQUNsQixnQkFBZ0IsRUFDakIsTUFBTSxZQUFZLENBQUM7QUFDcEIsT0FBTyxFQUNMLHFCQUFxQixFQUNyQix3QkFBd0IsRUFDeEIsNEJBQTRCLEVBQzVCLDBCQUEwQixFQUMxQixrQkFBa0IsRUFDbEIsc0JBQXNCLEVBQ3RCLHNCQUFzQixFQUN0QixtQkFBbUIsRUFDbkIsc0JBQXNCLEVBQ3RCLHVCQUF1QixFQUN4QixNQUFNLGNBQWMsQ0FBQztBQUN0QixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFDOUMsT0FBTyxFQUNMLGVBQWUsRUFDZixnQkFBZ0IsRUFDaEIsa0JBQWtCLEVBQ2xCLHFCQUFxQixFQUNyQixxQkFBcUIsRUFDckIsY0FBYyxFQUNkLHlCQUF5QixFQUN6QixrQkFBa0IsRUFDbEIsMkJBQTJCLEVBQzNCLDJCQUEyQixFQUMzQixrQkFBa0IsRUFDbEIsYUFBYSxFQUNiLHVCQUF1QixFQUN2QixrQkFBa0IsRUFDbEIsd0JBQXdCLEVBQ3hCLGNBQWMsRUFDZCxtQkFBbUIsRUFDbkIsZ0JBQWdCLEVBQ2hCLHNCQUFzQixFQUN0Qix1QkFBdUIsRUFDeEIsTUFBTSxjQUFjLENBQUM7O0FBc0Z0QixNQUFNLE9BQU8s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QkFDdkIsYUFBYTt3QkFDYixlQUFlO3dCQUNmLGdCQUFnQjt3QkFDaEIsa0JBQWtCO3dCQUNsQixjQUFjO3dCQUNkLGtCQUFrQjt3QkFDbEIsd0JBQXdCO3dCQUN4Qix1QkFBdUI7d0JBQ3ZCLGFBQWE7d0JBQ2Isa0JBQWtCO3dCQUNsQixtQkFBbUI7d0JBQ25CLGdCQUFnQjt3QkFDaEIsdUJBQXVCO3dCQUN2QixzQkFBc0I7d0JBQ3RCLFVBQVU7d0JBQ1YscUJBQXFCO3dCQUNyQixxQkFBcUI7d0JBQ3JCLFFBQVE7d0JBQ1IsY0FBYzt3QkFDZCxrQkFBa0I7d0JBQ2xCLHlCQUF5Qjt3QkFDekIsMkJBQTJCO3dCQUMzQiwyQkFBMkI7d0JBQzNCLFFBQVE7d0JBQ1IsbUJBQW1CO3FCQUNwQjtvQkFDRCxTQUFTLEVBQUUsQ0FBQyxrQkFBa0IsRUFBRSxnQkFBZ0IsQ0FBQztpQkFDbEQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBCcm93c2VyQW5pbWF0aW9uc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXIvYW5pbWF0aW9ucyc7XHJcbmltcG9ydCB7IEZvbnRBd2Vzb21lTW9kdWxlIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2FuZ3VsYXItZm9udGF3ZXNvbWUnO1xyXG5pbXBvcnQge1xyXG4gIERPQ1VNRU5UX1BST1ZJREVSUyxcclxuICBXSU5ET1dfUFJPVklERVJTXHJcbn0gZnJvbSAnLi9zZXJ2aWNlcyc7XHJcbmltcG9ydCB7XHJcbiAgQ2xpY2tPdXRzaWRlRGlyZWN0aXZlLFxyXG4gIFNob3dIaWRlRWxlbWVudERpcmVjdGl2ZSxcclxuICBUaHJvd0VsZW1lbnRPbkhvdmVyRGlyZWN0aXZlLFxyXG4gIFRlbXBsYXRlUmVmZXJlbmNlRGlyZWN0aXZlLFxyXG4gIE1vdXNlRG93bkRpcmVjdGl2ZSxcclxuICBDb21wb25lbnRTaXplRGlyZWN0aXZlLFxyXG4gIERlc3Ryb3lQYXJlbnREaXJlY3RpdmUsXHJcbiAgRG9tQ2hhbmdlc0RpcmVjdGl2ZSxcclxuICBTY3JvbGxUcmFja2VyRGlyZWN0aXZlLFxyXG4gIFNjcm9sbEludG9WaWV3RGlyZWN0aXZlXHJcbn0gZnJvbSAnLi9kaXJlY3RpdmVzJztcclxuaW1wb3J0IHsgU3dpdGNoTXVsdGlDYXNlUGlwZSB9IGZyb20gJy4vcGlwZXMnO1xyXG5pbXBvcnQge1xyXG4gIEJ1dHRvbkNvbXBvbmVudCxcclxuICBUb29sdGlwQ29tcG9uZW50LFxyXG4gIERlbGltZXRlckNvbXBvbmVudCxcclxuICBCb3VuY2VMb2FkZXJDb21wb25lbnQsXHJcbiAgQ2lyY2xlTG9hZGVyQ29tcG9uZW50LFxyXG4gIE1vZGFsQ29tcG9uZW50LFxyXG4gIE1vZGFsT3Blbk9uQ2xpY2tEaXJlY3RpdmUsXHJcbiAgTW9kYWxPcGVuRGlyZWN0aXZlLFxyXG4gIERlZmF1bHRNb2RhbEhlYWRlckNvbXBvbmVudCxcclxuICBEZWZhdWx0TW9kYWxGb290ZXJDb21wb25lbnQsXHJcbiAgSGFtYnVyZ2VyQ29tcG9uZW50LFxyXG4gIERvdHNDb21wb25lbnQsXHJcbiAgVG9nZ2xlU3dpdGNoZXJDb21wb25lbnQsXHJcbiAgQ2hlY2ttYXJrQ29tcG9uZW50LFxyXG4gIFRlbXBsYXRlQ29udGVudENvbXBvbmVudCxcclxuICBDbG9zZUNvbXBvbmVudCxcclxuICBQYWdpbmF0aW9uQ29tcG9uZW50LFxyXG4gIFNvcnRpbmdDb21wb25lbnQsXHJcbiAgTG9hZENvbnRhaW5lckNvbXBvbmVudCxcclxuICBMb2FkTW9yZUJ1dHRvbkNvbXBvbmVudFxyXG59IGZyb20gJy4vY29tcG9uZW50cyc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgLy8gZGlyZWN0aXZlc1xyXG4gICAgQ2xpY2tPdXRzaWRlRGlyZWN0aXZlLFxyXG4gICAgU2hvd0hpZGVFbGVtZW50RGlyZWN0aXZlLFxyXG4gICAgVGhyb3dFbGVtZW50T25Ib3ZlckRpcmVjdGl2ZSxcclxuICAgIFRlbXBsYXRlUmVmZXJlbmNlRGlyZWN0aXZlLFxyXG4gICAgTW91c2VEb3duRGlyZWN0aXZlLFxyXG4gICAgQ29tcG9uZW50U2l6ZURpcmVjdGl2ZSxcclxuICAgIERlc3Ryb3lQYXJlbnREaXJlY3RpdmUsXHJcbiAgICBEb21DaGFuZ2VzRGlyZWN0aXZlLFxyXG4gICAgU2Nyb2xsVHJhY2tlckRpcmVjdGl2ZSxcclxuICAgIFNjcm9sbEludG9WaWV3RGlyZWN0aXZlLFxyXG4gICAgLy8gY29tcG9uZW50c1xyXG4gICAgQnV0dG9uQ29tcG9uZW50LFxyXG4gICAgVG9vbHRpcENvbXBvbmVudCxcclxuICAgIERlbGltZXRlckNvbXBvbmVudCxcclxuICAgIFRvZ2dsZVN3aXRjaGVyQ29tcG9uZW50LFxyXG4gICAgQ2hlY2ttYXJrQ29tcG9uZW50LFxyXG4gICAgVGVtcGxhdGVDb250ZW50Q29tcG9uZW50LFxyXG4gICAgQ2xvc2VDb21wb25lbnQsXHJcbiAgICBIYW1idXJnZXJDb21wb25lbnQsXHJcbiAgICBEb3RzQ29tcG9uZW50LFxyXG4gICAgUGFnaW5hdGlvbkNvbXBvbmVudCxcclxuICAgIFNvcnRpbmdDb21wb25lbnQsXHJcbiAgICBMb2FkTW9yZUJ1dHRvbkNvbXBvbmVudCxcclxuICAgIExvYWRDb250YWluZXJDb21wb25lbnQsXHJcbiAgICAvLyBsb2FkZXJzXHJcbiAgICBCb3VuY2VMb2FkZXJDb21wb25lbnQsXHJcbiAgICBDaXJjbGVMb2FkZXJDb21wb25lbnQsXHJcbiAgICAvLyBtb2RhbFxyXG4gICAgTW9kYWxDb21wb25lbnQsXHJcbiAgICBNb2RhbE9wZW5EaXJlY3RpdmUsXHJcbiAgICBNb2RhbE9wZW5PbkNsaWNrRGlyZWN0aXZlLFxyXG4gICAgRGVmYXVsdE1vZGFsSGVhZGVyQ29tcG9uZW50LFxyXG4gICAgRGVmYXVsdE1vZGFsRm9vdGVyQ29tcG9uZW50LFxyXG4gICAgLy8gcGlwZXNcclxuICAgIFN3aXRjaE11bHRpQ2FzZVBpcGVcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEJyb3dzZXJBbmltYXRpb25zTW9kdWxlLFxyXG4gICAgRm9udEF3ZXNvbWVNb2R1bGVcclxuICBdLFxyXG4gIGV4cG9ydHM6IFtcclxuICAgIC8vIGRpcmVjdGl2ZXNcclxuICAgIENsaWNrT3V0c2lkZURpcmVjdGl2ZSxcclxuICAgIFNob3dIaWRlRWxlbWVudERpcmVjdGl2ZSxcclxuICAgIFRocm93RWxlbWVudE9uSG92ZXJEaXJlY3RpdmUsXHJcbiAgICBUZW1wbGF0ZVJlZmVyZW5jZURpcmVjdGl2ZSxcclxuICAgIE1vdXNlRG93bkRpcmVjdGl2ZSxcclxuICAgIENvbXBvbmVudFNpemVEaXJlY3RpdmUsXHJcbiAgICBEZXN0cm95UGFyZW50RGlyZWN0aXZlLFxyXG4gICAgRG9tQ2hhbmdlc0RpcmVjdGl2ZSxcclxuICAgIFNjcm9sbFRyYWNrZXJEaXJlY3RpdmUsXHJcbiAgICBTY3JvbGxJbnRvVmlld0RpcmVjdGl2ZSxcclxuICAgIC8vIGNvbXBvbmVudHNcclxuICAgIEJ1dHRvbkNvbXBvbmVudCxcclxuICAgIFRvb2x0aXBDb21wb25lbnQsXHJcbiAgICBEZWxpbWV0ZXJDb21wb25lbnQsXHJcbiAgICBDbG9zZUNvbXBvbmVudCxcclxuICAgIENoZWNrbWFya0NvbXBvbmVudCxcclxuICAgIFRlbXBsYXRlQ29udGVudENvbXBvbmVudCxcclxuICAgIFRvZ2dsZVN3aXRjaGVyQ29tcG9uZW50LFxyXG4gICAgRG90c0NvbXBvbmVudCxcclxuICAgIEhhbWJ1cmdlckNvbXBvbmVudCxcclxuICAgIFBhZ2luYXRpb25Db21wb25lbnQsXHJcbiAgICBTb3J0aW5nQ29tcG9uZW50LFxyXG4gICAgTG9hZE1vcmVCdXR0b25Db21wb25lbnQsXHJcbiAgICBMb2FkQ29udGFpbmVyQ29tcG9uZW50LFxyXG4gICAgLy8gbG9hZGVyc1xyXG4gICAgQm91bmNlTG9hZGVyQ29tcG9uZW50LFxyXG4gICAgQ2lyY2xlTG9hZGVyQ29tcG9uZW50LFxyXG4gICAgLy8gbW9kYWxcclxuICAgIE1vZGFsQ29tcG9uZW50LFxyXG4gICAgTW9kYWxPcGVuRGlyZWN0aXZlLFxyXG4gICAgTW9kYWxPcGVuT25DbGlja0RpcmVjdGl2ZSxcclxuICAgIERlZmF1bHRNb2RhbEhlYWRlckNvbXBvbmVudCxcclxuICAgIERlZmF1bHRNb2RhbEZvb3RlckNvbXBvbmVudCxcclxuICAgIC8vIHBpcGVzXHJcbiAgICBTd2l0Y2hNdWx0aUNhc2VQaXBlXHJcbiAgXSxcclxuICBwcm92aWRlcnM6IFtET0NVTUVOVF9QUk9WSURFUlMsIFdJTkRPV19QUk9WSURFUlNdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ3hTZmNDb21tb25Nb2R1bGUgeyB9XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNmYy1jb21tb24ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21tb24vc3JjL2xpYi9uZ3gtc2ZjLWNvbW1vbi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDL0UsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUNMLGtCQUFrQixFQUNsQixnQkFBZ0IsRUFDakIsTUFBTSxZQUFZLENBQUM7QUFDcEIsT0FBTyxFQUNMLHFCQUFxQixFQUNyQix3QkFBd0IsRUFDeEIsNEJBQTRCLEVBQzVCLDBCQUEwQixFQUMxQixrQkFBa0IsRUFDbEIsc0JBQXNCLEVBQ3RCLHNCQUFzQixFQUN0QixtQkFBbUIsRUFDbkIsc0JBQXNCLEVBQ3RCLHVCQUF1QixFQUN4QixNQUFNLGNBQWMsQ0FBQztBQUN0QixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFDOUMsT0FBTyxFQUNMLGVBQWUsRUFDZixnQkFBZ0IsRUFDaEIsa0JBQWtCLEVBQ2xCLHFCQUFxQixFQUNyQixxQkFBcUIsRUFDckIsY0FBYyxFQUNkLHlCQUF5QixFQUN6QixrQkFBa0IsRUFDbEIsMkJBQTJCLEVBQzNCLDJCQUEyQixFQUMzQixrQkFBa0IsRUFDbEIsc0JBQXNCLEVBQ3RCLGFBQWEsRUFDYix1QkFBdUIsRUFDdkIsa0JBQWtCLEVBQ2xCLHdCQUF3QixFQUN4QixjQUFjLEVBQ2QsbUJBQW1CLEVBQ25CLGdCQUFnQixFQUNoQixzQkFBc0IsRUFDdEIsdUJBQXVCLEVBQ3ZCLGFBQWEsRUFDZCxNQUFNLGNBQWMs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QiwwQkFBMEI7d0JBQzFCLGtCQUFrQjt3QkFDbEIsc0JBQXNCO3dCQUN0QixzQkFBc0I7d0JBQ3RCLG1CQUFtQjt3QkFDbkIsc0JBQXNCO3dCQUN0Qix1QkFBdUI7d0JBQ3ZCLGFBQWE7d0JBQ2IsZUFBZTt3QkFDZixnQkFBZ0I7d0JBQ2hCLGtCQUFrQjt3QkFDbEIsY0FBYzt3QkFDZCxrQkFBa0I7d0JBQ2xCLHdCQUF3Qjt3QkFDeEIsdUJBQXVCO3dCQUN2QixhQUFhO3dCQUNiLGtCQUFrQjt3QkFDbEIsc0JBQXNCO3dCQUN0QixtQkFBbUI7d0JBQ25CLGdCQUFnQjt3QkFDaEIsdUJBQXVCO3dCQUN2QixzQkFBc0I7d0JBQ3RCLGFBQWE7d0JBQ2IsVUFBVTt3QkFDVixxQkFBcUI7d0JBQ3JCLHFCQUFxQjt3QkFDckIsUUFBUTt3QkFDUixjQUFjO3dCQUNkLGtCQUFrQjt3QkFDbEIseUJBQXlCO3dCQUN6QiwyQkFBMkI7d0JBQzNCLDJCQUEyQjt3QkFDM0IsUUFBUTt3QkFDUixtQkFBbUI7cUJBQ3BCO29CQUNELFNBQVMsRUFBRSxDQUFDLGtCQUFrQixFQUFFLGdCQUFnQixDQUFDO2lCQUNsRCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IEJyb3dzZXJBbmltYXRpb25zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlci9hbmltYXRpb25zJztcclxuaW1wb3J0IHsgRm9udEF3ZXNvbWVNb2R1bGUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvYW5ndWxhci1mb250YXdlc29tZSc7XHJcbmltcG9ydCB7XHJcbiAgRE9DVU1FTlRfUFJPVklERVJTLFxyXG4gIFdJTkRPV19QUk9WSURFUlNcclxufSBmcm9tICcuL3NlcnZpY2VzJztcclxuaW1wb3J0IHtcclxuICBDbGlja091dHNpZGVEaXJlY3RpdmUsXHJcbiAgU2hvd0hpZGVFbGVtZW50RGlyZWN0aXZlLFxyXG4gIFRocm93RWxlbWVudE9uSG92ZXJEaXJlY3RpdmUsXHJcbiAgVGVtcGxhdGVSZWZlcmVuY2VEaXJlY3RpdmUsXHJcbiAgTW91c2VEb3duRGlyZWN0aXZlLFxyXG4gIENvbXBvbmVudFNpemVEaXJlY3RpdmUsXHJcbiAgRGVzdHJveVBhcmVudERpcmVjdGl2ZSxcclxuICBEb21DaGFuZ2VzRGlyZWN0aXZlLFxyXG4gIFNjcm9sbFRyYWNrZXJEaXJlY3RpdmUsXHJcbiAgU2Nyb2xsSW50b1ZpZXdEaXJlY3RpdmVcclxufSBmcm9tICcuL2RpcmVjdGl2ZXMnO1xyXG5pbXBvcnQgeyBTd2l0Y2hNdWx0aUNhc2VQaXBlIH0gZnJvbSAnLi9waXBlcyc7XHJcbmltcG9ydCB7XHJcbiAgQnV0dG9uQ29tcG9uZW50LFxyXG4gIFRvb2x0aXBDb21wb25lbnQsXHJcbiAgRGVsaW1ldGVyQ29tcG9uZW50LFxyXG4gIEJvdW5jZUxvYWRlckNvbXBvbmVudCxcclxuICBDaXJjbGVMb2FkZXJDb21wb25lbnQsXHJcbiAgTW9kYWxDb21wb25lbnQsXHJcbiAgTW9kYWxPcGVuT25DbGlja0RpcmVjdGl2ZSxcclxuICBNb2RhbE9wZW5EaXJlY3RpdmUsXHJcbiAgRGVmYXVsdE1vZGFsSGVhZGVyQ29tcG9uZW50LFxyXG4gIERlZmF1bHRNb2RhbEZvb3RlckNvbXBvbmVudCxcclxuICBIYW1idXJnZXJDb21wb25lbnQsXHJcbiAgSGFtYnVyZ2VyTWVudUNvbXBvbmVudCxcclxuICBEb3RzQ29tcG9uZW50LFxyXG4gIFRvZ2dsZVN3aXRjaGVyQ29tcG9uZW50LFxyXG4gIENoZWNrbWFya0NvbXBvbmVudCxcclxuICBUZW1wbGF0ZUNvbnRlbnRDb21wb25lbnQsXHJcbiAgQ2xvc2VDb21wb25lbnQsXHJcbiAgUGFnaW5hdGlvbkNvbXBvbmVudCxcclxuICBTb3J0aW5nQ29tcG9uZW50LFxyXG4gIExvYWRDb250YWluZXJDb21wb25lbnQsXHJcbiAgTG9hZE1vcmVCdXR0b25Db21wb25lbnQsXHJcbiAgSWNvbkNvbXBvbmVudFxyXG59IGZyb20gJy4vY29tcG9uZW50cyc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgLy8gZGlyZWN0aXZlc1xyXG4gICAgQ2xpY2tPdXRzaWRlRGlyZWN0aXZlLFxyXG4gICAgU2hvd0hpZGVFbGVtZW50RGlyZWN0aXZlLFxyXG4gICAgVGhyb3dFbGVtZW50T25Ib3ZlckRpcmVjdGl2ZSxcclxuICAgIFRlbXBsYXRlUmVmZXJlbmNlRGlyZWN0aXZlLFxyXG4gICAgTW91c2VEb3duRGlyZWN0aXZlLFxyXG4gICAgQ29tcG9uZW50U2l6ZURpcmVjdGl2ZSxcclxuICAgIERlc3Ryb3lQYXJlbnREaXJlY3RpdmUsXHJcbiAgICBEb21DaGFuZ2VzRGlyZWN0aXZlLFxyXG4gICAgU2Nyb2xsVHJhY2tlckRpcmVjdGl2ZSxcclxuICAgIFNjcm9sbEludG9WaWV3RGlyZWN0aXZlLFxyXG4gICAgLy8gY29tcG9uZW50c1xyXG4gICAgQnV0dG9uQ29tcG9uZW50LFxyXG4gICAgVG9vbHRpcENvbXBvbmVudCxcclxuICAgIERlbGltZXRlckNvbXBvbmVudCxcclxuICAgIFRvZ2dsZVN3aXRjaGVyQ29tcG9uZW50LFxyXG4gICAgQ2hlY2ttYXJrQ29tcG9uZW50LFxyXG4gICAgVGVtcGxhdGVDb250ZW50Q29tcG9uZW50LFxyXG4gICAgQ2xvc2VDb21wb25lbnQsXHJcbiAgICBIYW1idXJnZXJDb21wb25lbnQsXHJcbiAgICBIYW1idXJnZXJNZW51Q29tcG9uZW50LFxyXG4gICAgRG90c0NvbXBvbmVudCxcclxuICAgIFBhZ2luYXRpb25Db21wb25lbnQsXHJcbiAgICBTb3J0aW5nQ29tcG9uZW50LFxyXG4gICAgTG9hZE1vcmVCdXR0b25Db21wb25lbnQsXHJcbiAgICBMb2FkQ29udGFpbmVyQ29tcG9uZW50LFxyXG4gICAgSWNvbkNvbXBvbmVudCxcclxuICAgIC8vIGxvYWRlcnNcclxuICAgIEJvdW5jZUxvYWRlckNvbXBvbmVudCxcclxuICAgIENpcmNsZUxvYWRlckNvbXBvbmVudCxcclxuICAgIC8vIG1vZGFsXHJcbiAgICBNb2RhbENvbXBvbmVudCxcclxuICAgIE1vZGFsT3BlbkRpcmVjdGl2ZSxcclxuICAgIE1vZGFsT3Blbk9uQ2xpY2tEaXJlY3RpdmUsXHJcbiAgICBEZWZhdWx0TW9kYWxIZWFkZXJDb21wb25lbnQsXHJcbiAgICBEZWZhdWx0TW9kYWxGb290ZXJDb21wb25lbnQsXHJcbiAgICAvLyBwaXBlc1xyXG4gICAgU3dpdGNoTXVsdGlDYXNlUGlwZSAgICBcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIEJyb3dzZXJBbmltYXRpb25zTW9kdWxlLFxyXG4gICAgRm9udEF3ZXNvbWVNb2R1bGVcclxuICBdLFxyXG4gIGV4cG9ydHM6IFtcclxuICAgIC8vIGRpcmVjdGl2ZXNcclxuICAgIENsaWNrT3V0c2lkZURpcmVjdGl2ZSxcclxuICAgIFNob3dIaWRlRWxlbWVudERpcmVjdGl2ZSxcclxuICAgIFRocm93RWxlbWVudE9uSG92ZXJEaXJlY3RpdmUsXHJcbiAgICBUZW1wbGF0ZVJlZmVyZW5jZURpcmVjdGl2ZSxcclxuICAgIE1vdXNlRG93bkRpcmVjdGl2ZSxcclxuICAgIENvbXBvbmVudFNpemVEaXJlY3RpdmUsXHJcbiAgICBEZXN0cm95UGFyZW50RGlyZWN0aXZlLFxyXG4gICAgRG9tQ2hhbmdlc0RpcmVjdGl2ZSxcclxuICAgIFNjcm9sbFRyYWNrZXJEaXJlY3RpdmUsXHJcbiAgICBTY3JvbGxJbnRvVmlld0RpcmVjdGl2ZSxcclxuICAgIC8vIGNvbXBvbmVudHNcclxuICAgIEJ1dHRvbkNvbXBvbmVudCxcclxuICAgIFRvb2x0aXBDb21wb25lbnQsXHJcbiAgICBEZWxpbWV0ZXJDb21wb25lbnQsXHJcbiAgICBDbG9zZUNvbXBvbmVudCxcclxuICAgIENoZWNrbWFya0NvbXBvbmVudCxcclxuICAgIFRlbXBsYXRlQ29udGVudENvbXBvbmVudCxcclxuICAgIFRvZ2dsZVN3aXRjaGVyQ29tcG9uZW50LFxyXG4gICAgRG90c0NvbXBvbmVudCxcclxuICAgIEhhbWJ1cmdlckNvbXBvbmVudCxcclxuICAgIEhhbWJ1cmdlck1lbnVDb21wb25lbnQsXHJcbiAgICBQYWdpbmF0aW9uQ29tcG9uZW50LFxyXG4gICAgU29ydGluZ0NvbXBvbmVudCxcclxuICAgIExvYWRNb3JlQnV0dG9uQ29tcG9uZW50LFxyXG4gICAgTG9hZENvbnRhaW5lckNvbXBvbmVudCxcclxuICAgIEljb25Db21wb25lbnQsXHJcbiAgICAvLyBsb2FkZXJzXHJcbiAgICBCb3VuY2VMb2FkZXJDb21wb25lbnQsXHJcbiAgICBDaXJjbGVMb2FkZXJDb21wb25lbnQsXHJcbiAgICAvLyBtb2RhbFxyXG4gICAgTW9kYWxDb21wb25lbnQsXHJcbiAgICBNb2RhbE9wZW5EaXJlY3RpdmUsXHJcbiAgICBNb2RhbE9wZW5PbkNsaWNrRGlyZWN0aXZlLFxyXG4gICAgRGVmYXVsdE1vZGFsSGVhZGVyQ29tcG9uZW50LFxyXG4gICAgRGVmYXVsdE1vZGFsRm9vdGVyQ29tcG9uZW50LFxyXG4gICAgLy8gcGlwZXNcclxuICAgIFN3aXRjaE11bHRpQ2FzZVBpcGUgICAgXHJcbiAgXSxcclxuICBwcm92aWRlcnM6IFtET0NVTUVOVF9QUk9WSURFUlMsIFdJTkRPV19QUk9WSURFUlNdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ3hTZmNDb21tb25Nb2R1bGUgeyB9XHJcbiJdfQ==

package/fesm2015/ngx-sfc-common.mjs

@@ -35,9 +35,12 @@ var Direction;
  */
 var MediaLimits;
 (function (MediaLimits) {
-    MediaLimits[MediaLimits["Laptop"] = 1200] = "Laptop";
-    MediaLimits[MediaLimits["Tablet"] = 767] = "Tablet";
-    MediaLimits[MediaLimits["Phone"] = 430] = "Phone";
+    MediaLimits[MediaLimits["LaptopLarge"] = 1440] = "LaptopLarge";
+    MediaLimits[MediaLimits["Laptop"] = 1024] = "Laptop";
+    MediaLimits[MediaLimits["Tablet"] = 768] = "Tablet";
+    MediaLimits[MediaLimits["MobileLarge"] = 425] = "MobileLarge";
+    MediaLimits[MediaLimits["Mobile"] = 375] = "Mobile";
+    MediaLimits[MediaLimits["MobileSmall"] = 320] = "MobileSmall";
 })(MediaLimits || (MediaLimits = {}));
 
 /**
@@ -294,11 +297,9 @@ class ClickOutsideDirective {
          */
         this.action = new EventEmitter();
     }
-    ngOnInit() {
+    ngAfterViewInit() {
         this._clickSubscription = fromEvent(this.document, 'click')
-            .subscribe(event => {
-            this.onClick(event);
-        });
+            .subscribe(event => this.onClick(event));
     }
     ngOnDestroy() {
         var _a;
@@ -369,6 +370,7 @@ UIConstants.CSS_PIXELS = 'px';
 UIConstants.CSS_PERCENTAGE = '%';
 UIConstants.CSS_DEGREES = 'deg';
 UIConstants.CSS_EM = 'em';
+UIConstants.CSS_INITIAL = 'initial';
 UIConstants.CSS_VISIBILITY_VISIBLE = 'visible';
 UIConstants.CSS_VISIBILITY_HIDDEN = 'hidden';
 UIConstants.CSS_WIDTH = 'width';
@@ -1491,10 +1493,14 @@ var ButtonType;
 class ButtonComponent {
     constructor() {
         this.BUTTON_DEFAULT_TEXT = 'Button';
-        this.text = this.BUTTON_DEFAULT_TEXT;
         this.disabled = false;
         this.types = [ButtonType.Bordered];
     }
+    get label() {
+        return isNullOrEmptyString(this.text) && !isDefined(this.iconBefore) && !isDefined(this.iconAfter)
+            ? this.BUTTON_DEFAULT_TEXT
+            : this.text;
+    }
     get classes() {
         const classes = {};
         distinct(this.types).forEach(type => classes[type] = true);
@@ -1502,10 +1508,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button:hover{color:#2bbbad;border-color:#2bbbad}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host .button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{text}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button:hover{color:#2bbbad;border-color:#2bbbad}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}\n"] }]
+            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host .button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{
@@ -1593,13 +1599,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }] } });
 
 class DelimeterComponent {
+    constructor() {
+        this.direction = Direction.Horizontal;
+    }
 }
 DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
+DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", inputs: { direction: "direction" }, host: { properties: { "class": "this.direction" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}:host.vertical{height:100%;min-height:1em;width:1px;margin:0 .3em}:host.vertical,:host-context(.sfc-default-theme) :host.vertical{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host.vertical{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
-        }] });
+            args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}:host.vertical{height:100%;min-height:1em;width:1px;margin:0 .3em}:host.vertical,:host-context(.sfc-default-theme) :host.vertical{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host.vertical{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
+        }], propDecorators: { direction: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
 class LoaderConstants {
 }
@@ -1817,10 +1831,10 @@ class CloseComponent {
     }
 }
 CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#2bbbad}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"] }]
         }] });
 
 class DefaultModalHeaderComponent {
@@ -2049,17 +2063,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: ModalService }]; } });
 
-class HamburgerComponent {
+class HamburgerBaseComponent {
     constructor() {
         this.open = false;
         this.onClick = () => this.open = !this.open;
     }
 }
-HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerComponent, selector: "sfc-hamburger", inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] }]
+HamburgerBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+HamburgerBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerBaseComponent, inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerBaseComponent, decorators: [{
+            type: Directive
         }], propDecorators: { open: [{
                 type: Input
             }, {
@@ -2070,6 +2083,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['click']
             }] } });
 
+class HamburgerComponent extends HamburgerBaseComponent {
+}
+HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerComponent, selector: "sfc-hamburger", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] }]
+        }] });
+
+class HamburgerMenuComponent extends HamburgerBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.label = 'Menu';
+    }
+}
+HamburgerMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HamburgerMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerMenuComponent, selector: "sfc-hamburger-menu", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;display:block;height:.125em;margin-bottom:.1875em;transition:all ease-in-out .4s}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-hamburger-menu', template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;display:block;height:.125em;margin-bottom:.1875em;transition:all ease-in-out .4s}:host .container span,:host-context(.sfc-default-theme) :host .container span{background:#545e61}:host-context(.sfc-dark-theme) :host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme) :host .container span.text{color:#545e61}:host-context(.sfc-dark-theme) :host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
 class DotsComponent {
     constructor() {
         this.open = false;
@@ -2078,10 +2115,10 @@ class DotsComponent {
     }
 }
 DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] });
+DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#ffce54}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {
@@ -2146,10 +2183,10 @@ class CheckmarkComponent {
     }
 }
 CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type", showNotActive: "showNotActive" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon *ngIf=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme) :host .check{background:#fff}:host-context(.sfc-dark-theme) :host .check{background:transparent}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.rounded .check{border-radius:50%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type", showNotActive: "showNotActive" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon *ngIf=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.18em solid;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme) :host .check{background:#fff}:host-context(.sfc-dark-theme) :host .check{background:transparent}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.rounded .check{border-radius:50%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon *ngIf=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme) :host .check{background:#fff}:host-context(.sfc-dark-theme) :host .check{background:transparent}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.rounded .check{border-radius:50%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon *ngIf=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#fff}:host .check{border:.18em solid;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme) :host .check{background:#fff}:host-context(.sfc-dark-theme) :host .check{background:transparent}:host .check,:host-context(.sfc-default-theme) :host .check{border-color:#545e61}:host-context(.sfc-dark-theme) :host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme) :host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme) :host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme) :host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.rounded .check{border-radius:50%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme) :host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme) :host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled.active .check{background:#656d78}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -2298,10 +2335,10 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#ccd1d9}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#ccd1d9}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#ccd1d9}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["direction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#ccd1d9}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#ccd1d9}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#ccd1d9}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { count: [{
                 type: Input
             }], full: [{
@@ -2378,10 +2415,10 @@ class SortingComponent {
     }
 }
 SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
-SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#2bbbad}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
         }], ctorParameters: function () { return [{ type: SortingService }]; }, propDecorators: { id: [{
                 type: Input
             }], model: [{
@@ -2444,10 +2481,10 @@ class LoadMoreButtonComponent {
     }
 }
 LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;color:#545e61;transition:color .5s;padding:.5em 0 1em}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#2bbbad}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter" }] });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;color:#545e61;transition:color .5s;padding:.5em 0 1em}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;color:#545e61;transition:color .5s;padding:.5em 0 1em}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#2bbbad}\n"] }]
+            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;color:#545e61;transition:color .5s;padding:.5em 0 1em}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -2600,6 +2637,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: [`class.${UIClass.Loading}`]
             }] } });
 
+class IconComponent {
+    get showImage() {
+        return !isNullOrEmptyString(this.imageSrc) && !isDefined(this.icon);
+    }
+}
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "sfc-icon", inputs: { icon: "icon", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sfc-icon', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n    <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], imageSrc: [{
+                type: Input
+            }] } });
+
 class NgxSfcCommonModule {
 }
 NgxSfcCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2624,11 +2677,13 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         TemplateContentComponent,
         CloseComponent,
         HamburgerComponent,
+        HamburgerMenuComponent,
         DotsComponent,
         PaginationComponent,
         SortingComponent,
         LoadMoreButtonComponent,
         LoadContainerComponent,
+        IconComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -2664,10 +2719,12 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ToggleSwitcherComponent,
         DotsComponent,
         HamburgerComponent,
+        HamburgerMenuComponent,
         PaginationComponent,
         SortingComponent,
         LoadMoreButtonComponent,
         LoadContainerComponent,
+        IconComponent,
         // loaders
         BounceLoaderComponent,
         CircleLoaderComponent,
@@ -2707,11 +2764,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         TemplateContentComponent,
                         CloseComponent,
                         HamburgerComponent,
+                        HamburgerMenuComponent,
                         DotsComponent,
                         PaginationComponent,
                         SortingComponent,
                         LoadMoreButtonComponent,
                         LoadContainerComponent,
+                        IconComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -2751,10 +2810,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                         ToggleSwitcherComponent,
                         DotsComponent,
                         HamburgerComponent,
+                        HamburgerMenuComponent,
                         PaginationComponent,
                         SortingComponent,
                         LoadMoreButtonComponent,
                         LoadContainerComponent,
+                        IconComponent,
                         // loaders
                         BounceLoaderComponent,
                         CircleLoaderComponent,
@@ -2779,6 +2840,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, LoadContainerComponent, LoadContainerType, LoadMoreButtonComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
-//# sourceMappingURL=ngx-sfc-common.mjs.map
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CommonConstants, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, LoadContainerComponent, LoadContainerType, LoadMoreButtonComponent, LoaderService, MediaLimits, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, PaginationComponent, PaginationService, Position, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Sequence, ShowHideElementDirective, SortingComponent, SortingDirection, SortingService, SwitchMultiCasePipe, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, contains, distinct, documentFactory, documentProvider, firstItem, firstOrDefault, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasItem, hasItemBy, hasObjectItem, hexToRgb, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDefined, isEqualDates, isImage, isNullOrEmptyString, isNumeric, isObject, lastItem, max, mergeDeep, nameof, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, sum, trim, updateItemBy, where, windowFactory, windowProvider };
 //# sourceMappingURL=ngx-sfc-common.mjs.map