ngx-sfc-common 0.0.1 → 0.0.4

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).
@@ -135,7 +147,7 @@ Add `ng-template` with directive `[sfcTemplateReference]="ModalTemplate.Header"`
 <ng-template [sfcTemplateReference]="ModalTemplate.Header">
         <div>
             <div>{{HEADER_MODEL.Title}}</div>
-            <i class="{{HEADER_MODEL.Icon}}"></i>
+            <fa-icon [icon]="HEADER_MODEL.Icon"></fa-icon>
             <button (click)="FOOTER_MODEL.Click()">hide model</button>
         </div>
 </ng-template>
@@ -178,7 +190,7 @@ Parameters:
 Button component allow to define several visualization types, add text, icons before and after text and make button disabled.
 
  ```html
-<sfc-button iconBefore="fa fa-star" text="Button" iconAfter="fa fa-car" [disabled]="false" [types]="[ButtonType.Rounded,ButtonType.Filled]">        
+<sfc-button [iconBefore]="faStar" text="Button" [iconAfter]="faCar" [disabled]="false" [types]="[ButtonType.Rounded,ButtonType.Filled]">        
 </sfc-button>
 ```   
 
@@ -203,13 +215,21 @@ Types can be combinated.
 Check mark with possibility to change icon value. Can be used for checking rows in table rows.
 
 ```html
-<sfc-checkmark [active]="value" icon="fa fa-star"></sfc-checkmark>
+<sfc-checkmark [active]="value" [icon]="faStar"></sfc-checkmark>
 ```    
 
 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,14 +387,92 @@ 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. 
 Can be used for toggling dark and light themes on page, toggling table types (rows or cards).
 
 ```html
-<sfc-toggle-switcher [active]="false" [leftModel]="{label:'test1', icon:'fa fa-car'}"
-        [rightModel]="{label:'test1', icon:'fa fa-star'}">
+<sfc-toggle-switcher [active]="false" [leftModel]="{label:'test1', icon:faCar}"
+        [rightModel]="{label:'test1', icon:faStar}">
 </sfc-toggle-switcher>
 ```
 
@@ -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

