ngx-sfc-components 0.0.3 → 0.0.4

package/esm2020/lib/components/menu/dropdown/dropdown-menu.component.mjs

@@ -3,9 +3,9 @@ import { isDefined, isNullOrEmptyString, MediaLimits, Position, UIClass, WINDOW
 import { startWith } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "ngx-sfc-common";
-import * as i2 from "@fortawesome/angular-fontawesome";
-import * as i3 from "./parts/item/dropdown-menu-item.component";
-import * as i4 from "@angular/common";
+import * as i2 from "@angular/common";
+import * as i3 from "@fortawesome/angular-fontawesome";
+import * as i4 from "./parts/item/dropdown-menu-item.component";
 export class DropdownMenuComponent {
     constructor(resizeService, window) {
         this.resizeService = resizeService;
@@ -48,9 +48,9 @@ export class DropdownMenuComponent {
         }
     }
 }
-DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
-DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:all .3s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#ccd1d9}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"], components: [{ type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i1.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { type: i3.DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }], directives: [{ type: i1.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuComponent, decorators: [{
+DropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, deps: [{ token: i1.ResizeService }, { token: WINDOW }], target: i0.ɵɵFactoryTarget.Component });
+DropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuComponent, selector: "sfc-dropdown-menu", inputs: { items: "items", icon: "icon", label: "label", hideOnClick: "hideOnClick", hideOnClickOutside: "hideOnClickOutside", bordered: "bordered", position: "position", open: "open" }, outputs: { selected: "selected" }, host: { properties: { "class.bordered": "this.bordered", "class": "this.position", "class.open": "this.open" } }, ngImport: i0, template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:all .3s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#ccd1d9}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: i1.ClickOutsideDirective, selector: "[sfcClickOutside]", inputs: ["sfcClickOutside"], outputs: ["action"] }, { kind: "component", type: i1.DotsComponent, selector: "sfc-dots", inputs: ["open", "direction"] }, { kind: "component", type: i4.DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: ["item"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-dropdown-menu', template: "<ul [sfcClickOutside]=\"hideOnClickOutside\" (action)=\"onClickOutside($event)\">\r\n    <li>\r\n        <div class=\"container\" (click)=\"open = !open\">\r\n            <span *ngIf=\"label\">{{label}}</span>\r\n            <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n            <sfc-dots *ngIf=\"showDots\" [open]=\"open\"></sfc-dots>\r\n        </div>\r\n\r\n        <ul *ngIf=\"items.length\" class=\"dropdown-container\">\r\n            <sfc-dropdown-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n            </sfc-dropdown-menu-item>\r\n        </ul>\r\n    </li>\r\n</ul>", styles: [":host{display:inline-flex}:host ul{list-style:none;margin:0;padding-left:0}:host ul li{position:relative}:host ul li .container{display:flex;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:all .3s ease;padding:.3em}:host ul li .container,:host-context(.sfc-default-theme) :host ul li .container{color:#545e61}:host-context(.sfc-dark-theme) :host ul li .container{color:#ccd1d9}:host ul li .container span,:host ul li .container fa-icon{font-size:.8em;font-weight:700}:host ul li .container span~fa-icon{margin-left:.3em}:host ul li .container:hover{color:#2bbbad}:host ul li .dropdown-container{flex-direction:column;width:max-content;background:#fff;visibility:hidden;opacity:0;position:absolute;right:0;transition:all .5s ease;margin-top:1em;display:none;padding:.6em;border:.0063em solid #f5f7fa;border-radius:.1875em;box-shadow:0 .125em .625em;z-index:9999}:host ul li .dropdown-container,:host-context(.sfc-default-theme) :host ul li .dropdown-container{color:#e6e9ed}:host-context(.sfc-dark-theme) :host ul li .dropdown-container{color:#656d78}:host.open ul li .dropdown-container{visibility:visible;opacity:1;display:flex}:host.bordered ul li .container{border:.15em solid;border-radius:.3em}:host.bordered ul li .container,:host-context(.sfc-default-theme) :host.bordered ul li .container{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered ul li .container{border-color:#ccd1d9}:host.bordered ul li .container:hover{border-color:#2bbbad}:host.bordered ul li .container:hover ::ng-deep sfc-dots .dot{background:#2bbbad}:host.top ul li .dropdown-container{bottom:0;margin-bottom:2.18em;margin-top:0}:host.center ul li .dropdown-container{left:50%;transform:translate(-50%)}:host.left ul li .dropdown-container{right:0}:host.right ul li .dropdown-container{left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ResizeService }, { type: Window, decorators: [{
@@ -84,4 +84,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             }], selected: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21lbnUvZHJvcGRvd24vZHJvcGRvd24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21lbnUvZHJvcGRvd24vZHJvcGRvd24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW9CLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVqSSxPQUFPLEVBQXFCLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFpQixPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUksT0FBTyxFQUFFLFNBQVMsRUFBZ0IsTUFBTSxNQUFNLENBQUM7Ozs7OztBQVEvQyxNQUFNLE9BQU8scUJBQXFCO0lBeUNoQyxZQUFvQixhQUE0QixFQUEwQixNQUFjO1FBQXBFLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBQTBCLFdBQU0sR0FBTixNQUFNLENBQVE7UUF0Q3hGLFVBQUssR0FBNkIsRUFBRSxDQUFDO1FBU3JDLGdCQUFXLEdBQVksSUFBSSxDQUFDO1FBRzVCLHVCQUFrQixHQUFZLElBQUksQ0FBQztRQUluQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBSTFCLGFBQVEsR0FBZSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUl2QyxTQUFJLEdBQVksS0FBSyxDQUFDO1FBR3RCLGFBQVEsR0FBeUMsSUFBSSxZQUFZLEVBQTBCLENBQUM7UUFFNUYscUJBQXFCO1FBQ2IsY0FBUyxHQUFHLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBUXdELENBQUM7SUFKN0YsSUFBSSxRQUFRO1FBQ1YsT0FBTyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFJRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ2pDLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUzthQUNwRCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQzthQUM1QixTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxNQUFNLENBQUMsVUFBVSxJQUFJLFdBQVcsQ0FBQyxNQUFNO2dCQUNyRCxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQTtRQUNwRCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxDQUFDO0lBQzFDLENBQUM7SUFFRCxPQUFPLENBQUMsSUFBNEI7UUFDbEMsSUFBSSxJQUFJLENBQUMsV0FBVztZQUNsQixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUVwQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQXdCO1FBQ3JDLElBQUksS0FBSyxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQzVCLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1NBQ25CO0lBQ0gsQ0FBQzs7a0hBdkVVLHFCQUFxQiwrQ0F5QzBCLE1BQU07c0dBekNyRCxxQkFBcUIsd1lDWGxDLHNuQkFhSzsyRkRGUSxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsbUJBQW1CO3NGQTZDcUQsTUFBTTswQkFBckMsTUFBTTsyQkFBQyxNQUFNOzRDQXRDaEUsS0FBSztzQkFESixLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sV0FBVztzQkFEVixLQUFLO2dCQUlOLGtCQUFrQjtzQkFEakIsS0FBSztnQkFLTixRQUFRO3NCQUZQLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsUUFBUSxHQUFHLE9BQU8sQ0FBQyxRQUFRO2dCQUt4QyxRQUFRO3NCQUZQLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsT0FBTztnQkFLcEIsSUFBSTtzQkFGSCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsSUFBSTtnQkFJcEMsUUFBUTtzQkFEUCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbmplY3QsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEljb25EZWZpbml0aW9uIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZyZWUtc29saWQtc3ZnLWljb25zJztcclxuaW1wb3J0IHsgQ2xpY2tPdXRzaWRlRXZlbnQsIGlzRGVmaW5lZCwgaXNOdWxsT3JFbXB0eVN0cmluZywgTWVkaWFMaW1pdHMsIFBvc2l0aW9uLCBSZXNpemVTZXJ2aWNlLCBVSUNsYXNzLCBXSU5ET1cgfSBmcm9tICduZ3gtc2ZjLWNvbW1vbic7XHJcbmltcG9ydCB7IHN0YXJ0V2l0aCwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IElEcm9wZG93bk1lbnVJdGVtTW9kZWwgfSBmcm9tICcuL3BhcnRzL2l0ZW0vZHJvcGRvd24tbWVudS1pdGVtLm1vZGVsJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ZjLWRyb3Bkb3duLW1lbnUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9kcm9wZG93bi1tZW51LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9kcm9wZG93bi1tZW51LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIERyb3Bkb3duTWVudUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSwgT25Jbml0LCBBZnRlckNvbnRlbnRJbml0IHtcclxuXHJcbiAgQElucHV0KClcclxuICBpdGVtczogSURyb3Bkb3duTWVudUl0ZW1Nb2RlbFtdID0gW107XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbj86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGxhYmVsPzogc3RyaW5nO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGhpZGVPbkNsaWNrOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgQElucHV0KClcclxuICBoaWRlT25DbGlja091dHNpZGU6IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIEBIb3N0QmluZGluZygnY2xhc3MuJyArIFVJQ2xhc3MuQm9yZGVyZWQpXHJcbiAgYm9yZGVyZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcclxuICBwb3NpdGlvbjogUG9zaXRpb25bXSA9IFtQb3NpdGlvbi5MZWZ0XTtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLk9wZW4pXHJcbiAgb3BlbjogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBAT3V0cHV0KClcclxuICBzZWxlY3RlZDogRXZlbnRFbWl0dGVyPElEcm9wZG93bk1lbnVJdGVtTW9kZWw+ID0gbmV3IEV2ZW50RW1pdHRlcjxJRHJvcGRvd25NZW51SXRlbU1vZGVsPigpO1xyXG5cclxuICAvLyBwcmVzZXJ2ZWQgcG9zaXRpb25cclxuICBwcml2YXRlIF9wb3NpdGlvbiA9IFtQb3NpdGlvbi5MZWZ0XTtcclxuXHJcbiAgcHJpdmF0ZSBfcmVzaXplU3Vic2NyaXB0aW9uPzogU3Vic2NyaXB0aW9uO1xyXG5cclxuICBnZXQgc2hvd0RvdHMoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gaXNOdWxsT3JFbXB0eVN0cmluZyh0aGlzLmxhYmVsKSAmJiAhaXNEZWZpbmVkKHRoaXMuaWNvbik7XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlc2l6ZVNlcnZpY2U6IFJlc2l6ZVNlcnZpY2UsIEBJbmplY3QoV0lORE9XKSBwcml2YXRlIHdpbmRvdzogV2luZG93KSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9wb3NpdGlvbiA9IHRoaXMucG9zaXRpb247XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9yZXNpemVTdWJzY3JpcHRpb24gPSB0aGlzLnJlc2l6ZVNlcnZpY2Uub25SZXNpemUkXHJcbiAgICAgIC5waXBlKHN0YXJ0V2l0aCh0aGlzLndpbmRvdykpXHJcbiAgICAgIC5zdWJzY3JpYmUod2luZG93ID0+IHtcclxuICAgICAgICB0aGlzLnBvc2l0aW9uID0gd2luZG93LmlubmVyV2lkdGggPD0gTWVkaWFMaW1pdHMuVGFibGV0XHJcbiAgICAgICAgICA/IFtQb3NpdGlvbi5MZWZ0LCBQb3NpdGlvbi5Ub3BdIDogdGhpcy5fcG9zaXRpb25cclxuICAgICAgfSk7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcclxuICAgIHRoaXMuX3Jlc2l6ZVN1YnNjcmlwdGlvbj8udW5zdWJzY3JpYmUoKTtcclxuICB9XHJcblxyXG4gIG9uQ2xpY2soaXRlbTogSURyb3Bkb3duTWVudUl0ZW1Nb2RlbCkge1xyXG4gICAgaWYgKHRoaXMuaGlkZU9uQ2xpY2spXHJcbiAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xyXG5cclxuICAgIHRoaXMuc2VsZWN0ZWQuZW1pdChpdGVtKTtcclxuICB9XHJcblxyXG4gIG9uQ2xpY2tPdXRzaWRlKGV2ZW50OiBDbGlja091dHNpZGVFdmVudCkge1xyXG4gICAgaWYgKGV2ZW50LnZhbHVlICYmIHRoaXMub3Blbikge1xyXG4gICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIiwiPHVsIFtzZmNDbGlja091dHNpZGVdPVwiaGlkZU9uQ2xpY2tPdXRzaWRlXCIgKGFjdGlvbik9XCJvbkNsaWNrT3V0c2lkZSgkZXZlbnQpXCI+XHJcbiAgICA8bGk+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiIChjbGljayk9XCJvcGVuID0gIW9wZW5cIj5cclxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJsYWJlbFwiPnt7bGFiZWx9fTwvc3Bhbj5cclxuICAgICAgICAgICAgPGZhLWljb24gKm5nSWY9XCJpY29uXCIgW2ljb25dPVwiaWNvblwiPjwvZmEtaWNvbj5cclxuICAgICAgICAgICAgPHNmYy1kb3RzICpuZ0lmPVwic2hvd0RvdHNcIiBbb3Blbl09XCJvcGVuXCI+PC9zZmMtZG90cz5cclxuICAgICAgICA8L2Rpdj5cclxuXHJcbiAgICAgICAgPHVsICpuZ0lmPVwiaXRlbXMubGVuZ3RoXCIgY2xhc3M9XCJkcm9wZG93bi1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgPHNmYy1kcm9wZG93bi1tZW51LWl0ZW0gKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXNcIiBbaXRlbV09XCJpdGVtXCIgKGNsaWNrKT1cIm9uQ2xpY2soaXRlbSlcIj5cclxuICAgICAgICAgICAgPC9zZmMtZHJvcGRvd24tbWVudS1pdGVtPlxyXG4gICAgICAgIDwvdWw+XHJcbiAgICA8L2xpPlxyXG48L3VsPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21lbnUvZHJvcGRvd24vZHJvcGRvd24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21lbnUvZHJvcGRvd24vZHJvcGRvd24tbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW9CLFNBQVMsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQXFCLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVqSSxPQUFPLEVBQXFCLFNBQVMsRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFpQixPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUksT0FBTyxFQUFFLFNBQVMsRUFBZ0IsTUFBTSxNQUFNLENBQUM7Ozs7OztBQVEvQyxNQUFNLE9BQU8scUJBQXFCO0lBeUNoQyxZQUFvQixhQUE0QixFQUEwQixNQUFjO1FBQXBFLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBQTBCLFdBQU0sR0FBTixNQUFNLENBQVE7UUF0Q3hGLFVBQUssR0FBNkIsRUFBRSxDQUFDO1FBU3JDLGdCQUFXLEdBQVksSUFBSSxDQUFDO1FBRzVCLHVCQUFrQixHQUFZLElBQUksQ0FBQztRQUluQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBSTFCLGFBQVEsR0FBZSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUl2QyxTQUFJLEdBQVksS0FBSyxDQUFDO1FBR3RCLGFBQVEsR0FBeUMsSUFBSSxZQUFZLEVBQTBCLENBQUM7UUFFNUYscUJBQXFCO1FBQ2IsY0FBUyxHQUFHLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBUXdELENBQUM7SUFKN0YsSUFBSSxRQUFRO1FBQ1YsT0FBTyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFJRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ2pDLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLG1CQUFtQixHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUzthQUNwRCxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQzthQUM1QixTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxNQUFNLENBQUMsVUFBVSxJQUFJLFdBQVcsQ0FBQyxNQUFNO2dCQUNyRCxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQTtRQUNwRCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxDQUFDO0lBQzFDLENBQUM7SUFFRCxPQUFPLENBQUMsSUFBNEI7UUFDbEMsSUFBSSxJQUFJLENBQUMsV0FBVztZQUNsQixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUVwQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQXdCO1FBQ3JDLElBQUksS0FBSyxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQzVCLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1NBQ25CO0lBQ0gsQ0FBQzs7a0hBdkVVLHFCQUFxQiwrQ0F5QzBCLE1BQU07c0dBekNyRCxxQkFBcUIsd1lDWGxDLHNuQkFhSzsyRkRGUSxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsbUJBQW1COzswQkE2Q3NCLE1BQU07MkJBQUMsTUFBTTs0Q0F0Q2hFLEtBQUs7c0JBREosS0FBSztnQkFJTixJQUFJO3NCQURILEtBQUs7Z0JBSU4sS0FBSztzQkFESixLQUFLO2dCQUlOLFdBQVc7c0JBRFYsS0FBSztnQkFJTixrQkFBa0I7c0JBRGpCLEtBQUs7Z0JBS04sUUFBUTtzQkFGUCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsUUFBUTtnQkFLeEMsUUFBUTtzQkFGUCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLE9BQU87Z0JBS3BCLElBQUk7c0JBRkgsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLElBQUk7Z0JBSXBDLFFBQVE7c0JBRFAsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5qZWN0LCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29ucyc7XHJcbmltcG9ydCB7IENsaWNrT3V0c2lkZUV2ZW50LCBpc0RlZmluZWQsIGlzTnVsbE9yRW1wdHlTdHJpbmcsIE1lZGlhTGltaXRzLCBQb3NpdGlvbiwgUmVzaXplU2VydmljZSwgVUlDbGFzcywgV0lORE9XIH0gZnJvbSAnbmd4LXNmYy1jb21tb24nO1xyXG5pbXBvcnQgeyBzdGFydFdpdGgsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBJRHJvcGRvd25NZW51SXRlbU1vZGVsIH0gZnJvbSAnLi9wYXJ0cy9pdGVtL2Ryb3Bkb3duLW1lbnUtaXRlbS5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1kcm9wZG93bi1tZW51JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZHJvcGRvd24tbWVudS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vZHJvcGRvd24tbWVudS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEcm9wZG93bk1lbnVDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3ksIE9uSW5pdCwgQWZ0ZXJDb250ZW50SW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaXRlbXM6IElEcm9wZG93bk1lbnVJdGVtTW9kZWxbXSA9IFtdO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGljb24/OiBJY29uRGVmaW5pdGlvbjtcclxuXHJcbiAgQElucHV0KClcclxuICBsYWJlbD86IHN0cmluZztcclxuXHJcbiAgQElucHV0KClcclxuICBoaWRlT25DbGljazogYm9vbGVhbiA9IHRydWU7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaGlkZU9uQ2xpY2tPdXRzaWRlOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLkJvcmRlcmVkKVxyXG4gIGJvcmRlcmVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpXHJcbiAgcG9zaXRpb246IFBvc2l0aW9uW10gPSBbUG9zaXRpb24uTGVmdF07XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy4nICsgVUlDbGFzcy5PcGVuKVxyXG4gIG9wZW46IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQE91dHB1dCgpXHJcbiAgc2VsZWN0ZWQ6IEV2ZW50RW1pdHRlcjxJRHJvcGRvd25NZW51SXRlbU1vZGVsPiA9IG5ldyBFdmVudEVtaXR0ZXI8SURyb3Bkb3duTWVudUl0ZW1Nb2RlbD4oKTtcclxuXHJcbiAgLy8gcHJlc2VydmVkIHBvc2l0aW9uXHJcbiAgcHJpdmF0ZSBfcG9zaXRpb24gPSBbUG9zaXRpb24uTGVmdF07XHJcblxyXG4gIHByaXZhdGUgX3Jlc2l6ZVN1YnNjcmlwdGlvbj86IFN1YnNjcmlwdGlvbjtcclxuXHJcbiAgZ2V0IHNob3dEb3RzKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIGlzTnVsbE9yRW1wdHlTdHJpbmcodGhpcy5sYWJlbCkgJiYgIWlzRGVmaW5lZCh0aGlzLmljb24pO1xyXG4gIH1cclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZXNpemVTZXJ2aWNlOiBSZXNpemVTZXJ2aWNlLCBASW5qZWN0KFdJTkRPVykgcHJpdmF0ZSB3aW5kb3c6IFdpbmRvdykgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5fcG9zaXRpb24gPSB0aGlzLnBvc2l0aW9uO1xyXG4gIH1cclxuXHJcbiAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5fcmVzaXplU3Vic2NyaXB0aW9uID0gdGhpcy5yZXNpemVTZXJ2aWNlLm9uUmVzaXplJFxyXG4gICAgICAucGlwZShzdGFydFdpdGgodGhpcy53aW5kb3cpKVxyXG4gICAgICAuc3Vic2NyaWJlKHdpbmRvdyA9PiB7XHJcbiAgICAgICAgdGhpcy5wb3NpdGlvbiA9IHdpbmRvdy5pbm5lcldpZHRoIDw9IE1lZGlhTGltaXRzLlRhYmxldFxyXG4gICAgICAgICAgPyBbUG9zaXRpb24uTGVmdCwgUG9zaXRpb24uVG9wXSA6IHRoaXMuX3Bvc2l0aW9uXHJcbiAgICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICB0aGlzLl9yZXNpemVTdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XHJcbiAgfVxyXG5cclxuICBvbkNsaWNrKGl0ZW06IElEcm9wZG93bk1lbnVJdGVtTW9kZWwpIHtcclxuICAgIGlmICh0aGlzLmhpZGVPbkNsaWNrKVxyXG4gICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcclxuXHJcbiAgICB0aGlzLnNlbGVjdGVkLmVtaXQoaXRlbSk7XHJcbiAgfVxyXG5cclxuICBvbkNsaWNrT3V0c2lkZShldmVudDogQ2xpY2tPdXRzaWRlRXZlbnQpIHtcclxuICAgIGlmIChldmVudC52YWx1ZSAmJiB0aGlzLm9wZW4pIHtcclxuICAgICAgdGhpcy5vcGVuID0gZmFsc2U7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjx1bCBbc2ZjQ2xpY2tPdXRzaWRlXT1cImhpZGVPbkNsaWNrT3V0c2lkZVwiIChhY3Rpb24pPVwib25DbGlja091dHNpZGUoJGV2ZW50KVwiPlxyXG4gICAgPGxpPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIiAoY2xpY2spPVwib3BlbiA9ICFvcGVuXCI+XHJcbiAgICAgICAgICAgIDxzcGFuICpuZ0lmPVwibGFiZWxcIj57e2xhYmVsfX08L3NwYW4+XHJcbiAgICAgICAgICAgIDxmYS1pY29uICpuZ0lmPVwiaWNvblwiIFtpY29uXT1cImljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgIDxzZmMtZG90cyAqbmdJZj1cInNob3dEb3RzXCIgW29wZW5dPVwib3BlblwiPjwvc2ZjLWRvdHM+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDx1bCAqbmdJZj1cIml0ZW1zLmxlbmd0aFwiIGNsYXNzPVwiZHJvcGRvd24tY29udGFpbmVyXCI+XHJcbiAgICAgICAgICAgIDxzZmMtZHJvcGRvd24tbWVudS1pdGVtICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCIgW2l0ZW1dPVwiaXRlbVwiIChjbGljayk9XCJvbkNsaWNrKGl0ZW0pXCI+XHJcbiAgICAgICAgICAgIDwvc2ZjLWRyb3Bkb3duLW1lbnUtaXRlbT5cclxuICAgICAgICA8L3VsPlxyXG4gICAgPC9saT5cclxuPC91bD4iXX0=

