iptdevs-design-system 0.0.1

package/fesm2015/design-system-ipt.mjs

@@ -0,0 +1,598 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+class AsideButtonComponent {
+    constructor() {
+        this.isClicked = new EventEmitter();
+    }
+    clickAction() {
+        this.isClicked.emit(true);
+    }
+}
+AsideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AsideButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AsideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: AsideButtonComponent, selector: "ipt-aside-button", inputs: { icon: "icon", text: "text", type: "type", url: "url", textColor: "textColor", buttonActive: "buttonActive" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
+    <div [ngSwitch]="buttonActive">
+      <a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
+        <img src="{{ icon }}" alt="icon_url" />
+        <p [ngStyle]="{'color': textColor}">{{ text }}</p>
+      </a>
+
+      <a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
+        <img src="{{ icon }}" alt="icon_url" />
+        <p [ngStyle]="{'color': textColor}">{{ text }}</p>
+      </a>
+    </div>
+  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: AsideButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-aside-button', template: `
+    <div [ngSwitch]="buttonActive">
+      <a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
+        <img src="{{ icon }}" alt="icon_url" />
+        <p [ngStyle]="{'color': textColor}">{{ text }}</p>
+      </a>
+
+      <a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
+        <img src="{{ icon }}" alt="icon_url" />
+        <p [ngStyle]="{'color': textColor}">{{ text }}</p>
+      </a>
+    </div>
+  `, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], buttonActive: [{
+                type: Input
+            }], isClicked: [{
+                type: Output
+            }] } });
+
+class ButtonComponent {
+    constructor() {
+        this.primary = false;
+        this.size = 'medium';
+        this.label = 'Button';
+        this.isEnabled = true;
+        this.onClick = new EventEmitter();
+    }
+    get classes() {
+        const mode = this.primary && this.isEnabled === true
+            ? 'ipt-button--primary'
+            : this.isEnabled === false ? 'ipt-button--primary-disabled'
+                : 'ipt-button--secondary';
+        return ['ipt-button', `ipt-button--${this.size}`, mode];
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: ButtonComponent, selector: "ipt-button", inputs: { primary: "primary", size: "size", label: "label", isEnabled: "isEnabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `<button *ngIf="isEnabled"
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+  >
+    {{ label }}
+  </button>
+
+  <button *ngIf="!isEnabled"
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+  >
+    {{ label }}
+  </button>`, isInline: true, styles: [".ipt-button{font-family:Poppins,sans-serif;font-weight:700;border:0;border-radius:12px;cursor:pointer;display:inline-block;line-height:1;transition:.4s;width:100%;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button:hover{box-shadow:0 10px 20px #1b1b1b80;transform:translateY(-3px)}.ipt-button:active{transform:scale(.99)}.ipt-button--primary{color:#fff;background-color:#1c77f7}.ipt-button--primary-disabled{color:gray;background-color:#fff;border:1px solid gray;box-shadow:none;cursor:not-allowed}.ipt-button--primary-disabled:hover{box-shadow:none}.ipt-button--secondary{color:#1c77f7;background-color:#fff;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button--small{font-size:12px;padding:10px 16px}.ipt-button--medium{font-size:14px;padding:11px 20px}.ipt-button--large{font-size:16px;padding:12px 24px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-button', template: `<button *ngIf="isEnabled"
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+  >
+    {{ label }}
+  </button>
+
+  <button *ngIf="!isEnabled"
+    type="button"
+    (click)="onClick.emit($event)"
+    [ngClass]="classes"
+  >
+    {{ label }}
+  </button>`, styles: [".ipt-button{font-family:Poppins,sans-serif;font-weight:700;border:0;border-radius:12px;cursor:pointer;display:inline-block;line-height:1;transition:.4s;width:100%;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button:hover{box-shadow:0 10px 20px #1b1b1b80;transform:translateY(-3px)}.ipt-button:active{transform:scale(.99)}.ipt-button--primary{color:#fff;background-color:#1c77f7}.ipt-button--primary-disabled{color:gray;background-color:#fff;border:1px solid gray;box-shadow:none;cursor:not-allowed}.ipt-button--primary-disabled:hover{box-shadow:none}.ipt-button--secondary{color:#1c77f7;background-color:#fff;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.ipt-button--small{font-size:12px;padding:10px 16px}.ipt-button--medium{font-size:14px;padding:11px 20px}.ipt-button--large{font-size:16px;padding:12px 24px}\n"] }]
+        }], propDecorators: { primary: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], isEnabled: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+class CheckboxComponent {
+    constructor() {
+        this.checkboxOption = false;
+        this.onChecked = new EventEmitter();
+    }
+    set control(value) {
+        if (this.formControl !== value) {
+            this.formControl = value;
+        }
+    }
+}
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CheckboxComponent, selector: "ipt-checkbox", inputs: { checkboxOption: "checkboxOption", control: "control" }, outputs: { onChecked: "onChecked" }, ngImport: i0, template: `
+    <label class="cont">
+      <input
+        class="checkbox"
+        [formControl]="formControl"
+        [checked]="checkboxOption"
+        (click)="onChecked.emit($event)"
+        type="checkbox">
+      <span></span>
+    </label>
+  `, isInline: true, styles: [".cont{display:flex;align-items:center;transform:scale(1)}@media screen and (min-width: 320px){input[type=checkbox]{height:1rem;width:1.1rem;margin:5px;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;background-color:#1c77f733;border-radius:15%;cursor:pointer;overflow:hidden}input[type=checkbox]:after{content:\"\";display:block;height:.4rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white;opacity:0;transform:rotate(45deg) translate(-50%,-50%);position:absolute;top:50%;left:20%;transition:.25s ease}input[type=checkbox]:before{content:\"\";display:block;height:0;width:0;background-color:#1c77f7;border-radius:50%;opacity:.5;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;transition:.3s ease}input[type=checkbox]:checked:before{height:130%;width:130%;opacity:100%}input[type=checkbox]:checked:after{opacity:100%}span{font-size:1rem}}@media screen and (min-width: 375px){input[type=checkbox]{height:1.2rem;width:1.3rem}input[type=checkbox]:after{height:.5rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}@media screen and (min-width: 1024px){input[type=checkbox]{height:1.3rem;width:1.4rem}input[type=checkbox]:after{height:.6rem;width:.3rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}\n"], directives: [{ type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-checkbox', template: `
+    <label class="cont">
+      <input
+        class="checkbox"
+        [formControl]="formControl"
+        [checked]="checkboxOption"
+        (click)="onChecked.emit($event)"
+        type="checkbox">
+      <span></span>
+    </label>
+  `, styles: [".cont{display:flex;align-items:center;transform:scale(1)}@media screen and (min-width: 320px){input[type=checkbox]{height:1rem;width:1.1rem;margin:5px;display:inline-block;-webkit-appearance:none;appearance:none;position:relative;background-color:#1c77f733;border-radius:15%;cursor:pointer;overflow:hidden}input[type=checkbox]:after{content:\"\";display:block;height:.4rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white;opacity:0;transform:rotate(45deg) translate(-50%,-50%);position:absolute;top:50%;left:20%;transition:.25s ease}input[type=checkbox]:before{content:\"\";display:block;height:0;width:0;background-color:#1c77f7;border-radius:50%;opacity:.5;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;transition:.3s ease}input[type=checkbox]:checked:before{height:130%;width:130%;opacity:100%}input[type=checkbox]:checked:after{opacity:100%}span{font-size:1rem}}@media screen and (min-width: 375px){input[type=checkbox]{height:1.2rem;width:1.3rem}input[type=checkbox]:after{height:.5rem;width:.2rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}@media screen and (min-width: 1024px){input[type=checkbox]{height:1.3rem;width:1.4rem}input[type=checkbox]:after{height:.6rem;width:.3rem;border-bottom:.21rem solid white;border-right:.21rem solid white}}\n"] }]
+        }], propDecorators: { checkboxOption: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], onChecked: [{
+                type: Output
+            }] } });
+
+class DatalistComponent {
+    constructor(fb) {
+        this.isChanged = new EventEmitter();
+        this.clicked = false;
+        this.formControl = fb.group({
+            dataListControl: ['', [Validators.required]],
+        });
+    }
+    ngOnInit() {
+        if (this.initalData != null) {
+            this.formControl.controls['dataListControl'].setValue(this.initalData);
+        }
+    }
+    optionChanged(event) {
+        let selectOption = this.datalistData.find(element => element.name == event.target.value);
+        if (typeof (selectOption) != 'undefined') {
+            this.isChanged.emit(selectOption.code);
+        }
+        else {
+            this.isChanged.emit('-1');
+            this.formControl.controls['dataListControl'].setValue(null);
+        }
+    }
+    click(value) {
+        this.clicked = value.isTrusted;
+    }
+    get labelClass() {
+        return this.clicked === false ? 'label' : 'labelUp';
+    }
+}
+DatalistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DatalistComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DatalistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: DatalistComponent, selector: "ipt-datalist", inputs: { datalistId: "datalistId", datalistData: "datalistData", placeHolder: "placeHolder", validateText: "validateText", initalData: "initalData" }, outputs: { isChanged: "isChanged" }, ngImport: i0, template: `
+    <div class="input-container">
+      <label [ngClass]="labelClass">{{ placeHolder }}</label>
+      <input
+        type="text"
+        class="input"
+        placeholder="{{ placeHolder }}"
+        (click)="click($event)"
+        [attr.list]="datalistId"
+        (change)="optionChanged($event)"
+      />
+
+      <datalist id="{{ datalistId }}">
+        <option *ngFor="let item of datalistData; index as i" [value]="item.name">
+          {{item.name}} {{item.last_name}}
+        </option>
+      </datalist>
+    </div>
+  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.input-container{position:relative}input{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;margin:15px -5px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background:transparent}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:5px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.labelUp{color:#1c77f7;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DatalistComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-datalist', template: `
+    <div class="input-container">
+      <label [ngClass]="labelClass">{{ placeHolder }}</label>
+      <input
+        type="text"
+        class="input"
+        placeholder="{{ placeHolder }}"
+        (click)="click($event)"
+        [attr.list]="datalistId"
+        (change)="optionChanged($event)"
+      />
+
+      <datalist id="{{ datalistId }}">
+        <option *ngFor="let item of datalistData; index as i" [value]="item.name">
+          {{item.name}} {{item.last_name}}
+        </option>
+      </datalist>
+    </div>
+  `, styles: ["*{font-family:Poppins,sans-serif}.input-container{position:relative}input{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;margin:15px -5px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background:transparent}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:5px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.labelUp{color:#1c77f7;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { datalistId: [{
+                type: Input
+            }], datalistData: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], validateText: [{
+                type: Input
+            }], initalData: [{
+                type: Input
+            }], isChanged: [{
+                type: Output
+            }] } });
+
+class InputComponent {
+    constructor() {
+        this.data = [];
+        this.clicked = false;
+    }
+    set control(value) {
+        if (this.formControl !== value) {
+            this.formControl = value;
+        }
+    }
+    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", list: "list", iconUrl: "iconUrl", control: "control" }, ngImport: i0, template: `
+    <div class="input-container">
+      <input *ngIf="inputType === 'date'"
+        placeholder="{{ placeHolder }}"
+        class="input"
+        type="{{ inputType ? 'text' : 'date' }}"
+        [formControl]="formControl"
+        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'"
+        placeholder="{{ placeHolder }}"
+        class="input"
+        [ngStyle]="{
+          'box-shadow':
+          formControl.value === ''
+          ? 'box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;'
+          : formControl.valid
+          ? '1px 1px 7.5px #1b5e20'
+          : '1px 1px 7.5px #b71c1c'
+        }"
+        class="input"
+        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)"
+
+          [ngStyle]="{
+            'box-shadow':
+              formControl.value === ''
+                ? 'box-shadow: rgba(100, 100, 111, 0.2);'
+                : formControl.valid
+                ? '1px 1px 7.5px #1b5e20'
+                : '1px 1px 7.5px #b71c1c'
+          }"
+        />
+
+      <label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
+
+      <p *ngIf="!formControl.valid && formControl.value !== '' && formControl.touched">
+        {{ 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;margin-top:35px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:14px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:16px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background:transparent;-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: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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'"
+        placeholder="{{ placeHolder }}"
+        class="input"
+        type="{{ inputType ? 'text' : 'date' }}"
+        [formControl]="formControl"
+        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'"
+        placeholder="{{ placeHolder }}"
+        class="input"
+        [ngStyle]="{
+          'box-shadow':
+          formControl.value === ''
+          ? 'box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;'
+          : formControl.valid
+          ? '1px 1px 7.5px #1b5e20'
+          : '1px 1px 7.5px #b71c1c'
+        }"
+        class="input"
+        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)"
+
+          [ngStyle]="{
+            'box-shadow':
+              formControl.value === ''
+                ? 'box-shadow: rgba(100, 100, 111, 0.2);'
+                : formControl.valid
+                ? '1px 1px 7.5px #1b5e20'
+                : '1px 1px 7.5px #b71c1c'
+          }"
+        />
+
+      <label [ngClass]="{'labelUp': formControl.value !== ''}">{{ placeHolder }}</label>
+
+      <p *ngIf="!formControl.valid && formControl.value !== '' && formControl.touched">
+        {{ validateText }}
+      </p>
+    </div>
+    `, styles: ["*{font-family:Poppins,sans-serif}@media screen and (min-width: 320px){p{color:#c73a3a;font-size:12px;padding-left:15px;margin-top:35px}}@media screen and (min-width: 768px){p{color:#c73a3a;font-size:14px;padding-left:15px}}@media screen and (min-width: 1024px){p{color:#c73a3a;font-size:16px;padding-left:15px}}.input-container{position:relative;margin-top:30px}input{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background:transparent;-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"] }]
+        }], propDecorators: { inputType: [{
+                type: Input
+            }], placeHolder: [{
+                type: Input
+            }], validateText: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], iconUrl: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+class RadioComponent {
+    constructor() {
+        this.radioOption = false;
+        this.onSelected = new EventEmitter();
+    }
+    set control(value) {
+        if (this.formControl !== value) {
+            this.formControl = value;
+        }
+    }
+}
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: RadioComponent, selector: "ipt-radio", inputs: { radioOption: "radioOption", control: "control" }, outputs: { onSelected: "onSelected" }, ngImport: i0, template: `
+    <label class="cont">
+      <input
+        class="radio"
+        [formControl]="formControl"
+        [checked]="radioOption"
+        (click)="onSelected.emit($event)"
+        type="radio">
+      <span></span>
+    </label>
+  `, isInline: true, styles: [""], directives: [{ type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-radio', template: `
+    <label class="cont">
+      <input
+        class="radio"
+        [formControl]="formControl"
+        [checked]="radioOption"
+        (click)="onSelected.emit($event)"
+        type="radio">
+      <span></span>
+    </label>
+  `, styles: [""] }]
+        }], propDecorators: { radioOption: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], onSelected: [{
+                type: Output
+            }] } });
+
+class SelectComponent {
+    constructor() {
+        this.boxShadow = 0;
+        this.clicked = false;
+        this.eventSelect = new EventEmitter();
+    }
+    // type viene de otro componente -> indica de que tipo es el arreglo si pregrade, posgrade o modo
+    set control(value) {
+        if (this.formControl !== value) {
+            this.formControl = value;
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            this.binding = this.defaultText;
+        }
+    }
+    seleccionar(evt) {
+        if (this.eventSelect.emit(evt) !== this.defaultText) {
+            this.boxShadow = 1;
+        }
+        else {
+            this.boxShadow = 2;
+        }
+    }
+    click(value) {
+        this.clicked = value.isTrusted;
+    }
+    ngOnInit() {
+        this.binding = this.defaultText;
+    }
+    get textClass() {
+        return this.defaultText === '' ? 'selected' : 'select';
+    }
+    get labelClass() {
+        return this.clicked === false ? 'label' : 'labelUp';
+    }
+}
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: SelectComponent, selector: "ipt-select", inputs: { isRequired: "isRequired", data: "data", defaultText: "defaultText", selectCode: "selectCode", control: "control" }, outputs: { eventSelect: "eventSelect" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="select-container">
+      <label [ngClass]="labelClass">{{ defaultText }}</label>
+      <select
+        [(ngModel)]="binding"
+        (ngModelChange)="seleccionar($event)"
+        (click)="click($event)"
+        [ngClass]="textClass"
+        [ngStyle]="{
+          'box-shadow':
+          boxShadow === 2
+          ? '1px 1px 7.5px #b71c1c'
+          : (boxShadow === 1 ? '1px 1px 7.5px #1b5e20' : 'box-shadow: rgba(100, 100, 111, 0.2);')
+        }">
+        <option *ngFor="let item of data; index as i" [value]="item.code">
+          {{ item.name }} {{ item.prefix }}
+        </option>
+      </select>
+    </div>
+  `, isInline: true, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background:transparent;-webkit-appearance:none}.selected{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;transition:.5s;font-weight:300;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px}select:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}.select: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:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.labelUp{color:#1c77f7;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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipt-select', template: `
+    <div class="select-container">
+      <label [ngClass]="labelClass">{{ defaultText }}</label>
+      <select
+        [(ngModel)]="binding"
+        (ngModelChange)="seleccionar($event)"
+        (click)="click($event)"
+        [ngClass]="textClass"
+        [ngStyle]="{
+          'box-shadow':
+          boxShadow === 2
+          ? '1px 1px 7.5px #b71c1c'
+          : (boxShadow === 1 ? '1px 1px 7.5px #1b5e20' : 'box-shadow: rgba(100, 100, 111, 0.2);')
+        }">
+        <option *ngFor="let item of data; index as i" [value]="item.code">
+          {{ item.name }} {{ item.prefix }}
+        </option>
+      </select>
+    </div>
+  `, styles: ["*{font-family:Poppins,sans-serif}.select-container{position:relative;margin-top:30px}.select{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;display:block;transition:.2s;font-weight:300;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px;background:transparent;-webkit-appearance:none}.selected{box-shadow:#64646f33 0 7px 29px;border-radius:10px;border:none;outline:none;transition:.5s;font-weight:300;margin:10px 10px -30px;width:-webkit-fill-available;width:-moz-available;height:28px;padding-left:10px}select:hover{box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}.select: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:-20px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.labelUp{color:#1c77f7;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"] }]
+        }], propDecorators: { isRequired: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], defaultText: [{
+                type: Input
+            }], selectCode: [{
+                type: Input
+            }], eventSelect: [{
+                type: Output
+            }], control: [{
+                type: Input
+            }] } });
+
+class DesignSystemModule {
+}
+DesignSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DesignSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DesignSystemModule, declarations: [AsideButtonComponent,
+        ButtonComponent,
+        CheckboxComponent,
+        DatalistComponent,
+        InputComponent,
+        RadioComponent,
+        SelectComponent], imports: [CommonModule,
+        BrowserModule,
+        FormsModule,
+        ReactiveFormsModule], exports: [AsideButtonComponent,
+        ButtonComponent,
+        CheckboxComponent,
+        DatalistComponent,
+        InputComponent,
+        RadioComponent,
+        SelectComponent] });
+DesignSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DesignSystemModule, imports: [[
+            CommonModule,
+            BrowserModule,
+            FormsModule,
+            ReactiveFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: DesignSystemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AsideButtonComponent,
+                        ButtonComponent,
+                        CheckboxComponent,
+                        DatalistComponent,
+                        InputComponent,
+                        RadioComponent,
+                        SelectComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        BrowserModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ],
+                    exports: [
+                        AsideButtonComponent,
+                        ButtonComponent,
+                        CheckboxComponent,
+                        DatalistComponent,
+                        InputComponent,
+                        RadioComponent,
+                        SelectComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of design-system
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AsideButtonComponent, ButtonComponent, CheckboxComponent, DatalistComponent, DesignSystemModule, InputComponent, RadioComponent, SelectComponent };
+//# sourceMappingURL=design-system-ipt.mjs.map