ngx-sfc-common 0.0.16 → 0.0.17

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

@@ -23,10 +23,10 @@ export class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host-context(.sfc-default-theme)>:host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{color:#fff}:host-context(.sfc-default-theme)>:host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host:hover .button.filled{color:#fff!important;border-color:#ffce54;background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme)>:host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{color:#fff}:host-context(.sfc-default-theme)>:host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme)>:host .button.circled{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{color:#fff}:host-context(.sfc-default-theme)>:host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host-context(.sfc-default-theme)>:host .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host-context(.sfc-default-theme)>:host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{color:#656d78}:host-context(.sfc-default-theme)>:host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>    ", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme)>:host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme)>:host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host:hover .button.filled{color:#fff!important;border-color:#ffce54;background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme)>:host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme)>:host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme)>:host .button.circled{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme)>:host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme)>:host .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme)>:host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme)>:host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host-context(.sfc-default-theme)>:host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{color:#fff}:host-context(.sfc-default-theme)>:host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host:hover .button.filled{color:#fff!important;border-color:#ffce54;background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme)>:host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{color:#fff}:host-context(.sfc-default-theme)>:host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme)>:host .button.circled{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{color:#fff}:host-context(.sfc-default-theme)>:host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host-context(.sfc-default-theme)>:host .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host-context(.sfc-default-theme)>:host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{color:#656d78}:host-context(.sfc-default-theme)>:host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{label}}</span>\r\n    <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>    ", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme)>:host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme)>:host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host:hover .button.filled{color:#fff!important;border-color:#ffce54;background:#ffce54}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme)>:host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme)>:host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme)>:host .button.circled{color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme)>:host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme)>:host .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial;text-overflow:ellipsis;overflow:hidden}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme)>:host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme)>:host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{
@@ -41,4 +41,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], types: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7OztBQVFoRCxNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQU9tQix3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFheEQsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUcxQixVQUFLLEdBQXNCLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0tBZWxEO0lBYkMsSUFBSSxLQUFLO1FBQ1AsT0FBTyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7WUFDaEcsQ0FBQyxDQUFDLElBQUksQ0FBQyxtQkFBbUI7WUFDMUIsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDaEIsQ0FBQztJQUVELElBQUksT0FBTztRQUNULE1BQU0sT0FBTyxHQUFRLEVBQUUsQ0FBQztRQUV4QixRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUUzRCxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDOzs0R0FoQ1UsZUFBZTtnR0FBZixlQUFlLGlPQ1g1QixzUkFJSTsyRkRPUyxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVk7OEJBU3RCLElBQUk7c0JBREgsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBSU4sU0FBUztzQkFEUixLQUFLO2dCQUtOLFFBQVE7c0JBRlAsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxTQUFTLE9BQU8sQ0FBQyxRQUFRLEVBQUU7Z0JBSXhDLEtBQUs7c0JBREosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFVJQ2xhc3MgfSBmcm9tICcuLi8uLi9lbnVtcyc7XHJcbmltcG9ydCB7IGRpc3RpbmN0LCBpc0RlZmluZWQsIGlzTnVsbE9yRW1wdHlTdHJpbmcgfSBmcm9tICcuLi8uLi91dGlscyc7XHJcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tICcuL2J1dHRvbi10eXBlLmVudW0nO1xyXG5pbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29ucyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1idXR0b24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xyXG5cclxuICBwcml2YXRlIHJlYWRvbmx5IEJVVFRPTl9ERUZBVUxUX1RFWFQ6IHN0cmluZyA9ICdCdXR0b24nO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIHRleHQhOiBzdHJpbmc7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbkJlZm9yZT86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGljb25BZnRlcj86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIEBIb3N0QmluZGluZyhgY2xhc3MuJHtVSUNsYXNzLkRpc2FibGVkfWApXHJcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICB0eXBlczogQXJyYXk8QnV0dG9uVHlwZT4gPSBbQnV0dG9uVHlwZS5Cb3JkZXJlZF07XHJcblxyXG4gIGdldCBsYWJlbCgpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIGlzTnVsbE9yRW1wdHlTdHJpbmcodGhpcy50ZXh0KSAmJiAhaXNEZWZpbmVkKHRoaXMuaWNvbkJlZm9yZSkgJiYgIWlzRGVmaW5lZCh0aGlzLmljb25BZnRlcilcclxuICAgICAgPyB0aGlzLkJVVFRPTl9ERUZBVUxUX1RFWFRcclxuICAgICAgOiB0aGlzLnRleHQ7XHJcbiAgfVxyXG5cclxuICBnZXQgY2xhc3NlcygpIHtcclxuICAgIGNvbnN0IGNsYXNzZXM6IGFueSA9IHt9O1xyXG5cclxuICAgIGRpc3RpbmN0KHRoaXMudHlwZXMpLmZvckVhY2godHlwZSA9PiBjbGFzc2VzW3R5cGVdID0gdHJ1ZSk7XHJcblxyXG4gICAgcmV0dXJuIGNsYXNzZXM7XHJcbiAgfVxyXG59XHJcbiIsIjxhIGNsYXNzPVwiYnV0dG9uXCIgW25nQ2xhc3NdPVwiY2xhc3Nlc1wiPlxyXG4gICAgPGZhLWljb24gKm5nSWY9XCJpY29uQmVmb3JlXCIgY2xhc3M9XCJpY29uIGJlZm9yZVwiIFtpY29uXT1cImljb25CZWZvcmVcIj48L2ZhLWljb24+XHJcbiAgICA8c3BhbiBjbGFzcz1cInRleHRcIj57e2xhYmVsfX08L3NwYW4+XHJcbiAgICA8ZmEtaWNvbiAqbmdJZj1cImljb25BZnRlclwiIGNsYXNzPVwiaWNvbiBhZnRlclwiIFtpY29uXT1cImljb25BZnRlclwiPjwvZmEtaWNvbj5cclxuPC9hPiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sYUFBYSxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7OztBQVFoRCxNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQU9tQix3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFheEQsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUcxQixVQUFLLEdBQXNCLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0tBZWxEO0lBYkMsSUFBSSxLQUFLO1FBQ1AsT0FBTyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7WUFDaEcsQ0FBQyxDQUFDLElBQUksQ0FBQyxtQkFBbUI7WUFDMUIsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDaEIsQ0FBQztJQUVELElBQUksT0FBTztRQUNULE1BQU0sT0FBTyxHQUFRLEVBQUUsQ0FBQztRQUV4QixRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUUzRCxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDOzs0R0FoQ1UsZUFBZTtnR0FBZixlQUFlLGlPQ1g1QiwwUkFJUTsyRkRPSyxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVk7OEJBU3RCLElBQUk7c0JBREgsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBSU4sU0FBUztzQkFEUixLQUFLO2dCQUtOLFFBQVE7c0JBRlAsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxTQUFTLE9BQU8sQ0FBQyxRQUFRLEVBQUU7Z0JBSXhDLEtBQUs7c0JBREosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFVJQ2xhc3MgfSBmcm9tICcuLi8uLi9lbnVtcyc7XHJcbmltcG9ydCB7IGRpc3RpbmN0LCBpc0RlZmluZWQsIGlzTnVsbE9yRW1wdHlTdHJpbmcgfSBmcm9tICcuLi8uLi91dGlscyc7XHJcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tICcuL2J1dHRvbi10eXBlLmVudW0nO1xyXG5pbXBvcnQgeyBJY29uRGVmaW5pdGlvbiB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29ucyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1idXR0b24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2J1dHRvbi5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xyXG5cclxuICBwcml2YXRlIHJlYWRvbmx5IEJVVFRPTl9ERUZBVUxUX1RFWFQ6IHN0cmluZyA9ICdCdXR0b24nO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIHRleHQhOiBzdHJpbmc7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbkJlZm9yZT86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGljb25BZnRlcj86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIEBIb3N0QmluZGluZyhgY2xhc3MuJHtVSUNsYXNzLkRpc2FibGVkfWApXHJcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICB0eXBlczogQXJyYXk8QnV0dG9uVHlwZT4gPSBbQnV0dG9uVHlwZS5Cb3JkZXJlZF07XHJcblxyXG4gIGdldCBsYWJlbCgpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIGlzTnVsbE9yRW1wdHlTdHJpbmcodGhpcy50ZXh0KSAmJiAhaXNEZWZpbmVkKHRoaXMuaWNvbkJlZm9yZSkgJiYgIWlzRGVmaW5lZCh0aGlzLmljb25BZnRlcilcclxuICAgICAgPyB0aGlzLkJVVFRPTl9ERUZBVUxUX1RFWFRcclxuICAgICAgOiB0aGlzLnRleHQ7XHJcbiAgfVxyXG5cclxuICBnZXQgY2xhc3NlcygpIHtcclxuICAgIGNvbnN0IGNsYXNzZXM6IGFueSA9IHt9O1xyXG5cclxuICAgIGRpc3RpbmN0KHRoaXMudHlwZXMpLmZvckVhY2godHlwZSA9PiBjbGFzc2VzW3R5cGVdID0gdHJ1ZSk7XHJcblxyXG4gICAgcmV0dXJuIGNsYXNzZXM7XHJcbiAgfVxyXG59XHJcbiIsIjxhIGNsYXNzPVwiYnV0dG9uXCIgW25nQ2xhc3NdPVwiY2xhc3Nlc1wiPlxyXG4gICAgPGZhLWljb24gKm5nSWY9XCJpY29uQmVmb3JlXCIgY2xhc3M9XCJpY29uIGJlZm9yZVwiIFtpY29uXT1cImljb25CZWZvcmVcIj48L2ZhLWljb24+XHJcbiAgICA8c3BhbiBjbGFzcz1cInRleHRcIj57e2xhYmVsfX08L3NwYW4+XHJcbiAgICA8ZmEtaWNvbiAqbmdJZj1cImljb25BZnRlclwiIGNsYXNzPVwiaWNvbiBhZnRlclwiIFtpY29uXT1cImljb25BZnRlclwiPjwvZmEtaWNvbj5cclxuPC9hPiAgICAiXX0=

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

