ngx-sfc-common 0.0.3 → 0.0.4

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.
Files changed (37) hide show
  1. package/README.md +5 -5
  2. package/_ngx-sfc-common.styles.scss +1 -0
  3. package/esm2020/lib/components/button/button.component.mjs +5 -4
  4. package/esm2020/lib/components/checkmark/checkmark.component.mjs +6 -4
  5. package/esm2020/lib/components/close/close.component.mjs +8 -3
  6. package/esm2020/lib/components/delimeter/delimeter.component.mjs +2 -2
  7. package/esm2020/lib/components/dots/dots.component.mjs +2 -2
  8. package/esm2020/lib/components/hamburger/hamburger.component.mjs +2 -2
  9. package/esm2020/lib/components/loader/bounce/bounce-loader.component.mjs +2 -2
  10. package/esm2020/lib/components/loader/circle/circle-loader.component.mjs +2 -2
  11. package/esm2020/lib/components/modal/header/default/default-modal-header.component.mjs +11 -6
  12. package/esm2020/lib/components/modal/header/default/default-modal-header.model.mjs +1 -1
  13. package/esm2020/lib/components/modal/modal.component.mjs +3 -3
  14. package/esm2020/lib/components/pagination/pagination.component.mjs +9 -5
  15. package/esm2020/lib/components/sorting/sorting.component.mjs +5 -4
  16. package/esm2020/lib/components/sorting/sorting.constants.mjs +4 -3
  17. package/esm2020/lib/components/sorting/sorting.model.mjs +1 -1
  18. package/esm2020/lib/components/toggle-switcher/toggle-switcher.component.mjs +5 -4
  19. package/esm2020/lib/components/toggle-switcher/toggle-switcher.model.mjs +1 -1
  20. package/esm2020/lib/enums/sorting-direction.enum.mjs +1 -1
  21. package/esm2020/lib/ngx-sfc-common.module.mjs +8 -4
  22. package/fesm2015/ngx-sfc-common.mjs +51 -36
  23. package/fesm2015/ngx-sfc-common.mjs.map +1 -1
  24. package/fesm2020/ngx-sfc-common.mjs +50 -36
  25. package/fesm2020/ngx-sfc-common.mjs.map +1 -1
  26. package/lib/components/button/button.component.d.ts +3 -2
  27. package/lib/components/checkmark/checkmark.component.d.ts +2 -1
  28. package/lib/components/close/close.component.d.ts +1 -0
  29. package/lib/components/modal/header/default/default-modal-header.component.d.ts +2 -0
  30. package/lib/components/modal/header/default/default-modal-header.model.d.ts +2 -1
  31. package/lib/components/pagination/pagination.component.d.ts +2 -0
  32. package/lib/components/sorting/sorting.component.d.ts +2 -1
  33. package/lib/components/sorting/sorting.constants.d.ts +2 -2
  34. package/lib/components/sorting/sorting.model.d.ts +2 -1
  35. package/lib/components/toggle-switcher/toggle-switcher.model.d.ts +2 -1
  36. package/lib/ngx-sfc-common.module.d.ts +2 -1
  37. package/package.json +5 -2
@@ -1,11 +1,14 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { InjectionToken, Injectable, PLATFORM_ID, EventEmitter, Directive, Inject, Input, Output, HostListener, Component, HostBinding, ContentChildren, NgModule } from '@angular/core';
3
- import * as i1$1 from '@angular/common';
3
+ import * as i1$2 from '@angular/common';
4
4
  import { isPlatformBrowser, CommonModule } from '@angular/common';
5
5
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
6
6
  import { Subject, fromEvent, Observable, startWith, BehaviorSubject, filter, distinctUntilChanged, map, EMPTY, combineLatest } from 'rxjs';
7
7
  import * as i1 from '@angular/platform-browser';
8
+ import * as i1$1 from '@fortawesome/angular-fontawesome';
9
+ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
8
10
  import { trigger, state, style, transition, group, query, animate, animateChild } from '@angular/animations';
