ngx-sfc-common 0.0.13 → 0.0.14

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 .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;width:100%;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"] }] });
+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 .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;width:100%;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"] }]
+            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: [{

package/fesm2015/ngx-sfc-common.mjs

@@ -1563,10 +1563,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n    <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n    <span class=\"text\">{{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;width:100%;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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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"] }] });
+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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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: 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 .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;width:100%;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"] }]
+            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: [{