ngx-sfc-common 0.0.1

package/README.md

@@ -0,0 +1,460 @@
+# 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
+
+## Table of Contents
+
+- [Get started](#get-started)
+- [Directives](#directives)
+  - [Click out side](#click-out-side-sfcclickoutside)
+  - [Component size](#component-size-sfccomponentsize)
+  - [Mouse down](#mouse-down-sfcmousedown)
+  - [Show/Hide element](#showhide-element-sfcshowhideelement)
+  - [Template reference](#template-reference-sfctemplatereference)
+  - [Throw element on hover](#throw-element-on-hover-sfcthrowelementonhover)
+- [Components](#components)
+  - [Button](#button-sfc-button)
+  - [Checkmark](#checkmark-sfc-checkmark)
+  - [Delimeter](#delimeter-sfc-delimeter)
+  - [Dots](#dots-sfc-dots)
+  - [Hamburger](#hamburger-sfc-hamburger)
+  - [Loader](#loader-sfc-bounce-loader-sfc-circle-loader)
+  - [Modal](#modal-sfc-modal)
+  - [Toggle-switcher](#toggle-switcher-sfc-toggle-switcher)
+  - [Tooltip](#tooltip-sfc-tooltip)
+- [Services](#services)
+  - [Resize](#resize)
+- [Utils](#utils)
+
+## Get started
+
+1. Run `npm install ngx-sfc-common` or `ng add ngx-sfc-common`.
+2. Import `NgxSfcCommonModule` into a module where you intend to use components and directives:
+
+    ```typescript
+    import { NgxSfcCommonModule } from 'ngx-sfc-common';
+    @NgModule({
+      imports: [ NgxSfcCommonModule ]
+    })
+    export class SomeModule { }
+    ```
+
+## Directives
+
+## **Click out side `[sfcClickOutside]`**
+
+This directive can be usefull when need to detect if click event occured on specific HTML element (or it descendants) or outside it.
+
+Add directive `[sfcClickOutside]` to element that you whant to check:
+
+```html
+<div class="target" [sfcClickOutside]="value" (action)="onClick($event)"></div>
+```
+
+Parameters:
+1. `[sfcClickOutside]="value"` - if value is true, directive will listen click events, othervise ignoring.
+2. `(action)` - function to handle click events
+
+After clicking, directive will emit `ClickOutsideEvent` event for `(action)` output function.
+
+`ClickOutsideEvent` has such structure:
+
+```typescript
+export interface ClickOutsideEvent {
+    target: EventTarget | null;
+    value: boolean;
+}
+```
+1. `target` - clicked element
+2. `value` - true if clicked outside target element (which has directive on it)
+    
+## **Component size `[sfcComponentSize]`**
+
+This directive allow to set defined size (Small, Medium or Large) or custom size in `em` units on element.
+
+Add `[sfcComponentSize]` with value `ComponentSize` or add `[customSize]` for setting custom size:
+
+```html
+ <div class="target" [sfcComponentSize]="ComponentSize.Small" [customSize]="customSize">
+```   
+
+Parameters:
+1. `sfcComponentSize` expect enum `ComponentSize` value
+
+`ComponentSize` has three posible values:
+
+ComponentSize | CSS Value
+--------------|-----------
+Small         | 0.5em
+Medium        | 1em
+Large         | 2em
+
+2. `customSize` - custom size as number (`em` unit will be added)
+
+## **Mouse down `(sfcMouseDown)`**
+
+This directive allow clicking only by specific mouse button (by default allow left button click).
+
+Add `(sfcMouseDown)="click($event)"` for defined click event handler and `[button]` to define what mouse button allowed to do this click:
+
+```html
+<div class="target" (sfcMouseDown)="click($event)" [button]="button">
+```   
+
+Parameters:
+1. `(sfcMouseDown)` - if button allowed this action will be emitted
+2. `button` - define button, which will be allowed for clicking
+
+## **Show/Hide element `[sfcShowHideElement]`**
+
+This directive allow to show or hide element with delay.
+
+Add `[sfcShowHideElement]="show"` for defined show or hide element and `[delay]` for delay between show and hide states:
+
+```html
+<div class="target" [sfcShowHideElement]="show" [delay]="delay">
+```    
+
+Parameters:
+1. `[sfcShowHideElement]` - if pass true value, than show element, otherwise hide
+2. `[delay]` - delay for show/hide animation (0.5s by default)
+
+## **Template reference `[sfcTemplateReference]`**
+
+This directive allow to define templates by name and query these templates as array inside component.
+
+Add `ng-template` with directive `[sfcTemplateReference]="ModalTemplate.Header"` (`ModalTemplate.Header` it's a name for template):
+
+```html
+<ng-template [sfcTemplateReference]="ModalTemplate.Header">
+        <div>
+            <div>{{HEADER_MODEL.Title}}</div>
+            <i class="{{HEADER_MODEL.Icon}}"></i>
+            <button (click)="FOOTER_MODEL.Click()">hide model</button>
+        </div>
+</ng-template>
+```    
+
+Inside component query all templates by directive:
+
+```typescript
+@ContentChildren(TemplateReferenceDirective, { read: TemplateReferenceDirective })
+private templates: QueryList<TemplateReferenceDirective> | undefined;
+ ```    
+
+Get template by name `templateName`:
+
+```typescript
+const templateRef = firstOrDefault(this.templates?.toArray(),
+      t => t.templateName == ModalTemplate.Header);
+```    
+
+Parameters:
+1. `[sfcTemplateReference]` - name(identificator) for template
+
+## **Throw element on hover `[sfcThrowElementOnHover]`**
+
+This directive allow to throw element on `mouseenter` by Y axis and than back element on `mouseleave`.
+
+Add directive `[sfcThrowElementOnHover]` with throw power `value`:
+
+```html
+<div class="target" [sfcThrowElementOnHover]="value">
+```    
+
+Parameters:
+1. `[sfcThrowElementOnHover]` - with which power will throw element
+
+## Components
+
+## **Button `<sfc-button>`**
+
+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>
+```   
+
+Parameters:
+1. `iconBefore` - icon before text
+2. `iconAfter` - icon after text
+3. `text` - button text
+4. `[disabled]` - disable button
+5. `[types]` - visualization types
+
+Visualization types:
+1. Bordered - `ButtonType.Bordered`
+2. Filled - `ButtonType.Filled`
+3. Texted - `ButtonType.Texted`
+4. Circled - `ButtonType.Circled`
+5. Rounded - `ButtonType.Rounded`
+
+Types can be combinated.
+
+## **Checkmark `<sfc-checkmark>`**
+
+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>
+```    
+
+Parameters:
+1. `[active]` - check value, if checked - will have true value
+2. `icon` - icon value inside checkmark (default value - `fa fa-check`)
+
+## **Delimeter `<sfc-delimeter>`**
+
+Can be used for separate element on UI.
+
+```html
+<sfc-delimeter></sfc-delimeter>
+```    
+
+## **Dots `<sfc-dots>`**
+
+Dots component for toggling menues or dropdowns visibility.
+
+```html
+<sfc-dots [open]="open" [direction]="Direction.Horizontal"></sfc-dots>
+```    
+
+Parameters:
+1. `[open]` - define open/close state
+2. `[direction]` - dots direction
+
+Directions:
+1. Horizontal - `Direction.Horizontal`
+2. Vertical - `Direction.Vertical`
+
+## **Hamburger `<sfc-hamburger>`**
+
+Hamburger element for toggling menues.
+
+ ```html
+<sfc-hamburger [open]="open"></sfc-hamburger>
+```
+    
+Parameters:
+1. `[open]` - define open/close state
+
+## **Loader `<sfc-bounce-loader>, <sfc-circle-loader>`**
+
+ Loader component allow to show/hide loaders on specific elements or globally on all window object. 
+
+ There two types of loaders:
+ 1. Global - `id` value must be NULL
+ 2. Local - `id` value is required and must be unique
+
+ Add `<sfc-bounce-loader>` loader component:
+
+ ```html
+<sfc-bounce-loader id="bounceLoader" [start]="true"></sfc-bounce-loader>
+```  
+
+ Add `<button>` for showing and hidding loader (just for example):
+
+```html
+<button (click)="showLoader('bounceLoader')">Show</button>
+<button (click)="hideLoader('bounceLoader')">Hide</button>
+ ```    
+
+Inject `LoaderService` inside component:
+
+```typescript
+constructor(private loaderService: LoaderService) { }
+```   
+
+Add `showLoader` and `hideLoader` methods for buttons:
+
+```typescript
+public showLoader(id?: string): void {
+    this.loaderService.show(id);
+}
+
+public hideLoader(id?: string): void {
+    this.loaderService.hide(id);
+}
+```   
+
+There are several types for visual representations of loaders:
+1. Bounce - `<sfc-bounce-loader>`
+2. Circle - `<sfc-circle-loader>`
+3. Circle-fading - `<sfc-circle-loader [type]="CircleLoaderType.Fading">`
+
+Additional parameters:
+1. `[start]` - start loading on loader init (false by default)
+2. `[background]` - add overlay on loading (true by default)
+
+## **Modal `<sfc-modal>`**
+
+Component allow to add/remove modal on all window object. 
+Modal contains three main parts: `header`, `body` and `footer`. All these parts can be replaced by reference or content templates. 
+If reference and content templates not provided, `header` and `footer` parts have default implementation.
+
+Register button as modal handler by directive `*sfcModalOpenOnClick`. When click on this button, modal will add/removed:
+
+```html
+<button #defaultModalBtn>Default modal</button>
+<sfc-modal *sfcModalOpenOnClick="defaultModalBtn"></sfc-modal>
+ ```    
+
+Possible severals handlers:
+
+```html
+<button #defaultOneModalBtn>Button 1</button>
+<button #defaultSecondModalBtn>Button 1</button>
+<sfc-modal *sfcModalOpenOnClick="[defaultOneModalBtn, defaultSecondModalBtn]"></sfc-modal>
+```    
+
+Examles of setting modal parts:
+
+- References:
+
+```html
+<ng-template #headerRef>
+    <div>
+        <div>{{HEADER_MODEL.Title}}</div>
+    </div>
+</ng-template>
+
+<ng-template #footerRef>
+    <div>
+        <div>{{FOOTER_MODEL.Title}}</div>
+    </div>
+</ng-template>
+
+<sfc-modal [header]="headerRef" [footer]="footerRef"></sfc-modal>
+```    
+
+- Templates:
+
+```html
+<sfc-modal>
+    <ng-template [sfcTemplateReference]="ModalTemplate.Header">
+        <div>
+                <div>{{HEADER_MODEL.Title}}</div>
+        </div>
+    </ng-template>
+    <ng-template [sfcTemplateReference]="ModalTemplate.Footer">
+        <div>
+                <div>{{FOOTER_MODEL.Title}}</div>
+        </div>
+    </ng-template>
+</sfc-modal>
+```    
+
+Modal can be added/removed by `ModalService`:
+
+```typescript
+constructor(private modalService: ModalService) { }
+
+// open
+this.modalService.open();
+
+// close
+this.modalService.close();
+```    
+
+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)
+
+## **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>
+```
+
+Parameters:
+1. `[active]` - if true, toggler will move to right side
+2. `[leftModel]` - left model
+3. `[rightModel]` - right model
+
+Model contract:
+
+```typescript
+export interface IToggleSwitcherModel {
+   label: string,
+   icon?: string;
+}
+```    
+
+## **Tooltip `<sfc-tooltip>`**
+
+Allow to add texted tooltip for element and define appearance position. 
+Also component has two types - show tooltip on hower and show tooltip on click.
+
+```html
+<p sfc-tooltip="tooltip content" [tooltipPosition]="Position.Left" [tooltipType]="TooltipType.Click" [tooltipShow]="false">
+```    
+
+Parameters:
+1. `sfc-tooltip` - texted content of tooltip
+2. `[tooltipShow]` - show/hide tooltip
+3. `[tooltipPosition]` - tooltip appearance position
+4. `[tooltipType]` - type of tooltip
+
+Positions:
+- Top - `Position.Top`
+- Bottom - `Position.Bottom`
+- Left - `Position.Left`
+- Right - `Position.Right`
+
+Types:
+- Hover - `TooltipType.Hover`
+- Click - `TooltipType.Click`
+
+## Services
+
+## **Resize**
+
+Service will emit on every window's resize event and provide current state of window object.
+
+Inject service:
+
+```typescript
+constructor(private resizeService: ResizeService) { }
+```    
+
+Subscribe on resize observable and handle emit result:
+
+```typescript
+this._resizeSubscription = this.resizeService.onResize$
+      .pipe(startWith(this.window))
+      .subscribe(window => this.tooltipPosition = window.innerWidth <= MediaLimits.Tablet
+        ? Position.Bottom : this._position);
+```
+    
+## Utils
+
+- `Collection` utils
+ 
+    Methods for array(collection) opearations.
+- `Common` utils
+
+    Methods for object checking, modification and operations.
+- `DateTime` utils
+
+    Method for DATETime objects.
+- `File` utils
+
+    Methods for IO and files.
+- `String` utils
+
+    Methods for strings modification and operations on them.
+- `UI` utils
+
+    Methods for UI operations.

package/esm2020/lib/components/button/button-type.enum.mjs

@@ -0,0 +1,9 @@
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType["Bordered"] = "bordered";
+    ButtonType["Filled"] = "filled";
+    ButtonType["Rounded"] = "rounded";
+    ButtonType["Circled"] = "circled";
+    ButtonType["Texted"] = "texted";
+})(ButtonType || (ButtonType = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXR5cGUuZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLXR5cGUuZW51bS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQU4sSUFBWSxVQU1YO0FBTkQsV0FBWSxVQUFVO0lBQ2xCLG1DQUFxQixDQUFBO0lBQ3JCLCtCQUFpQixDQUFBO0lBQ2pCLGlDQUFtQixDQUFBO0lBQ25CLGlDQUFtQixDQUFBO0lBQ25CLCtCQUFpQixDQUFBO0FBQ3JCLENBQUMsRUFOVyxVQUFVLEtBQVYsVUFBVSxRQU1yQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBlbnVtIEJ1dHRvblR5cGUge1xyXG4gICAgQm9yZGVyZWQgPSAnYm9yZGVyZWQnLFxyXG4gICAgRmlsbGVkID0gJ2ZpbGxlZCcsXHJcbiAgICBSb3VuZGVkID0gJ3JvdW5kZWQnLFxyXG4gICAgQ2lyY2xlZCA9ICdjaXJjbGVkJyxcclxuICAgIFRleHRlZCA9ICd0ZXh0ZWQnXHJcbn0iXX0=

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

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+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";
+export class ButtonComponent {
+    constructor() {
+        this.BUTTON_DEFAULT_TEXT = 'Button';
+        this.text = this.BUTTON_DEFAULT_TEXT;
+        this.disabled = false;
+        this.types = [ButtonType.Bordered];
+    }
+    get classes() {
+        const classes = {};
+        if (this.disabled)
+            classes[UIClass.Disabled] = true;
+        distinct(this.types).forEach(type => classes[type] = true);
+        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: [{
+            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"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], iconBefore: [{
+                type: Input
+            }], iconAfter: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], types: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdEMsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN2QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7OztBQU9oRCxNQUFNLE9BQU8sZUFBZTtJQUw1QjtRQU9tQix3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFHeEQsU0FBSSxHQUFXLElBQUksQ0FBQyxtQkFBbUIsQ0FBQztRQVN4QyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBRzFCLFVBQUssR0FBc0IsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7S0FZbEQ7SUFWQyxJQUFJLE9BQU87UUFDVCxNQUFNLE9BQU8sR0FBUSxFQUFFLENBQUE7UUFFdkIsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUNmLE9BQU8sQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBRW5DLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQyxDQUFDO1FBRTNELE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7OzRHQTVCVSxlQUFlO2dHQUFmLGVBQWUsb0tDVjVCLG1RQUlJOzJGRE1TLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsWUFBWTs4QkFTdEIsSUFBSTtzQkFESCxLQUFLO2dCQUlOLFVBQVU7c0JBRFQsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVUlDbGFzcyB9IGZyb20gJy4uLy4uL2VudW1zJztcclxuaW1wb3J0IHsgZGlzdGluY3QgfSBmcm9tICcuLi8uLi91dGlscyc7XHJcbmltcG9ydCB7IEJ1dHRvblR5cGUgfSBmcm9tICcuL2J1dHRvbi10eXBlLmVudW0nO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtYnV0dG9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9idXR0b24uY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IHtcclxuXHJcbiAgcHJpdmF0ZSByZWFkb25seSBCVVRUT05fREVGQVVMVF9URVhUOiBzdHJpbmcgPSAnQnV0dG9uJztcclxuXHJcbiAgQElucHV0KClcclxuICB0ZXh0OiBzdHJpbmcgPSB0aGlzLkJVVFRPTl9ERUZBVUxUX1RFWFQ7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgaWNvbkJlZm9yZT86IHN0cmluZztcclxuXHJcbiAgQElucHV0KClcclxuICBpY29uQWZ0ZXI/OiBzdHJpbmc7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICB0eXBlczogQXJyYXk8QnV0dG9uVHlwZT4gPSBbQnV0dG9uVHlwZS5Cb3JkZXJlZF07XHJcblxyXG4gIGdldCBjbGFzc2VzKCkge1xyXG4gICAgY29uc3QgY2xhc3NlczogYW55ID0ge31cclxuXHJcbiAgICBpZiAodGhpcy5kaXNhYmxlZClcclxuICAgICAgY2xhc3Nlc1tVSUNsYXNzLkRpc2FibGVkXSA9IHRydWU7XHJcblxyXG4gICAgZGlzdGluY3QodGhpcy50eXBlcykuZm9yRWFjaCh0eXBlID0+IGNsYXNzZXNbdHlwZV0gPSB0cnVlKTtcclxuXHJcbiAgICByZXR1cm4gY2xhc3NlcztcclxuICB9XHJcbn1cclxuIiwiPGEgY2xhc3M9XCJidXR0b25cIiBbbmdDbGFzc109XCJjbGFzc2VzXCI+XHJcbiAgICA8aSAqbmdJZj1cImljb25CZWZvcmVcIiBjbGFzcz1cImljb24gYmVmb3JlXCIgW25nQ2xhc3NdPVwiaWNvbkJlZm9yZVwiPjwvaT5cclxuICAgIDxzcGFuIGNsYXNzPVwidGV4dFwiPnt7dGV4dH19PC9zcGFuPlxyXG4gICAgPGkgKm5nSWY9XCJpY29uQWZ0ZXJcIiBjbGFzcz1cImljb24gYWZ0ZXJcIiBbbmdDbGFzc109XCJpY29uQWZ0ZXJcIj48L2k+XHJcbjwvYT4iXX0=

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

@@ -0,0 +1,27 @@
+import { Component, HostBinding, HostListener, Input } from '@angular/core';
+import { UIClass } from '../../enums';
+import * as i0 from "@angular/core";
+export class CheckmarkComponent {
+    constructor() {
+        this.active = false;
+        this.icon = 'fa fa-check';
+        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: [{
+            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"] }]
+        }], propDecorators: { active: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Active]
+            }], icon: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2ttYXJrLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9jaGVja21hcmsvY2hlY2ttYXJrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFPdEMsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQVNFLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFHeEIsU0FBSSxHQUFZLGFBQWEsQ0FBQztRQUc5QixZQUFPLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUM7S0FFNUM7OytHQVpZLGtCQUFrQjttR0FBbEIsa0JBQWtCLCtMQ1IvQix3SEFJTTsyRkRJTyxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsZUFBZTs4QkFRekIsTUFBTTtzQkFGTCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFFBQVEsR0FBRyxPQUFPLENBQUMsTUFBTTtnQkFJdEMsSUFBSTtzQkFESCxLQUFLO2dCQUlOLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVSUNsYXNzIH0gZnJvbSAnLi4vLi4vZW51bXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtY2hlY2ttYXJrJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2ttYXJrLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9jaGVja21hcmsuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2hlY2ttYXJrQ29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLkFjdGl2ZSlcclxuICBhY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBpY29uPzogc3RyaW5nID0gJ2ZhIGZhLWNoZWNrJztcclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKVxyXG4gIG9uQ2xpY2sgPSAoKSA9PiB0aGlzLmFjdGl2ZSA9ICF0aGlzLmFjdGl2ZTtcclxuXHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJjaGVja1wiPlxyXG4gICAgICAgIDxpIGNsYXNzPVwie3tpY29ufX1cIj48L2k+XHJcbiAgICA8L3NwYW4+XHJcbjwvZGl2PiJdfQ==

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

@@ -0,0 +1,11 @@
+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: [{
+            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"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVsaW1ldGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9kZWxpbWV0ZXIvZGVsaW1ldGVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU8xQyxNQUFNLE9BQU8sa0JBQWtCOzsrR0FBbEIsa0JBQWtCO21HQUFsQixrQkFBa0IscURBSG5CLEVBQUU7MkZBR0Qsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGVBQWUsWUFDZixFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NmYy1kZWxpbWV0ZXInLFxyXG4gIHRlbXBsYXRlOiBgYCxcclxuICBzdHlsZVVybHM6IFsnLi9kZWxpbWV0ZXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGVsaW1ldGVyQ29tcG9uZW50IHtcclxufVxyXG4iXX0=

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

@@ -0,0 +1,30 @@
+import { Component, HostBinding, HostListener, Input } from '@angular/core';
+import { Direction, UIClass } from '../../enums';
+import * as i0 from "@angular/core";
+export class DotsComponent {
+    constructor() {
+        this.open = false;
+        this.direction = Direction.Horizontal;
+        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: [{
+            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"] }]
+        }], propDecorators: { open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], direction: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG90cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2ZjLWNvbW1vbi9zcmMvbGliL2NvbXBvbmVudHMvZG90cy9kb3RzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9kb3RzL2RvdHMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFPakQsTUFBTSxPQUFPLGFBQWE7SUFMMUI7UUFTRSxTQUFJLEdBQVksS0FBSyxDQUFDO1FBSXRCLGNBQVMsR0FBYyxTQUFTLENBQUMsVUFBVSxDQUFDO1FBRzVDLFlBQU8sR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztLQUV4Qzs7MEdBYlksYUFBYTs4RkFBYixhQUFhLHVOQ1IxQix3TUFNTTsyRkRFTyxhQUFhO2tCQUx6QixTQUFTOytCQUNFLFVBQVU7OEJBUXBCLElBQUk7c0JBRkgsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLElBQUk7Z0JBS3BDLFNBQVM7c0JBRlIsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxPQUFPO2dCQUlwQixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIEhvc3RMaXN0ZW5lciwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRGlyZWN0aW9uLCBVSUNsYXNzIH0gZnJvbSAnLi4vLi4vZW51bXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtZG90cycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2RvdHMuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2RvdHMuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRG90c0NvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpXHJcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy4nICsgVUlDbGFzcy5PcGVuKVxyXG4gIG9wZW46IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcclxuICBkaXJlY3Rpb246IERpcmVjdGlvbiA9IERpcmVjdGlvbi5Ib3Jpem9udGFsO1xyXG5cclxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXHJcbiAgb25DbGljayA9ICgpID0+IHRoaXMub3BlbiA9ICF0aGlzLm9wZW47XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjb250YWluZXJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJkb3RzLWNvbnRhaW5lclwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJkb3RcIj48L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZG90XCI+PC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImRvdFwiPjwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==

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

@@ -0,0 +1,24 @@
+import { Component, HostBinding, HostListener, Input } from '@angular/core';
+import { UIClass } from '../../enums';
+import * as i0 from "@angular/core";
+export class HamburgerComponent {
+    constructor() {
+        this.open = false;
+        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: [{
+            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: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.' + UIClass.Open]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGFtYnVyZ2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9oYW1idXJnZXIvaGFtYnVyZ2VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZmMtY29tbW9uL3NyYy9saWIvY29tcG9uZW50cy9oYW1idXJnZXIvaGFtYnVyZ2VyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFPdEMsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQVNFLFNBQUksR0FBWSxLQUFLLENBQUM7UUFHdEIsWUFBTyxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO0tBQ3hDOzsrR0FSWSxrQkFBa0I7bUdBQWxCLGtCQUFrQix5S0NSL0IsK0pBSU07MkZESU8sa0JBQWtCO2tCQUw5QixTQUFTOytCQUNFLGVBQWU7OEJBUXpCLElBQUk7c0JBRkgsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxRQUFRLEdBQUcsT0FBTyxDQUFDLElBQUk7Z0JBSXBDLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSG9zdExpc3RlbmVyLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVSUNsYXNzIH0gZnJvbSAnLi4vLi4vZW51bXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZmMtaGFtYnVyZ2VyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaGFtYnVyZ2VyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9oYW1idXJnZXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSGFtYnVyZ2VyQ29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KClcclxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLicgKyBVSUNsYXNzLk9wZW4pXHJcbiAgb3BlbjogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXHJcbiAgb25DbGljayA9ICgpID0+IHRoaXMub3BlbiA9ICF0aGlzLm9wZW47XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cImNvbnRhaW5lclwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImxpbmUgaGFsZiBzdGFydFwiPjwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cImxpbmVcIj48L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJsaW5lIGhhbGYgZW5kXCI+PC9kaXY+XHJcbjwvZGl2PiJdfQ==