ngx-sfc-common 0.0.2 → 0.0.3

package/README.md

@@ -1,12 +1,6 @@
 # ngx-sfc-common
 
-This is shared library for Street Football Club (SFC) project, that contains components, directives, utils, enums and constants that will be used in related libraries: [ngx-sfc-inputs](https://github.com/1kriva1/ngx-sfc/tree/master/projects/ngx-sfc-inputs) and [ngx-sfc-components](https://github.com/1kriva1/ngx-sfc/tree/master/projects/ngx-sfc-components)
-
-## Compatibility
-
-ngx-sfc-common          | Angular
-------------------------|--------
-0.x.x  (latest `0.0.1`) | 13.x.x
+This is shared library for Street Football Club (SFC) project, that contains components, directives, utils, enums and constants that will be used in related libraries: [ngx-sfc-inputs](https://github.com/1kriva1/ngx-sfc/tree/master/projects/ngx-sfc-inputs) and [ngx-sfc-components](https://github.com/1kriva1/ngx-sfc/tree/master/projects/ngx-sfc-components).
 
 ## Table of Contents
 
@@ -14,6 +8,7 @@ ngx-sfc-common          | Angular
 - [Directives](#directives)
   - [Click out side](#click-out-side-sfcclickoutside)
   - [Component size](#component-size-sfccomponentsize)
+  - [Destroy parent](#destroy-parent-sfcdestroyparent)
   - [Mouse down](#mouse-down-sfcmousedown)
   - [Show/Hide element](#showhide-element-sfcshowhideelement)
   - [Template reference](#template-reference-sfctemplatereference)
@@ -21,11 +16,15 @@ ngx-sfc-common          | Angular
 - [Components](#components)
   - [Button](#button-sfc-button)
   - [Checkmark](#checkmark-sfc-checkmark)
+  - [Close](#close-sfc-close)
   - [Delimeter](#delimeter-sfc-delimeter)
   - [Dots](#dots-sfc-dots)
   - [Hamburger](#hamburger-sfc-hamburger)
   - [Loader](#loader-sfc-bounce-loader-sfc-circle-loader)
   - [Modal](#modal-sfc-modal)
+  - [Pagination](#pagination-sfc-pagination)
+  - [Sorting](#sorting-sfc-sorting)
+  - [Template-content](#template-content-sfc-template-content)
   - [Toggle-switcher](#toggle-switcher-sfc-toggle-switcher)
   - [Tooltip](#tooltip-sfc-tooltip)
 - [Services](#services)
@@ -97,6 +96,19 @@ Large         | 2em
 
 2. `customSize` - custom size as number (`em` unit will be added)
 
+## **Destroy parent `[sfcDestroyParent]`**
+
+This directive allow to destroy parent element of directive owner.
+
+Add `[sfcDestroyParent]` with value `destroy` and optionaly can define delay by `delay` value (e.g. after 10 ms will destroy):
+
+```html
+ <div class="container" [sfcDestroyParent]="destroy" [delay]="10">
+``` 
+Parameters:
+1. `sfcDestroyParent` expect boolean value, if true - will destroy parent element
+2. `delay` - define delay before destroying, by default 0.
+
 ## **Mouse down `(sfcMouseDown)`**
 
 This directive allow clicking only by specific mouse button (by default allow left button click).
@@ -210,6 +222,14 @@ Parameters:
 1. `[active]` - check value, if checked - will have true value
 2. `icon` - icon value inside checkmark (default value - `fa fa-check`)
 
+## **Close `<sfc-close>`**
+
+Close icon. Used in notification and modal components.
+
+```html
+<sfc-close *ngIf="show" (click)="onClose()"></sfc-close>
+```  
+
 ## **Delimeter `<sfc-delimeter>`**
 
 Can be used for separate element on UI.
@@ -367,6 +387,84 @@ Additional parameters:
 1. `hideOnEsc` - if true, than modal can be removed on Escape button (by default true)
 2. `hideOnClickOutside` - if true, than modal can be removed on click outside of modal (by default true)
 
+## **Pagination `<sfc-pagination>`**
+
+Component allow to paginate data for example for tables.
+
+```html
+<sfc-pagination [count]="3" [limits]="false" [full]="false" [data$]="data$"></sfc-pagination>
+```
+
+Parameters:
+1. `[count]` - max limit for pagination buttons
+2. `[full]` - show or not full range of data
+3. `[limits]` - show or not first/last pagination button
+4. `[data$]` - pagination data observable
+
+## **Sorting `<sfc-sorting>`**
+
+Add posibility to emit sorting for specific data. Can add template for displaying UI, also component will add default or defined by model sorting icons. When click on component, sorting event will be emitted.
+
+```html
+<sfc-sorting [id]="column.field" [model]="column.sorting">
+  <sfc-default-table-column [model]="column"></sfc-default-table-column>
+</sfc-sorting>
+```
+
+Parameters:
+1. `[id]` - sorting ID
+2. `[model]` - sorting model
+
+Model contract:
+
+```typescript
+export interface ISortingModel {
+    enabled: boolean; // enable sorting
+    active?: boolean; // is current sorting is active
+    direction: SortingDirection; // direction - asc or desc
+    icons?: ISortingIcon[]; // custom icons for sorting
+}
+
+export interface ISortingIcon {
+    direction: SortingDirection;
+    icon: string
+}
+``` 
+
+## **Template-content `<sfc-template-content>`**
+
+Component allow to insert template as template reference or as template content. Also can be defined default content.
+
+```html
+<sfc-template-content [referenceContent]="header" [templatesContent]="templates"
+                [templateType]="ModalTemplate.Header" [defaultContent]="defaultHeader">
+</sfc-template-content>
+
+<ng-template #defaultHeader>
+    <sfc-default-modal-header [model]="defaultHeaderModel"></sfc-default-modal-header>
+</ng-template>
+```
+
+Parameters:
+1. `[referenceContent]` - reference template
+2. `[templatesContent]` - content templates
+
+```typescript
+@ContentChildren(TemplateReferenceDirective, { read: TemplateReferenceDirective })
+templates: QueryList<TemplateReferenceDirective> | undefined;
+```
+
+ 3. `[templateType]` - type for content templates
+
+```typescript
+export enum ModalTemplate {
+    Body = 'body',
+    Header = 'header',
+    Footer = 'footer'
+}
+``` 
+4. `[defaultContent]` - reference for default content
+
 ## **Toggle-switcher `<sfc-toggle-switcher>`**
 
 Component allow to add toggler with posibility to define text and icon for left and right part of component. 
@@ -443,18 +541,104 @@ this._resizeSubscription = this.resizeService.onResize$
 - `Collection` utils
  
     Methods for array(collection) opearations.
+    
+```typescript
+/**
+ * Return true if collection not empty
+ * @param collection Array of items
+ * @returns True if collection not empty
+ */
+export function any<T>(collection: Array<T> | null | undefined): boolean {
+    return isDefined(collection) && (collection as Array<T>).length > 0;
+}
+```
 - `Common` utils
 
     Methods for object checking, modification and operations.
+ 
+ ```typescript
+/**
+ * Return true if value defined
+ * @param value Value to check
+ * @returns True if value is not null and defined
+ */
+export function isDefined<T>(value: T | undefined | null): boolean {
+    return <T>value !== undefined && <T>value !== null;
+}
+```
+
 - `DateTime` utils
 
     Method for DATETime objects.
+    
+```typescript
+/**
+ * Return first day of month as date from date value
+ * @param date Date value
+ * @returns First day of month as date
+ */
+export function getFirstDayOfMonth(date: Date): Date {
+    if (isDefined(date) && date instanceof Date) {
+        const year = date.getFullYear(),
+            month = date.getMonth();
+        return new Date(year, month, 1);
+    }
+
+    return date;
+}
+```
+  
 - `File` utils
 
     Methods for IO and files.
+  
+```typescript
+/**
+ * Return parsed file size as string
+ * @param bytes Bytes count
+ * @param decimals Value after dot
+ * @returns Parsed file size
+ */
+export function parseFileSize(bytes: number, decimals = 2): string {
+    if (bytes === 0)
+        return '0';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+```
+  
 - `String` utils
 
     Methods for strings modification and operations on them.
+  
+```typescript
+/**
+ * Return true if string has value(not empty string)
+ * @param value String value to check
+ * @returns True if string is not null and defined(not empty string)
+ */
+export function isNullOrEmptyString(value: string | undefined | null) {
+    return !isDefined(value) || value === CommonConstants.EMPTY_STRING;
+}
+```
+  
 - `UI` utils
 
     Methods for UI operations.
+  
+```typescript
+/**
+ * Return CSS like value
+ * @param value Value as number
+ * @returns Value as '1px'
+ */
+export function getCssLikeValue(value: number,
+    type: string = UIConstants.CSS_PIXELS): string {
+    return value + type;
+}
+```

package/_ngx-sfc-common.styles.scss

@@ -1,13 +1,7 @@
+// default
 $color-default: #545e61 !default;
 $color-hover-default: #2bbbad !default;
 $color-disabled-default: #bdbdbd !default;
-$color-filled-default: #fff !default;
-$color-filled-fade-default: #f5f7fa !default;
-$color-filled-fade-1-default: #e6e9ed !default;
-$color-filled-fade-2-default: #434a54 !default;
-$color-filled-fade-3-default: #34323d !default;
-$color-hover-filled-default: #aab2bd !default;
-$color-shadow-default: #0003 !default;
 $background-gradient-default: linear-gradient(
   to right,
   rgb(0 0 0 / 0%) 0%,
@@ -15,13 +9,10 @@ $background-gradient-default: linear-gradient(
   rgb(0 0 0 / 30%) 83%,
   rgb(0 0 0 / 0%) 100%
 );
-$color-background-default: #0009;
 
+// default
 $color-dark: #ccd1d9 !default;
 $color-disabled-dark: #656d78 !default;
-$color-filled-dark: #656d78 !default;
-$color-hover-filled-dark: #aab2bd !default;
-$color-disabled-filled-dark: #bdbdbd !default;
 $background-gradient-dark: linear-gradient(
   to right,
   rgb(255 255 255 / 0%) 0%,
@@ -30,10 +21,57 @@ $background-gradient-dark: linear-gradient(
   rgb(255 255 255 / 0%) 100%
 );
 
+// colors
+$color-0: #fff !default;
+$color-1: #f6f6f6 !default;
+$color-2: #f5f7fa !default;
+$color-3: #e6e9ed !default;
+$color-4: #e9e9e9 !default;
+$color-5: #d8d7d7 !default;
+$color-6: #ccd1d9 !default;
+$color-7: #aab2bd !default;
+$color-8: #656d78 !default;
+$color-9: #434a54 !default;
+$color-10: #34323d !default;
+$color-11: #1b1d1f !default;
 
-@mixin square-size($fontSize, $multiplier: 1) {
-  width: $fontSize * $multiplier;
-  height: $fontSize * $multiplier;
+// shades
+$color-shadow-0: #00000005 !default;
+$color-shadow-1: #0000001a !default;
+$color-shadow-2: #00000030 !default;
+$color-shadow-3: #0000003b !default;
+$color-shadow-4: #0000004d !default;
+$color-shadow-5: #0009 !default;
+
+// result types
+$color-info: #4fc1e9;
+$color-success: #4ec07d;
+$color-failed: #e96075;
+
+// color types
+$color-red-0: #ed5565 !default;
+$color-red-1: #da4453 !default;
+$color-orange-0: #fc6e51 !default;
+$color-orange-1: #e9573f !default;
+$color-yellow-0: #ffce54 !default;
+$color-yellow-1: #fcbb42 !default;
+$color-green-0: #a0d468 !default;
+$color-green-1: #8cc152 !default;
+$color-green-2: #48cfad !default;
+$color-green-3: #37bc9b !default;
+$color-blue-0: #4fc1e9 !default;
+$color-blue-1: #3bafda !default;
+$color-blue-2: #5d9cec !default;
+$color-blue-3: #4a89dc !default;
+$color-magenta-0: #ac92ec !default;
+$color-magenta-1: #967adc !default;
+$color-pink-0: #ec87c0 !default;
+$color-pink-1: #d770ad !default;
+
+
+@mixin square-size($value, $multiplier: 1) {
+  width: $value * $multiplier;
+  height: $value * $multiplier;
 }
 
 @mixin theme-value($property, $value-common, $value-dark, $selector: "&") {
@@ -54,3 +92,4 @@ $background-gradient-dark: linear-gradient(
     opacity: 0;
   }
 }
+

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

@@ -19,11 +19,11 @@ export class ButtonComponent {
         return classes;
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", 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:.8em;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            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:.8em;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"] }]
+            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"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{

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

@@ -8,11 +8,11 @@ export class CheckmarkComponent {
         this.onClick = () => this.active = !this.active;
     }
 }
-CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckmarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", 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 .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;color:transparent;-webkit-text-stroke:1px #0003}: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{-webkit-text-stroke:initial;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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: CheckmarkComponent, decorators: [{
+CheckmarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CheckmarkComponent, decorators: [{
             type: Component,
-            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 .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;color:transparent;-webkit-text-stroke:1px #0003}: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{-webkit-text-stroke:initial;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"] }]
+            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"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+export class CloseComponent {
+}
+CloseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CloseComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21tb24vc3JjL2xpYi9jb21wb25lbnRzL2Nsb3NlL2Nsb3NlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jbG9zZS9jbG9zZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU8xQyxNQUFNLE9BQU8sY0FBYzs7MkdBQWQsY0FBYzsrRkFBZCxjQUFjLGlEQ1AzQiwyRUFFTTsyRkRLTyxjQUFjO2tCQUwxQixTQUFTOytCQUNFLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2ZjLWNsb3NlJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2xvc2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2Nsb3NlLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIENsb3NlQ29tcG9uZW50IHtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyXCI+XHJcbiAgICA8aSBjbGFzcz1cImZhcyBmYS10aW1lc1wiPjwvaT5cclxuPC9kaXY+Il19

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

@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class DelimeterComponent {
 }
-DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DelimeterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: DelimeterComponent, selector: "sfc-delimeter", ngImport: i0, template: ``, isInline: true, styles: [":host{width:100%;height:.07em}:host :host-context(.sfc-default-theme){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 :host-context(.sfc-dark-theme){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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: DelimeterComponent, decorators: [{
+DelimeterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DelimeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: DelimeterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-delimeter', template: ``, styles: [":host{width:100%;height:.07em}:host :host-context(.sfc-default-theme){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 :host-context(.sfc-dark-theme){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"] }]
+            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"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVsaW1ldGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9kZWxpbWV0ZXIvZGVsaW1ldGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU8xQyxNQUFNLE9BQU8sa0JBQWtCOzsrR0FBbEIsa0JBQWtCO21HQUFsQixrQkFBa0IscURBSG5CLEVBQUU7MkZBR0Qsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGVBQWUsWUFDZixFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1kZWxpbWV0ZXInLFxyXG4gIHRlbXBsYXRlOiBgYCxcclxuICBzdHlsZVVybHM6IFsnLi9kZWxpbWV0ZXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGVsaW1ldGVyQ29tcG9uZW50IHtcclxufVxyXG4iXX0=

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

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

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

@@ -7,9 +7,9 @@ export class HamburgerComponent {
         this.onClick = () => this.open = !this.open;
     }
 }
-HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HamburgerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", 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"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: HamburgerComponent, decorators: [{
+HamburgerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HamburgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: HamburgerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sfc-hamburger', template: "<div class=\"container\">\r\n    <div class=\"line half start\"></div>\r\n    <div class=\"line\"></div>\r\n    <div class=\"line half end\"></div>\r\n</div>", styles: [".container{width:1em;height:1em;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .33s ease-out}:host(.open) .container{transform:rotate(-45deg)}.container .line{border-radius:.31em;width:100%;height:.25em}:host-context(.sfc-default-theme) .container .line{background-color:#545e61}:host-context(.sfc-dark-theme) .container .line{background-color:#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"] }]
         }], propDecorators: { open: [{

package/esm2020/lib/components/index.mjs

@@ -17,4 +17,10 @@ export { HamburgerComponent } from './hamburger/hamburger.component';
 export { DotsComponent } from './dots/dots.component';
 export { ToggleSwitcherComponent } from './toggle-switcher/toggle-switcher.component';
 export { CheckmarkComponent } from './checkmark/checkmark.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbW1vbi9zcmMvbGliL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDckUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDM0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRWhFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUM1RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDN0QsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sdURBQXVELENBQUM7QUFDcEcsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sdURBQXVELENBQUM7QUFDcEcsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzVELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUV0RixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIlxyXG5leHBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcclxuZXhwb3J0IHsgQnV0dG9uVHlwZSB9IGZyb20gJy4vYnV0dG9uL2J1dHRvbi10eXBlLmVudW0nO1xyXG5leHBvcnQgeyBUb29sdGlwQ29tcG9uZW50IH0gZnJvbSAnLi90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50JztcclxuZXhwb3J0IHsgVG9vbHRpcFR5cGUgfSBmcm9tICcuL3Rvb2x0aXAvdG9vbHRpcC10eXBlLmVudW0nO1xyXG5leHBvcnQgeyBEZWxpbWV0ZXJDb21wb25lbnQgfSBmcm9tICcuL2RlbGltZXRlci9kZWxpbWV0ZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQm91bmNlTG9hZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9sb2FkZXIvYm91bmNlL2JvdW5jZS1sb2FkZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQ2lyY2xlTG9hZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9sb2FkZXIvY2lyY2xlL2NpcmNsZS1sb2FkZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQ2lyY2xlTG9hZGVyVHlwZSB9IGZyb20gJy4vbG9hZGVyL2NpcmNsZS9jaXJjbGUtbG9hZGVyLXR5cGUuZW51bSc7XHJcbmV4cG9ydCB7IExvYWRlclNlcnZpY2UgfSBmcm9tICcuL2xvYWRlci9zZXJ2aWNlL2xvYWRlci5zZXJ2aWNlJztcclxuZXhwb3J0IHsgSUxvYWRlckV2ZW50IH0gZnJvbSAnLi9sb2FkZXIvbG9hZGVyLmV2ZW50JztcclxuZXhwb3J0IHsgTW9kYWxDb21wb25lbnQgfSBmcm9tICcuL21vZGFsL21vZGFsLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IE1vZGFsT3Blbk9uQ2xpY2tEaXJlY3RpdmUgfSBmcm9tICcuL21vZGFsL2RpcmVjdGl2ZS9tb2RhbC1vcGVuLW9uLWNsaWNrLmRpcmVjdGl2ZSc7XHJcbmV4cG9ydCB7IE1vZGFsU2VydmljZSB9IGZyb20gJy4vbW9kYWwvc2VydmljZS9tb2RhbC5zZXJ2aWNlJztcclxuZXhwb3J0IHsgRGVmYXVsdE1vZGFsSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9tb2RhbC9oZWFkZXIvZGVmYXVsdC9kZWZhdWx0LW1vZGFsLWhlYWRlci5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBEZWZhdWx0TW9kYWxGb290ZXJDb21wb25lbnQgfSBmcm9tICcuL21vZGFsL2Zvb3Rlci9kZWZhdWx0L2RlZmF1bHQtbW9kYWwtZm9vdGVyLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IE1vZGFsVGVtcGxhdGUgfSBmcm9tICcuL21vZGFsL21vZGFsLXRlbXBsYXRlLmVudW0nO1xyXG5leHBvcnQgeyBIYW1idXJnZXJDb21wb25lbnQgfSBmcm9tICcuL2hhbWJ1cmdlci9oYW1idXJnZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgRG90c0NvbXBvbmVudCB9IGZyb20gJy4vZG90cy9kb3RzLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFRvZ2dsZVN3aXRjaGVyQ29tcG9uZW50IH0gZnJvbSAnLi90b2dnbGUtc3dpdGNoZXIvdG9nZ2xlLXN3aXRjaGVyLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IElUb2dnbGVTd2l0Y2hlck1vZGVsIH0gZnJvbSAnLi90b2dnbGUtc3dpdGNoZXIvdG9nZ2xlLXN3aXRjaGVyLm1vZGVsJztcclxuZXhwb3J0IHsgQ2hlY2ttYXJrQ29tcG9uZW50IH0gZnJvbSAnLi9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudCc7XHJcbiJdfQ==
+export { TemplateContentComponent } from './template-content/template-content.component';
+export { CloseComponent } from './close/close.component';
+export { PaginationComponent } from './pagination/pagination.component';
+export { PaginationService } from './pagination/service/pagination.service';
+export { SortingComponent } from './sorting/sorting.component';
+export { SortingService } from './sorting/service/sorting.service';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbW1vbi9zcmMvbGliL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDckUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDM0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRWhFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUM1RixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDN0QsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sdURBQXVELENBQUM7QUFDcEcsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sdURBQXVELENBQUM7QUFDcEcsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzVELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUV0RixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNyRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQ0FBK0MsQ0FBQztBQUN6RixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDeEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFNUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiXHJcbmV4cG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBCdXR0b25UeXBlIH0gZnJvbSAnLi9idXR0b24vYnV0dG9uLXR5cGUuZW51bSc7XHJcbmV4cG9ydCB7IFRvb2x0aXBDb21wb25lbnQgfSBmcm9tICcuL3Rvb2x0aXAvdG9vbHRpcC5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBUb29sdGlwVHlwZSB9IGZyb20gJy4vdG9vbHRpcC90b29sdGlwLXR5cGUuZW51bSc7XHJcbmV4cG9ydCB7IERlbGltZXRlckNvbXBvbmVudCB9IGZyb20gJy4vZGVsaW1ldGVyL2RlbGltZXRlci5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBCb3VuY2VMb2FkZXJDb21wb25lbnQgfSBmcm9tICcuL2xvYWRlci9ib3VuY2UvYm91bmNlLWxvYWRlci5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBDaXJjbGVMb2FkZXJDb21wb25lbnQgfSBmcm9tICcuL2xvYWRlci9jaXJjbGUvY2lyY2xlLWxvYWRlci5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBDaXJjbGVMb2FkZXJUeXBlIH0gZnJvbSAnLi9sb2FkZXIvY2lyY2xlL2NpcmNsZS1sb2FkZXItdHlwZS5lbnVtJztcclxuZXhwb3J0IHsgTG9hZGVyU2VydmljZSB9IGZyb20gJy4vbG9hZGVyL3NlcnZpY2UvbG9hZGVyLnNlcnZpY2UnO1xyXG5leHBvcnQgeyBJTG9hZGVyRXZlbnQgfSBmcm9tICcuL2xvYWRlci9sb2FkZXIuZXZlbnQnO1xyXG5leHBvcnQgeyBNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vbW9kYWwvbW9kYWwuY29tcG9uZW50JztcclxuZXhwb3J0IHsgTW9kYWxPcGVuT25DbGlja0RpcmVjdGl2ZSB9IGZyb20gJy4vbW9kYWwvZGlyZWN0aXZlL21vZGFsLW9wZW4tb24tY2xpY2suZGlyZWN0aXZlJztcclxuZXhwb3J0IHsgTW9kYWxTZXJ2aWNlIH0gZnJvbSAnLi9tb2RhbC9zZXJ2aWNlL21vZGFsLnNlcnZpY2UnO1xyXG5leHBvcnQgeyBEZWZhdWx0TW9kYWxIZWFkZXJDb21wb25lbnQgfSBmcm9tICcuL21vZGFsL2hlYWRlci9kZWZhdWx0L2RlZmF1bHQtbW9kYWwtaGVhZGVyLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IERlZmF1bHRNb2RhbEZvb3RlckNvbXBvbmVudCB9IGZyb20gJy4vbW9kYWwvZm9vdGVyL2RlZmF1bHQvZGVmYXVsdC1tb2RhbC1mb290ZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgTW9kYWxUZW1wbGF0ZSB9IGZyb20gJy4vbW9kYWwvbW9kYWwtdGVtcGxhdGUuZW51bSc7XHJcbmV4cG9ydCB7IEhhbWJ1cmdlckNvbXBvbmVudCB9IGZyb20gJy4vaGFtYnVyZ2VyL2hhbWJ1cmdlci5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBEb3RzQ29tcG9uZW50IH0gZnJvbSAnLi9kb3RzL2RvdHMuY29tcG9uZW50JztcclxuZXhwb3J0IHsgVG9nZ2xlU3dpdGNoZXJDb21wb25lbnQgfSBmcm9tICcuL3RvZ2dsZS1zd2l0Y2hlci90b2dnbGUtc3dpdGNoZXIuY29tcG9uZW50JztcclxuZXhwb3J0IHsgSVRvZ2dsZVN3aXRjaGVyTW9kZWwgfSBmcm9tICcuL3RvZ2dsZS1zd2l0Y2hlci90b2dnbGUtc3dpdGNoZXIubW9kZWwnO1xyXG5leHBvcnQgeyBDaGVja21hcmtDb21wb25lbnQgfSBmcm9tICcuL2NoZWNrbWFyay9jaGVja21hcmsuY29tcG9uZW50JztcclxuZXhwb3J0IHsgVGVtcGxhdGVDb250ZW50Q29tcG9uZW50IH0gZnJvbSAnLi90ZW1wbGF0ZS1jb250ZW50L3RlbXBsYXRlLWNvbnRlbnQuY29tcG9uZW50JztcclxuZXhwb3J0IHsgQ2xvc2VDb21wb25lbnQgfSBmcm9tICcuL2Nsb3NlL2Nsb3NlLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFBhZ2luYXRpb25Db21wb25lbnQgfSBmcm9tICcuL3BhZ2luYXRpb24vcGFnaW5hdGlvbi5jb21wb25lbnQnO1xyXG5leHBvcnQgeyBQYWdpbmF0aW9uU2VydmljZSB9IGZyb20gJy4vcGFnaW5hdGlvbi9zZXJ2aWNlL3BhZ2luYXRpb24uc2VydmljZSc7XHJcbmV4cG9ydCB7IElQYWdpbmF0aW9uRXZlbnQgfSBmcm9tICcuL3BhZ2luYXRpb24vc2VydmljZS9wYWdpbmF0aW9uLmV2ZW50JztcclxuZXhwb3J0IHsgU29ydGluZ0NvbXBvbmVudCB9IGZyb20gJy4vc29ydGluZy9zb3J0aW5nLmNvbXBvbmVudCc7XHJcbmV4cG9ydCB7IFNvcnRpbmdTZXJ2aWNlIH0gZnJvbSAnLi9zb3J0aW5nL3NlcnZpY2Uvc29ydGluZy5zZXJ2aWNlJztcclxuZXhwb3J0IHsgSVNvcnRpbmdNb2RlbCB9IGZyb20gJy4vc29ydGluZy9zb3J0aW5nLm1vZGVsJztcclxuZXhwb3J0IHsgSVNvcnRpbmdFdmVudCB9IGZyb20gJy4vc29ydGluZy9zZXJ2aWNlL3NvcnRpbmcuZXZlbnQnO1xyXG4iXX0=

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

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

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

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

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

@@ -37,9 +37,9 @@ export class LoaderBaseComponent {
         return classes;
     }
 }
-LoaderBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderBaseComponent, deps: [{ token: i1.LoaderService }], target: i0.ɵɵFactoryTarget.Directive });
-LoaderBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: LoaderBaseComponent, inputs: { id: "id", start: "start", background: "background" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: LoaderBaseComponent, decorators: [{
+LoaderBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderBaseComponent, deps: [{ token: i1.LoaderService }], target: i0.ɵɵFactoryTarget.Directive });
+LoaderBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: LoaderBaseComponent, inputs: { id: "id", start: "start", background: "background" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i1.LoaderService }]; }, propDecorators: { id: [{
                 type: Input