package/esm2020/lib/components/menu/dropdown/parts/item/dropdown-menu-item.component.mjs

@@ -1,9 +1,9 @@
 import { Component, HostListener, Input } from '@angular/core';
 import { CommonConstants } from 'ngx-sfc-common';
 import * as i0 from "@angular/core";
-import * as i1 from "@fortawesome/angular-fontawesome";
-import * as i2 from "ngx-sfc-common";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "@fortawesome/angular-fontawesome";
+import * as i3 from "ngx-sfc-common";
 export class DropdownMenuItemComponent {
     constructor() {
         this.item = { label: CommonConstants.EMPTY_STRING };
@@ -13,9 +13,9 @@ export class DropdownMenuItemComponent {
             this.item.click(this.item);
     }
 }
-DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" } }, ngImport: i0, template: "<li>\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li fa-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{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 ::ng-deep sfc-delimeter{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%)}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.DelimeterComponent, selector: "sfc-delimeter" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
+DropdownMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropdownMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DropdownMenuItemComponent, selector: "sfc-dropdown-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" } }, ngImport: i0, template: "<li>\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li fa-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{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 ::ng-deep sfc-delimeter{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%)}\n"], dependencies: [{ kind: "directive", type: i1.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: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DropdownMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-dropdown-menu-item', template: "<li>\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <a>{{item.label}}</a>\r\n</li>\r\n\r\n<sfc-delimeter *ngIf=\"item.delimeter\"></sfc-delimeter>", styles: [":host{display:flex;flex-direction:column}:host li{color:#545e61;display:flex;align-items:center;flex-wrap:wrap;padding:.4em;border:.0063em solid transparent;border-radius:.31em;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li:hover,:host li:focus-within{background:#f5f7fa;border-color:#f5f7fa;color:#2bbbad;cursor:pointer;outline:none}:host li fa-icon{padding-right:.625em;width:10%}:host ::ng-deep sfc-delimeter,:host-context(.sfc-default-theme) :host ::ng-deep sfc-delimeter{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 ::ng-deep sfc-delimeter{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%)}\n"] }]
         }], propDecorators: { item: [{

package/esm2020/lib/components/menu/navigation/navigation-menu.component.mjs

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import * as i0 from "@angular/core";
-import * as i1 from "./parts/item/navigation-menu-item.component";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./parts/item/navigation-menu-item.component";
 export class NavigationMenuComponent {
     constructor() {
         this.items = [];
@@ -13,9 +13,9 @@ export class NavigationMenuComponent {
         this.selected.emit(item);
     }
 }
-NavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"], components: [{ type: i1.NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: ["item"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuComponent, decorators: [{
+NavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuComponent, selector: "sfc-navigation-menu", inputs: { items: "items" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: ["item"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-navigation-menu', template: "<div class=\"container\">\r\n    <div class=\"items\">\r\n        <sfc-navigation-menu-item *ngFor=\"let item of items\" [item]=\"item\" (click)=\"onClick(item)\">\r\n        </sfc-navigation-menu-item>\r\n    </div>\r\n</div>", styles: [":host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container .items{display:flex;flex-wrap:wrap;padding:.625em}:host .container .items sfc-navigation-menu-item{flex:50%}\n"] }]
         }], propDecorators: { items: [{

package/esm2020/lib/components/menu/navigation/parts/item/navigation-menu-item.component.mjs

@@ -1,8 +1,8 @@
 import { Component, HostBinding, HostListener, Input } from '@angular/core';
 import { CommonConstants, UIClass } from 'ngx-sfc-common';
 import * as i0 from "@angular/core";
-import * as i1 from "@fortawesome/angular-fontawesome";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "@fortawesome/angular-fontawesome";
 export class NavigationMenuItemComponent {
     constructor() {
         this.item = { label: CommonConstants.EMPTY_STRING, active: false };
@@ -15,9 +15,9 @@ export class NavigationMenuItemComponent {
             this.item.click(this.item);
     }
 }
-NavigationMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NavigationMenuItemComponent, decorators: [{
+NavigationMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavigationMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavigationMenuItemComponent, selector: "sfc-navigation-menu-item", inputs: { item: "item" }, host: { listeners: { "click": "click()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"], dependencies: [{ kind: "directive", type: i1.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: NavigationMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-navigation-menu-item', template: "<div class=\"container\">\r\n    <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n    <span>{{item.label}}</span>\r\n</div>", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;transition:color .2s ease-in-out}:host,:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1em .3em;margin:.625em;width:100%;border-radius:.625em;transition:background .2s ease-in-out}:host .container fa-icon{font-size:1.5em}:host .container span{font-size:1em;font-weight:700;margin-top:.625em;text-align:center}:host:hover,:host.active{color:#fff}:host:hover .container,:host.active .container{background:#2bbbad}\n"] }]
         }], propDecorators: { item: [{

package/esm2020/lib/components/menu/side/parts/header/side-menu-header.component.mjs

@@ -13,9 +13,9 @@ export class SideMenuHeaderComponent {
         this.label = this.label || this.DEFAULT_MENU_HEADER_TEXT;
     }
 }
-SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], components: [{ type: i1.HamburgerComponent, selector: "sfc-hamburger", inputs: ["open"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
+SideMenuHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: { label: "label", open: "open" }, outputs: { toggle: "toggle" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"], dependencies: [{ kind: "component", type: i1.HamburgerComponent, selector: "sfc-hamburger", inputs: ["open"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu-header', template: "<li>\r\n    <span>{{label}}</span>\r\n    <sfc-hamburger [open]=\"open\" (click)=\"toggle.emit()\"></sfc-hamburger>\r\n</li>", styles: [":host li{display:flex;align-items:center;justify-content:center;padding:1.25em}:host li span{display:none;text-transform:uppercase;font-weight:700;font-size:.8em;-webkit-user-select:none;user-select:none}:host li span,:host-context(.sfc-default-theme) :host li span{color:#545e61}:host-context(.sfc-dark-theme) :host li span{color:#ccd1d9}:host.open li{justify-content:space-between}:host.open li span{display:block}\n"] }]
         }], propDecorators: { label: [{

package/esm2020/lib/components/menu/side/parts/item/content/side-menu-item-content.component.mjs

@@ -3,8 +3,8 @@ import { CommonConstants, UIClass } from 'ngx-sfc-common';
 import { SideMenuItemType } from '../../../side-menu.model';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import * as i0 from "@angular/core";
-import * as i1 from "@fortawesome/angular-fontawesome";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "@fortawesome/angular-fontawesome";
 export class SideMenuItemContentComponent {
     constructor() {
         this.ANGLE_UP_ICON = faAngleUp;
@@ -28,9 +28,9 @@ export class SideMenuItemContentComponent {
         return this.openParent ? this.ANGLE_UP_ICON : this.ANGLE_DOWM_ICON;
     }
 }
-SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemContentComponent, decorators: [{
+SideMenuItemContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuItemContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: { item: "item", active: "active", open: "open", openParent: "openParent", hasChildren: "hasChildren" }, outputs: { selectItem: "selectItem" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.open": "this.open" } }, ngImport: i0, template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"], dependencies: [{ kind: "directive", type: i1.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: SideMenuItemContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu-item-content', template: "<li>\r\n    <div class=\"item-container\">\r\n        <div class=\"item\">\r\n            <a>\r\n                <fa-icon *ngIf=\"item.icon\" [icon]=\"item.icon\"></fa-icon>\r\n            </a>\r\n        </div>\r\n        <span class=\"label\">{{item.label}}</span>\r\n    </div>\r\n\r\n    <div *ngIf=\"hasChildren\" class=\"expand-container\">\r\n        <fa-icon [icon]=\"expandIcon\"></fa-icon>\r\n    </div>\r\n</li>", styles: [":host li{display:inline-flex;align-items:center;padding:0 1.25em 0 1.5em;cursor:pointer;width:calc(100% - 2.75em);justify-content:space-between}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host li .expand-container{visibility:hidden;opacity:0;width:0}:host li .expand-container>fa-icon{font-weight:700}:host li .item-container{display:inline-flex;align-items:center}:host li .item-container .item{width:2em;height:1.9em;display:flex;justify-content:center;border-radius:.7em;align-items:center}:host li .item-container .item a{border-radius:.45em;display:flex;align-items:center;justify-content:center;transition:.3s ease-in-out;font-size:1.3em;padding:.3em}:host li .item-container .item a>fa-icon{font-size:1em}:host li .item-container .label{font-weight:700;font-size:.9em;visibility:hidden;opacity:0;transition:color .3s,visibility .3s,opacity .5s ease-in-out;-webkit-user-select:none;user-select:none;width:0}:host.active li,:host:hover li{color:#fff}:host.active li .item-container .item a,:host:hover li .item-container .item a{background-color:#2bbbad;box-shadow:0 .3em 1em #2bbbad1a}:host.active li .item-container .label,:host:hover li .item-container .label{color:#2bbbad}:host.active li .expand-container,:host:hover li .expand-container{color:#2bbbad}:host.open li .item-container .item a{margin-right:1em}:host.open li .item-container .label{visibility:visible;opacity:1;width:auto}:host.open li .expand-container{width:auto;visibility:visible;opacity:1}:host :host-context(.children) li{margin:.2em 0}:host :host-context(.children) li .item-container .item a{padding:.3em;border-radius:.35em}:host :host-context(.children) li .item-container .item a>fa-icon{font-size:.5em}:host :host-context(.children) li .item-container .label{font-size:.8em}\n"] }]
         }], propDecorators: { item: [{

package/esm2020/lib/components/menu/side/parts/item/side-menu-item.component.mjs

@@ -3,8 +3,8 @@ import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/co
 import { any, CommonConstants, firstOrDefault, isDefined, UIClass } from 'ngx-sfc-common';
 import { SideMenuItemType } from '../../side-menu.model';
 import * as i0 from "@angular/core";
-import * as i1 from "./content/side-menu-item-content.component";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./content/side-menu-item-content.component";
 export class SideMenuItemComponent {
     constructor() {
         this.item = {
@@ -41,8 +41,8 @@ export class SideMenuItemComponent {
         this.selectItem.emit(child);
     }
 }
-SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n        [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n    </sfc-side-menu-item-content>\r\n\r\n    <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n\r\n        <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n            [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n        </sfc-side-menu-item-content>\r\n    </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"], components: [{ type: i1.SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: ["item", "active", "open", "openParent", "hasChildren"], outputs: ["selectItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+SideMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: { item: "item", open: "open" }, outputs: { selectItem: "selectItem" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-side-menu-item-content [item]=\"item\" [active]=\"isActive(item)\" [open]=\"open\" [openParent]=\"openParent\"\r\n        [hasChildren]=\"hasChildren(item)\" (selectItem)=\"onParentClick(item)\">\r\n    </sfc-side-menu-item-content>\r\n\r\n    <div class=\"children\" *ngIf=\"hasChildren(item) && openParent\" [@enterAnimation]>\r\n\r\n        <sfc-side-menu-item-content *ngFor=\"let child of item.items\" [item]=\"child\" [open]=\"open\"\r\n            [active]=\"isActive(child)\" [openParent]=\"true\" (selectItem)=\"onChildClick(item, child)\">\r\n        </sfc-side-menu-item-content>\r\n    </div>\r\n</div>", styles: [":host .container{margin-bottom:1em}:host .container .children{margin:1em 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.SideMenuItemContentComponent, selector: "sfc-side-menu-item-content", inputs: ["item", "active", "open", "openParent", "hasChildren"], outputs: ["selectItem"] }], animations: [
         trigger('enterAnimation', [
             transition(':enter', [
                 style({ transform: 'translateX(-20%)', opacity: 0 }),
@@ -54,7 +54,7 @@ SideMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             ])
         ])
     ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu-item', animations: [
                         trigger('enterAnimation', [
@@ -78,4 +78,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
             }], selectItem: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1tZW51LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9tZW51L3NpZGUvcGFydHMvaXRlbS9zaWRlLW1lbnUtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21lbnUvc2lkZS9wYXJ0cy9pdGVtL3NpZGUtbWVudS1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RixPQUFPLEVBQUUsR0FBRyxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFGLE9BQU8sRUFBc0IsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7OztBQXFCN0UsTUFBTSxPQUFPLHFCQUFxQjtJQW5CbEM7UUFzQkUsU0FBSSxHQUF1QjtZQUN6QixJQUFJLEVBQUUsU0FBUztZQUNmLEtBQUssRUFBRSxlQUFlLENBQUMsWUFBWTtZQUNuQyxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsSUFBSTtZQUMzQixLQUFLLEVBQUUsRUFBRTtZQUNULE1BQU0sRUFBRSxLQUFLO1NBQ2QsQ0FBQztRQUlGLFNBQUksR0FBWSxLQUFLLENBQUM7UUFHdEIsZUFBVSxHQUFxQyxJQUFJLFlBQVksRUFBc0IsQ0FBQztRQUV0RixlQUFVLEdBQVksS0FBSyxDQUFDO0tBNkI3QjtJQTNCQyxJQUFZLGNBQWM7UUFDeEIsT0FBTyxTQUFTLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsSUFBd0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7SUFDL0YsQ0FBQztJQUVELFdBQVcsQ0FBQyxJQUF3QjtRQUNsQyxPQUFPLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELFFBQVEsQ0FBQyxJQUF3QjtRQUMvQixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDO1lBQzNCLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVU7WUFDekMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUE7SUFDakIsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDeEMsQ0FBQztJQUVELGFBQWEsQ0FBQyxJQUF3QjtRQUNwQyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztRQUNuQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBRUQsWUFBWSxDQUFDLElBQXdCLEVBQUUsS0FBeUI7UUFDOUQsSUFBSSxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQzs7a0hBOUNVLHFCQUFxQjtzR0FBckIscUJBQXFCLDhMQ3hCbEMsOG9CQVdNLDZlREZRO1FBQ1YsT0FBTyxDQUNMLGdCQUFnQixFQUFFO1lBQ2xCLFVBQVUsQ0FBQyxRQUFRLEVBQUU7Z0JBQ25CLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUM7Z0JBQ3BELE9BQU8sQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2FBQ3JFLENBQUM7WUFDRixVQUFVLENBQUMsUUFBUSxFQUFFO2dCQUNuQixLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDO2dCQUNsRCxPQUFPLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzthQUN2RSxDQUFDO1NBQ0gsQ0FDQTtLQUNGOzJGQUVVLHFCQUFxQjtrQkFuQmpDLFNBQVM7K0JBQ0Usb0JBQW9CLGNBR2xCO3dCQUNWLE9BQU8sQ0FDTCxnQkFBZ0IsRUFBRTs0QkFDbEIsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQ0FDbkIsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGtCQUFrQixFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQztnQ0FDcEQsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7NkJBQ3JFLENBQUM7NEJBQ0YsVUFBVSxDQUFDLFFBQVEsRUFBRTtnQ0FDbkIsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQztnQ0FDbEQsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7NkJBQ3ZFLENBQUM7eUJBQ0gsQ0FDQTtxQkFDRjs4QkFLRCxJQUFJO3NCQURILEtBQUs7Z0JBV04sSUFBSTtzQkFGSCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsSUFBSTtnQkFJcEMsVUFBVTtzQkFEVCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYW5pbWF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgYW55LCBDb21tb25Db25zdGFudHMsIGZpcnN0T3JEZWZhdWx0LCBpc0RlZmluZWQsIFVJQ2xhc3MgfSBmcm9tICduZ3gtc2ZjLWNvbW1vbic7XHJcbmltcG9ydCB7IElTaWRlTWVudUl0ZW1Nb2RlbCwgU2lkZU1lbnVJdGVtVHlwZSB9IGZyb20gJy4uLy4uL3NpZGUtbWVudS5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1zaWRlLW1lbnUtaXRlbScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NpZGUtbWVudS1pdGVtLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zaWRlLW1lbnUtaXRlbS5jb21wb25lbnQuc2NzcyddLFxyXG4gIGFuaW1hdGlvbnM6IFtcclxuICAgIHRyaWdnZXIoXHJcbiAgICAgICdlbnRlckFuaW1hdGlvbicsIFtcclxuICAgICAgdHJhbnNpdGlvbignOmVudGVyJywgW1xyXG4gICAgICAgIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtMjAlKScsIG9wYWNpdHk6IDAgfSksXHJcbiAgICAgICAgYW5pbWF0ZSgnMzAwbXMnLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoMCUpJywgb3BhY2l0eTogMSB9KSlcclxuICAgICAgXSksXHJcbiAgICAgIHRyYW5zaXRpb24oJzpsZWF2ZScsIFtcclxuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoMCUpJywgb3BhY2l0eTogMSB9KSxcclxuICAgICAgICBhbmltYXRlKCczMDBtcycsIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtMjAlKScsIG9wYWNpdHk6IDAgfSkpXHJcbiAgICAgIF0pXHJcbiAgICBdXHJcbiAgICApXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2lkZU1lbnVJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KClcclxuICBpdGVtOiBJU2lkZU1lbnVJdGVtTW9kZWwgPSB7XHJcbiAgICBpY29uOiB1bmRlZmluZWQsXHJcbiAgICBsYWJlbDogQ29tbW9uQ29uc3RhbnRzLkVNUFRZX1NUUklORyxcclxuICAgIHR5cGU6IFNpZGVNZW51SXRlbVR5cGUuSXRlbSxcclxuICAgIGl0ZW1zOiBbXSxcclxuICAgIGFjdGl2ZTogZmFsc2VcclxuICB9O1xyXG5cclxuICBASW5wdXQoKVxyXG4gIEBIb3N0QmluZGluZygnY2xhc3MuJyArIFVJQ2xhc3MuT3BlbilcclxuICBvcGVuOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBPdXRwdXQoKVxyXG4gIHNlbGVjdEl0ZW06IEV2ZW50RW1pdHRlcjxJU2lkZU1lbnVJdGVtTW9kZWw+ID0gbmV3IEV2ZW50RW1pdHRlcjxJU2lkZU1lbnVJdGVtTW9kZWw+KCk7XHJcblxyXG4gIG9wZW5QYXJlbnQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgcHJpdmF0ZSBnZXQgaGFzQWN0aXZlQ2hpbGQoKSB7XHJcbiAgICByZXR1cm4gaXNEZWZpbmVkKGZpcnN0T3JEZWZhdWx0KHRoaXMuaXRlbS5pdGVtcywgKGl0ZW06IElTaWRlTWVudUl0ZW1Nb2RlbCkgPT4gaXRlbS5hY3RpdmUpKTtcclxuICB9XHJcblxyXG4gIGhhc0NoaWxkcmVuKGl0ZW06IElTaWRlTWVudUl0ZW1Nb2RlbCkge1xyXG4gICAgcmV0dXJuIGFueShpdGVtLml0ZW1zKTtcclxuICB9XHJcblxyXG4gIGlzQWN0aXZlKGl0ZW06IElTaWRlTWVudUl0ZW1Nb2RlbCkge1xyXG4gICAgcmV0dXJuIHRoaXMuaGFzQ2hpbGRyZW4oaXRlbSlcclxuICAgICAgPyB0aGlzLmhhc0FjdGl2ZUNoaWxkICYmICF0aGlzLm9wZW5QYXJlbnRcclxuICAgICAgOiBpdGVtLmFjdGl2ZVxyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLm9wZW5QYXJlbnQgPSB0aGlzLmhhc0FjdGl2ZUNoaWxkO1xyXG4gIH1cclxuXHJcbiAgb25QYXJlbnRDbGljayhpdGVtOiBJU2lkZU1lbnVJdGVtTW9kZWwpe1xyXG4gICAgdGhpcy5vcGVuUGFyZW50ID0gIXRoaXMub3BlblBhcmVudDtcclxuICAgIHRoaXMuc2VsZWN0SXRlbS5lbWl0KGl0ZW0pO1xyXG4gIH1cclxuXHJcbiAgb25DaGlsZENsaWNrKGl0ZW06IElTaWRlTWVudUl0ZW1Nb2RlbCwgY2hpbGQ6IElTaWRlTWVudUl0ZW1Nb2RlbCkge1xyXG4gICAgaXRlbS5pdGVtcz8uZm9yRWFjaCgoaXRlbSkgPT4gaXRlbS5hY3RpdmUgPSBmYWxzZSk7XHJcbiAgICB0aGlzLnNlbGVjdEl0ZW0uZW1pdChjaGlsZCk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjb250YWluZXJcIj5cclxuICAgIDxzZmMtc2lkZS1tZW51LWl0ZW0tY29udGVudCBbaXRlbV09XCJpdGVtXCIgW2FjdGl2ZV09XCJpc0FjdGl2ZShpdGVtKVwiIFtvcGVuXT1cIm9wZW5cIiBbb3BlblBhcmVudF09XCJvcGVuUGFyZW50XCJcclxuICAgICAgICBbaGFzQ2hpbGRyZW5dPVwiaGFzQ2hpbGRyZW4oaXRlbSlcIiAoc2VsZWN0SXRlbSk9XCJvblBhcmVudENsaWNrKGl0ZW0pXCI+XHJcbiAgICA8L3NmYy1zaWRlLW1lbnUtaXRlbS1jb250ZW50PlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJjaGlsZHJlblwiICpuZ0lmPVwiaGFzQ2hpbGRyZW4oaXRlbSkgJiYgb3BlblBhcmVudFwiIFtAZW50ZXJBbmltYXRpb25dPlxyXG5cclxuICAgICAgICA8c2ZjLXNpZGUtbWVudS1pdGVtLWNvbnRlbnQgKm5nRm9yPVwibGV0IGNoaWxkIG9mIGl0ZW0uaXRlbXNcIiBbaXRlbV09XCJjaGlsZFwiIFtvcGVuXT1cIm9wZW5cIlxyXG4gICAgICAgICAgICBbYWN0aXZlXT1cImlzQWN0aXZlKGNoaWxkKVwiIFtvcGVuUGFyZW50XT1cInRydWVcIiAoc2VsZWN0SXRlbSk9XCJvbkNoaWxkQ2xpY2soaXRlbSwgY2hpbGQpXCI+XHJcbiAgICAgICAgPC9zZmMtc2lkZS1tZW51LWl0ZW0tY29udGVudD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZS1tZW51LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9tZW51L3NpZGUvcGFydHMvaXRlbS9zaWRlLW1lbnUtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbXBvbmVudHMvc3JjL2xpYi9jb21wb25lbnRzL21lbnUvc2lkZS9wYXJ0cy9pdGVtL3NpZGUtbWVudS1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RixPQUFPLEVBQUUsR0FBRyxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzFGLE9BQU8sRUFBc0IsZ0JBQWdCLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQzs7OztBQXFCN0UsTUFBTSxPQUFPLHFCQUFxQjtJQW5CbEM7UUFzQkUsU0FBSSxHQUF1QjtZQUN6QixJQUFJLEVBQUUsU0FBUztZQUNmLEtBQUssRUFBRSxlQUFlLENBQUMsWUFBWTtZQUNuQyxJQUFJLEVBQUUsZ0JBQWdCLENBQUMsSUFBSTtZQUMzQixLQUFLLEVBQUUsRUFBRTtZQUNULE1BQU0sRUFBRSxLQUFLO1NBQ2QsQ0FBQztRQUlGLFNBQUksR0FBWSxLQUFLLENBQUM7UUFHdEIsZUFBVSxHQUFxQyxJQUFJLFlBQVksRUFBc0IsQ0FBQztRQUV0RixlQUFVLEdBQVks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O2dCQVdOLElBQUk7c0JBRkgsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLElBQUk7Z0JBSXBDLFVBQVU7c0JBRFQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IGFueSwgQ29tbW9uQ29uc3RhbnRzLCBmaXJzdE9yRGVmYXVsdCwgaXNEZWZpbmVkLCBVSUNsYXNzIH0gZnJvbSAnbmd4LXNmYy1jb21tb24nO1xyXG5pbXBvcnQgeyBJU2lkZU1lbnVJdGVtTW9kZWwsIFNpZGVNZW51SXRlbVR5cGUgfSBmcm9tICcuLi8uLi9zaWRlLW1lbnUubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtc2lkZS1tZW51LWl0ZW0nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zaWRlLW1lbnUtaXRlbS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2lkZS1tZW51LWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcclxuICBhbmltYXRpb25zOiBbXHJcbiAgICB0cmlnZ2VyKFxyXG4gICAgICAnZW50ZXJBbmltYXRpb24nLCBbXHJcbiAgICAgIHRyYW5zaXRpb24oJzplbnRlcicsIFtcclxuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTIwJSknLCBvcGFjaXR5OiAwIH0pLFxyXG4gICAgICAgIGFuaW1hdGUoJzMwMG1zJywgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAlKScsIG9wYWNpdHk6IDEgfSkpXHJcbiAgICAgIF0pLFxyXG4gICAgICB0cmFuc2l0aW9uKCc6bGVhdmUnLCBbXHJcbiAgICAgICAgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAlKScsIG9wYWNpdHk6IDEgfSksXHJcbiAgICAgICAgYW5pbWF0ZSgnMzAwbXMnLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTIwJSknLCBvcGFjaXR5OiAwIH0pKVxyXG4gICAgICBdKVxyXG4gICAgXVxyXG4gICAgKVxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFNpZGVNZW51SXRlbUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaXRlbTogSVNpZGVNZW51SXRlbU1vZGVsID0ge1xyXG4gICAgaWNvbjogdW5kZWZpbmVkLFxyXG4gICAgbGFiZWw6IENvbW1vbkNvbnN0YW50cy5FTVBUWV9TVFJJTkcsXHJcbiAgICB0eXBlOiBTaWRlTWVudUl0ZW1UeXBlLkl0ZW0sXHJcbiAgICBpdGVtczogW10sXHJcbiAgICBhY3RpdmU6IGZhbHNlXHJcbiAgfTtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLk9wZW4pXHJcbiAgb3BlbjogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBAT3V0cHV0KClcclxuICBzZWxlY3RJdGVtOiBFdmVudEVtaXR0ZXI8SVNpZGVNZW51SXRlbU1vZGVsPiA9IG5ldyBFdmVudEVtaXR0ZXI8SVNpZGVNZW51SXRlbU1vZGVsPigpO1xyXG5cclxuICBvcGVuUGFyZW50OiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIHByaXZhdGUgZ2V0IGhhc0FjdGl2ZUNoaWxkKCkge1xyXG4gICAgcmV0dXJuIGlzRGVmaW5lZChmaXJzdE9yRGVmYXVsdCh0aGlzLml0ZW0uaXRlbXMsIChpdGVtOiBJU2lkZU1lbnVJdGVtTW9kZWwpID0+IGl0ZW0uYWN0aXZlKSk7XHJcbiAgfVxyXG5cclxuICBoYXNDaGlsZHJlbihpdGVtOiBJU2lkZU1lbnVJdGVtTW9kZWwpIHtcclxuICAgIHJldHVybiBhbnkoaXRlbS5pdGVtcyk7XHJcbiAgfVxyXG5cclxuICBpc0FjdGl2ZShpdGVtOiBJU2lkZU1lbnVJdGVtTW9kZWwpIHtcclxuICAgIHJldHVybiB0aGlzLmhhc0NoaWxkcmVuKGl0ZW0pXHJcbiAgICAgID8gdGhpcy5oYXNBY3RpdmVDaGlsZCAmJiAhdGhpcy5vcGVuUGFyZW50XHJcbiAgICAgIDogaXRlbS5hY3RpdmVcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5vcGVuUGFyZW50ID0gdGhpcy5oYXNBY3RpdmVDaGlsZDtcclxuICB9XHJcblxyXG4gIG9uUGFyZW50Q2xpY2soaXRlbTogSVNpZGVNZW51SXRlbU1vZGVsKXtcclxuICAgIHRoaXMub3BlblBhcmVudCA9ICF0aGlzLm9wZW5QYXJlbnQ7XHJcbiAgICB0aGlzLnNlbGVjdEl0ZW0uZW1pdChpdGVtKTtcclxuICB9XHJcblxyXG4gIG9uQ2hpbGRDbGljayhpdGVtOiBJU2lkZU1lbnVJdGVtTW9kZWwsIGNoaWxkOiBJU2lkZU1lbnVJdGVtTW9kZWwpIHtcclxuICAgIGl0ZW0uaXRlbXM/LmZvckVhY2goKGl0ZW0pID0+IGl0ZW0uYWN0aXZlID0gZmFsc2UpO1xyXG4gICAgdGhpcy5zZWxlY3RJdGVtLmVtaXQoY2hpbGQpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgICA8c2ZjLXNpZGUtbWVudS1pdGVtLWNvbnRlbnQgW2l0ZW1dPVwiaXRlbVwiIFthY3RpdmVdPVwiaXNBY3RpdmUoaXRlbSlcIiBbb3Blbl09XCJvcGVuXCIgW29wZW5QYXJlbnRdPVwib3BlblBhcmVudFwiXHJcbiAgICAgICAgW2hhc0NoaWxkcmVuXT1cImhhc0NoaWxkcmVuKGl0ZW0pXCIgKHNlbGVjdEl0ZW0pPVwib25QYXJlbnRDbGljayhpdGVtKVwiPlxyXG4gICAgPC9zZmMtc2lkZS1tZW51LWl0ZW0tY29udGVudD5cclxuXHJcbiAgICA8ZGl2IGNsYXNzPVwiY2hpbGRyZW5cIiAqbmdJZj1cImhhc0NoaWxkcmVuKGl0ZW0pICYmIG9wZW5QYXJlbnRcIiBbQGVudGVyQW5pbWF0aW9uXT5cclxuXHJcbiAgICAgICAgPHNmYy1zaWRlLW1lbnUtaXRlbS1jb250ZW50ICpuZ0Zvcj1cImxldCBjaGlsZCBvZiBpdGVtLml0ZW1zXCIgW2l0ZW1dPVwiY2hpbGRcIiBbb3Blbl09XCJvcGVuXCJcclxuICAgICAgICAgICAgW2FjdGl2ZV09XCJpc0FjdGl2ZShjaGlsZClcIiBbb3BlblBhcmVudF09XCJ0cnVlXCIgKHNlbGVjdEl0ZW0pPVwib25DaGlsZENsaWNrKGl0ZW0sIGNoaWxkKVwiPlxyXG4gICAgICAgIDwvc2ZjLXNpZGUtbWVudS1pdGVtLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19

package/esm2020/lib/components/menu/side/parts/title/side-menu-title.component.mjs

@@ -8,9 +8,9 @@ export class SideMenuTitleComponent {
         this.open = false;
     }
 }
-SideMenuTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host.open li{transform:translate(30%)}\n"], components: [{ type: i1.DelimeterComponent, selector: "sfc-delimeter" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuTitleComponent, decorators: [{
+SideMenuTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: { label: "label", open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host.open li{transform:translate(30%)}\n"], dependencies: [{ kind: "component", type: i1.DelimeterComponent, selector: "sfc-delimeter" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu-title', template: "<sfc-delimeter></sfc-delimeter>\r\n<li><span>{{label}}</span></li>", styles: [":host li{text-transform:uppercase;font-weight:700;font-size:.65em;padding:1.25em 0;transform:translate(7%);display:inline-block;transition:transform .5s ease-in-out}:host li,:host-context(.sfc-default-theme) :host li{color:#545e61}:host-context(.sfc-dark-theme) :host li{color:#ccd1d9}:host.open li{transform:translate(30%)}\n"] }]
         }], propDecorators: { label: [{

package/esm2020/lib/components/menu/side/side-menu.component.mjs

@@ -2,10 +2,10 @@ import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/co
 import { any, UIClass } from 'ngx-sfc-common';
 import { SideMenuItemType } from './side-menu.model';
 import * as i0 from "@angular/core";
-import * as i1 from "./parts/header/side-menu-header.component";
-import * as i2 from "./parts/item/side-menu-item.component";
-import * as i3 from "./parts/title/side-menu-title.component";
-import * as i4 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./parts/header/side-menu-header.component";
+import * as i3 from "./parts/item/side-menu-item.component";
+import * as i4 from "./parts/title/side-menu-title.component";
 export class SideMenuComponent {
     constructor() {
         this.SideMenuItemType = SideMenuItemType;
@@ -31,9 +31,9 @@ export class SideMenuComponent {
         this.selected.emit(item);
     }
 }
-SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"], components: [{ type: i1.SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { type: i2.SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { type: i3.SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SideMenuComponent, decorators: [{
+SideMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SideMenuComponent, selector: "sfc-side-menu", inputs: { model: "model" }, outputs: { selected: "selected" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.SideMenuHeaderComponent, selector: "sfc-side-menu-header", inputs: ["label", "open"], outputs: ["toggle"] }, { kind: "component", type: i3.SideMenuItemComponent, selector: "sfc-side-menu-item", inputs: ["item", "open"], outputs: ["selectItem"] }, { kind: "component", type: i4.SideMenuTitleComponent, selector: "sfc-side-menu-title", inputs: ["label", "open"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SideMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-side-menu', template: "<div class=\"container\">\r\n    <ul>\r\n        <sfc-side-menu-header [open]=\"open\" (toggle)=\"open =!open\"></sfc-side-menu-header>\r\n\r\n        <ng-container *ngFor=\"let item of model.items\" [ngSwitch]=\"item.type\">\r\n            <sfc-side-menu-item *ngSwitchCase=\"SideMenuItemType.Item\" [item]=\"item\" [open]=\"open\"\r\n                (selectItem)=\"onItemSelect($event)\">\r\n            </sfc-side-menu-item>\r\n\r\n            <sfc-side-menu-title *ngSwitchCase=\"SideMenuItemType.Title\" [label]=\"item.label\" [open]=\"open\">\r\n            </sfc-side-menu-title>\r\n        </ng-container>\r\n    </ul>\r\n</div>", styles: [":host .container{width:5em;overflow:hidden;transition:width .5s ease-in-out}:host .container,:host-context(.sfc-default-theme) :host .container{background:#f5f7fa}:host-context(.sfc-dark-theme) :host .container{background:#1b1d1f}:host .container ul{margin:0;padding:0;list-style:none;overflow:hidden;display:flex;flex-direction:column}:host.open .container{width:11.25em}\n"] }]
         }], propDecorators: { model: [{

package/esm2020/lib/components/notification/notification.component.mjs

@@ -3,9 +3,9 @@ import { isDefined, TemplateReferenceDirective } from 'ngx-sfc-common';
 import { NotificationTemplate } from './enums/notification-template.enum';
 import { NotificationType } from './enums/notification-type.enum';
 import * as i0 from "@angular/core";
-import * as i1 from "ngx-sfc-common";
-import * as i2 from "./parts/content/notification-content.component";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "ngx-sfc-common";
+import * as i3 from "./parts/content/notification-content.component";
 export class NotificationComponent {
     constructor() {
         this.AUTO_CLOSE_INTERVAL_DEFAULT = 5000;
@@ -38,9 +38,9 @@ export class NotificationComponent {
         this.closed.emit();
     }
 }
-NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NotificationComponent, selector: "sfc-notification", inputs: { showClose: "showClose", autoCloseModel: "autoCloseModel", type: "type", model: "model", content: "content" }, outputs: { closed: "closed", buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"], components: [{ type: i1.CloseComponent, selector: "sfc-close" }, { type: i1.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: i2.NotificationContentComponent, selector: "sfc-notification-content", inputs: ["type", "model"], outputs: ["buttonClicked"] }], directives: [{ type: i1.DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: ["sfcDestroyParent", "delay"] }, { type: i1.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationComponent, decorators: [{
+NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationComponent, selector: "sfc-notification", inputs: { showClose: "showClose", autoCloseModel: "autoCloseModel", type: "type", model: "model", content: "content" }, outputs: { closed: "closed", buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "directive", type: i2.DestroyParentDirective, selector: "[sfcDestroyParent]", inputs: ["sfcDestroyParent", "delay"] }, { kind: "component", type: i2.CloseComponent, selector: "sfc-close" }, { kind: "component", type: i2.TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { kind: "component", type: i3.NotificationContentComponent, selector: "sfc-notification-content", inputs: ["type", "model"], outputs: ["buttonClicked"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-notification', template: "<div class=\"container\" [sfcDestroyParent]=\"destroy\" [delay]=\"DESTROY_HOST_INTERVAL\">\r\n    <div class=\"notification\" [sfcShowHideElement]=\"show\">\r\n        <sfc-close *ngIf=\"showClose\" (click)=\"close()\"></sfc-close>\r\n\r\n        <sfc-template-content [referenceContent]=\"content\" [templatesContent]=\"templates\"\r\n            [templateType]=\"NotificationTemplate.Content\" [defaultContent]=\"defaultContent\">\r\n        </sfc-template-content>\r\n\r\n        <ng-template #defaultContent>\r\n            <sfc-notification-content [type]=\"type\" [model]=\"model\" (buttonClicked)=\"buttonClicked.emit()\">\r\n            </sfc-notification-content>\r\n        </ng-template>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block}:host .container .notification{border-radius:1.25em;box-shadow:5px 5px 20px #656d78;padding:1em;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#f5f7fa}:host .container .notification sfc-close{align-self:end}:host .container .notification ::ng-deep sfc-close{color:#f5f7fa}:host .container .notification ::ng-deep sfc-close:hover{color:#fff}:host.info .container .notification{background:linear-gradient(to bottom right,#4fc1e9 40%,#4a89dc 100%)}:host.success .container .notification{background:linear-gradient(to bottom right,#b0db7d 40%,#99dbb4 100%)}:host.failed .container .notification{background:linear-gradient(to bottom left,#ef8d9c 40%,#ffc39e 100%)}\n"] }]
         }], propDecorators: { showClose: [{

package/esm2020/lib/components/notification/parts/content/notification-content.component.mjs

@@ -2,9 +2,9 @@ import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/co
 import { ButtonType, isDefined, isNullOrEmptyString } from 'ngx-sfc-common';
 import { NotificationType } from '../../enums/notification-type.enum';
 import * as i0 from "@angular/core";
-import * as i1 from "@fortawesome/angular-fontawesome";
-import * as i2 from "ngx-sfc-common";
-import * as i3 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "@fortawesome/angular-fontawesome";
+import * as i3 from "ngx-sfc-common";
 export class NotificationContentComponent {
     constructor() {
         this.ButtonType = ButtonType;
@@ -16,9 +16,9 @@ export class NotificationContentComponent {
         return !isNullOrEmptyString(this.model.image) && !isDefined(this.model.icon);
     }
 }
-NotificationContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: { type: "type", model: "model" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotificationContentComponent, decorators: [{
+NotificationContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotificationContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NotificationContentComponent, selector: "sfc-notification-content", inputs: { type: "type", model: "model" }, outputs: { buttonClicked: "buttonClicked" }, host: { properties: { "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\n"], dependencies: [{ kind: "directive", type: i1.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: "component", type: i3.ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NotificationContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-notification-content', template: "<div class=\"container\">\r\n    <div class=\"illustration\">\r\n        <div *ngIf=\"model.icon\">\r\n            <fa-icon [icon]=\"model.icon\"></fa-icon>\r\n        </div>\r\n        <div *ngIf=\"showImage\">\r\n            <img [src]=\"model.image\">\r\n        </div>\r\n    </div>\r\n    <div class=\"message\">\r\n        <h1>{{model.title}}</h1>\r\n        <p>{{model.subTitle}}</p>\r\n    </div>\r\n    <div *ngIf=\"model.showButton\" class=\"action\">\r\n        <sfc-button text=\"{{model.buttonText || type}}\" [types]=\"[ButtonType.Rounded, ButtonType.Filled]\"\r\n            (click)=\"buttonClicked.emit()\"></sfc-button>\r\n    </div>\r\n</div>", styles: [":host{display:inline-block;font-size:3em}:host.info ::ng-deep sfc-button .button.filled{color:#4fc1e9!important}:host.success ::ng-deep sfc-button .button.filled{color:#4ec07d!important}:host.failed ::ng-deep sfc-button .button.filled{color:#e96075!important}:host .container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host .container .illustration{color:#f5f7fa;display:flex;justify-content:center;align-items:center;font-size:.7em}:host .container .illustration img{object-fit:contain;width:3em;height:3em}:host .container .message{text-align:center;-webkit-user-select:none;user-select:none}:host .container .message h1{font-size:.4em;color:#f5f7fa;font-weight:700;letter-spacing:.3em;text-transform:uppercase}:host .container .message p{font-size:.2em;font-weight:100;color:#434a54;letter-spacing:.1em}:host .container .action{font-size:.25em}:host .container .action ::ng-deep sfc-button{transition:transform .3s ease-in-out}:host .container .action ::ng-deep sfc-button .button.filled{background:#f5f7fa;border:solid .125em #f5f7fa}:host .container .action ::ng-deep sfc-button:hover{transform:scale(1.05)}\n"] }]
         }], propDecorators: { type: [{

package/esm2020/lib/components/progress/circle/progress-circle.component.mjs

@@ -11,11 +11,11 @@ export class ProgressCircleComponent extends ProgressBaseComponent {
         return `rotate(${getCssLikeValue((this.progress * 360) / CommonConstants.FULL_PERCENTAGE, UIConstants.CSS_DEGREES)})`;
     }
 }
-ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressCircleComponent, selector: "sfc-progress-circle", host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressCircleComponent, decorators: [{
+ProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressCircleComponent, selector: "sfc-progress-circle", host: { properties: { "class.reversed": "this.reversed" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host.reversed .container .circle .fill,:host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
+            args: [{ selector: 'sfc-progress-circle', template: "<div class=\"container\" [style.background]=\"background\">\r\n    <span>{{progress}}</span>\r\n    <div class=\"circle\">\r\n        <div class=\"bar\" [ngStyle]=\"{'transform': transformRotate, \r\n            'border-color': getColor(progress)}\"></div>\r\n        <div class=\"fill\" [ngStyle]=\"{'border-color': getColor(progress)}\"></div>\r\n    </div>\r\n</div>", styles: [":host .container .circle .bar{position:absolute;border:.09em solid;clip:rect(0,.5em,1em,0);border-radius:50%;width:.82em;height:.82em}:host .container{position:relative;border-radius:50%;background:#e6e9ed;font-size:5em;text-align:initial;width:1em;height:1em}:host .container:after{position:absolute;top:.082em;left:.09em;content:\" \";border-radius:50%;background:#fff;transition-property:all;transition-duration:.2s;transition-timing-function:ease-in;width:.83em;height:.83em}:host .container span{position:absolute;z-index:1;width:5em;line-height:5em;font-size:.2em;color:#545e61;font-weight:700;text-align:center;white-space:nowrap;-webkit-user-select:none;user-select:none;transition-property:all;transition-duration:.2s;transition-timing-function:ease-out}:host .container:hover:after{top:.07em;left:.07em;width:.86em;height:.86em}:host .container:hover span{width:3.33em;line-height:3.33em;font-size:.3em}:host .container .circle{position:absolute;clip:rect(0,1em,1em,.5em);width:1em;height:1em}:host .container .circle .bar{transition:transform .2s ease-out,border-color .2s ease-out}:host.reversed .container .circle{clip:rect(auto,auto,auto,auto)}:host.reversed .container .circle .fill{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { reversed: [{
                 type: HostBinding,
                 args: ['class.reversed']

package/esm2020/lib/components/progress/line/progress-line.component.mjs

@@ -23,9 +23,9 @@ export class ProgressLineComponent extends ProgressBaseComponent {
         };
     }
 }
-ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressLineComponent, decorators: [{
+ProgressLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ProgressLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ProgressLineComponent, selector: "sfc-progress-line", inputs: { total: "total", labelStart: "labelStart", labelEnd: "labelEnd", hideEnd: "hideEnd" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressLineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-progress-line', template: "<div class=\"container\">\r\n    <div class=\"labels\">\r\n        <span>{{labelStart}}</span>\r\n        <span *ngIf=\"!hideEnd\">{{label}}</span>\r\n    </div>\r\n    <div class=\"progress-bar\" [style.background]=\"background\">\r\n        <div class=\"progress\" [ngStyle]=\"progressStyles\"></div>\r\n    </div>\r\n</div>", styles: [":host{width:100%}:host .container .progress-bar{border-radius:.5em;background:#e6e9ed}:host .container .progress-bar .progress{height:.4em;border-radius:.5em;background-image:linear-gradient(to bottom,rgba(255,255,255,.3),rgba(255,255,255,.05));transition:.4s linear;transition-property:width,background-color}:host .container .labels{display:flex;justify-content:space-between;margin-bottom:.3em;font-weight:700;-webkit-user-select:none;user-select:none;font-size:.8em}:host .container .labels,:host-context(.sfc-default-theme) :host .container .labels{color:#545e61}:host-context(.sfc-dark-theme) :host .container .labels{color:#ccd1d9}\n"] }]
         }], propDecorators: { total: [{

package/esm2020/lib/components/progress/progress.component.mjs

@@ -36,9 +36,9 @@ export class ProgressBaseComponent {
         }
     }
 }
-ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ProgressBaseComponent, decorators: [{
+ProgressBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ProgressBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ProgressBaseComponent, inputs: { progress: "progress", background: "background", getColor: "getColor" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ProgressBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { progress: [{
                 type: Input