@@ -15,10 +15,10 @@ export class CheckmarkComponent {
     }
 }
 CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type", showNotActive: "showNotActive" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host-context(.sfc-default-theme)>:host{color:#545e61}:host-context(.sfc-dark-theme)>:host{color:#fff}:host .check{border:.125em solid;background:transparent;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host-context(.sfc-default-theme)>:host .check{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host-context(.sfc-default-theme)>:host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme)>:host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host-context(.sfc-default-theme)>:host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme)>:host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host-context(.sfc-default-theme)>:host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .check{border-color:#656d78}:host-context(.sfc-default-theme)>:host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i1.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: i2.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
+CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", disabled: "disabled", icon: "icon", type: "type", showNotActive: "showNotActive" }, host: { properties: { "class.active": "this.active", "class.disabled": "this.disabled", "class": "this.type" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme)>:host{color:#545e61}:host-context(.sfc-dark-theme)>:host{color:#fff}:host .check{border:.125em solid;background:transparent;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme)>:host .check{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme)>:host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme)>:host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme)>:host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme)>:host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme)>:host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme)>:host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled.active .check{background:#656d78}\n"], dependencies: [{ kind: "component", type: i1.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: i2.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host-context(.sfc-default-theme)>:host{color:#545e61}:host-context(.sfc-dark-theme)>:host{color:#fff}:host .check{border:.125em solid;background:transparent;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host-context(.sfc-default-theme)>:host .check{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host-context(.sfc-default-theme)>:host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme)>:host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host-context(.sfc-default-theme)>:host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme)>:host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host-context(.sfc-default-theme)>:host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .check{border-color:#656d78}:host-context(.sfc-default-theme)>:host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled.active .check{background:#656d78}\n"] }]
+            args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n    <span class=\"check\">\r\n        <fa-icon [sfcShowHideElement]=\"showNotActive || active\" [icon]=\"icon\"></fa-icon>\r\n    </span>\r\n</div>", styles: [":host{display:inline-block}:host,:host-context(.sfc-default-theme)>:host{color:#545e61}:host-context(.sfc-dark-theme)>:host{color:#fff}:host .check{border:.125em solid;background:transparent;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check,:host-context(.sfc-default-theme)>:host .check{border-color:#545e61}:host-context(.sfc-dark-theme)>:host .check{border-color:#fff}:host .check fa-icon{font-size:.8em;transition:opacity .3s ease}:host .check fa-icon,:host-context(.sfc-default-theme)>:host .check fa-icon{opacity:.5}:host-context(.sfc-dark-theme)>:host .check fa-icon{opacity:.8}:host .check:hover{border-color:#ffce54}:host .check:hover fa-icon{color:#ffce54}:host .check:hover fa-icon,:host-context(.sfc-default-theme)>:host .check:hover fa-icon{opacity:.8}:host-context(.sfc-dark-theme)>:host .check:hover fa-icon{opacity:1}:host.active .check{border-color:#ffce54;background:#ffce54}:host.active .check fa-icon{opacity:1;transform:scale(0);color:#fff;-webkit-text-stroke:0;animation:icon .3s cubic-bezier(1,.008,.565,1.65) .1s 1 forwards}@keyframes icon{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}:host.circle .check{border-radius:50%}:host.rounded .check{border-radius:15%}:host.disabled{pointer-events:none}:host.disabled .check{color:#fff;border-style:dashed}:host.disabled .check,:host-context(.sfc-default-theme)>:host.disabled .check{border-color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .check{border-color:#656d78}:host.disabled.active .check,:host-context(.sfc-default-theme)>:host.disabled.active .check{background:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled.active .check{background:#656d78}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {

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

@@ -10,10 +10,10 @@ export class DelimeterComponent {
     ;
 }
 DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", inputs: { label: "label", direction: "direction" }, host: { properties: { "class": "this.direction", "class.empty": "this._empty" } }, ngImport: i0, template: `<span>{{label}}</span>`, isInline: true, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host-context(.sfc-default-theme)>:host span{color:#545e61}:host-context(.sfc-dark-theme)>:host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host-context(.sfc-default-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host-context(.sfc-default-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host-context(.sfc-default-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] });
+DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DelimeterComponent, selector: "sfc-delimeter", inputs: { label: "label", direction: "direction" }, host: { properties: { "class": "this.direction", "class.empty": "this._empty" } }, ngImport: i0, template: `<span>{{label}}</span>`, isInline: true, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host span,:host-context(.sfc-default-theme)>:host span{color:#545e61}:host-context(.sfc-dark-theme)>:host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host.vertical span:before,:host-context(.sfc-default-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host.vertical span:after,:host-context(.sfc-default-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before,:host-context(.sfc-default-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after,:host-context(.sfc-default-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-delimeter', template: `<span>{{label}}</span>`, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host-context(.sfc-default-theme)>:host span{color:#545e61}:host-context(.sfc-dark-theme)>:host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host-context(.sfc-default-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host-context(.sfc-default-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host-context(.sfc-default-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host-context(.sfc-default-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] }]
+            args: [{ selector: 'sfc-delimeter', template: `<span>{{label}}</span>`, styles: [":host{padding:.3em 0}:host span{font-size:.8em}:host span,:host-context(.sfc-default-theme)>:host span{color:#545e61}:host-context(.sfc-dark-theme)>:host span{color:#fff}:host.vertical{display:inline-table;text-align:center;height:100%;min-height:4em;padding:0 .3em}:host.vertical span{position:relative;display:table-cell;vertical-align:middle}:host.vertical span:before,:host.vertical span:after{position:absolute;content:\"\";left:50%;border-left:1px solid}:host.vertical span:before{bottom:50%;top:0;margin-bottom:.8em}:host.vertical span:before,:host-context(.sfc-default-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:before{border-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical span:after{top:50%;bottom:0;margin-top:.8em}:host.vertical span:after,:host-context(.sfc-default-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 1 100%}:host-context(.sfc-dark-theme)>:host.vertical span:after{border-image:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 1 100%}:host.vertical.empty{min-height:2em}:host.vertical.empty span:before{margin-bottom:0}:host.vertical.empty span:after{margin-top:0}:host.horizontal{display:flex;align-items:center;text-align:center;-webkit-user-select:none;user-select:none}:host.horizontal:before,:host-context(.sfc-default-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:before{border-image:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:after,:host-context(.sfc-default-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 47%,rgba(0,0,0,.3) 53%,rgba(0,0,0,.3) 100%) 100% 1}:host-context(.sfc-dark-theme)>:host.horizontal:after{border-image:linear-gradient(to left,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 47%,rgba(255,255,255,.4) 53%,rgba(255,255,255,.4) 100%) 100% 1}:host.horizontal:before,:host.horizontal:after{content:\"\";flex:1;border-bottom:1px solid}:host.horizontal.empty span{display:none}:host.horizontal:not(.empty):before{margin-right:.5em}:host.horizontal:not(.empty):after{margin-left:.5em}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], direction: [{

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

@@ -9,10 +9,10 @@ export class DotsComponent {
     }
 }
 DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme)>:host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme)>:host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host-context(.sfc-default-theme)>:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme)>:host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme)>:host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme)>:host:focus .container .dots-container .dot{background:#ffce54}\n"] });
+DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme)>:host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme)>:host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme)>:host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme)>:host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme)>:host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme)>:host:focus .container .dots-container .dot{background:#ffce54}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DotsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme)>:host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme)>:host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host-context(.sfc-default-theme)>:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme)>:host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme)>:host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme)>:host:focus .container .dots-container .dot{background:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n    <div class=\"dots-container\">\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n        <div class=\"dot\"></div>\r\n    </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme)>:host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme)>:host .container .dots-container .dot{background:#fff}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme)>:host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme)>:host:focus .container .dots-container .dot{background:#ffce54}:host-context(.sfc-dark-theme)>:host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme)>:host:focus .container .dots-container .dot{background:#ffce54}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {

package/esm2020/lib/components/hamburger/default/hamburger.component.mjs

@@ -4,9 +4,9 @@ import * as i0 from "@angular/core";
 export class HamburgerComponent extends HamburgerBaseComponent {
 }
 HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerComponent, selector: "sfc-hamburger", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme)>.container .line{background-color:#545e61}:host-context(.sfc-dark-theme)>.container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] });
+HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerComponent, selector: "sfc-hamburger", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme)>.container .line{background-color:#545e61}:host-context(.sfc-dark-theme)>.container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme)>.container .line{background-color:#545e61}:host-context(.sfc-dark-theme)>.container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] }]
+            args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme)>.container .line{background-color:#545e61}:host-context(.sfc-dark-theme)>.container .line{background-color:#fff}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1375em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#ffce54!important}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGFtYnVyZ2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9oYW1idXJnZXIvZGVmYXVsdC9oYW1idXJnZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21tb24vc3JjL2xpYi9jb21wb25lbnRzL2hhbWJ1cmdlci9kZWZhdWx0L2hhbWJ1cmdlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDZCQUE2QixDQUFDOztBQU9yRSxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsc0JBQXNCOzsrR0FBakQsa0JBQWtCO21HQUFsQixrQkFBa0IsNEVDUi9CLCtKQUlNOzJGRElPLGtCQUFrQjtrQkFMOUIsU0FBUzsrQkFDRSxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEhhbWJ1cmdlckJhc2VDb21wb25lbnQgfSBmcm9tICcuLi9oYW1idXJnZXItYmFzZS5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtaGFtYnVyZ2VyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGFtYnVyZ2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9oYW1idXJnZXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSGFtYnVyZ2VyQ29tcG9uZW50IGV4dGVuZHMgSGFtYnVyZ2VyQmFzZUNvbXBvbmVudCB7IH1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImxpbmUgaGFsZiBzdGFydFwiPjwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cImxpbmVcIj48L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJsaW5lIGhhbGYgZW5kXCI+PC9kaXY+XHJcbjwvZGl2PiJdfQ==

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

@@ -8,10 +8,10 @@ export class HamburgerMenuComponent extends HamburgerBaseComponent {
     }
 }
 HamburgerMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HamburgerMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerMenuComponent, selector: "sfc-hamburger-menu", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;display:block;height:.125em;margin-bottom:.1875em;transition:all ease-in-out .4s}:host-context(.sfc-default-theme)>:host .container span{background:#545e61}:host-context(.sfc-dark-theme)>:host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out;background:none!important;opacity:1;text-transform:uppercase}:host-context(.sfc-default-theme)>:host .container span.text{color:#545e61}:host-context(.sfc-dark-theme)>:host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] });
+HamburgerMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HamburgerMenuComponent, selector: "sfc-hamburger-menu", inputs: { label: "label" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;display:block;height:.125em;margin-bottom:.1875em;transition:all ease-in-out .4s}:host .container span,:host-context(.sfc-default-theme)>:host .container span{background:#545e61}:host-context(.sfc-dark-theme)>:host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme)>:host .container span.text{color:#545e61}:host-context(.sfc-dark-theme)>:host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HamburgerMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-hamburger-menu', template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;display:block;height:.125em;margin-bottom:.1875em;transition:all ease-in-out .4s}:host-context(.sfc-default-theme)>:host .container span{background:#545e61}:host-context(.sfc-dark-theme)>:host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out;background:none!important;opacity:1;text-transform:uppercase}:host-context(.sfc-default-theme)>:host .container span.text{color:#545e61}:host-context(.sfc-dark-theme)>:host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] }]
+            args: [{ selector: 'sfc-hamburger-menu', template: "<div class=\"container\">\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span> &nbsp;</span>\r\n    <span class=\"text\">{{label}}</span>\r\n</div>", styles: [":host .container{display:inline-block;cursor:pointer}:host .container span{position:relative;display:block;height:.125em;margin-bottom:.1875em;transition:all ease-in-out .4s}:host .container span,:host-context(.sfc-default-theme)>:host .container span{background:#545e61}:host-context(.sfc-dark-theme)>:host .container span{background:#fff}:host .container span.text{font-size:.4375em;letter-spacing:.4px;transition:opacity 1s ease-in-out;background:none!important;opacity:1;text-transform:uppercase}:host .container span.text,:host-context(.sfc-default-theme)>:host .container span.text{color:#545e61}:host-context(.sfc-dark-theme)>:host .container span.text{color:#fff}:host .container:hover span{background:#ffce54}:host .container:hover span.text{color:#ffce54}:host.open .container span:nth-child(1){transform:rotate(-45deg);top:.625em}:host.open .container span:nth-child(2),:host.open .container span:nth-child(3){width:0;opacity:0}:host.open .container span:nth-child(4){transform:rotate(45deg);top:-.3125em}:host.open .container span.text{opacity:0}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }] } });

package/esm2020/lib/components/load-more-button/load-more-button.component.mjs

@@ -17,10 +17,10 @@ export class LoadMoreButtonComponent {
     }
 }
 LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host-context(.sfc-default-theme)>:host .container .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1.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: i2.MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme)>:host .container .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1.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: i2.MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: i3.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host-context(.sfc-default-theme)>:host .container .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme)>:host .container .button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{

package/esm2020/lib/components/loader/bounce/bounce-loader.component.mjs

@@ -5,9 +5,9 @@ import * as i1 from "@angular/common";
 export class BounceLoaderComponent extends LoaderBaseComponent {
 }
 BounceLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme)>.spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme)>.spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme)>.spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme)>.spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BounceLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme)>.spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme)>.spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