11
+ import { faTimes, faWindowRestore, faCheck, faChevronLeft, faChevronRight, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
9
12
 
10
13
  /**
11
14
  * Component sizes
@@ -1278,10 +1281,10 @@ class ButtonComponent {
1278
1281
  }
1279
1282
  }
1280
1283
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1281
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, ngImport: i0, template: "<a class=\"button\" [ngClass]=\"classes\">\r\n <i *ngIf=\"iconBefore\" class=\"icon before\" [ngClass]=\"iconBefore\"></i>\r\n <span class=\"text\">{{text}}</span>\r\n <i *ngIf=\"iconAfter\" class=\"icon after\" [ngClass]=\"iconAfter\"></i>\r\n</a>", styles: [":host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1284
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ButtonComponent, selector: "sfc-button", inputs: { text: "text", iconBefore: "iconBefore", iconAfter: "iconAfter", disabled: "disabled", types: "types" }, 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\">{{text}}</span>\r\n <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1282
1285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
1283
1286
  type: Component,
1284
- args: [{ selector: 'sfc-button', template: "<a class=\"button\" [ngClass]=\"classes\">\r\n <i *ngIf=\"iconBefore\" class=\"icon before\" [ngClass]=\"iconBefore\"></i>\r\n <span class=\"text\">{{text}}</span>\r\n <i *ngIf=\"iconAfter\" class=\"icon after\" [ngClass]=\"iconAfter\"></i>\r\n</a>", styles: [":host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"] }]
1287
+ 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\">{{text}}</span>\r\n <fa-icon *ngIf=\"iconAfter\" class=\"icon after\" [icon]=\"iconAfter\"></fa-icon>\r\n</a>", styles: [".button.texted:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.texted:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.texted:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered{border:solid 2px}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){color:#ccd1d9}.button.bordered:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.bordered:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.bordered:not(:hover):not(.disabled){border-color:#ccd1d9}.button.filled{color:#fff!important;border-color:#545e61;background:#545e61}.button.filled:hover{color:#fff!important;border-color:#aab2bd;background:#aab2bd}.button.filled.disabled{color:#fff!important;border-color:#bdbdbd;background:#bdbdbd}.button.rounded{border:solid 2px;border-radius:20px;padding:.4em 1.2em}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){color:#ccd1d9}.button.rounded:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.rounded:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.rounded:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled{border:solid 2px;width:5em;height:5em;border-radius:50%}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){color:#ccd1d9}.button.circled:not(:hover):not(.disabled),:host-context(.sfc-default-theme) .button.circled:not(:hover):not(.disabled){border-color:#545e61}:host-context(.sfc-dark-theme) .button.circled:not(:hover):not(.disabled){border-color:#ccd1d9}.button.circled .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host{display:inline-block;font-size:1em}.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;transition:color .5s ease,border-color .5s ease,background .5s ease}.button:hover{color:#2bbbad;border-color:#2bbbad}.button.disabled{pointer-events:none}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{color:#656d78}.button.disabled,:host-context(.sfc-default-theme) .button.disabled{border-color:#bdbdbd}:host-context(.sfc-dark-theme) .button.disabled{border-color:#656d78}.button .icon{padding:3px}.button .text{padding:3px;white-space:initial}.button .text:empty{display:none}\n"] }]
1285
1288
  }], propDecorators: { text: [{
1286
1289
  type: Input
1287
1290
  }], iconBefore: [{
@@ -1365,10 +1368,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1365
1368
  class DelimeterComponent {
1366
1369
  }
1367
1370
  DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1368
- DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
1371
+ DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] });
1369
1372
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DelimeterComponent, decorators: [{
1370
1373
  type: Component,
1371
- args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
1374
+ args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{display:inline-block;width:100%;height:1px;margin:.3em 0}:host,:host-context(.sfc-default-theme) :host{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 17%,rgba(0,0,0,.3) 83%,rgba(0,0,0,0) 100%)}:host-context(.sfc-dark-theme) :host{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.4) 17%,rgba(255,255,255,.4) 83%,rgba(255,255,255,0) 100%)}\n"] }]
1372
1375
  }] });
1373
1376
 
1374
1377
  class LoaderConstants {
@@ -1496,10 +1499,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1496
1499
  class BounceLoaderComponent extends LoaderBaseComponent {
1497
1500
  }
1498
1501
  BounceLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BounceLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1499
- BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"spinner\">\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
1502
+ BounceLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: BounceLoaderComponent, selector: "sfc-bounce-loader", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"spinner\">\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$2.AsyncPipe } });
1500
1503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BounceLoaderComponent, decorators: [{
1501
1504
  type: Component,
1502
- args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"spinner\">\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
1505
+ args: [{ selector: 'sfc-bounce-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"spinner\">\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n <div class=\"bounce\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".spinner{text-align:center}.spinner .bounce{border-radius:100%;display:inline-block;animation:bounce-delay 1.4s infinite ease-in-out both;width:1em;height:1em}.spinner .bounce,:host-context(.sfc-default-theme) .spinner .bounce{background-color:#545e61}:host-context(.sfc-dark-theme) .spinner .bounce{background-color:#fff}.spinner .bounce:nth-child(1){animation-delay:-.32s}.spinner .bounce:nth-child(2){animation-delay:-.16s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
1503
1506
  }] });
1504
1507
 
1505
1508
  var CircleLoaderType;
@@ -1515,10 +1518,10 @@ class CircleLoaderComponent extends LoaderBaseComponent {
1515
1518
  }
1516
1519
  }
1517
1520
  CircleLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CircleLoaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1518
- CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"circles-container\" [ngClass]=\"type\">\r\n <div class=\"circle1\"></div>\r\n <div class=\"circle2\"></div>\r\n <div class=\"circle3\"></div>\r\n <div class=\"circle4\"></div>\r\n <div class=\"circle5\"></div>\r\n <div class=\"circle6\"></div>\r\n <div class=\"circle7\"></div>\r\n <div class=\"circle8\"></div>\r\n <div class=\"circle9\"></div>\r\n <div class=\"circle10\"></div>\r\n <div class=\"circle11\"></div>\r\n <div class=\"circle12\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
1521
+ CircleLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CircleLoaderComponent, selector: "sfc-circle-loader", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"circles-container\" [ngClass]=\"type\">\r\n <div class=\"circle1\"></div>\r\n <div class=\"circle2\"></div>\r\n <div class=\"circle3\"></div>\r\n <div class=\"circle4\"></div>\r\n <div class=\"circle5\"></div>\r\n <div class=\"circle6\"></div>\r\n <div class=\"circle7\"></div>\r\n <div class=\"circle8\"></div>\r\n <div class=\"circle9\"></div>\r\n <div class=\"circle10\"></div>\r\n <div class=\"circle11\"></div>\r\n <div class=\"circle12\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$2.AsyncPipe } });
1519
1522
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CircleLoaderComponent, decorators: [{
1520
1523
  type: Component,
1521
- args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"circles-container\" [ngClass]=\"type\">\r\n <div class=\"circle1\"></div>\r\n <div class=\"circle2\"></div>\r\n <div class=\"circle3\"></div>\r\n <div class=\"circle4\"></div>\r\n <div class=\"circle5\"></div>\r\n <div class=\"circle6\"></div>\r\n <div class=\"circle7\"></div>\r\n <div class=\"circle8\"></div>\r\n <div class=\"circle9\"></div>\r\n <div class=\"circle10\"></div>\r\n <div class=\"circle11\"></div>\r\n <div class=\"circle12\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
1524
+ args: [{ selector: 'sfc-circle-loader', template: "<div *ngIf=\"show$ | async\" class=\"preloader\" [ngClass]=\"preLoaderClasses\">\r\n <div class=\"circles-container\" [ngClass]=\"type\">\r\n <div class=\"circle1\"></div>\r\n <div class=\"circle2\"></div>\r\n <div class=\"circle3\"></div>\r\n <div class=\"circle4\"></div>\r\n <div class=\"circle5\"></div>\r\n <div class=\"circle6\"></div>\r\n <div class=\"circle7\"></div>\r\n <div class=\"circle8\"></div>\r\n <div class=\"circle9\"></div>\r\n <div class=\"circle10\"></div>\r\n <div class=\"circle11\"></div>\r\n <div class=\"circle12\"></div>\r\n </div>\r\n</div>", styles: [".preloader{position:relative;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.preloader.background{opacity:.7}.preloader.background,:host-context(.sfc-default-theme) .preloader.background{background-color:#fff}:host-context(.sfc-dark-theme) .preloader.background{background-color:#656d78}.preloader.global{z-index:9999;position:fixed}.preloader.local{z-index:9998;position:absolute}\n", ".circles-container{position:relative;width:2.5em;height:2.5em}.circles-container div{width:100%;height:100%;position:absolute;left:0;top:0}.circles-container div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;animation:bounce-delay 1.2s infinite ease-in-out both}.circles-container div:before,:host-context(.sfc-default-theme) .circles-container div:before{background-color:#545e61}:host-context(.sfc-dark-theme) .circles-container div:before{background-color:#fff}.circles-container.fading div:before{animation-name:circle-fade-delay}.circles-container .circle2{transform:rotate(30deg)}.circles-container .circle2:before{animation-delay:-1.1s}.circles-container .circle3{transform:rotate(60deg)}.circles-container .circle3:before{animation-delay:-1s}.circles-container .circle4{transform:rotate(90deg)}.circles-container .circle4:before{animation-delay:-.9s}.circles-container .circle5{transform:rotate(120deg)}.circles-container .circle5:before{animation-delay:-.8s}.circles-container .circle6{transform:rotate(150deg)}.circles-container .circle6:before{animation-delay:-.7s}.circles-container .circle7{transform:rotate(180deg)}.circles-container .circle7:before{animation-delay:-.6s}.circles-container .circle8{transform:rotate(210deg)}.circles-container .circle8:before{animation-delay:-.5s}.circles-container .circle9{transform:rotate(240deg)}.circles-container .circle9:before{animation-delay:-.4s}.circles-container .circle10{transform:rotate(270deg)}.circles-container .circle10:before{animation-delay:-.3s}.circles-container .circle11{transform:rotate(300deg)}.circles-container .circle11:before{animation-delay:-.2s}.circles-container .circle12{transform:rotate(330deg)}.circles-container .circle12:before{animation-delay:-.1s}@keyframes bounce-delay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes circle-fade-delay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
1522
1525
  }], propDecorators: { type: [{
1523
1526
  type: Input
1524
1527
  }] } });
@@ -1564,7 +1567,7 @@ class TemplateContentComponent {
1564
1567
  }
1565
1568
  }
1566
1569
  TemplateContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1567
- TemplateContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TemplateContentComponent, selector: "sfc-template-content", inputs: { contextData: "contextData", referenceContent: "referenceContent", templateType: "templateType", templatesContent: "templatesContent", defaultContent: "defaultContent" }, ngImport: i0, template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>", styles: [":host{display:contents}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1570
+ TemplateContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: TemplateContentComponent, selector: "sfc-template-content", inputs: { contextData: "contextData", referenceContent: "referenceContent", templateType: "templateType", templatesContent: "templatesContent", defaultContent: "defaultContent" }, ngImport: i0, template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>", styles: [":host{display:contents}\n"], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1568
1571
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: TemplateContentComponent, decorators: [{
1569
1572
  type: Component,
1570
1573
  args: [{ selector: 'sfc-template-content', styles: [':host{ display: contents;}'], template: "<ng-container *ngIf=\"referenceContent;else template\">\r\n <ng-container *ngTemplateOutlet=\"referenceContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #template>\r\n <ng-container *ngTemplateOutlet=\"templateContent;context:{$implicit: contextData}\">\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"defaultContent && showDefault\">\r\n <ng-container *ngTemplateOutlet=\"defaultContent;context:{$implicit: contextData}\"></ng-container>\r\n</ng-container>" }]
@@ -1581,23 +1584,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1581
1584
  }] } });
1582
1585
 
1583
1586
  class CloseComponent {
1587
+ constructor() {
1588
+ this.faTimes = faTimes;
1589
+ }
1584
1590
  }
1585
1591
  CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1586
- CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CloseComponent, selector: "sfc-close", ngImport: i0, template: "<div class=\"container\">\r\n <i class=\"fas fa-times\"></i>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#2bbbad}\n"] });
1592
+ CloseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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:#2bbbad}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
1587
1593
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CloseComponent, decorators: [{
1588
1594
  type: Component,
1589
- args: [{ selector: 'sfc-close', template: "<div class=\"container\">\r\n <i class=\"fas fa-times\"></i>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#2bbbad}\n"] }]
1595
+ 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:#2bbbad}\n"] }]
1590
1596
  }] });
1591
1597
 
1592
1598
  class DefaultModalHeaderComponent {
1593
1599
  constructor(modalService) {
1594
1600
  this.modalService = modalService;
1595
1601
  this.DEFAULT_MODAL_HEADER_MODEL = {
1596
- icon: 'fa fa-window-restore',
1602
+ icon: faWindowRestore,
1597
1603
  showCloseIcon: true,
1598
1604
  text: 'Modal'
1599
1605
  };
1600
1606
  }
1607
+ get icon() {
1608
+ return this.model?.icon || faWindowRestore;
1609
+ }
1601
1610
  ngOnInit() {
1602
1611
  if (!isDefined(this.model))
1603
1612
  this.model = this.DEFAULT_MODAL_HEADER_MODEL;
@@ -1607,10 +1616,10 @@ class DefaultModalHeaderComponent {
1607
1616
  }
1608
1617
  }
1609
1618
  DefaultModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalHeaderComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
1610
- DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <i *ngIf=\"model?.icon\" class=\"icon\" class=\"{{model?.icon}}\"></i>\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 i{font-size:1em}:host .container .icon{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"], components: [{ type: CloseComponent, selector: "sfc-close" }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1619
+ DefaultModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: CloseComponent, selector: "sfc-close" }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1611
1620
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalHeaderComponent, decorators: [{
1612
1621
  type: Component,
1613
- args: [{ selector: 'sfc-default-modal-header', template: "<div class=\"container\">\r\n <i *ngIf=\"model?.icon\" class=\"icon\" class=\"{{model?.icon}}\"></i>\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 i{font-size:1em}:host .container .icon{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"] }]
1622
+ 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"] }]
1614
1623
  }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { model: [{
1615
1624
  type: Input
1616
1625
  }] } });
@@ -1646,7 +1655,7 @@ class DefaultModalFooterComponent {
1646
1655
  }
1647
1656
  }
1648
1657
  DefaultModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalFooterComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
1649
- DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n </sfc-button>\r\n <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], components: [{ type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }] });
1658
+ DefaultModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: { model: "model" }, ngImport: i0, template: "<div class=\"container\">\r\n <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n </sfc-button>\r\n <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"], components: [{ type: ButtonComponent, selector: "sfc-button", inputs: ["text", "iconBefore", "iconAfter", "disabled", "types"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ComponentSizeDirective, selector: "[sfcComponentSize]", inputs: ["sfcComponentSize", "customSize"] }] });
1650
1659
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DefaultModalFooterComponent, decorators: [{
1651
1660
  type: Component,
1652
1661
  args: [{ selector: 'sfc-default-modal-footer', template: "<div class=\"container\">\r\n <sfc-button *ngIf=\"model?.applyButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Ok\"\r\n [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick()\">\r\n </sfc-button>\r\n <sfc-button *ngIf=\"model?.cancelButton\" [sfcComponentSize] [customSize]=\"BUTTON_CUSTOM_SIZE\" text=\"Cancel\"\r\n [types]=\"[ButtonType.Rounded]\" (click)=\"onButtonClick(true)\">\r\n </sfc-button>\r\n</div>", styles: [":host{display:inline-flex;width:100%}:host .container{display:flex;justify-content:center;align-items:center;width:100%}:host .container sfc-button:first-child{padding-right:.3em}:host .container sfc-button:nth-child(2){padding-left:.3em}:host .container ::ng-deep sfc-button .button.rounded{width:5em}:host .container ::ng-deep sfc-button .button:not(:hover){color:#545e61!important;border-color:#545e61!important}\n"] }]
@@ -1671,7 +1680,7 @@ class ModalComponent {
1671
1680
  }
1672
1681
  }
1673
1682
  ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component });
1674
- ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n <div class=\"header\">\r\n\r\n <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultHeader>\r\n <sfc-default-modal-header [model]=\"defaultHeaderModel\">\r\n </sfc-default-modal-header>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <div class=\"body\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Body\">\r\n </sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n\r\n <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultFooter>\r\n <sfc-default-modal-footer [model]=\"defaultFooterModel\">\r\n </sfc-default-modal-footer>\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"], components: [{ type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
1683
+ ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ModalComponent, selector: "sfc-modal", inputs: { body: "body", header: "header", footer: "footer", defaultHeaderModel: "defaultHeaderModel", defaultFooterModel: "defaultFooterModel", hideOnEsc: "hideOnEsc", hideOnClickOutside: "hideOnClickOutside" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyDownHandler()" } }, queries: [{ propertyName: "templates", predicate: TemplateReferenceDirective, read: TemplateReferenceDirective }], ngImport: i0, template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n <div class=\"header\">\r\n\r\n <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultHeader>\r\n <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <div class=\"body\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Body\">\r\n </sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n\r\n <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultFooter>\r\n <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"], components: [{ type: TemplateContentComponent, selector: "sfc-template-content", inputs: ["contextData", "referenceContent", "templateType", "templatesContent", "defaultContent"] }, { type: DefaultModalHeaderComponent, selector: "sfc-default-modal-header", inputs: ["model"] }, { type: DefaultModalFooterComponent, selector: "sfc-default-modal-footer", inputs: ["model"] }], animations: [
1675
1684
  trigger('hideOverlay', [
1676
1685
  state('initial', style({ opacity: 1, visibility: 'visible' })),
1677
1686
  state('void', style({ opacity: 0, visibility: 'hidden' })),
@@ -1716,7 +1725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1716
1725
  state('void', style({ opacity: 0, visibility: 'hidden', transform: 'scale(1.2)' })),
1717
1726
  transition('* => void', animate('400ms cubic-bezier(.55, 0, .1, 1)'))
1718
1727
  ])
1719
- ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n <div class=\"header\">\r\n\r\n <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultHeader>\r\n <sfc-default-modal-header [model]=\"defaultHeaderModel\">\r\n </sfc-default-modal-header>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <div class=\"body\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Body\">\r\n </sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n\r\n <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultFooter>\r\n <sfc-default-modal-footer [model]=\"defaultFooterModel\">\r\n </sfc-default-modal-footer>\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"] }]
1728
+ ], template: "<div class=\"overlay\" [@hideOverlay] (click)=\"hideOnClickOutside && close()\">\r\n <div class=\"content\" [@hideContent] (click)=\"$event.stopPropagation()\">\r\n\r\n <div class=\"header\">\r\n\r\n <sfc-template-content [referenceContent]=\"header\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Header\" [defaultContent]=\"defaultHeader\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultHeader>\r\n <sfc-default-modal-header [model]=\"defaultHeaderModel\"> </sfc-default-modal-header>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <div class=\"body\">\r\n\r\n <sfc-template-content [referenceContent]=\"body\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Body\">\r\n </sfc-template-content>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n\r\n <sfc-template-content [referenceContent]=\"footer\" [templatesContent]=\"templates\"\r\n [templateType]=\"ModalTemplate.Footer\" [defaultContent]=\"defaultFooter\">\r\n </sfc-template-content>\r\n\r\n <ng-template #defaultFooter>\r\n <sfc-default-modal-footer [model]=\"defaultFooterModel\"></sfc-default-modal-footer>\r\n </ng-template>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".overlay{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background-color:#0009;-webkit-backface-visibility:visible;backface-visibility:visible;animation:expand-overlay .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-overlay{0%{visibility:hidden;opacity:0}}.overlay .content{display:flex;align-items:center;position:relative;padding:.7em;margin:auto;background-color:#f5f7fa;max-width:calc(100% - 3em);max-height:calc(100% - 3em);border-radius:3px;overflow-y:auto;box-shadow:0 .125em .625em #656d78;transform:scale(1);flex-direction:column;animation:expand-modal .4s cubic-bezier(.55,0,.1,1)}@keyframes expand-modal{0%{visibility:hidden;opacity:0;transform:scale(1.2)}}.overlay .content>div{width:100%;flex:0 0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#545e61;flex-direction:row;display:flex;justify-content:center}\n"] }]
1720
1729
  }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { body: [{
1721
1730
  type: Input
1722
1731
  }], header: [{
@@ -1792,10 +1801,10 @@ class HamburgerComponent {
1792
1801
  }
1793
1802
  }
1794
1803
  HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1795
- HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HamburgerComponent, selector: "sfc-hamburger", inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"line half start\"></div>\r\n <div class=\"line\"></div>\r\n <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] });
1804
+ HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: HamburgerComponent, selector: "sfc-hamburger", inputs: { open: "open" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"line half start\"></div>\r\n <div class=\"line\"></div>\r\n <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] });
1796
1805
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HamburgerComponent, decorators: [{
1797
1806
  type: Component,
1798
- args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n <div class=\"line half start\"></div>\r\n <div class=\"line\"></div>\r\n <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] }]
1807
+ args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n <div class=\"line half start\"></div>\r\n <div class=\"line\"></div>\r\n <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}.container .line,:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#ccd1d9}.container .line.half{width:50%}.container .line.start{transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:right}:host(.open) .container .line.start{transform:rotate(-90deg) translate(.1875em)}.container .line.end{align-self:flex-end;transition:transform .33s cubic-bezier(.54,-.81,.57,.57);transform-origin:left}:host(.open) .container .line.end{transform:rotate(-90deg) translate(-.1875em)}.container:hover .line{background-color:#2bbbad!important}\n"] }]
1799
1808
  }], propDecorators: { open: [{
1800
1809
  type: Input
1801
1810
  }, {
@@ -1814,10 +1823,10 @@ class DotsComponent {
1814
1823
  }
1815
1824
  }
1816
1825
  DotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1817
- DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"dots-container\">\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] });
1826
+ DotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: DotsComponent, selector: "sfc-dots", inputs: { open: "open", direction: "direction" }, host: { listeners: { "click": "onClick()" }, properties: { "class.open": "this.open", "class": "this.direction" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"dots-container\">\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] });
1818
1827
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DotsComponent, decorators: [{
1819
1828
  type: Component,
1820
- args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n <div class=\"dots-container\">\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] }]
1829
+ args: [{ selector: 'sfc-dots', template: "<div class=\"container\">\r\n <div class=\"dots-container\">\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n <div class=\"dot\"></div>\r\n </div>\r\n</div>", styles: [":host{display:inline-flex;transform:rotate(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}:host.open{transform:rotate(90deg)}:host.vertical{transform:rotate(90deg)}:host.vertical.open{transform:rotate(0)}:host .container{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:1;margin:.25em}:host .container .dots-container{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;position:relative}:host .container .dots-container .dot{width:.3125em;height:.3125em;transition:background .3s ease;margin:.06em;border-radius:50%;display:block}:host .container .dots-container .dot,:host-context(.sfc-default-theme) :host .container .dots-container .dot{background:#545e61}:host-context(.sfc-dark-theme) :host .container .dots-container .dot{background:#ccd1d9}:host:hover .container,:host:focus .container{outline:none}:host:hover .container .dots-container .dot,:host-context(.sfc-default-theme) :host:hover .container .dots-container .dot,:host:focus .container .dots-container .dot,:host-context(.sfc-default-theme) :host:focus .container .dots-container .dot{background:#2bbbad}:host-context(.sfc-dark-theme) :host:hover .container .dots-container .dot,:host-context(.sfc-dark-theme) :host:focus .container .dots-container .dot{background:#2bbbad}\n"] }]
1821
1830
  }], propDecorators: { open: [{
1822
1831
  type: Input
1823
1832
  }, {
@@ -1842,10 +1851,10 @@ class ToggleSwitcherComponent {
1842
1851
  }
1843
1852
  }
1844
1853
  ToggleSwitcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToggleSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1845
- ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <div class=\"toggle\"></div>\r\n <div class=\"names\">\r\n <p class=\"left\">\r\n <i *ngIf=\"leftModel.icon\" class=\"{{leftModel.icon}}\"></i>\r\n <span>{{leftModel.label}}</span>\r\n </p>\r\n <p class=\"right\">\r\n <i *ngIf=\"rightModel.icon\" class=\"{{rightModel.icon}}\"></i>\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 i{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}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1854
+ ToggleSwitcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ToggleSwitcherComponent, selector: "sfc-toggle-switcher", inputs: { active: "active", leftModel: "leftModel", rightModel: "rightModel" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, 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}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1846
1855
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ToggleSwitcherComponent, decorators: [{
1847
1856
  type: Component,
1848
- 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 <i *ngIf=\"leftModel.icon\" class=\"{{leftModel.icon}}\"></i>\r\n <span>{{leftModel.label}}</span>\r\n </p>\r\n <p class=\"right\">\r\n <i *ngIf=\"rightModel.icon\" class=\"{{rightModel.icon}}\"></i>\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 i{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}\n"] }]
1857
+ 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}\n"] }]
1849
1858
  }], ctorParameters: function () { return []; }, propDecorators: { active: [{
1850
1859
  type: Input
1851
1860
  }, {
@@ -1863,15 +1872,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1863
1872
  class CheckmarkComponent {
1864
1873
  constructor() {
1865
1874
  this.active = false;
1866
- this.icon = 'fa fa-check';
1875
+ this.icon = faCheck;
1867
1876
  this.onClick = () => this.active = !this.active;
1868
1877
  }
1869
1878
  }
1870
1879
  CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1871
- CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", icon: "icon" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <span class=\"check\">\r\n <i class=\"{{icon}}\"></i>\r\n </span>\r\n</div>", styles: [":host{display:inline-block}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check i{font-size:.8em;transition:opacity .3s ease}:host-context(.sfc-default-theme) :host .check i{opacity:.5}:host-context(.sfc-dark-theme) :host .check i{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover i{color:#2bbbad}:host-context(.sfc-default-theme) :host .check:hover i{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover i{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check i{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)}}\n"] });
1880
+ CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: CheckmarkComponent, selector: "sfc-checkmark", inputs: { active: "active", icon: "icon" }, host: { listeners: { "click": "onClick()" }, properties: { "class.active": "this.active" } }, ngImport: i0, template: "<div class=\"container\">\r\n <span class=\"check\">\r\n <fa-icon [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:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}: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:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}: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:#2bbbad;background:#2bbbad}: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)}}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
1872
1881
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, decorators: [{
1873
1882
  type: Component,
1874
- args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n <span class=\"check\">\r\n <i class=\"{{icon}}\"></i>\r\n </span>\r\n</div>", styles: [":host{display:inline-block}:host-context(.sfc-default-theme) :host{color:#545e61}:host-context(.sfc-dark-theme) :host{color:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}:host .check i{font-size:.8em;transition:opacity .3s ease}:host-context(.sfc-default-theme) :host .check i{opacity:.5}:host-context(.sfc-dark-theme) :host .check i{opacity:.8}:host .check:hover{border-color:#2bbbad}:host .check:hover i{color:#2bbbad}:host-context(.sfc-default-theme) :host .check:hover i{opacity:.8}:host-context(.sfc-dark-theme) :host .check:hover i{opacity:1}:host.active .check{border-color:#2bbbad;background:#2bbbad}:host.active .check i{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)}}\n"] }]
1883
+ args: [{ selector: 'sfc-checkmark', template: "<div class=\"container\">\r\n <span class=\"check\">\r\n <fa-icon [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:#ccd1d9}:host .check{border-radius:50%;border:.18em solid;background:#fff;border-color:#ccd1d9;width:1em;height:1em;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s ease}: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:#2bbbad}:host .check:hover fa-icon{color:#2bbbad}: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:#2bbbad;background:#2bbbad}: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)}}\n"] }]
1875
1884
  }], propDecorators: { active: [{
1876
1885
  type: Input
1877
1886
  }, {
@@ -1935,6 +1944,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1935
1944
  class PaginationComponent {
1936
1945
  constructor(service) {
1937
1946
  this.service = service;
1947
+ this.faChevronLeft = faChevronLeft;
1948
+ this.faChevronRight = faChevronRight;
1938
1949
  // max limit for pagination bts
1939
1950
  this.count = PaginationConstants.DEFAULT_COUNT;
1940
1951
  /**
@@ -2009,10 +2020,10 @@ class PaginationComponent {
2009
2020
  }
2010
2021
  }
2011
2022
  PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
2012
- PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 <i class=\"fa fa-chevron-left\"></i>\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 <i class=\"fa fa-chevron-right\"></i>\r\n </button>\r\n </li>\r\n </ul>\r\n <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host-context(.sfc-default-theme) :host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#ccd1d9}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#ccd1d9}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#ccd1d9}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host-context(.sfc-default-theme) :host .container ul li button.active{background:#0000001a}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], components: [{ type: DelimeterComponent, selector: "sfc-delimeter" }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1$1.AsyncPipe } });
2023
+ PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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:#ccd1d9}: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:#ccd1d9}: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:#ccd1d9}: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:#0000001a}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], components: [{ type: DelimeterComponent, selector: "sfc-delimeter" }, { type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1$2.AsyncPipe } });
2013
2024
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
2014
2025
  type: Component,
2015
- 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 <i class=\"fa fa-chevron-left\"></i>\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 <i class=\"fa fa-chevron-right\"></i>\r\n </button>\r\n </li>\r\n </ul>\r\n <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host-context(.sfc-default-theme) :host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#ccd1d9}:host .container ul li button{outline:none;position:relative;transition:all .17s linear}:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#ccd1d9}:host .container ul li button:before{border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#ccd1d9}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{color:#545e61!important}:host-context(.sfc-default-theme) :host .container ul li button.active{background:#0000001a}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
2026
+ 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:#ccd1d9}: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:#ccd1d9}: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:#ccd1d9}: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:#0000001a}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
2016
2027
  }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { count: [{
2017
2028
  type: Input
2018
2029
  }], full: [{
@@ -2025,8 +2036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
2025
2036
 
2026
2037
  class SortingConstants {
2027
2038
  }
2028
- SortingConstants.DEFAULT_ASCENDING_ICON = 'fa fa-chevron-up';
2029
- SortingConstants.DEFAULT_DESCENDING_ICON = 'fa fa-chevron-down';
2039
+ SortingConstants.DEFAULT_ASCENDING_ICON = faChevronUp;
2040
+ SortingConstants.DEFAULT_DESCENDING_ICON = faChevronDown;
2030
2041
 
2031
2042
  class SortingService {
2032
2043
  constructor() {
@@ -2089,10 +2100,10 @@ class SortingComponent {
2089
2100
  }
2090
2101
  }
2091
2102
  SortingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SortingComponent, deps: [{ token: SortingService }], target: i0.ɵɵFactoryTarget.Component });
2092
- SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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 <i class=\"{{icon}}\"></i>\r\n </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}: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:#2bbbad}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2103
+ SortingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", 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:#ccd1d9}:host .container:hover{color:#2bbbad}: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:#2bbbad}\n"], components: [{ type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2093
2104
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SortingComponent, decorators: [{
2094
2105
  type: Component,
2095
- 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 <i class=\"{{icon}}\"></i>\r\n </div>\r\n</div>", styles: [":host{cursor:default;text-overflow:ellipsis;overflow:hidden}:host.enabled{cursor:pointer}:host .container{display:flex;min-width:0}:host-context(.sfc-default-theme) :host .container{color:#545e61}:host-context(.sfc-dark-theme) :host .container{color:#ccd1d9}:host .container:hover{color:#2bbbad}: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:#2bbbad}\n"] }]
2106
+ 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:#ccd1d9}:host .container:hover{color:#2bbbad}: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:#2bbbad}\n"] }]
2096
2107
  }], ctorParameters: function () { return [{ type: SortingService }]; }, propDecorators: { id: [{
2097
2108
  type: Input
2098
2109
  }], model: [{
@@ -2140,7 +2151,8 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
2140
2151
  ModalOpenOnClickDirective,
2141
2152
  DefaultModalHeaderComponent,
2142
2153
  DefaultModalFooterComponent], imports: [CommonModule,
2143
- BrowserAnimationsModule], exports: [
2154
+ BrowserAnimationsModule,
2155
+ FontAwesomeModule], exports: [
2144
2156
  // directives
2145
2157
  ClickOutsideDirective,
2146
2158
  ShowHideElementDirective,
@@ -2171,7 +2183,8 @@ NgxSfcCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
2171
2183
  DefaultModalFooterComponent] });
2172
2184
  NgxSfcCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, providers: [DOCUMENT_PROVIDERS, WINDOW_PROVIDERS], imports: [[
2173
2185
  CommonModule,
2174
- BrowserAnimationsModule
2186
+ BrowserAnimationsModule,
2187
+ FontAwesomeModule
2175
2188
  ]] });
2176
2189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgxSfcCommonModule, decorators: [{
2177
2190
  type: NgModule,
@@ -2208,7 +2221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
2208
2221
  ],
2209
2222
  imports: [
2210
2223
  CommonModule,
2211
- BrowserAnimationsModule
2224
+ BrowserAnimationsModule,
2225
+ FontAwesomeModule
2212
2226
  ],
2213
2227
  exports: [
2214
2228
  // directives