iptdevs-design-system 2.7.36 → 2.7.38

package/esm2020/lib/components/atoms/input/input.component.mjs

@@ -1,145 +1,145 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "ng2-currency-mask";
-export class InputComponent {
-    constructor() {
-        this.data = [];
-        this.clicked = false;
-        this.withPipe = false;
-        this.prefix = '$';
-        this.thousands = '.';
-        this.decimal = ',';
-        this.dateSelected = new EventEmitter();
-    }
-    set control(value) {
-        if (this.formControl !== value) {
-            this.formControl = value;
-        }
-    }
-    ngOnInit() { }
-    selectedDate(evt) {
-        this.dateSelected.emit(evt);
-    }
-    click(value) {
-        this.clicked = value.isTrusted;
-    }
-}
-InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: InputComponent, selector: "ipt-input", inputs: { inputType: "inputType", placeHolder: "placeHolder", validateText: "validateText", withPipe: "withPipe", list: "list", iconUrl: "iconUrl", control: "control", prefix: "prefix", thousands: "thousands", decimal: "decimal" }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: `
-    <div class="input-container">
-      <input *ngIf="inputType === 'date'"
-        class="input"
-        type="{{ inputType ? 'text' : 'date' }}"
-        [formControl]="formControl"
-        (ngModelChange)="selectedDate($event)"
-        onfocus="this.type='date';"
-        onblur="javascript: if( !this.value ) this.type='text';"
-        uib-datepicker-popup="dd/MM/yyyy"
-        ng-model="inputType"/>
-
-      <input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
-        class="input"
-        type="{{ inputType }}"
-        [formControl]="formControl"
-        [attr.list]="list"/>
-
-        <input *ngIf="inputType === 'text' && withPipe"
-          class="input"
-          currencyMask
-          [options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
-          type="{{ inputType }}"
-          [formControl]="formControl"
-          [attr.list]="list"/>
-
-        <input *ngIf="inputType === 'time'"
-          class="input"
-          type="time"
-          [formControl]="formControl"
-          [min]="'06:00:00'"
-          max="22:00:00"
-          step="900"
-          autocomplete="on"
-          value="08:00:00"
-          (click)="click($event)"
-        />
-
-      <label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
-
-      <p *ngIf="(formControl.invalid && formControl.value !== '')">
-        {{ validateText }}
-      </p>
-    </div>
-    `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ipt-input', template: `
-    <div class="input-container">
-      <input *ngIf="inputType === 'date'"
-        class="input"
-        type="{{ inputType ? 'text' : 'date' }}"
-        [formControl]="formControl"
-        (ngModelChange)="selectedDate($event)"
-        onfocus="this.type='date';"
-        onblur="javascript: if( !this.value ) this.type='text';"
-        uib-datepicker-popup="dd/MM/yyyy"
-        ng-model="inputType"/>
-
-      <input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
-        class="input"
-        type="{{ inputType }}"
-        [formControl]="formControl"
-        [attr.list]="list"/>
-
-        <input *ngIf="inputType === 'text' && withPipe"
-          class="input"
-          currencyMask
-          [options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
-          type="{{ inputType }}"
-          [formControl]="formControl"
-          [attr.list]="list"/>
-
-        <input *ngIf="inputType === 'time'"
-          class="input"
-          type="time"
-          [formControl]="formControl"
-          [min]="'06:00:00'"
-          max="22:00:00"
-          step="900"
-          autocomplete="on"
-          value="08:00:00"
-          (click)="click($event)"
-        />
-
-      <label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
-
-      <p *ngIf="(formControl.invalid && formControl.value !== '')">
-        {{ validateText }}
-      </p>
-    </div>
-    `, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { inputType: [{
-                type: Input
-            }], placeHolder: [{
-                type: Input
-            }], validateText: [{
-                type: Input
-            }], withPipe: [{
-                type: Input
-            }], list: [{
-                type: Input
-            }], iconUrl: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], prefix: [{
-                type: Input
-            }], thousands: [{
-                type: Input
-            }], decimal: [{
-                type: Input
-            }], dateSelected: [{
-                type: Output
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaW5wdXQvaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQStDLE1BQU0sZUFBZSxDQUFDOzs7OztBQXFEcEgsTUFBTSxPQUFPLGNBQWM7SUF3QnpCO1FBckJBLFNBQUksR0FBVSxFQUFFLENBQUM7UUFFakIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUtoQixhQUFRLEdBQWEsS0FBSyxDQUFDO1FBUzNCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsY0FBUyxHQUFXLEdBQUcsQ0FBQztRQUN4QixZQUFPLEdBQVcsR0FBRyxDQUFDO1FBQ3JCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUVyQyxDQUFDO0lBWGhCLElBQWEsT0FBTyxDQUFDLEtBQStCO1FBQ2xELElBQUksSUFBSSxDQUFDLFdBQVcsS0FBSyxLQUFLLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFvQixDQUFDO1NBQ3pDO0lBQ0gsQ0FBQztJQVVELFFBQVEsS0FBSSxDQUFDO0lBRWIsWUFBWSxDQUFDLEdBQVc7UUFDdEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFpQjtRQUNyQixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxTQUFTLENBQUM7SUFDakMsQ0FBQzs7MkdBbkNVLGNBQWM7K0ZBQWQsY0FBYyxvVUEvQ2Y7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNENQOzJGQUdRLGNBQWM7a0JBakQxQixTQUFTOytCQUNFLFdBQVcsWUFDWDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0E0Q1A7MEVBVU0sU0FBUztzQkFBakIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNPLE9BQU87c0JBQW5CLEtBQUs7Z0JBTUcsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDdXJyZW5jeVBpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgVmlld0NoaWxkLCBPbkluaXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIEZvcm1CdWlsZGVyLCBGb3JtQ29udHJvbCwgRm9ybUdyb3VwLCBOZ0Zvcm0sIFZhbGlkYXRvcnMgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdpcHQtaW5wdXQnLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2IGNsYXNzPVwiaW5wdXQtY29udGFpbmVyXCI+XHJcbiAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSA9PT0gJ2RhdGUnXCJcclxuICAgICAgICBjbGFzcz1cImlucHV0XCJcclxuICAgICAgICB0eXBlPVwie3sgaW5wdXRUeXBlID8gJ3RleHQnIDogJ2RhdGUnIH19XCJcclxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxyXG4gICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cInNlbGVjdGVkRGF0ZSgkZXZlbnQpXCJcclxuICAgICAgICBvbmZvY3VzPVwidGhpcy50eXBlPSdkYXRlJztcIlxyXG4gICAgICAgIG9uYmx1cj1cImphdmFzY3JpcHQ6IGlmKCAhdGhpcy52YWx1ZSApIHRoaXMudHlwZT0ndGV4dCc7XCJcclxuICAgICAgICB1aWItZGF0ZXBpY2tlci1wb3B1cD1cImRkL01NL3l5eXlcIlxyXG4gICAgICAgIG5nLW1vZGVsPVwiaW5wdXRUeXBlXCIvPlxyXG5cclxuICAgICAgPGlucHV0ICpuZ0lmPVwiaW5wdXRUeXBlICE9PSAnZGF0ZScgJiYgaW5wdXRUeXBlICE9PSAndGltZScgJiYgIXdpdGhQaXBlXCJcclxuICAgICAgICBjbGFzcz1cImlucHV0XCJcclxuICAgICAgICB0eXBlPVwie3sgaW5wdXRUeXBlIH19XCJcclxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxyXG4gICAgICAgIFthdHRyLmxpc3RdPVwibGlzdFwiLz5cclxuXHJcbiAgICAgICAgPGlucHV0ICpuZ0lmPVwiaW5wdXRUeXBlID09PSAndGV4dCcgJiYgd2l0aFBpcGVcIlxyXG4gICAgICAgICAgY2xhc3M9XCJpbnB1dFwiXHJcbiAgICAgICAgICBjdXJyZW5jeU1hc2tcclxuICAgICAgICAgIFtvcHRpb25zXT1cInsgcHJlZml4OiBwcmVmaXgsIHRob3VzYW5kczogdGhvdXNhbmRzLCBkZWNpbWFsOiBkZWNpbWFsLCBhbGxvd05lZ2F0aXZlOiBmYWxzZSB9XCJcclxuICAgICAgICAgIHR5cGU9XCJ7eyBpbnB1dFR5cGUgfX1cIlxyXG4gICAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcclxuICAgICAgICAgIFthdHRyLmxpc3RdPVwibGlzdFwiLz5cclxuXHJcbiAgICAgICAgPGlucHV0ICpuZ0lmPVwiaW5wdXRUeXBlID09PSAndGltZSdcIlxyXG4gICAgICAgICAgY2xhc3M9XCJpbnB1dFwiXHJcbiAgICAgICAgICB0eXBlPVwidGltZVwiXHJcbiAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxyXG4gICAgICAgICAgW21pbl09XCInMDY6MDA6MDAnXCJcclxuICAgICAgICAgIG1heD1cIjIyOjAwOjAwXCJcclxuICAgICAgICAgIHN0ZXA9XCI5MDBcIlxyXG4gICAgICAgICAgYXV0b2NvbXBsZXRlPVwib25cIlxyXG4gICAgICAgICAgdmFsdWU9XCIwODowMDowMFwiXHJcbiAgICAgICAgICAoY2xpY2spPVwiY2xpY2soJGV2ZW50KVwiXHJcbiAgICAgICAgLz5cclxuXHJcbiAgICAgIDxsYWJlbCBbbmdDbGFzc109XCJ7J2xhYmVsVXAnOiBmb3JtQ29udHJvbC52YWx1ZSAhPT0gJyd9XCI+e3sgcGxhY2VIb2xkZXIgfX08L2xhYmVsPlxyXG5cclxuICAgICAgPHAgKm5nSWY9XCIoZm9ybUNvbnRyb2wuaW52YWxpZCAmJiBmb3JtQ29udHJvbC52YWx1ZSAhPT0gJycpXCI+XHJcbiAgICAgICAge3sgdmFsaWRhdGVUZXh0IH19XHJcbiAgICAgIDwvcD5cclxuICAgIDwvZGl2PlxyXG4gICAgYCxcclxuICBzdHlsZVVybHM6IFsnLi9pbnB1dC5jc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgcHVibGljIGNvZGVWYWx1ZSE6IHN0cmluZztcclxuICBkYXRhOiBhbnlbXSA9IFtdO1xyXG4gIGZvcm1Db250cm9sITogRm9ybUNvbnRyb2w7XHJcbiAgY2xpY2tlZDogYm9vbGVhbiA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKSBpbnB1dFR5cGUhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgcGxhY2VIb2xkZXIhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdmFsaWRhdGVUZXh0Pzogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIHdpdGhQaXBlPzogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGxpc3Q/OiBzdHJpbmc7IC8vUGFyYSBlbCBkYXRhbGlzdFxyXG4gIEBJbnB1dCgpIGljb25Vcmw/OiBzdHJpbmc7XHJcbiAgQElucHV0KCkgc2V0IGNvbnRyb2wodmFsdWU6IEFic3RyYWN0Q29udHJvbCB8IHN0cmluZykge1xyXG4gICAgaWYgKHRoaXMuZm9ybUNvbnRyb2wgIT09IHZhbHVlKSB7XHJcbiAgICAgIHRoaXMuZm9ybUNvbnRyb2wgPSB2YWx1ZSBhcyBGb3JtQ29udHJvbDtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBJbnB1dCgpIHByZWZpeDogc3RyaW5nID0gJyQnO1xyXG4gIEBJbnB1dCgpIHRob3VzYW5kczogc3RyaW5nID0gJy4nO1xyXG4gIEBJbnB1dCgpIGRlY2ltYWw6IHN0cmluZyA9ICcsJztcclxuICBAT3V0cHV0KCkgZGF0ZVNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge31cclxuXHJcblxyXG4gIG5nT25Jbml0KCkge31cclxuXHJcbiAgc2VsZWN0ZWREYXRlKGV2dDogc3RyaW5nKXtcclxuICAgIHRoaXMuZGF0ZVNlbGVjdGVkLmVtaXQoZXZ0KTtcclxuICB9XHJcblxyXG4gIGNsaWNrKHZhbHVlOiBNb3VzZUV2ZW50KSB7XHJcbiAgICB0aGlzLmNsaWNrZWQgPSB2YWx1ZS5pc1RydXN0ZWQ7XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "ng2-currency-mask";
+export class InputComponent {
+    constructor() {
+        this.data = [];
+        this.clicked = false;
+        this.withPipe = false;
+        this.prefix = '$';
+        this.thousands = '.';
+        this.decimal = ',';
+        this.dateSelected = new EventEmitter();
+    }
+    set control(value) {
+        if (this.formControl !== value) {
+            this.formControl = value;
+        }
+    }
+    ngOnInit() { }
+    selectedDate(evt) {
+        this.dateSelected.emit(evt);
+    }
+    click(value) {
+        this.clicked = value.isTrusted;
+    }
+}
+InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: InputComponent, selector: "ipt-input", inputs: { inputType: "inputType", placeHolder: "placeHolder", validateText: "validateText", withPipe: "withPipe", list: "list", iconUrl: "iconUrl", control: "control", prefix: "prefix", thousands: "thousands", decimal: "decimal" }, outputs: { dateSelected: "dateSelected" }, ngImport: i0, template: `
+    <div class="input-container">
+      <input *ngIf="inputType === 'date'"
+        class="input"
+        type="{{ inputType ? 'text' : 'date' }}"
+        [formControl]="formControl"
+        (ngModelChange)="selectedDate($event)"
+        onfocus="this.type='date';"
+        onblur="javascript: if( !this.value ) this.type='text';"
+        uib-datepicker-popup="dd/MM/yyyy"
+        ng-model="inputType"/>
+
+      <input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
+        class="input"
+        type="{{ inputType }}"
+        [formControl]="formControl"
+        [attr.list]="list"/>
+
+        <input *ngIf="inputType === 'text' && withPipe"
+          class="input"
+          currencyMask
+          [options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
+          type="{{ inputType }}"
+          [formControl]="formControl"
+          [attr.list]="list"/>
+
+        <input *ngIf="inputType === 'time'"
+          class="input"
+          type="time"
+          [formControl]="formControl"
+          [min]="'06:00:00'"
+          max="22:00:00"
+          step="900"
+          autocomplete="on"
+          value="08:00:00"
+          (click)="click($event)"
+        />
+
+      <label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
+
+      <p *ngIf="(formControl.invalid && formControl.value !== '')">
+        {{ validateText }}
+      </p>
+    </div>
+    `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-input', template: `
+    <div class="input-container">
+      <input *ngIf="inputType === 'date'"
+        class="input"
+        type="{{ inputType ? 'text' : 'date' }}"
+        [formControl]="formControl"
+        (ngModelChange)="selectedDate($event)"
+        onfocus="this.type='date';"
+        onblur="javascript: if( !this.value ) this.type='text';"
+        uib-datepicker-popup="dd/MM/yyyy"
+        ng-model="inputType"/>
+
+      <input *ngIf="inputType !== 'date' && inputType !== 'time' && !withPipe"
+        class="input"
+        type="{{ inputType }}"
+        [formControl]="formControl"
+        [attr.list]="list"/>
+
+        <input *ngIf="inputType === 'text' && withPipe"
+          class="input"
+          currencyMask
+          [options]="{ prefix: prefix, thousands: thousands, decimal: decimal, allowNegative: false }"
+          type="{{ inputType }}"
+          [formControl]="formControl"
+          [attr.list]="list"/>
+
+        <input *ngIf="inputType === 'time'"
+          class="input"
+          type="time"
+          [formControl]="formControl"
+          [min]="'06:00:00'"
+          max="22:00:00"
+          step="900"
+          autocomplete="on"
+          value="08:00:00"
+          (click)="click($event)"
+        />
+
+      <label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
+
+      <p *ngIf="(formControl.invalid && formControl.value !== '')">
+        {{ validateText }}
+      </p>
+    </div>
+    `, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:13px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:13px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:6px;border:none;outline:none;display:block;transition:.2s;font-weight:300;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background-color:#fff;-webkit-appearance:none}input:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}input:focus{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px;transition:0s;border:1.5px solid #1c77f7}label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:7px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:invalid~label{top:-20px;font-size:15px;color:#1c77f7}.labelUp{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:20px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inputType: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], validateText: [{
+                type: Input
+            }], withPipe: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], iconUrl: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], thousands: [{
+                type: Input
+            }], decimal: [{
+                type: Input
+            }], dateSelected: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvaW5wdXQvaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQStDLE1BQU0sZUFBZSxDQUFDOzs7OztBQXFEcEgsTUFBTSxPQUFPLGNBQWM7SUF3QnpCO1FBckJBLFNBQUksR0FBVSxFQUFFLENBQUM7UUFFakIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUtoQixhQUFRLEdBQWEsS0FBSyxDQUFDO1FBUzNCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsY0FBUyxHQUFXLEdBQUcsQ0FBQztRQUN4QixZQUFPLEdBQVcsR0FBRyxDQUFDO1FBQ3JCLGlCQUFZLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUVyQyxDQUFDO0lBWGhCLElBQWEsT0FBTyxDQUFDLEtBQStCO1FBQ2xELElBQUksSUFBSSxDQUFDLFdBQVcsS0FBSyxLQUFLLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFvQixDQUFDO1NBQ3pDO0lBQ0gsQ0FBQztJQVVELFFBQVEsS0FBSSxDQUFDO0lBRWIsWUFBWSxDQUFDLEdBQVc7UUFDdEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFpQjtRQUNyQixJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxTQUFTLENBQUM7SUFDakMsQ0FBQzs7MkdBbkNVLGNBQWM7K0ZBQWQsY0FBYyxvVUEvQ2Y7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNENQOzJGQUdRLGNBQWM7a0JBakQxQixTQUFTOytCQUNFLFdBQVcsWUFDWDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0E0Q1A7MEVBVU0sU0FBUztzQkFBakIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNPLE9BQU87c0JBQW5CLEtBQUs7Z0JBTUcsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNJLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDdXJyZW5jeVBpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdDaGlsZCwgT25Jbml0LCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgRm9ybUJ1aWxkZXIsIEZvcm1Db250cm9sLCBGb3JtR3JvdXAsIE5nRm9ybSwgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpcHQtaW5wdXQnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJpbnB1dC1jb250YWluZXJcIj5cbiAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSA9PT0gJ2RhdGUnXCJcbiAgICAgICAgY2xhc3M9XCJpbnB1dFwiXG4gICAgICAgIHR5cGU9XCJ7eyBpbnB1dFR5cGUgPyAndGV4dCcgOiAnZGF0ZScgfX1cIlxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICAobmdNb2RlbENoYW5nZSk9XCJzZWxlY3RlZERhdGUoJGV2ZW50KVwiXG4gICAgICAgIG9uZm9jdXM9XCJ0aGlzLnR5cGU9J2RhdGUnO1wiXG4gICAgICAgIG9uYmx1cj1cImphdmFzY3JpcHQ6IGlmKCAhdGhpcy52YWx1ZSApIHRoaXMudHlwZT0ndGV4dCc7XCJcbiAgICAgICAgdWliLWRhdGVwaWNrZXItcG9wdXA9XCJkZC9NTS95eXl5XCJcbiAgICAgICAgbmctbW9kZWw9XCJpbnB1dFR5cGVcIi8+XG5cbiAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSAhPT0gJ2RhdGUnICYmIGlucHV0VHlwZSAhPT0gJ3RpbWUnICYmICF3aXRoUGlwZVwiXG4gICAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgICB0eXBlPVwie3sgaW5wdXRUeXBlIH19XCJcbiAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgW2F0dHIubGlzdF09XCJsaXN0XCIvPlxuXG4gICAgICAgIDxpbnB1dCAqbmdJZj1cImlucHV0VHlwZSA9PT0gJ3RleHQnICYmIHdpdGhQaXBlXCJcbiAgICAgICAgICBjbGFzcz1cImlucHV0XCJcbiAgICAgICAgICBjdXJyZW5jeU1hc2tcbiAgICAgICAgICBbb3B0aW9uc109XCJ7IHByZWZpeDogcHJlZml4LCB0aG91c2FuZHM6IHRob3VzYW5kcywgZGVjaW1hbDogZGVjaW1hbCwgYWxsb3dOZWdhdGl2ZTogZmFsc2UgfVwiXG4gICAgICAgICAgdHlwZT1cInt7IGlucHV0VHlwZSB9fVwiXG4gICAgICAgICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgICBbYXR0ci5saXN0XT1cImxpc3RcIi8+XG5cbiAgICAgICAgPGlucHV0ICpuZ0lmPVwiaW5wdXRUeXBlID09PSAndGltZSdcIlxuICAgICAgICAgIGNsYXNzPVwiaW5wdXRcIlxuICAgICAgICAgIHR5cGU9XCJ0aW1lXCJcbiAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZm9ybUNvbnRyb2xcIlxuICAgICAgICAgIFttaW5dPVwiJzA2OjAwOjAwJ1wiXG4gICAgICAgICAgbWF4PVwiMjI6MDA6MDBcIlxuICAgICAgICAgIHN0ZXA9XCI5MDBcIlxuICAgICAgICAgIGF1dG9jb21wbGV0ZT1cIm9uXCJcbiAgICAgICAgICB2YWx1ZT1cIjA4OjAwOjAwXCJcbiAgICAgICAgICAoY2xpY2spPVwiY2xpY2soJGV2ZW50KVwiXG4gICAgICAgIC8+XG5cbiAgICAgIDxsYWJlbCBbbmdDbGFzc109XCJ7J2xhYmVsVXAnOiBmb3JtQ29udHJvbC52YWx1ZSAhPT0gJyd9XCI+e3sgcGxhY2VIb2xkZXIgfX08L2xhYmVsPlxuXG4gICAgICA8cCAqbmdJZj1cIihmb3JtQ29udHJvbC5pbnZhbGlkICYmIGZvcm1Db250cm9sLnZhbHVlICE9PSAnJylcIj5cbiAgICAgICAge3sgdmFsaWRhdGVUZXh0IH19XG4gICAgICA8L3A+XG4gICAgPC9kaXY+XG4gICAgYCxcbiAgc3R5bGVVcmxzOiBbJy4vaW5wdXQuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICBwdWJsaWMgY29kZVZhbHVlITogc3RyaW5nO1xuICBkYXRhOiBhbnlbXSA9IFtdO1xuICBmb3JtQ29udHJvbCE6IEZvcm1Db250cm9sO1xuICBjbGlja2VkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQElucHV0KCkgaW5wdXRUeXBlITogc3RyaW5nO1xuICBASW5wdXQoKSBwbGFjZUhvbGRlciE6IHN0cmluZztcbiAgQElucHV0KCkgdmFsaWRhdGVUZXh0Pzogc3RyaW5nO1xuICBASW5wdXQoKSB3aXRoUGlwZT86IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgbGlzdD86IHN0cmluZzsgLy9QYXJhIGVsIGRhdGFsaXN0XG4gIEBJbnB1dCgpIGljb25Vcmw/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNldCBjb250cm9sKHZhbHVlOiBBYnN0cmFjdENvbnRyb2wgfCBzdHJpbmcpIHtcbiAgICBpZiAodGhpcy5mb3JtQ29udHJvbCAhPT0gdmFsdWUpIHtcbiAgICAgIHRoaXMuZm9ybUNvbnRyb2wgPSB2YWx1ZSBhcyBGb3JtQ29udHJvbDtcbiAgICB9XG4gIH1cblxuICBASW5wdXQoKSBwcmVmaXg6IHN0cmluZyA9ICckJztcbiAgQElucHV0KCkgdGhvdXNhbmRzOiBzdHJpbmcgPSAnLic7XG4gIEBJbnB1dCgpIGRlY2ltYWw6IHN0cmluZyA9ICcsJztcbiAgQE91dHB1dCgpIGRhdGVTZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuXG4gIG5nT25Jbml0KCkge31cblxuICBzZWxlY3RlZERhdGUoZXZ0OiBzdHJpbmcpe1xuICAgIHRoaXMuZGF0ZVNlbGVjdGVkLmVtaXQoZXZ0KTtcbiAgfVxuXG4gIGNsaWNrKHZhbHVlOiBNb3VzZUV2ZW50KSB7XG4gICAgdGhpcy5jbGlja2VkID0gdmFsdWUuaXNUcnVzdGVkO1xuICB9XG5cbn1cbiJdfQ==

package/esm2020/lib/components/atoms/level-button/level-button.component.mjs

@@ -1,64 +1,64 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-export class LevelButtonComponent {
-    constructor() {
-        this.isClicked = new EventEmitter();
-    }
-    clickAction() {
-        this.isClicked.emit(true);
-    }
-}
-LevelButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LevelButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: LevelButtonComponent, selector: "ipt-level-button", inputs: { level: "level", buttonActive: "buttonActive", idColor: "idColor" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
-    <div [ngSwitch]="buttonActive">
-      <button
-        *ngSwitchCase="0"
-        (click)="clickAction()"
-        id="level"
-        class="courses"
-      >
-      <p class="p-level">{{ level }}</p>
-      </button>
-
-      <button
-        *ngSwitchCase="1"
-        (click)="clickAction()"
-        id="{{ idColor }}"
-        class="courses">
-      <p class="p-level p-level-active">{{ level }}</p>
-      </button>
-    </div>
-  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:6px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ipt-level-button', template: `
-    <div [ngSwitch]="buttonActive">
-      <button
-        *ngSwitchCase="0"
-        (click)="clickAction()"
-        id="level"
-        class="courses"
-      >
-      <p class="p-level">{{ level }}</p>
-      </button>
-
-      <button
-        *ngSwitchCase="1"
-        (click)="clickAction()"
-        id="{{ idColor }}"
-        class="courses">
-      <p class="p-level p-level-active">{{ level }}</p>
-      </button>
-    </div>
-  `, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:6px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"] }]
-        }], propDecorators: { level: [{
-                type: Input
-            }], buttonActive: [{
-                type: Input
-            }], idColor: [{
-                type: Input
-            }], isClicked: [{
-                type: Output
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGV2ZWwtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2xldmVsLWJ1dHRvbi9sZXZlbC1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQTJCdkUsTUFBTSxPQUFPLG9CQUFvQjtJQXpCakM7UUE4QlksY0FBUyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FNbkQ7SUFKQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7aUhBVFUsb0JBQW9CO3FHQUFwQixvQkFBb0IsMktBdkJyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDsyRkFJVSxvQkFBb0I7a0JBekJoQyxTQUFTOytCQUNFLGtCQUFrQixZQUNsQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDs4QkFNUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2lwdC1sZXZlbC1idXR0b24nLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2IFtuZ1N3aXRjaF09XCJidXR0b25BY3RpdmVcIj5cclxuICAgICAgPGJ1dHRvblxyXG4gICAgICAgICpuZ1N3aXRjaENhc2U9XCIwXCJcclxuICAgICAgICAoY2xpY2spPVwiY2xpY2tBY3Rpb24oKVwiXHJcbiAgICAgICAgaWQ9XCJsZXZlbFwiXHJcbiAgICAgICAgY2xhc3M9XCJjb3Vyc2VzXCJcclxuICAgICAgPlxyXG4gICAgICA8cCBjbGFzcz1cInAtbGV2ZWxcIj57eyBsZXZlbCB9fTwvcD5cclxuICAgICAgPC9idXR0b24+XHJcblxyXG4gICAgICA8YnV0dG9uXHJcbiAgICAgICAgKm5nU3dpdGNoQ2FzZT1cIjFcIlxyXG4gICAgICAgIChjbGljayk9XCJjbGlja0FjdGlvbigpXCJcclxuICAgICAgICBpZD1cInt7IGlkQ29sb3IgfX1cIlxyXG4gICAgICAgIGNsYXNzPVwiY291cnNlc1wiPlxyXG4gICAgICA8cCBjbGFzcz1cInAtbGV2ZWwgcC1sZXZlbC1hY3RpdmVcIj57eyBsZXZlbCB9fTwvcD5cclxuICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuICBgLFxyXG4gIHN0eWxlVXJsczogWycuL2xldmVsLWJ1dHRvbi5jc3MnXSxcclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBMZXZlbEJ1dHRvbkNvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpIGxldmVsITogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGJ1dHRvbkFjdGl2ZSE6IGJvb2xlYW47XHJcbiAgQElucHV0KCkgaWRDb2xvciE6IHN0cmluZztcclxuICBAT3V0cHV0KCkgaXNDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG5cclxuICBjbGlja0FjdGlvbigpIHtcclxuICAgIHRoaXMuaXNDbGlja2VkLmVtaXQodHJ1ZSk7XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+export class LevelButtonComponent {
+    constructor() {
+        this.isClicked = new EventEmitter();
+    }
+    clickAction() {
+        this.isClicked.emit(true);
+    }
+}
+LevelButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LevelButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: LevelButtonComponent, selector: "ipt-level-button", inputs: { level: "level", buttonActive: "buttonActive", idColor: "idColor" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
+    <div [ngSwitch]="buttonActive">
+      <button
+        *ngSwitchCase="0"
+        (click)="clickAction()"
+        id="level"
+        class="courses"
+      >
+      <p class="p-level">{{ level }}</p>
+      </button>
+
+      <button
+        *ngSwitchCase="1"
+        (click)="clickAction()"
+        id="{{ idColor }}"
+        class="courses">
+      <p class="p-level p-level-active">{{ level }}</p>
+      </button>
+    </div>
+  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:6px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-level-button', template: `
+    <div [ngSwitch]="buttonActive">
+      <button
+        *ngSwitchCase="0"
+        (click)="clickAction()"
+        id="level"
+        class="courses"
+      >
+      <p class="p-level">{{ level }}</p>
+      </button>
+
+      <button
+        *ngSwitchCase="1"
+        (click)="clickAction()"
+        id="{{ idColor }}"
+        class="courses">
+      <p class="p-level p-level-active">{{ level }}</p>
+      </button>
+    </div>
+  `, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:6px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"] }]
+        }], propDecorators: { level: [{
+                type: Input
+            }], buttonActive: [{
+                type: Input
+            }], idColor: [{
+                type: Input
+            }], isClicked: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGV2ZWwtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2xldmVsLWJ1dHRvbi9sZXZlbC1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQTJCdkUsTUFBTSxPQUFPLG9CQUFvQjtJQXpCakM7UUE4QlksY0FBUyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FNbkQ7SUFKQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7aUhBVFUsb0JBQW9CO3FHQUFwQixvQkFBb0IsMktBdkJyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDsyRkFJVSxvQkFBb0I7a0JBekJoQyxTQUFTOytCQUNFLGtCQUFrQixZQUNsQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDs4QkFNUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2lwdC1sZXZlbC1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW25nU3dpdGNoXT1cImJ1dHRvbkFjdGl2ZVwiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICAqbmdTd2l0Y2hDYXNlPVwiMFwiXG4gICAgICAgIChjbGljayk9XCJjbGlja0FjdGlvbigpXCJcbiAgICAgICAgaWQ9XCJsZXZlbFwiXG4gICAgICAgIGNsYXNzPVwiY291cnNlc1wiXG4gICAgICA+XG4gICAgICA8cCBjbGFzcz1cInAtbGV2ZWxcIj57eyBsZXZlbCB9fTwvcD5cbiAgICAgIDwvYnV0dG9uPlxuXG4gICAgICA8YnV0dG9uXG4gICAgICAgICpuZ1N3aXRjaENhc2U9XCIxXCJcbiAgICAgICAgKGNsaWNrKT1cImNsaWNrQWN0aW9uKClcIlxuICAgICAgICBpZD1cInt7IGlkQ29sb3IgfX1cIlxuICAgICAgICBjbGFzcz1cImNvdXJzZXNcIj5cbiAgICAgIDxwIGNsYXNzPVwicC1sZXZlbCBwLWxldmVsLWFjdGl2ZVwiPnt7IGxldmVsIH19PC9wPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL2xldmVsLWJ1dHRvbi5jc3MnXSxcbn0pXG5cbmV4cG9ydCBjbGFzcyBMZXZlbEJ1dHRvbkNvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgbGV2ZWwhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGJ1dHRvbkFjdGl2ZSE6IGJvb2xlYW47XG4gIEBJbnB1dCgpIGlkQ29sb3IhOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBpc0NsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgY2xpY2tBY3Rpb24oKSB7XG4gICAgdGhpcy5pc0NsaWNrZWQuZW1pdCh0cnVlKTtcbiAgfVxuXG59XG4iXX0=

package/esm2020/lib/components/atoms/level-text/level-text.component.mjs

@@ -1,19 +1,19 @@
-import { Component, Input } from '@angular/core';
-import * as i0 from "@angular/core";
-export class LevelTextComponent {
-}
-LevelTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LevelTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: LevelTextComponent, selector: "ipt-level-button", inputs: { level: "level", total: "total" }, ngImport: i0, template: `
-    <p class="p-table-course">{{ level }}: {{ total }}</p>
-  `, isInline: true, styles: ["@media (min-width: 320px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 375px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 425px){.p-table-course{font-size:18px}}@media (min-width: 1024px){.p-table-course{font-size:20px}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelTextComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ipt-level-button', template: `
-    <p class="p-table-course">{{ level }}: {{ total }}</p>
-  `, styles: ["@media (min-width: 320px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 375px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 425px){.p-table-course{font-size:18px}}@media (min-width: 1024px){.p-table-course{font-size:20px}}\n"] }]
-        }], propDecorators: { level: [{
-                type: Input
-            }], total: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGV2ZWwtdGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9kZXNpZ24tc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9sZXZlbC10ZXh0L2xldmVsLXRleHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUF3QixNQUFNLGVBQWUsQ0FBQzs7QUFVdkUsTUFBTSxPQUFPLGtCQUFrQjs7K0dBQWxCLGtCQUFrQjttR0FBbEIsa0JBQWtCLG9HQU5uQjs7R0FFVDsyRkFJVSxrQkFBa0I7a0JBUjlCLFNBQVM7K0JBQ0Usa0JBQWtCLFlBQ2xCOztHQUVUOzhCQU1RLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdpcHQtbGV2ZWwtYnV0dG9uJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPHAgY2xhc3M9XCJwLXRhYmxlLWNvdXJzZVwiPnt7IGxldmVsIH19OiB7eyB0b3RhbCB9fTwvcD5cclxuICBgLFxyXG4gIHN0eWxlVXJsczogWycuL2xldmVsLXRleHQuY3NzJ10sXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTGV2ZWxUZXh0Q29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KCkgbGV2ZWwhOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdG90YWwhOiBzdHJpbmc7XHJcblxyXG59XHJcbiJdfQ==
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+export class LevelTextComponent {
+}
+LevelTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LevelTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: LevelTextComponent, selector: "ipt-level-button", inputs: { level: "level", total: "total" }, ngImport: i0, template: `
+    <p class="p-table-course">{{ level }}: {{ total }}</p>
+  `, isInline: true, styles: ["@media (min-width: 320px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 375px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 425px){.p-table-course{font-size:18px}}@media (min-width: 1024px){.p-table-course{font-size:20px}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: LevelTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-level-button', template: `
+    <p class="p-table-course">{{ level }}: {{ total }}</p>
+  `, styles: ["@media (min-width: 320px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 375px){.p-table-course{background-color:#4b4a4a;color:#fff;font-size:14px;font-weight:700;padding:5px;width:100%;text-align:center}}@media (min-width: 425px){.p-table-course{font-size:18px}}@media (min-width: 1024px){.p-table-course{font-size:20px}}\n"] }]
+        }], propDecorators: { level: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGV2ZWwtdGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9kZXNpZ24tc3lzdGVtL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9sZXZlbC10ZXh0L2xldmVsLXRleHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUF3QixNQUFNLGVBQWUsQ0FBQzs7QUFVdkUsTUFBTSxPQUFPLGtCQUFrQjs7K0dBQWxCLGtCQUFrQjttR0FBbEIsa0JBQWtCLG9HQU5uQjs7R0FFVDsyRkFJVSxrQkFBa0I7a0JBUjlCLFNBQVM7K0JBQ0Usa0JBQWtCLFlBQ2xCOztHQUVUOzhCQU1RLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpcHQtbGV2ZWwtYnV0dG9uJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8cCBjbGFzcz1cInAtdGFibGUtY291cnNlXCI+e3sgbGV2ZWwgfX06IHt7IHRvdGFsIH19PC9wPlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9sZXZlbC10ZXh0LmNzcyddLFxufSlcblxuZXhwb3J0IGNsYXNzIExldmVsVGV4dENvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgbGV2ZWwhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHRvdGFsITogc3RyaW5nO1xuXG59XG4iXX0=