+            args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"spinner\">\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n        <div class=\"bounce\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme)>.spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme)>.spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm91bmNlLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbW1vbi9zcmMvbGliL2NvbXBvbmVudHMvbG9hZGVyL2JvdW5jZS9ib3VuY2UtbG9hZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9sb2FkZXIvYm91bmNlL2JvdW5jZS1sb2FkZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQzs7O0FBTy9ELE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxtQkFBbUI7O2tIQUFqRCxxQkFBcUI7c0dBQXJCLHFCQUFxQixnRkNSbEMsaVFBTU07MkZERU8scUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLG1CQUFtQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBMb2FkZXJCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi4vbG9hZGVyLWJhc2UuY29tcG9uZW50JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ZjLWJvdW5jZS1sb2FkZXInLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9ib3VuY2UtbG9hZGVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi4vc3R5bGVzL2xvYWRlci1iYXNlLmNvbXBvbmVudC5zY3NzJywgJy4vYm91bmNlLWxvYWRlci5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCb3VuY2VMb2FkZXJDb21wb25lbnQgZXh0ZW5kcyBMb2FkZXJCYXNlQ29tcG9uZW50IHtcclxufVxyXG4iLCI8ZGl2ICpuZ0lmPVwic2hvdyQgfCBhc3luY1wiIGNsYXNzPVwicHJlbG9hZGVyXCIgW25nQ2xhc3NdPVwicHJlTG9hZGVyQ2xhc3Nlc1wiPlxyXG4gICAgPGRpdiBjbGFzcz1cInNwaW5uZXJcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiYm91bmNlXCI+PC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImJvdW5jZVwiPjwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJib3VuY2VcIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=

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

