ngx-sfc-common 0.0.10 → 0.0.12
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/checkmark/checkmark-type.enum.mjs +2 -1
- package/esm2020/lib/components/checkmark/checkmark.component.mjs +5 -5
- package/esm2020/lib/components/delimeter/delimeter.component.mjs +2 -2
- package/esm2020/lib/components/load-container/load-container.component.mjs +2 -2
- package/esm2020/lib/components/load-more-button/load-more-button.component.mjs +2 -2
- package/esm2020/lib/directives/image-size/image-load.directive.mjs +24 -8
- package/esm2020/lib/directives/image-size/services/image-load.event.mjs +1 -1
- package/esm2020/lib/directives/image-size/services/image-load.service.mjs +1 -1
- package/esm2020/lib/directives/image-size/services/image-size.model.mjs +2 -0
- package/esm2020/lib/directives/index.mjs +1 -1
- package/fesm2015/ngx-sfc-common.mjs +38 -22
- package/fesm2015/ngx-sfc-common.mjs.map +1 -1
- package/fesm2020/ngx-sfc-common.mjs +38 -22
- package/fesm2020/ngx-sfc-common.mjs.map +1 -1
- package/lib/components/checkmark/checkmark-type.enum.d.ts +2 -1
- package/lib/directives/image-size/image-load.directive.d.ts +3 -2
- package/lib/directives/image-size/services/image-load.event.d.ts +3 -2
- package/lib/directives/image-size/services/image-size.model.d.ts +4 -0
- package/lib/directives/index.d.ts +2 -1
- package/package.json +1 -1
- package/styles/_mixins.scss +19 -0
|
@@ -2,7 +2,7 @@ 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 * as
|
|
5
|
+
import * as i3 from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
7
7
|
import { Subject, fromEvent, Observable, distinctUntilChanged, startWith, BehaviorSubject, filter, map, EMPTY, combineLatest, tap, switchMap, withLatestFrom, of } from 'rxjs';
|
|
8
8
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -1489,22 +1489,37 @@ class ImageLoadDirective {
|
|
|
1489
1489
|
constructor(el, loadService) {
|
|
1490
1490
|
this.el = el;
|
|
1491
1491
|
this.loadService = loadService;
|
|
1492
|
+
this.action = new EventEmitter();
|
|
1492
1493
|
}
|
|
1493
|
-
onLoad() {
|
|
1494
|
-
const
|
|
1495
|
-
|
|
1494
|
+
onLoad(event) {
|
|
1495
|
+
const loadEvent = {
|
|
1496
|
+
natural: {
|
|
1497
|
+
height: this.el.nativeElement.naturalHeight,
|
|
1498
|
+
width: this.el.nativeElement.naturalWidth
|
|
1499
|
+
},
|
|
1500
|
+
offset: {
|
|
1501
|
+
height: this.el.nativeElement.offsetHeight,
|
|
1502
|
+
width: this.el.nativeElement.offsetWidth
|
|
1503
|
+
}
|
|
1504
|
+
};
|
|
1505
|
+
this.loadService.load(loadEvent);
|
|
1506
|
+
if (isDefined(this.action))
|
|
1507
|
+
this.action.emit(event);
|
|
1496
1508
|
}
|
|
1497
1509
|
}
|
|
1498
1510
|
ImageLoadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadDirective, deps: [{ token: i0.ElementRef }, { token: ImageLoadService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1499
|
-
ImageLoadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ImageLoadDirective, selector: "[sfcImageLoad]", host: { listeners: { "load": "onLoad()" } }, ngImport: i0 });
|
|
1511
|
+
ImageLoadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: ImageLoadDirective, selector: "[sfcImageLoad]", outputs: { action: "sfcImageLoad" }, host: { listeners: { "load": "onLoad($event)" } }, ngImport: i0 });
|
|
1500
1512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ImageLoadDirective, decorators: [{
|
|
1501
1513
|
type: Directive,
|
|
1502
1514
|
args: [{
|
|
1503
1515
|
selector: '[sfcImageLoad]'
|
|
1504
1516
|
}]
|
|
1505
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ImageLoadService }]; }, propDecorators: {
|
|
1517
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ImageLoadService }]; }, propDecorators: { action: [{
|
|
1518
|
+
type: Output,
|
|
1519
|
+
args: ['sfcImageLoad']
|
|
1520
|
+
}], onLoad: [{
|
|
1506
1521
|
type: HostListener,
|
|
1507
|
-
args: ['load']
|
|
1522
|
+
args: ['load', ['$event']]
|
|
1508
1523
|
}] } });
|
|
1509
1524
|
|
|
1510
1525
|
class SwitchMultiCasePipe {
|
|
@@ -1548,7 +1563,7 @@ class ButtonComponent {
|
|
|
1548
1563
|
}
|
|
1549
1564
|
}
|
|
1550
1565
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1551
|
-
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}: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:
|
|
1566
|
+
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}: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"] }] });
|
|
1552
1567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1553
1568
|
type: Component,
|
|
1554
1569
|
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}: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"] }]
|
|
@@ -1646,10 +1661,10 @@ class DelimeterComponent {
|
|
|
1646
1661
|
;
|
|
1647
1662
|
}
|
|
1648
1663
|
DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
-
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.
|
|
1664
|
+
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"] });
|
|
1650
1665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DelimeterComponent, decorators: [{
|
|
1651
1666
|
type: Component,
|
|
1652
|
-
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.
|
|
1667
|
+
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"] }]
|
|
1653
1668
|
}], propDecorators: { label: [{
|
|
1654
1669
|
type: Input
|
|
1655
1670
|
}], direction: [{
|
|
@@ -1878,7 +1893,7 @@ class CloseComponent {
|
|
|
1878
1893
|
}
|
|
1879
1894
|
}
|
|
1880
1895
|
CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1881
|
-
CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type:
|
|
1896
|
+
CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
1882
1897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CloseComponent, decorators: [{
|
|
1883
1898
|
type: Component,
|
|
1884
1899
|
args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#ffce54}\n"] }]
|
|
@@ -1906,7 +1921,7 @@ class DefaultModalHeaderComponent {
|
|
|
1906
1921
|
}
|
|
1907
1922
|
}
|
|
1908
1923
|
DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1909
|
-
DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"model?.icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n <sfc-close *ngIf=\"model?.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container .icon{font-size:1em;padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container sfc-close{padding-left:.7em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
1924
|
+
DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"model?.icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n <sfc-close *ngIf=\"model?.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container .icon{font-size:1em;padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container sfc-close{padding-left:.7em}\n"], dependencies: [{ 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"] }, { kind: "component", type: CloseComponent, selector: "sfc-close" }] });
|
|
1910
1925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
|
|
1911
1926
|
type: Component,
|
|
1912
1927
|
args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"model?.icon\" class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <span *ngIf=\"model?.text\" class=\"label\">{{model?.text}}</span>\r\n <sfc-close *ngIf=\"model?.showCloseIcon\" (click)=\"onClose()\"></sfc-close>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;align-items:flex-start;width:100%;justify-content:space-between}:host .container .icon{font-size:1em;padding-right:.7em}:host .container .label{font-size:1.2em;font-weight:700;-webkit-user-select:none;user-select:none;padding:0 .7em}:host .container sfc-close{padding-left:.7em}\n"] }]
|
|
@@ -2191,7 +2206,7 @@ class ToggleSwitcherComponent {
|
|
|
2191
2206
|
}
|
|
2192
2207
|
}
|
|
2193
2208
|
ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2194
|
-
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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
2209
|
+
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$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"] }] });
|
|
2195
2210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
|
|
2196
2211
|
type: Component,
|
|
2197
2212
|
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"] }]
|
|
@@ -2218,6 +2233,7 @@ var CheckmarkType;
|
|
|
2218
2233
|
(function (CheckmarkType) {
|
|
2219
2234
|
CheckmarkType["Square"] = "square";
|
|
2220
2235
|
CheckmarkType["Rounded"] = "rounded";
|
|
2236
|
+
CheckmarkType["Circle"] = "circle";
|
|
2221
2237
|
})(CheckmarkType || (CheckmarkType = {}));
|
|
2222
2238
|
|
|
2223
2239
|
class CheckmarkComponent {
|
|
@@ -2230,10 +2246,10 @@ class CheckmarkComponent {
|
|
|
2230
2246
|
}
|
|
2231
2247
|
}
|
|
2232
2248
|
CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2233
|
-
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
|
|
2249
|
+
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: 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: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }] });
|
|
2234
2250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CheckmarkComponent, decorators: [{
|
|
2235
2251
|
type: Component,
|
|
2236
|
-
args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n <span class=\"check\">\r\n <fa-icon
|
|
2252
|
+
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"] }]
|
|
2237
2253
|
}], propDecorators: { active: [{
|
|
2238
2254
|
type: Input
|
|
2239
2255
|
}, {
|
|
@@ -2382,7 +2398,7 @@ class PaginationComponent {
|
|
|
2382
2398
|
}
|
|
2383
2399
|
}
|
|
2384
2400
|
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2385
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <sfc-delimeter></sfc-delimeter>\r\n <ul *ngIf=\"vm.any\">\r\n <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n <button class=\"limit\">\r\n <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n </button>\r\n </li>\r\n <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n <button>1</button>\r\n </li>\r\n <li *ngIf=\"vm.firstPage\">\r\n <span>...</span>\r\n </li>\r\n <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n </li>\r\n <li *ngIf=\"vm.lastPage\">\r\n <span>...</span>\r\n </li>\r\n <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n <button>{{vm.total}}</button>\r\n </li>\r\n <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n <button class=\"limit\">\r\n <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n </button>\r\n </li>\r\n </ul>\r\n <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
2401
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", data$: "data$" }, ngImport: i0, template: "<div class=\"container\" *ngIf=\"vm$ | async as vm\">\r\n <sfc-delimeter></sfc-delimeter>\r\n <ul *ngIf=\"vm.any\">\r\n <li [sfcShowHideElement]=\"vm.previousPage\" (click)=\"onPageClick(vm.previous)\">\r\n <button class=\"limit\">\r\n <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n </button>\r\n </li>\r\n <li *ngIf=\"vm.firstPage\" (click)=\"onPageClick(1)\">\r\n <button>1</button>\r\n </li>\r\n <li *ngIf=\"vm.firstPage\">\r\n <span>...</span>\r\n </li>\r\n <li *ngFor=\"let page of vm.range\" (click)=\"onPageClick(page)\">\r\n <button [class.active]=\"vm.page === page\">{{page}}</button>\r\n </li>\r\n <li *ngIf=\"vm.lastPage\">\r\n <span>...</span>\r\n </li>\r\n <li *ngIf=\"vm.lastPage\" (click)=\"onPageClick(vm.total)\">\r\n <button>{{vm.total}}</button>\r\n </li>\r\n <li [sfcShowHideElement]=\"vm.nextPage\" (click)=\"onPageClick(vm.next)\">\r\n <button class=\"limit\">\r\n <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n </button>\r\n </li>\r\n </ul>\r\n <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
|
|
2386
2402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
2387
2403
|
type: Component,
|
|
2388
2404
|
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"] }]
|
|
@@ -2462,7 +2478,7 @@ class SortingComponent {
|
|
|
2462
2478
|
}
|
|
2463
2479
|
}
|
|
2464
2480
|
SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2465
|
-
SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div *ngIf=\"enabled\" class=\"icons\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
2481
|
+
SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SortingComponent, selector: "sfc-sorting", inputs: { id: "id", model: "model" }, host: { listeners: { "click": "sort()" }, properties: { "class.enabled": "this.enabled", "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div *ngIf=\"enabled\" class=\"icons\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host .container,:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#fff}:host .container:hover{color:#ffce54}:host .container .content{display:flex;-webkit-user-select:none;user-select:none}:host .container .icons{margin:0 .31em;font-size:.7em;display:flex;align-items:center;transition:all .3s}:host.active .container{color:#ffce54}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
2466
2482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SortingComponent, decorators: [{
|
|
2467
2483
|
type: Component,
|
|
2468
2484
|
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"] }]
|
|
@@ -2528,10 +2544,10 @@ class LoadMoreButtonComponent {
|
|
|
2528
2544
|
}
|
|
2529
2545
|
}
|
|
2530
2546
|
LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2531
|
-
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;
|
|
2547
|
+
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: 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: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
|
|
2532
2548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
|
|
2533
2549
|
type: Component,
|
|
2534
|
-
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;
|
|
2550
|
+
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"] }]
|
|
2535
2551
|
}], propDecorators: { label: [{
|
|
2536
2552
|
type: Input
|
|
2537
2553
|
}], icon: [{
|
|
@@ -2635,10 +2651,10 @@ class LoadContainerComponent {
|
|
|
2635
2651
|
}
|
|
2636
2652
|
}
|
|
2637
2653
|
LoadContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, deps: [{ token: LoaderService }, { token: LoadMoreService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2638
|
-
LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", size: "size", loadMore: "loadMore", showEmpty: "showEmpty", showLoadMoreButton: "showLoadMoreButton", loadMoreLabel: "loadMoreLabel", notFoundLabel: "notFoundLabel", model: "model", scrollTarget: "scrollTarget" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n <ng-content></ng-content>\r\n <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n </sfc-load-more-button>\r\n <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit
|
|
2654
|
+
LoadContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadContainerComponent, selector: "sfc-load-container", inputs: { id: "id", type: "type", open: "open", size: "size", loadMore: "loadMore", showEmpty: "showEmpty", showLoadMoreButton: "showLoadMoreButton", loadMoreLabel: "loadMoreLabel", notFoundLabel: "notFoundLabel", model: "model", scrollTarget: "scrollTarget" }, outputs: { handleError: "handleError", handleSuccess: "handleSuccess", handleLoading: "handleLoading" }, host: { properties: { "class": "this.type", "class.open": "this.open", "class.empty": "this.isEmpty", "class.loading": "this._loading" } }, providers: [LoadMoreService], viewQueries: [{ propertyName: "contentEl", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n <ng-content></ng-content>\r\n <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n </sfc-load-more-button>\r\n <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:rgba(0,0,0,.1)}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "directive", type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }, { kind: "directive", type: ScrollTrackerDirective, selector: "[sfcScrollTracker]", inputs: ["positions"], outputs: ["sfcScrollTracker"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[sfcScrollIntoView]", inputs: ["sfcScrollIntoView", "options"] }, { kind: "component", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: ["label", "icon"], outputs: ["more"] }, { kind: "component", type: BounceLoaderComponent, selector: "sfc-bounce-loader" }] });
|
|
2639
2655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadContainerComponent, decorators: [{
|
|
2640
2656
|
type: Component,
|
|
2641
|
-
args: [{ selector: 'sfc-load-container', providers: [LoadMoreService], template: "<div class=\"container\">\r\n <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n <ng-content></ng-content>\r\n <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n </sfc-load-more-button>\r\n <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit
|
|
2657
|
+
args: [{ selector: 'sfc-load-container', providers: [LoadMoreService], template: "<div class=\"container\">\r\n <sfc-bounce-loader [id]=\"id\" [sfcComponentSize]=\"ComponentSize.Small\"></sfc-bounce-loader>\r\n <div #content class=\"content\" [sfcScrollIntoView]=\"scrollTarget\" (sfcScrollTracker)=\"onScroll()\" [positions]=\"scrollPosition\">\r\n <ng-content></ng-content>\r\n <div (sfcMouseDown)=\"$event.preventDefault()\">\r\n <sfc-load-more-button [hidden]=\"hideLoadMoreButton\" (more)=\"more($event)\" [label]=\"loadMoreLabel\">\r\n </sfc-load-more-button>\r\n <div *ngIf=\"isEmpty\" class=\"empty\">{{notFoundLabel}}</div>\r\n </div>\r\n </div>\r\n</div>", styles: [":host{width:100%;height:inherit;position:relative}:host .container{height:inherit}:host .container .content{cursor:initial;overflow-y:auto;height:inherit}:host .container .content .empty{display:flex;align-items:center;justify-content:center;color:#545e61;cursor:default;height:100%;font-size:.8em;-webkit-user-select:none;user-select:none;padding:.7em}:host.dropdown .container .content{display:none;opacity:0;max-height:12.5em;box-shadow:0 .125em .125em #00000024,0 .18em .06em -.125em #0000001f,0 .06em .31em #0003}:host.dropdown.open .container .content{display:block;opacity:1}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:rgba(0,0,0,.1)}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n"] }]
|
|
2642
2658
|
}], ctorParameters: function () { return [{ type: LoaderService }, { type: LoadMoreService }]; }, propDecorators: { id: [{
|
|
2643
2659
|
type: Input
|
|
2644
2660
|
}], type: [{
|
|
@@ -2690,7 +2706,7 @@ class IconComponent {
|
|
|
2690
2706
|
}
|
|
2691
2707
|
}
|
|
2692
2708
|
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2693
|
-
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "sfc-icon", inputs: { icon: "icon", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
2709
|
+
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: IconComponent, selector: "sfc-icon", inputs: { icon: "icon", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
|
|
2694
2710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
2695
2711
|
type: Component,
|
|
2696
2712
|
args: [{ selector: 'sfc-icon', template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <img *ngIf=\"showImage\" [src]=\"imageSrc\">\r\n</div>", styles: [":host{display:inline-block}:host .container{display:flex;align-items:center;justify-content:center}:host .container img{max-width:1.3em}\n"] }]
|