ngx-sfc-common 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/button/button.component.mjs +9 -5
- package/esm2020/lib/directives/click-outside/click-outside.directive.mjs +3 -5
- package/esm2020/lib/ngx-sfc-common.module.mjs +1 -5
- package/fesm2015/ngx-sfc-common.mjs +9 -11
- package/fesm2015/ngx-sfc-common.mjs.map +1 -1
- package/fesm2020/ngx-sfc-common.mjs +9 -11
- package/fesm2020/ngx-sfc-common.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +1 -0
- package/lib/directives/click-outside/click-outside.directive.d.ts +3 -3
- package/lib/ngx-sfc-common.module.d.ts +2 -3
- package/package.json +1 -1
|
@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Pipe, Component, HostBinding, ContentChildren, ViewChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
5
|
-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
6
5
|
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
7
6
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
8
7
|
import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY, combineLatest, tap, switchMap, withLatestFrom, of } from 'rxjs';
|
|
@@ -297,11 +296,9 @@ class ClickOutsideDirective {
|
|
|
297
296
|
*/
|
|
298
297
|
this.action = new EventEmitter();
|
|
299
298
|
}
|
|
300
|
-
|
|
299
|
+
ngAfterViewInit() {
|
|
301
300
|
this._clickSubscription = fromEvent(this.document, 'click')
|
|
302
|
-
.subscribe(event =>
|
|
303
|
-
this.onClick(event);
|
|
304
|
-
});
|
|
301
|
+
.subscribe(event => this.onClick(event));
|
|
305
302
|
}
|
|
306
303
|
ngOnDestroy() {
|
|
307
304
|
this._clickSubscription?.unsubscribe();
|
|
@@ -1495,10 +1492,14 @@ var ButtonType;
|
|
|
1495
1492
|
class ButtonComponent {
|
|
1496
1493
|
constructor() {
|
|
1497
1494
|
this.BUTTON_DEFAULT_TEXT = 'Button';
|
|
1498
|
-
this.text = this.BUTTON_DEFAULT_TEXT;
|
|
1499
1495
|
this.disabled = false;
|
|
1500
1496
|
this.types = [ButtonType.Bordered];
|
|
1501
1497
|
}
|
|
1498
|
+
get label() {
|
|
1499
|
+
return isNullOrEmptyString(this.text) && !isDefined(this.iconBefore) && !isDefined(this.iconAfter)
|
|
1500
|
+
? this.BUTTON_DEFAULT_TEXT
|
|
1501
|
+
: this.text;
|
|
1502
|
+
}
|
|
1502
1503
|
get classes() {
|
|
1503
1504
|
const classes = {};
|
|
1504
1505
|
distinct(this.types).forEach(type => classes[type] = true);
|
|
@@ -1506,10 +1507,10 @@ class ButtonComponent {
|
|
|
1506
1507
|
}
|
|
1507
1508
|
}
|
|
1508
1509
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1509
|
-
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\">{{
|
|
1510
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, host: { properties: { "class.disabled": "this.disabled" } }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n <span class=\"text\">{{label}}</span>\r\n <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host .button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
1510
1511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1511
1512
|
type: Component,
|
|
1512
|
-
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\">{{
|
|
1513
|
+
args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n <fa-icon *ngIf=\"iconBefore\" class=\"icon before\" [icon]=\"iconBefore\"></fa-icon>\r\n <span class=\"text\">{{label}}</span>\r\n <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [":host .button.bordered{border:solid 2px}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{color:#fff}:host .button.bordered,:host-context(.sfc-default-theme) :host .button.bordered{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.bordered{border-color:#fff}:host .button.filled{color:#fff!important;border-color:#545e61;background:#545e61}:host .button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}:host.disabled .button{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}:host .button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{color:#fff}:host .button.rounded,:host-context(.sfc-default-theme) :host .button.rounded{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.rounded{border-color:#fff}:host .button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{color:#fff}:host .button.circled,:host-context(.sfc-default-theme) :host .button.circled{border-color:#545e61}:host-context(.sfc-dark-theme) :host .button.circled{border-color:#fff}:host .button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}:host .button{box-sizing:border-box;display:inline-flex;justify-content:center;flex-wrap:wrap;align-items:center;overflow:hidden;text-align:center;text-decoration:none;white-space:nowrap;font-size:.9em;cursor:pointer;-webkit-user-select:none;user-select:none;width:inherit;transition:color .5s ease,border-color .5s ease,background .5s ease}:host .button,:host-context(.sfc-default-theme) :host .button{color:#545e61}:host-context(.sfc-dark-theme) :host .button{color:#fff}:host .button .icon{padding:3px}:host .button .text{padding:3px;white-space:initial}:host .button .text:empty{display:none}:host.disabled{pointer-events:none}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{color:#656d78}:host.disabled .button,:host-context(.sfc-default-theme) :host.disabled .button{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .button{border-color:#656d78}:host:not(.disabled):hover .button{color:#ffce54;border-color:#ffce54}\n"] }]
|
|
1513
1514
|
}], propDecorators: { text: [{
|
|
1514
1515
|
type: Input
|
|
1515
1516
|
}], iconBefore: [{
|
|
@@ -2686,7 +2687,6 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
2686
2687
|
DefaultModalFooterComponent,
|
|
2687
2688
|
// pipes
|
|
2688
2689
|
SwitchMultiCasePipe], imports: [CommonModule,
|
|
2689
|
-
BrowserAnimationsModule,
|
|
2690
2690
|
FontAwesomeModule], exports: [
|
|
2691
2691
|
// directives
|
|
2692
2692
|
ClickOutsideDirective,
|
|
@@ -2727,7 +2727,6 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
|
|
|
2727
2727
|
// pipes
|
|
2728
2728
|
SwitchMultiCasePipe] });
|
|
2729
2729
|
NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [CommonModule,
|
|
2730
|
-
BrowserAnimationsModule,
|
|
2731
2730
|
FontAwesomeModule] });
|
|
2732
2731
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
|
|
2733
2732
|
type: NgModule,
|
|
@@ -2774,7 +2773,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
2774
2773
|
],
|
|
2775
2774
|
imports: [
|
|
2776
2775
|
CommonModule,
|
|
2777
|
-
BrowserAnimationsModule,
|
|
2778
2776
|
FontAwesomeModule
|
|
2779
2777
|
],
|
|
2780
2778
|
exports: [
|