@@ -0,0 +1,96 @@
+// default
+$color-default: #545e61 !default;
+$color-hover-default: #2bbbad !default;
+$color-disabled-default: #bdbdbd !default;
+$background-gradient-default: linear-gradient(
+  to right,
+  rgb(0 0 0 / 0%) 0%,
+  rgb(0 0 0 / 30%) 17%,
+  rgb(0 0 0 / 30%) 83%,
+  rgb(0 0 0 / 0%) 100%
+);
+
+// default
+$color-dark: #ccd1d9 !default;
+$color-disabled-dark: #656d78 !default;
+$background-gradient-dark: linear-gradient(
+  to right,
+  rgb(255 255 255 / 0%) 0%,
+  rgb(255 255 255 / 40%) 17%,
+  rgb(255 255 255 / 40%) 83%,
+  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;
+
+// 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: "&") {
+  #{$selector},
+  :host-context(.sfc-default-theme) #{$selector} {
+    #{$property}: $value-common;
+  }
+  :host-context(.sfc-dark-theme) #{$selector} {
+    #{$property}: $value-dark;
+  }
+}
+
+@mixin visibility($show) {
+  @if $show {
+    visibility: visible;
+    opacity: 1;
+  } @else {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+

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

@@ -3,7 +3,8 @@ import { UIClass } from '../../enums';
 import { distinct } from '../../utils';
 import { ButtonType } from './button-type.enum';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@fortawesome/angular-fontawesome";
+import * as i2 from "@angular/common";
 export class ButtonComponent {
     constructor() {
         this.BUTTON_DEFAULT_TEXT = 'Button';
@@ -19,11 +20,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    <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.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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    <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"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], iconBefore: [{
@@ -35,4 +36,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
             }], types: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdEMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7OztBQU9oRCxNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQU9tQix3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFHeEQsU0FBSSxHQUFXLElBQUksQ0FBQyxtQkFBbUIsQ0FBQztRQVN4QyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLFVBQUssR0FBc0IsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7S0FZbEQ7SUFWQyxJQUFJLE9BQU87UUFDVCxNQUFNLE9BQU8sR0FBUSxFQUFFLENBQUE7UUFFdkIsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUNmLE9BQU8sQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBRW5DLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxDQUFDO1FBRTNELE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7OzRHQTVCVSxlQUFlO2dHQUFmLGVBQWUsb0tDVjVCLG1RQUlJOzJGRE1TLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTs4QkFTdEIsSUFBSTtzQkFESCxLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVUlDbGFzcyB9IGZyb20gJy4uLy4uL2VudW1zJztcclxuaW1wb3J0IHsgZGlzdGluY3QgfSBmcm9tICcuLi8uLi91dGlscyc7XHJcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tICcuL2J1dHRvbi10eXBlLmVudW0nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtYnV0dG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IHtcclxuXHJcbiAgcHJpdmF0ZSByZWFkb25seSBCVVRUT05fREVGQVVMVF9URVhUOiBzdHJpbmcgPSAnQnV0dG9uJztcclxuXHJcbiAgQElucHV0KClcclxuICB0ZXh0OiBzdHJpbmcgPSB0aGlzLkJVVFRPTl9ERUZBVUxUX1RFWFQ7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbkJlZm9yZT86IHN0cmluZztcclxuXHJcbiAgQElucHV0KClcclxuICBpY29uQWZ0ZXI/OiBzdHJpbmc7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICB0eXBlczogQXJyYXk8QnV0dG9uVHlwZT4gPSBbQnV0dG9uVHlwZS5Cb3JkZXJlZF07XHJcblxyXG4gIGdldCBjbGFzc2VzKCkge1xyXG4gICAgY29uc3QgY2xhc3NlczogYW55ID0ge31cclxuXHJcbiAgICBpZiAodGhpcy5kaXNhYmxlZClcclxuICAgICAgY2xhc3Nlc1tVSUNsYXNzLkRpc2FibGVkXSA9IHRydWU7XHJcblxyXG4gICAgZGlzdGluY3QodGhpcy50eXBlcykuZm9yRWFjaCh0eXBlID0+IGNsYXNzZXNbdHlwZV0gPSB0cnVlKTtcclxuXHJcbiAgICByZXR1cm4gY2xhc3NlcztcclxuICB9XHJcbn1cclxuIiwiPGEgY2xhc3M9XCJidXR0b25cIiBbbmdDbGFzc109XCJjbGFzc2VzXCI+XHJcbiAgICA8aSAqbmdJZj1cImljb25CZWZvcmVcIiBjbGFzcz1cImljb24gYmVmb3JlXCIgW25nQ2xhc3NdPVwiaWNvbkJlZm9yZVwiPjwvaT5cclxuICAgIDxzcGFuIGNsYXNzPVwidGV4dFwiPnt7dGV4dH19PC9zcGFuPlxyXG4gICAgPGkgKm5nSWY9XCJpY29uQWZ0ZXJcIiBjbGFzcz1cImljb24gYWZ0ZXJcIiBbbmdDbGFzc109XCJpY29uQWZ0ZXJcIj48L2k+XHJcbjwvYT4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdEMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7Ozs7QUFRaEQsTUFBTSxPQUFPLGVBQWU7SUFMNUI7UUFPbUIsd0JBQW1CLEdBQVcsUUFBUSxDQUFDO1FBR3hELFNBQUksR0FBVyxJQUFJLENBQUMsbUJBQW1CLENBQUM7UUFTeEMsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUcxQixVQUFLLEdBQXNCLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0tBWWxEO0lBVkMsSUFBSSxPQUFPO1FBQ1QsTUFBTSxPQUFPLEdBQVEsRUFBRSxDQUFBO1FBRXZCLElBQUksSUFBSSxDQUFDLFFBQVE7WUFDZixPQUFPLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxHQUFHLElBQUksQ0FBQztRQUVuQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztRQUUzRCxPQUFPLE9BQU8sQ0FBQztJQUNqQixDQUFDOzs0R0E1QlUsZUFBZTtnR0FBZixlQUFlLG9LQ1g1QixxUkFJSTsyRkRPUyxlQUFlO2tCQUwzQixTQUFTOytCQUNFLFlBQVk7OEJBU3RCLElBQUk7c0JBREgsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBSU4sU0FBUztzQkFEUixLQUFLO2dCQUlOLFFBQVE7c0JBRFAsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFVJQ2xhc3MgfSBmcm9tICcuLi8uLi9lbnVtcyc7XHJcbmltcG9ydCB7IGRpc3RpbmN0IH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xyXG5pbXBvcnQgeyBCdXR0b25UeXBlIH0gZnJvbSAnLi9idXR0b24tdHlwZS5lbnVtJztcclxuaW1wb3J0IHsgSWNvbkRlZmluaXRpb24gfSBmcm9tICdAZm9ydGF3ZXNvbWUvZnJlZS1zb2xpZC1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtYnV0dG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IHtcclxuXHJcbiAgcHJpdmF0ZSByZWFkb25seSBCVVRUT05fREVGQVVMVF9URVhUOiBzdHJpbmcgPSAnQnV0dG9uJztcclxuXHJcbiAgQElucHV0KClcclxuICB0ZXh0OiBzdHJpbmcgPSB0aGlzLkJVVFRPTl9ERUZBVUxUX1RFWFQ7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbkJlZm9yZT86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGljb25BZnRlcj86IEljb25EZWZpbml0aW9uO1xyXG5cclxuICBASW5wdXQoKVxyXG4gIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgdHlwZXM6IEFycmF5PEJ1dHRvblR5cGU+ID0gW0J1dHRvblR5cGUuQm9yZGVyZWRdO1xyXG5cclxuICBnZXQgY2xhc3NlcygpIHtcclxuICAgIGNvbnN0IGNsYXNzZXM6IGFueSA9IHt9XHJcblxyXG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpXHJcbiAgICAgIGNsYXNzZXNbVUlDbGFzcy5EaXNhYmxlZF0gPSB0cnVlO1xyXG5cclxuICAgIGRpc3RpbmN0KHRoaXMudHlwZXMpLmZvckVhY2godHlwZSA9PiBjbGFzc2VzW3R5cGVdID0gdHJ1ZSk7XHJcblxyXG4gICAgcmV0dXJuIGNsYXNzZXM7XHJcbiAgfVxyXG59XHJcbiIsIjxhIGNsYXNzPVwiYnV0dG9uXCIgW25nQ2xhc3NdPVwiY2xhc3Nlc1wiPlxyXG4gICAgPGZhLWljb24gKm5nSWY9XCJpY29uQmVmb3JlXCIgY2xhc3M9XCJpY29uIGJlZm9yZVwiIFtpY29uXT1cImljb25CZWZvcmVcIj48L2ZhLWljb24+XHJcbiAgICA8c3BhbiBjbGFzcz1cInRleHRcIj57e3RleHR9fTwvc3Bhbj5cclxuICAgIDxmYS1pY29uICpuZ0lmPVwiaWNvbkFmdGVyXCIgY2xhc3M9XCJpY29uIGFmdGVyXCIgW2ljb25dPVwiaWNvbkFmdGVyXCI+PC9mYS1pY29uPlxyXG48L2E+Il19

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

@@ -1,18 +1,20 @@
 import { Component, HostBinding, HostListener, Input } from '@angular/core';
 import { UIClass } from '../../enums';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import * as i0 from "@angular/core";
+import * as i1 from "@fortawesome/angular-fontawesome";
 export class CheckmarkComponent {
     constructor() {
         this.active = false;
-        this.icon = 'fa fa-check';
+        this.icon = faCheck;
         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        <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.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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        <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"] }]
         }], propDecorators: { active: [{
                 type: Input
             }, {
@@ -24,4 +26,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImpor
                 type: HostListener,
                 args: ['click']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2ttYXJrLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFPdEMsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQVNFLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFHeEIsU0FBSSxHQUFZLGFBQWEsQ0FBQztRQUc5QixZQUFPLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7S0FFNUM7OytHQVpZLGtCQUFrQjttR0FBbEIsa0JBQWtCLCtMQ1IvQix3SEFJTTsyRkRJTyxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsZUFBZTs4QkFRekIsTUFBTTtzQkFGTCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsTUFBTTtnQkFJdEMsSUFBSTtzQkFESCxLQUFLO2dCQUlOLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVSUNsYXNzIH0gZnJvbSAnLi4vLi4vZW51bXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtY2hlY2ttYXJrJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2ttYXJrLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jaGVja21hcmsuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2hlY2ttYXJrQ29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLkFjdGl2ZSlcclxuICBhY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBpY29uPzogc3RyaW5nID0gJ2ZhIGZhLWNoZWNrJztcclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKVxyXG4gIG9uQ2xpY2sgPSAoKSA9PiB0aGlzLmFjdGl2ZSA9ICF0aGlzLmFjdGl2ZTtcclxuXHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJjaGVja1wiPlxyXG4gICAgICAgIDxpIGNsYXNzPVwie3tpY29ufX1cIj48L2k+XHJcbiAgICA8L3NwYW4+XHJcbjwvZGl2PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2ttYXJrLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN0QyxPQUFPLEVBQUUsT0FBTyxFQUFrQixNQUFNLG1DQUFtQyxDQUFDOzs7QUFPNUUsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQVNFLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFHeEIsU0FBSSxHQUFtQixPQUFPLENBQUM7UUFHL0IsWUFBTyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0tBRTVDOzsrR0FaWSxrQkFBa0I7bUdBQWxCLGtCQUFrQiwrTENUL0IsaUlBSU07MkZES08sa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGVBQWU7OEJBUXpCLE1BQU07c0JBRkwsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLE1BQU07Z0JBSXRDLElBQUk7c0JBREgsS0FBSztnQkFJTixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVUlDbGFzcyB9IGZyb20gJy4uLy4uL2VudW1zJztcclxuaW1wb3J0IHsgZmFDaGVjaywgSWNvbkRlZmluaXRpb24gfSBmcm9tICdAZm9ydGF3ZXNvbWUvZnJlZS1zb2xpZC1zdmctaWNvbnMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtY2hlY2ttYXJrJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2ttYXJrLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jaGVja21hcmsuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2hlY2ttYXJrQ29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLkFjdGl2ZSlcclxuICBhY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBpY29uOiBJY29uRGVmaW5pdGlvbiA9IGZhQ2hlY2s7XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcclxuICBvbkNsaWNrID0gKCkgPT4gdGhpcy5hY3RpdmUgPSAhdGhpcy5hY3RpdmU7XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjb250YWluZXJcIj5cclxuICAgIDxzcGFuIGNsYXNzPVwiY2hlY2tcIj5cclxuICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJpY29uXCI+PC9mYS1pY29uPlxyXG4gICAgPC9zcGFuPlxyXG48L2Rpdj4iXX0=

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

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@fortawesome/angular-fontawesome";
+export class CloseComponent {
+    constructor() {
+        this.faTimes = faTimes;
+    }
+}
+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    <fa-icon [icon]=\"faTimes\"></fa-icon>\r\n</div>", styles: [":host{color:#545e61;cursor:pointer}:host:hover{color:#2bbbad}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CloseComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvc2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNmYy1jb21tb24vc3JjL2xpYi9jb21wb25lbnRzL2Nsb3NlL2Nsb3NlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jbG9zZS9jbG9zZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQzs7O0FBTzVELE1BQU0sT0FBTyxjQUFjO0lBTDNCO1FBTUUsWUFBTyxHQUFHLE9BQU8sQ0FBQztLQUNuQjs7MkdBRlksY0FBYzsrRkFBZCxjQUFjLGlEQ1IzQixtRkFFTTsyRkRNTyxjQUFjO2tCQUwxQixTQUFTOytCQUNFLFdBQVciLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgZmFUaW1lcyB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29ucyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1jbG9zZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Nsb3NlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jbG9zZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDbG9zZUNvbXBvbmVudCB7XHJcbiAgZmFUaW1lcyA9IGZhVGltZXM7XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgPGZhLWljb24gW2ljb25dPVwiZmFUaW1lc1wiPjwvZmEtaWNvbj5cclxuPC9kaXY+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,: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,: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 .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"] });
+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 .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"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {

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

@@ -7,11 +7,11 @@ 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}.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"] });
+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"] }]
+            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"] }]
         }], propDecorators: { open: [{
                 type: Input
             }, {