@@ -10,10 +10,10 @@ export class CircleLoaderComponent extends LoaderBaseComponent {
     }
 }
 CircleLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme)>.circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme)>.circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme)>.circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme)>.circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CircleLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme)>.circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme)>.circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
+            args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n    <div class=\"circles-container\" [ngClass]=\"type\">\r\n        <div class=\"circle1\"></div>\r\n        <div class=\"circle2\"></div>\r\n        <div class=\"circle3\"></div>\r\n        <div class=\"circle4\"></div>\r\n        <div class=\"circle5\"></div>\r\n        <div class=\"circle6\"></div>\r\n        <div class=\"circle7\"></div>\r\n        <div class=\"circle8\"></div>\r\n        <div class=\"circle9\"></div>\r\n        <div class=\"circle10\"></div>\r\n        <div class=\"circle11\"></div>\r\n        <div class=\"circle12\"></div>\r\n    </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme)>.preloader.background{background-color:#fff}:host-context(.sfc-dark-theme)>.preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme)>.circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme)>.circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }] } });

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

@@ -88,10 +88,10 @@ export class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: i1.PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host-context(.sfc-default-theme)>:host .container ul li button,:host-context(.sfc-default-theme)>:host .container ul li span{color:#0009}:host-context(.sfc-dark-theme)>:host .container ul li button,:host-context(.sfc-dark-theme)>:host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host-context(.sfc-default-theme)>:host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host-context(.sfc-default-theme)>:host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:before{background:#f5f7fa}:host-context(.sfc-default-theme)>:host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host-context(.sfc-default-theme)>:host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme)>:host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: 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: i4.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: i5.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme)>:host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme)>:host .container ul li span{color:#0009}:host-context(.sfc-dark-theme)>:host .container ul li button,:host-context(.sfc-dark-theme)>:host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme)>:host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme)>:host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme)>:host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme)>:host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme)>:host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: 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: i4.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: i5.DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host-context(.sfc-default-theme)>:host .container ul li button,:host-context(.sfc-default-theme)>:host .container ul li span{color:#0009}:host-context(.sfc-dark-theme)>:host .container ul li button,:host-context(.sfc-dark-theme)>:host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host-context(.sfc-default-theme)>:host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host-context(.sfc-default-theme)>:host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:before{background:#f5f7fa}:host-context(.sfc-default-theme)>:host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host-context(.sfc-default-theme)>:host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme)>:host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"vm.any\">\r\n        <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"vm.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n            <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n            <button>{{vm.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme)>:host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme)>:host .container ul li span{color:#0009}:host-context(.sfc-dark-theme)>:host .container ul li button,:host-context(.sfc-dark-theme)>:host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme)>:host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme)>:host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme)>:host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme)>:host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme)>:host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme)>:host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PaginationService }]; }, propDecorators: { count: [{
                 type: Input
             }], full: [{

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

@@ -50,10 +50,10 @@ export class SortingComponent {
     }
 }
 SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: i1.SortingService }], target: i0.ɵɵFactoryTarget.Component });
-SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host-context(.sfc-default-theme)>:host .container{color:#545e61}:host-context(.sfc-dark-theme)>:host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: 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"] }] });
+SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme)>:host .container{color:#545e61}:host-context(.sfc-dark-theme)>:host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host-context(.sfc-default-theme)>:host .container{color:#545e61}:host-context(.sfc-dark-theme)>:host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-sorting', template: "<div class=\"container\">\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n    <div *ngIf=\"enabled\" class=\"icons\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n    </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme)>:host .container{color:#545e61}:host-context(.sfc-dark-theme)>:host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SortingService }]; }, propDecorators: { id: [{
                 type: Input
             }], model: [{

package/esm2020/lib/components/toggle-switcher/toggle-switcher.component.mjs

@@ -13,10 +13,10 @@ export class ToggleSwitcherComponent {
     }
 }
 ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p fa-icon{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host-context(.sfc-default-theme)>:host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme)>:host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host-context(.sfc-default-theme)>:host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme)>:host.disabled .container .toggle{background-color:#aab2bd}:host-context(.sfc-default-theme)>:host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .container .names{color:#e9e9e9}\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"] }] });
+ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", disabled: "disabled", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active", "class.disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p fa-icon{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container,:host-context(.sfc-default-theme)>:host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme)>:host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme)>:host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme)>:host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names,:host-context(.sfc-default-theme)>:host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .container .names{color:#e9e9e9}\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: ToggleSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p fa-icon{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host-context(.sfc-default-theme)>:host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme)>:host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host-context(.sfc-default-theme)>:host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme)>:host.disabled .container .toggle{background-color:#aab2bd}:host-context(.sfc-default-theme)>:host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .container .names{color:#e9e9e9}\n"] }]
+            args: [{ selector: 'sfc-toggle-switcher', template: "<div class=\"container\">\r\n    <div class=\"toggle\"></div>\r\n    <div class=\"names\">\r\n        <p class=\"left\">\r\n            <fa-icon *ngIf=\"leftModel.icon\" [icon]=\"leftModel.icon\"></fa-icon>\r\n            <span>{{leftModel.label}}</span>\r\n        </p>\r\n        <p class=\"right\">\r\n            <fa-icon *ngIf=\"rightModel.icon\" [icon]=\"rightModel.icon\"></fa-icon>\r\n            <span>{{rightModel.label}}</span>\r\n        </p>\r\n    </div>\r\n</div>", styles: [":host .container,:host .toggle{height:100%;border-radius:100px}:host .container{width:100%;background-color:#e6e9ed;color:#545e61;border-radius:100px;position:relative;cursor:pointer}:host .container .toggle{position:absolute;width:50%;background-color:#fff;box-shadow:0 .125em .5em #656d78;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}:host .container .names{font-size:90%;font-weight:bolder;width:100%;height:100%;position:relative;display:flex;justify-content:space-around;align-items:center;-webkit-user-select:none;user-select:none;overflow:hidden}:host .container .names p{font-size:90%;text-align:center;margin:0;padding:.5em 1em}:host .container .names p.right{opacity:.5}:host .container .names p fa-icon{margin-right:.25em}:host.active .container{background-color:#e6e9ed}:host.active .container .toggle{transform:translate(100%);background-color:#fff}:host.active .container .names{color:#545e61}:host.active .container .names .left{opacity:.5}:host.active .container .names .right{opacity:1}:host.disabled{pointer-events:none}:host.disabled .container,:host-context(.sfc-default-theme)>:host.disabled .container{background-color:#f6f6f6}:host-context(.sfc-dark-theme)>:host.disabled .container{background-color:#656d78}:host.disabled .container .toggle{box-shadow:none}:host.disabled .container .toggle,:host-context(.sfc-default-theme)>:host.disabled .container .toggle{background-color:#e6e9ed}:host-context(.sfc-dark-theme)>:host.disabled .container .toggle{background-color:#aab2bd}:host.disabled .container .names,:host-context(.sfc-default-theme)>:host.disabled .container .names{color:#bdbdbd}:host-context(.sfc-dark-theme)>:host.disabled .container .names{color:#e9e9e9}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { active: [{
                 type: Input
             }, {