nitrozen/bundles/nitrozen.umd.min.js

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.23.

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/button"),require("@angular/material/progress-spinner"),require("@angular/material/checkbox"),require("@angular/material/radio"),require("@angular/animations"),require("@angular/forms"),require("@angular/material/slide-toggle"),require("@angular/material/input"),require("@angular/material/tooltip"),require("rxjs"),require("rxjs/operators"),require("@angular/material/select"),require("ngx-mat-select-search"),require("@angular/material/snack-bar"),require("@angular/material/icon"),require("@angular/common/http"),require("@angular/material/dialog"),require("ngx-image-cropper"),require("@angular/material/progress-bar")):"function"==typeof define&&define.amd?define("nitrozen",["exports","@angular/core","@angular/common","@angular/material/button","@angular/material/progress-spinner","@angular/material/checkbox","@angular/material/radio","@angular/animations","@angular/forms","@angular/material/slide-toggle","@angular/material/input","@angular/material/tooltip","rxjs","rxjs/operators","@angular/material/select","ngx-mat-select-search","@angular/material/snack-bar","@angular/material/icon","@angular/common/http","@angular/material/dialog","ngx-image-cropper","@angular/material/progress-bar"],n):n((t=t||self).nitrozen={},t.ng.core,t.ng.common,t.ng.material.button,t.ng.material.progressSpinner,t.ng.material.checkbox,t.ng.material.radio,t.ng.animations,t.ng.forms,t.ng.material.slideToggle,t.ng.material.input,t.ng.material.tooltip,t.rxjs,t.rxjs.operators,t.ng.material.select,t.ngxMatSelectSearch,t.ng.material.snackBar,t.ng.material.icon,t.ng.common.http,t.ng.material.dialog,t.ngxImageCropper,t.ng.material.progressBar)}(this,(function(t,n,e,o,i,r,a,s,l,d,c,p,u,g,f,m,b,h,x,v,y,w){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */var k=function(){return(k=Object.assign||function(t){for(var n,e=1,o=arguments.length;e<o;e++)for(var i in n=arguments[e])Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i]);return t}).apply(this,arguments)};function I(t,n,e,o){var i,r=arguments.length,a=r<3?n:null===o?o=Object.getOwnPropertyDescriptor(n,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,n,e,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(r<3?i(a):r>3?i(n,e,a):i(n,e))||a);return r>3&&a&&Object.defineProperty(n,e,a),a}function C(t,n){return function(e,o){n(e,o,t)}}var M,P=function(){function t(){this.clicked=new n.EventEmitter}return t.prototype.ngOnInit=function(){this.theme=this.theme?this.theme:"primary"},t.prototype.clickedButton=function(t){this.btnWidth=t.currentTarget.offsetWidth-80,this.clicked.emit(t)},I([n.Input()],t.prototype,"showProgress",void 0),I([n.Input()],t.prototype,"isContained",void 0),I([n.Input()],t.prototype,"theme",void 0),I([n.Input()],t.prototype,"focused",void 0),I([n.Input()],t.prototype,"large",void 0),I([n.Input()],t.prototype,"isStroked",void 0),I([n.Input()],t.prototype,"shouldBeDisabled",void 0),I([n.Input()],t.prototype,"showIcon",void 0),I([n.Output()],t.prototype,"clicked",void 0),t=I([n.Component({selector:"nitrozen-button",template:'<div\n  [ngClass]="{\n    \'primary-section\': theme === \'primary\',\n    \'secondary-section\': theme === \'accent\'\n  }"\n>\n  <button\n    mat-raised-button\n    class="btn-nitrozen"\n    [ngClass]="{\n      \'mat-stroked-button\': isStroked,\n      \'mat-flat-button\': isContained,\n      \'btn-focused\': focused,\n      \'hover-state\': showProgress,\n      \'large-btn\': large\n    }"\n    [disabled]="shouldBeDisabled"\n    (click)="clickedButton($event)"\n  >\n    <div class="btn-icon-show">\n      <div\n        class="btn-txt"\n        [ngClass]="{\n          \'btn-show-icn\': showIcon,\n          \'btn-stroke-color\': isStroked,\n          \'btn-contained-color\': isContained,\n          \'btn-progress\': !showProgress,\n          \'btn-notprogress\': showProgress\n        }"\n      >\n        <ng-content></ng-content>\n      </div>\n\n      <div\n        class="btn-spin"\n        [ngClass]="{\n          \'btn-spin-stroke\': isStroked,\n          \'btn-spin-contained\': isContained,\n          \'btn-progress\': !showProgress,\n          \'btn-notprogress\': showProgress\n        }"\n        *ngIf="showIcon"\n      >\n        <img src="./../../assets/icons/Bag_Icon.svg" />\n      </div>\n      <div\n        class="btn-spin"\n        [ngStyle]="{ \'width.px\': btnWidth }"\n        [ngClass]="{\n          \'btn-spin-stroke\': isStroked,\n          \'btn-spin-contained\': isContained,\n          \'btn-notprogress\': !showProgress,\n          \'btn-progress\': showProgress\n        }"\n      >\n        <img\n          *ngIf="isContained"\n          class="btn-spinner"\n          style="width: 50px;"\n          src="../../../assets/icons/loader-white-1.gif"\n        />\n        <img\n          *ngIf="isStroked && theme === \'primary\'"\n          class="btn-spinner"\n          style="width: 50px;"\n          src="../../../assets/icons/loader-green.gif"\n        />\n        <img\n          *ngIf="isStroked && theme === \'accent\'"\n          class="btn-spinner"\n          style="width: 50px;"\n          src="../../../assets/icons/loader-blue.gif"\n        />\n        \x3c!-- <mat-progress-spinner\n  class="btn-spinner"\n  [ngClass]="{\'c-button__spinner--active\': showProgress && !shouldBeDisabled}"\n  diameter="21"\n  mode="indeterminate"\n></mat-progress-spinner> --\x3e\n      </div>\n    </div>\n  </button>\n</div>\n',styles:[".btn-nitrozen{height:48px;border-radius:3px;cursor:pointer;padding:0 40px;box-shadow:none}.hover-state{pointer-events:none}.large-btn{height:64px!important;padding:0 65px!important}.btn-notprogress{opacity:0;transition:opacity .25s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.fx-wt{width:66.38px}.primary-section .mat-flat-button.btn-focused{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button.btn-focused{text-decoration:underline;color:#36cc9b;text-underline-position:under}.primary-section .mat-flat-button{background-color:#36cc9b}.primary-section .mat-flat-button:hover:not([disabled]){background-color:#2eb589}.primary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button{border:1px solid #36cc9b}.primary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(54,204,155,.12)}.primary-section .mat-stroked-button:focus{text-decoration:underline;color:#45cc9b;text-underline-position:under}.primary-section .btn-spin-stroke .mat-spinner circle,.primary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#fff}.primary-section .btn-spin-contained .mat-spinner circle,.primary-section .btn-spin-contained ::ng-deep .mat-progress-spinner circle{stroke:#fff}.primary-section .mat-flat-button:disabled,.primary-section .mat-flat-button[disabled=disabled]{background-color:rgba(54,204,155,.4)!important}.primary-section .btn-txt{font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;text-align:center}.primary-section .btn-stroke-color{color:#36cc9b}.primary-section .btn-contained-color{color:#fff}.primary-section .btn-spinner{text-align:center}.primary-section .btn-spin{display:flex;justify-content:center}.primary-section .btn-fynd-icon{height:48px;width:190px;border-radius:3px;background-color:#36cc9b}.primary-section .btn-fynd-icon:hover:not([disabled]){background-color:#2eb589}.primary-section .btn-fynd-icon:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .btn-show-icn{padding-left:10px}.primary-section .btn-icon-show{display:flex;flex-direction:row-reverse;justify-content:center}.secondary-section .mat-flat-button.btn-focused{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .mat-stroked-button.btn-focused{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.secondary-section .mat-flat-button{background-color:#5c6bdd}.secondary-section .mat-flat-button:hover:not([disabled]){background-color:#4f5ecc}.secondary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .mat-stroked-button{border:1px solid #5c6bdd}.secondary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(79,94,204,.12)}.secondary-section .mat-stroked-button:focus{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.secondary-section .btn-spin-stroke .mat-spinner circle,.secondary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#5c6bdd}.secondary-section .btn-spin-contained .mat-spinner circle,.secondary-section .btn-spin-contained ::ng-deep .mat-progress-spinner circle{stroke:#fff}.secondary-section .mat-flat-button:disabled,.secondary-section .mat-flat-button[disabled=disabled]{background-color:rgba(92,107,221,.4)!important}.secondary-section .btn-txt{font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;text-align:center}.secondary-section .btn-stroke-color{color:#5c6bdd}.secondary-section .btn-contained-color{color:#fff}.secondary-section .btn-spinner{text-align:center}.secondary-section .btn-spin{display:flex;justify-content:center}.secondary-section .btn-fynd-icon{height:48px;width:190px;border-radius:3px;background-color:#5c6bdd}.secondary-section .btn-fynd-icon:hover:not([disabled]){background-color:#2eb589}.secondary-section .btn-fynd-icon:focus{text-decoration:underline;color:#fff;text-underline-position:under}.secondary-section .btn-show-icn{padding-left:10px}.secondary-section .btn-icon-show{display:flex;flex-direction:row-reverse;justify-content:center}"]})],t)}(),z=function(){function t(){}return t=I([n.NgModule({declarations:[P],imports:[e.CommonModule,o.MatButtonModule,i.MatProgressSpinnerModule],exports:[P,o.MatButtonModule,i.MatProgressSpinnerModule]})],t)}(),S=function(){function t(){this.clicked=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.clickedButton=function(t){this.clicked.emit(t)},I([n.Input()],t.prototype,"shouldBeDisabled",void 0),I([n.Input()],t.prototype,"theme",void 0),I([n.Input()],t.prototype,"focused",void 0),I([n.Input()],t.prototype,"prefixIcon",void 0),I([n.Input()],t.prototype,"postfixIcon",void 0),I([n.Input()],t.prototype,"type",void 0),I([n.Output()],t.prototype,"clicked",void 0),t=I([n.Component({selector:"nitrozen-button-text",template:"<div [ngClass]=\"{\r\n    'primary-section': theme === 'primary' ,\r\n    'secondary-section': theme === 'accent',\r\n    'warn-section':theme === 'warn'\r\n  }\">\r\n  <div>\r\n<button [ngClass]=\"{'btn-focused':focused,'btn-warn-thm':theme === 'warn','btn-prim-thm':theme === 'primary'}\" mat-button  (click)=\"clickedButton($event)\"  [disabled]=\"shouldBeDisabled\">\r\n\t<div>\r\n\t\t<span class=\"btn-spin\" *ngIf=\"prefixIcon\">\r\n  <img src=\"./../../assets/icons/arrow-icon.svg\">\r\n</span>\r\n\t<span class=\"btn-txt\" [ngClass]=\"{\r\n    'primary-section': theme === 'primary' ,\r\n    'secondary-section': theme === 'accent',\r\n    'warn-section':theme === 'warn'\r\n  }\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n    <span class=\"btn-spin-post\" *ngIf=\"postfixIcon\">\r\n  <img src=\"./../../assets/icons/arrow-icon.svg\">\r\n</span>\r\n   \r\n</div>\r\n</button>\r\n</div>\r\n</div>\r\n",styles:[".btn-txt{color:#4f5ecc;font-family:Poppins;font-size:16px;font-weight:700;text-align:center}button:disabled,button[disabled=disabled]{color:rgba(92,107,221,.5)!important;opacity:.5}.btn-text,.primary-section{color:#36cc9b!important}.btn-prim-thm:focus{text-decoration:underline;color:#36cc9b!important;text-underline-position:under}.warn-section .btn-txt{color:#fb406b!important;font-weight:700}.btn-warn-thm:focus{text-decoration:underline;color:#fb406b!important;text-underline-position:under}.mat-button{height:48px}.mat-button:hover{background-color:transparent!important}.btn-focused,.mat-button:focus{text-decoration:underline;color:#4f5ecc;text-underline-position:under}.btn-spin{padding-right:8px}.btn-spin-post{padding-left:8px}.hover-state{pointer-events:none}img{width:14px;height:12px}"]})],t)}(),O=function(){function t(){}return t=I([n.NgModule({declarations:[S],imports:[e.CommonModule,o.MatButtonModule,i.MatProgressSpinnerModule],exports:[S,o.MatButtonModule,i.MatProgressSpinnerModule]})],t)}(),_=function(){function t(){this.disabled=!1,this.indeterminate=!1,this.change=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.onCheckboxStateChanged=function(t){console.log(t),this.change.emit(t)},I([n.Input()],t.prototype,"checked",void 0),I([n.Input()],t.prototype,"disabled",void 0),I([n.Input()],t.prototype,"indeterminate",void 0),I([n.Output()],t.prototype,"change",void 0),t=I([n.Component({selector:"nitrozen-checkbox",template:'<mat-checkbox \r\nclass="nitro-checkbox" \r\n[checked]="checked" \r\n[indeterminate]="indeterminate"\r\n[disabled]="disabled"\r\n(change)="onCheckboxStateChanged($event)">\r\n\r\n\r\n<ng-content></ng-content>\r\n\r\n</mat-checkbox>',styles:[""]})],t)}(),E=function(){function t(){}return t=I([n.NgModule({declarations:[_],imports:[e.CommonModule,r.MatCheckboxModule],exports:[_,r.MatCheckboxModule]})],t)}(),T=function(){function t(){this.disabled=!1,this.change=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.onRadioButtonStateChanged=function(t){console.log(t),this.change.emit(t)},I([n.Input()],t.prototype,"selected",void 0),I([n.Input()],t.prototype,"disabled",void 0),I([n.Output()],t.prototype,"change",void 0),t=I([n.Component({selector:"nitrozen-radio-button",template:' <mat-radio-button color="primary"\r\n[disabled]="disabled"\r\n(change)="onRadioButtonStateChanged($event)">\r\n\r\n\r\n<ng-content></ng-content>\r\n</mat-radio-button>  \r\n',styles:["::ng-deep .mat-radio-label-content{padding-left:12px!important;font-family:Poppins!important}"]})],t)}(),D=function(){function t(){}return t=I([n.NgModule({declarations:[T],imports:[e.CommonModule,a.MatRadioModule],exports:[T,a.MatRadioModule]})],t)}();!function(t){t.text="text",t.number="number",t.password="password",t.textarea="textarea"}(M||(M={}));var F={provide:l.NG_VALUE_ACCESSOR,useExisting:n.forwardRef((function(){return B})),multi:!0},j={provide:l.NG_VALIDATORS,useExisting:n.forwardRef((function(){return B})),multi:!0},B=function(){function t(t){this.cd=t,this.label="",this.type=M.text,this.blocked=!1,this.placeholder="",this.disabled=!1,this.search=!1,this.showSuccess=!1,this.noneditable=!1,this.required=!1,this.requiredIndicator="*",this.tooltip=!1,this.passwordToggleEnabled=!1,this.passwordTextVisible=!1,this.autoSelect=!1,this.autofocus=!1,this.autocomplete=!1,this.autocorrect=!1,this.spellcheck=!1,this.change=new n.EventEmitter,this.blur=new n.EventEmitter,this.focus=new n.EventEmitter,this.keyup=new n.EventEmitter,this.click=new n.EventEmitter,this.getHostCssClasses="ngx-input",this.focused=!1,this.onTouchedCallback=function(){},this.onChangeCallback=function(){}}return Object.defineProperty(t.prototype,"value",{get:function(){return this._value},set:function(t){t!==this._value&&(this._value=t,this.onChangeCallback(this._value))},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"focusedOrDirty",{get:function(){return!!this.focused||("string"==typeof this.value?this.value&&this.value.length:void 0!==this.value&&null!==this.value)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"isTouched",{get:function(){return!!this.inputModel&&this.inputModel.touched},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"labelState",{get:function(){return this.placeholder||this.focusedOrDirty?"outside":"inside"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"underlineState",{get:function(){return this.focused?"expanded":"collapsed"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"requiredIndicatorView",{get:function(){return this.requiredIndicator&&this.required?this.requiredIndicator:""},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"element",{get:function(){return this.type===M.textarea?this.textareaControl:this.inputControl},enumerable:!0,configurable:!0}),t.prototype.validate=function(t){return"number"!==this.type?null:k(k({},l.Validators.max(this.max)(t)),l.Validators.min(this.min)(t))},t.prototype.ngOnInit=function(){this.value||(this.value="")},t.prototype.ngAfterViewInit=function(){var t=this;this.autofocus&&setTimeout((function(){t.element.nativeElement.focus()})),setTimeout((function(){return t.cd.markForCheck()}))},t.prototype.ngOnChanges=function(t){("max"in t||"min"in t)&&this.onChangeCallback(this._value)},t.prototype.onChange=function(t){t.stopPropagation(),this.change.emit(this.value)},t.prototype.onKeyUp=function(t){t.stopPropagation(),this.keyup.emit(t)},t.prototype.onFocus=function(t){var n=this;t.stopPropagation(),this.autoSelect&&setTimeout((function(){n.element.nativeElement.select()})),this.focused=!0,this.focus.emit(t),this.onTouchedCallback()},t.prototype.onBlur=function(t){t.stopPropagation(),this.focused=!1,this.blur.emit(t)},t.prototype.writeValue=function(t){t!==this._value&&(this._value=t)},t.prototype.registerOnChange=function(t){this.onChangeCallback=t},t.prototype.registerOnTouched=function(t){this.onTouchedCallback=t},t.prototype.togglePassword=function(){var t=this;this.passwordTextVisible=!this.passwordTextVisible,setTimeout((function(){t.passwordTextVisible?t.passwordControl.nativeElement.focus():t.element.nativeElement.focus()}))},t.prototype.setDisabledState=function(t){this.disabled=t},t.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},I([n.Input()],t.prototype,"id",void 0),I([n.Input()],t.prototype,"name",void 0),I([n.Input()],t.prototype,"label",void 0),I([n.Input()],t.prototype,"type",void 0),I([n.Input()],t.prototype,"hint",void 0),I([n.Input()],t.prototype,"error",void 0),I([n.Input()],t.prototype,"blocked",void 0),I([n.Input()],t.prototype,"success",void 0),I([n.Input()],t.prototype,"placeholder",void 0),I([n.Input()],t.prototype,"disabled",void 0),I([n.Input()],t.prototype,"tabindex",void 0),I([n.Input()],t.prototype,"search",void 0),I([n.Input()],t.prototype,"showSuccess",void 0),I([n.Input()],t.prototype,"righttext",void 0),I([n.Input()],t.prototype,"toolmsg",void 0),I([n.Input()],t.prototype,"pattern",void 0),I([n.Input()],t.prototype,"noneditable",void 0),I([n.Input()],t.prototype,"min",void 0),I([n.Input()],t.prototype,"max",void 0),I([n.Input()],t.prototype,"minlength",void 0),I([n.Input()],t.prototype,"maxlength",void 0),I([n.Input()],t.prototype,"required",void 0),I([n.Input()],t.prototype,"requiredIndicator",void 0),I([n.Input()],t.prototype,"tooltip",void 0),I([n.Input()],t.prototype,"passwordToggleEnabled",void 0),I([n.Input()],t.prototype,"passwordTextVisible",void 0),I([n.Input()],t.prototype,"autoSelect",void 0),I([n.Input()],t.prototype,"autofocus",void 0),I([n.Input()],t.prototype,"autocomplete",void 0),I([n.Input()],t.prototype,"autocorrect",void 0),I([n.Input()],t.prototype,"spellcheck",void 0),I([n.Output()],t.prototype,"change",void 0),I([n.Output()],t.prototype,"blur",void 0),I([n.Output()],t.prototype,"focus",void 0),I([n.Output()],t.prototype,"keyup",void 0),I([n.Output()],t.prototype,"click",void 0),I([n.HostBinding("class")],t.prototype,"getHostCssClasses",void 0),I([n.HostBinding("class.ng-dirty")],t.prototype,"focusedOrDirty",null),I([n.HostBinding("class.ng-touched")],t.prototype,"isTouched",null),I([n.ViewChild("inputControl")],t.prototype,"inputControl",void 0),I([n.ViewChild("inputModel")],t.prototype,"inputModel",void 0),I([n.ViewChild("textareaControl")],t.prototype,"textareaControl",void 0),I([n.ViewChild("passwordControl")],t.prototype,"passwordControl",void 0),t=I([n.Component({selector:"nitrozen-input",providers:[F,j],encapsulation:n.ViewEncapsulation.None,animations:[s.trigger("labelState",[s.state("inside",s.style({"font-size":"1em",top:"0"})),s.state("outside",s.style({"font-size":".7rem",top:"-15px"})),s.transition("inside => outside",s.animate("150ms ease-out")),s.transition("outside => inside",s.animate("150ms ease-out"))]),s.trigger("underlineState",[s.state("collapsed",s.style({width:"0%"})),s.state("expanded",s.style({width:"100%"})),s.transition("collapsed => expanded",s.animate("150ms ease-out")),s.transition("expanded => collapsed",s.animate("150ms ease-out"))])],template:'<div class="nitro-input-wrap" [ngClass]="{\'input-noneditable\':noneditable}">\r\n      <div class="ngx-input-flex-wrap">\r\n         \r\n        <div class="nitro-input-flex-wrap-inner">\r\n          <div class="nitro-input-box-wrap">\r\n            <div class="prefix-icon">\r\n            <ng-content select="nitrozen-input-prefix"></ng-content>\r\n          </div>\r\n            <textarea [ngClass]="{\'search-txt\': search }"\r\n              *ngIf="type === \'textarea\'"\r\n              class="ngx-input-textarea"\r\n              rows="1"\r\n              autosize\r\n              [(ngModel)]="value"\r\n              [id]="id"\r\n              [name]="name"\r\n              [pattern]="pattern"\r\n              [placeholder]="placeholder"\r\n              [disabled]="disabled"\r\n              [attr.tabindex]="tabindex"\r\n              [attr.autocomplete]="autocomplete"\r\n              [attr.autocorrect]="autocorrect"\r\n              [attr.spellcheck]="spellcheck"\r\n              [minlength]="minlength"\r\n              [maxlength]="maxlength"\r\n              [required]="required"\r\n              (change)="onChange($event)"\r\n              (keyup)="onKeyUp($event)"\r\n              (focus)="onFocus($event)"\r\n              (blur)="onBlur($event)"\r\n              (click)="click.emit($event)"\r\n              #inputModel="ngModel"\r\n              #textareaControl\r\n            >\r\n            </textarea>\r\n            <input [ngClass]="{\'search-txt\': search,\'blocked\':blocked }"\r\n              *ngIf="type !== \'textarea\'"\r\n              class="ngx-input-box"\r\n              [(ngModel)]="value"\r\n              [hidden]="passwordTextVisible"\r\n              [id]="id"\r\n              [name]="name"\r\n              [placeholder]="placeholder"\r\n              [disabled]="disabled"\r\n              [type]="type"\r\n              [pattern]="pattern"\r\n              [min]="\'\' + min"\r\n              [max]="\'\' + max"\r\n              [minlength]="minlength"\r\n              [maxlength]="maxlength"\r\n              [attr.tabindex]="tabindex"\r\n              [attr.autocomplete]="autocomplete"\r\n              [attr.autocorrect]="autocorrect"\r\n              [attr.spellcheck]="spellcheck"\r\n              (change)="onChange($event)"\r\n              (keyup)="onKeyUp($event)"\r\n              (focus)="onFocus($event)"\r\n              (blur)="onBlur($event)"\r\n              (click)="click.emit($event)"\r\n              [required]="required"\r\n              #inputModel="ngModel"\r\n              #inputControl\r\n            />\r\n            <input [ngClass]="{\'search-txt\': search }"\r\n              *ngIf="passwordToggleEnabled"\r\n              [hidden]="!passwordTextVisible"\r\n              type="text"\r\n              class="ngx-input-box"\r\n              type="text"\r\n              [id]="id + \'-password\'"\r\n              [placeholder]="placeholder"\r\n              [name]="name"\r\n              [pattern]="pattern"\r\n              [disabled]="disabled"\r\n              [minlength]="minlength"\r\n              [maxlength]="maxlength"\r\n              [attr.autocomplete]="autocomplete"\r\n              [attr.autocorrect]="autocorrect"\r\n              [attr.spellcheck]="spellcheck"\r\n              [attr.tabindex]="tabindex"\r\n              [(ngModel)]="value"\r\n              (change)="onChange($event)"\r\n              (keyup)="onKeyUp($event)"\r\n              (focus)="onFocus($event)"\r\n              (blur)="onBlur($event)"\r\n              (click)="click.emit($event)"\r\n              [required]="required"\r\n              #inputTextModel="ngModel"\r\n              #passwordControl\r\n            />\r\n            <span\r\n              *ngIf="type === \'password\' && passwordToggleEnabled"\r\n              class="icon-eye"\r\n              title="Toggle Text Visibility"\r\n              (click)="togglePassword()"\r\n            >\r\n            </span>\r\n            <div class="nitro-input-label">\r\n            <span [innerHTML]="label"></span> <span class="required-indicator" [innerHTML]="requiredIndicatorView"></span>\r\n             <span class="nitro-tool" [matTooltipPosition]="\'above\'" matTooltipClass=\'input-tooltip\' matTooltip="{{toolmsg}}" [hidden]="!tooltip"> <img src="../../../assets/icons/tooltip.svg"></span>\r\n          </div>\r\n            <div class="suffix-icon">\r\n             <ng-content select="nitrozen-input-suffix"></ng-content>\r\n           </div>\r\n          </div>\r\n         \r\n        </div>\r\n       \r\n      </div>\r\n      \x3c!-- <div class="ngx-input-underline">\r\n        <div class="underline-fill"></div>\r\n      </div> --\x3e\r\n      <div class="ngx-input-hint" *ngIf="hint">\r\n        \x3c!-- <ng-content select="ngx-input-hint"></ng-content> --\x3e\r\n        <span  [innerHTML]="hint"></span>\r\n      </div>\r\n      <div class="nitro-cmp">\r\n        <div>\r\n      <div class="nitro-input-error" [ngClass]="{\'is-focused\':focused}" *ngIf="error">\r\n        \x3c!-- <ng-content select="ngx-input-hint"></ng-content> --\x3e\r\n        <span  [innerHTML]="error"></span>\r\n      </div>\r\n       <div class="nitro-input-success" *ngIf="success">\r\n        \x3c!-- <ng-content select="ngx-input-hint"></ng-content> --\x3e\r\n        <div class="nito-ss-img" *ngIf="showSuccess">\r\n        <img src="../../../assets/icons/check-circle.svg">\r\n        </div>\r\n        <div class="ss-txt" *ngIf="showSuccess">\r\n        <span  [innerHTML]="success"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class="ngx-input-hint" *ngIf="righttext">\r\n    <span  [innerHTML]="righttext"></span>\r\n  </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n',styles:[".nitro-input-label{color:#9b9b9b;font-family:Poppins;font-size:12px;font-weight:500;line-height:21px;padding-bottom:4px}.nitro-tool{width:24px;height:24px;text-align:center;padding-left:4px}.input-noneditable{opacity:.4;pointer-events:none}input{height:36px;border:1px solid #d7d7d7;border-radius:4px;background-color:#fff;outline:0;color:#41434c;font-family:Poppins;font-size:14px;line-height:21px;padding-left:12px;width:100%}input:focus{box-shadow:none;border:1px solid #5c6bdd!important;border-radius:3px;background-color:#fff}input:focus+.nitro-input-label{color:#5c6bdd!important;font-weight:600!important}.is-focused{display:none!important}.nitro-cmp{display:flex;justify-content:space-between}textarea{box-sizing:border-box;height:96px;border:1px solid #d7d7d7;border-radius:4px;background-color:#fff;outline:0;color:#41434c;font-family:Poppins;font-size:14px;line-height:21px;padding-left:12px;padding-top:6px;width:100%}textarea:focus{box-shadow:none;border:1px solid #5c6bdd;border-radius:3px;background-color:#fff}textarea:focus+.nitro-input-label{color:#5c6bdd}.ss-txt{padding-left:5px}.suffix-icon{position:absolute;right:0;top:35px;width:24px;height:24px;text-align:center;cursor:pointer}.nito-ss-img{line-height:28px}.blocked{background-color:#f3f3f3;pointer-events:none}.prefix-icon{position:absolute;left:5px;top:35px;width:24px;height:24px;text-align:center}.search-txt{padding-left:35px;width:97.5%!important}.nitro-input-box-wrap{display:flex;position:relative;flex-direction:column-reverse}::-webkit-input-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}::-moz-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}::placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}:-ms-input-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}::-ms-input-placeholder{color:#a4a4a4;font-family:Poppins;font-size:12px;line-height:21px}.nitro-input-flex-wrap-inner{padding-top:4px}.ngx-input{width:100%}.ngx-input ngx-input-prefix{margin-right:8px}.ngx-input ngx-input-suffix{margin-left:8px}.ngx-input .nitro-input-wrap .ngx-input-box-wrap{position:relative;width:100%}.ngx-input .nitro-input-wrap .ngx-input-box-wrap:focus{outline:0}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box,.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea{height:40px;border:1px solid #d7d7d7;border-radius:4px;background-color:#fff;outline:0;color:#41434c;font-family:Poppins;font-size:14px;line-height:21px;padding-left:12px;width:100%}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box:focus,.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea:focus{box-shadow:none;border:1px solid #5c6bdd!important;border-radius:3px;background-color:#fff}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box[disabled],.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea[disabled]{color:grey;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-box{margin:3px 0}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .ngx-input-textarea{resize:none}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .icon-eye{line-height:25px;top:0;bottom:0;position:absolute;right:10px;cursor:pointer;font-size:.8rem;color:#00f;transition:color .1s}.ngx-input .nitro-input-wrap .ngx-input-box-wrap .icon-eye:hover{color:red}.ngx-input .nitro-input-wrap .ngx-input-label{pointer-events:none;position:absolute;font-size:16px}.ngx-input .nitro-input-wrap .ngx-input-underline{width:100%;height:1px;background-color:#ff0}.ngx-input .nitro-input-wrap .ngx-input-underline .underline-fill{background-color:#00f;width:100%;height:2px;margin:0 auto}.ngx-input .nitro-input-wrap .nitro-input-error{display:none}.ngx-input .nitro-input-wrap .ngx-input-hint{color:#9b9b9b;font-family:Poppins;font-size:12px;font-weight:500;line-height:21px;padding-top:4px}.ngx-input .nitro-input-wrap .nitro-input-success{color:#36cc9b;font-family:Poppins;font-size:12px;line-height:21px;display:flex;padding-top:4px}.ngx-input.invalid.ng-touched .ngx-input-box,.ngx-input.invalid.ng-touched .ngx-input-textarea,.ngx-input.ng-invalid.ng-dirty .ngx-input-box,.ngx-input.ng-invalid.ng-dirty .ngx-input-textarea,.ngx-input.ng-invalid.ng-touched .ngx-input-box,.ngx-input.ng-invalid.ng-touched .ngx-input-textarea{border:1px solid #fa3f4d}.ngx-input.invalid.ng-touched .nitro-input-label,.ngx-input.ng-invalid.ng-dirty .nitro-input-label,.ngx-input.ng-invalid.ng-touched .nitro-input-label{font-weight:600;color:#fa3f4d}.ngx-input.invalid.ng-touched .ngx-input-hint,.ngx-input.ng-invalid.ng-dirty .ngx-input-hint,.ngx-input.ng-invalid.ng-touched .ngx-input-hint{color:#fa3f4d;display:none}.ngx-input.invalid.ng-touched .nitro-input-error,.ngx-input.ng-invalid.ng-dirty .nitro-input-error,.ngx-input.ng-invalid.ng-touched .nitro-input-error{display:block;color:#fa3f4d;font-family:Poppins;font-size:12px;line-height:18px;padding-top:4px}.ngx-input.invalid.ng-touched .nitro-input-success,.ngx-input.ng-invalid.ng-dirty .nitro-input-success,.ngx-input.ng-invalid.ng-touched .nitro-input-success{display:none}"]})],t)}(),q=function(){function t(){}return t=I([n.Component({selector:"nitrozen-input-suffix",template:"\n    <ng-content></ng-content>\n  "})],t)}(),A=function(){function t(){}return t=I([n.Component({selector:"nitrozen-input-prefix",template:"\n    <ng-content></ng-content>\n  "})],t)}(),V=function(){function t(){}return t=I([n.NgModule({declarations:[B,q,A],imports:[e.CommonModule,c.MatInputModule,i.MatProgressSpinnerModule,l.FormsModule,l.ReactiveFormsModule,d.MatSlideToggleModule,p.MatTooltipModule],exports:[B,q,A,c.MatInputModule,l.FormsModule,l.ReactiveFormsModule,i.MatProgressSpinnerModule,d.MatSlideToggleModule,p.MatTooltipModule]})],t)}(),$=function(){function t(){}return t.prototype.ngOnInit=function(){},t=I([n.Component({selector:"app-select",template:"<p>\r\n  select works!\r\n</p>\r\n",styles:[""]})],t)}(),N=function(){function t(){}return t=I([n.NgModule({declarations:[$],imports:[e.CommonModule]})],t)}(),R=function(){function t(){this.destroy$=new u.Subject,this.selectCtrl=new l.FormControl,this.selectFilterCtrl=new l.FormControl,this.customClass="",this.isColumnHeader=!0,this.placeholder="Select",this.label=this.placeholder,this.displayName="name",this.id="id",this.isMultiple=!1,this.isSearch=!0,this.change=new n.EventEmitter,this.optionListObject={}}return t.prototype.ngOnInit=function(){var t=this;this.filteredoptions=this.options,this.selectCtrl.setValue(this.value),this.options.forEach((function(n){t.optionListObject[n[t.id]]=n})),this.selectFilterCtrl.valueChanges.pipe(g.takeUntil(this.destroy$)).subscribe((function(){t.filterOptions()})),this.selectCtrl.valueChanges.pipe(g.takeUntil(this.destroy$)).subscribe((function(n){t.isMultiple||t.change.emit({value:t.selectCtrl.value,objectValue:t.optionListObject[t.selectCtrl.value]})}))},t.prototype.ngOnChanges=function(t){var n=this;t.value&&this.selectCtrl.setValue(t.value.currentValue,{emitEvent:!1}),t.options&&(this.options=t.options.currentValue,this.filteredoptions=this.options,this.options.forEach((function(t){n.optionListObject[t[n.id]]=t})))},t.prototype.submitOptions=function(){var t=this.getArrayValueObjects(this.selectCtrl.value);this.change.emit({value:this.selectCtrl.value,objectValue:t}),this.select.close()},t.prototype.clearOptions=function(){this.selectCtrl.setValue([]),this.change.emit({value:[],objectValue:[]}),this.select.close()},t.prototype.getArrayValueObjects=function(t){var n=this,e=[];return t.forEach((function(t){e.push(n.optionListObject[t])})),e},t.prototype.filterOptions=function(){var t=this;if(this.options){var n=this.selectFilterCtrl.value;n?(n=n.toLowerCase(),this.filteredoptions=this.options.filter((function(e){return e[t.displayName].toLowerCase().indexOf(n)>-1}))):this.filteredoptions=this.options.slice()}},t.prototype.selectAllChanged=function(t){},I([n.ViewChild("select")],t.prototype,"select",void 0),I([n.Input()],t.prototype,"customClass",void 0),I([n.Input()],t.prototype,"isColumnHeader",void 0),I([n.Input()],t.prototype,"placeholder",void 0),I([n.Input()],t.prototype,"label",void 0),I([n.Input()],t.prototype,"value",void 0),I([n.Input()],t.prototype,"options",void 0),I([n.Input()],t.prototype,"displayName",void 0),I([n.Input()],t.prototype,"id",void 0),I([n.Input()],t.prototype,"isMultiple",void 0),I([n.Input()],t.prototype,"isSearch",void 0),I([n.Output()],t.prototype,"change",void 0),t=I([n.Component({selector:"app-select",template:'<div class="nitro-div">\r\n  <mat-form-field [floatLabel]="\'always\'">\r\n    <mat-label>{{label}}</mat-label>\r\n\r\n    <mat-select #select [ngClass]="select.panelOpen ? \'arrow-top\' : \'arrow-bottom\'"[placeholder]="placeholder" [formControl]="selectCtrl" [multiple]="isMultiple" triggerValue="Select" [disableOptionCentering]="true" #select\r\n      [panelClass]="isMultiple ? \'nitro-searchable-multiple-select-panel\' : \'nitro-searchable-select-panel\'" name="form_value">\r\n      \x3c!-- <mat-select-trigger *ngIf="isColumnHeader">\r\n        <span class="place-holder">\r\n          {{placeholder}}\r\n        </span>\r\n      </mat-select-trigger> --\x3e\r\n      <div class="options-container">\r\n\r\n        <mat-option *ngIf="isSearch">\r\n          <ngx-mat-select-search [formControl]="selectFilterCtrl" [placeholderLabel]="\'Search\'"\r\n            [noEntriesFoundLabel]="\'No match found\'"></ngx-mat-select-search>\r\n        </mat-option>\r\n        <nitrozen-select-check-all *ngIf="isMultiple" [text]="\'\'" [model]="selectCtrl" [values]="options" (change)="selectAllChanged($event)">\r\n        </nitrozen-select-check-all>\r\n        <mat-option *ngFor="let option of filteredoptions" [value]="option[id]">\r\n          {{option[displayName]}}\r\n        </mat-option>\r\n      </div>\r\n      <div class="select-action-container" *ngIf="isMultiple">\r\n        <nitrozen-button-text (clicked)="clearOptions()">Clear</nitrozen-button-text>\r\n        <nitrozen-button-text (clicked)="submitOptions()">Submit</nitrozen-button-text>\r\n\r\n      </div>\r\n\r\n      \x3c!--  <app-button [type]="\'small-success\'" [label]="\'Submit\'" (click)="submitOptions()">\r\n            <span>Submit</span>\r\n        </app-button>\r\n        <app-button [type]="\'small-default\'" [label]="\'Clear\'" (click)="clearOptions()">\r\n            <span>Clear</span>\r\n        </app-button> \r\n      </div> --\x3e\r\n    </mat-select>\r\n    <mat-placeholder class="place-holder">{{placeholder}}</mat-placeholder>\r\n  </mat-form-field>\r\n  <div>{{model}}</div>\r\n</div>',encapsulation:n.ViewEncapsulation.None,styles:[".nitro-div ::ng-deep .mat-form-field-underline{display:none}.nitro-div ::ng-deep .mat-select-value-text{height:40px!important;padding-left:25px;line-height:40px!important;font-family:Poppins}.nitro-div ::ng-deep .mat-select{height:40px;background:#fff;border:1px solid #a9a9a9;border-radius:2px;font-family:Poppins}.nitro-div ::ng-deep .mat-form-field-label{line-height:40px!important;padding-left:5px;font-family:Poppins}.nitro-div ::ng-deep .mat-select-trigger{height:40px}.nitro-div .mat-select-disabled{border:none}.nitro-div .mat-select-disabled ::ng-deep .mat-select-trigger{background-color:#e4e5e6;border:1px solid #e4e5e6}.nitro-div .mat-select-disabled ::ng-deep .mat-select-arrow{margin:0 12px!important;color:#bbb!important}.nitro-div .mat-select-disabled ::ng-deep .mat-select-value-text{color:#bbb}.nitro-div ::ng-deep .mat-option{height:40px!important;border-bottom:1px solid;font-family:Poppins}.nitro-div ::ng-deep .mat-option-text{font-family:Poppins}.nitro-div ::ng-deep .mat-select-arrow{margin:0 12px!important;color:#5c6bdd!important}.nitro-div .mat-form-field-can-float.mat-form-field-should-float ::ng-deep .mat-form-field-label{line-height:21px!important;font-size:16px;font-weight:500px}.select-action-container{display:flex;flex-direction:row;justify-content:flex-end;height:60px;border-top:1px solid #e4e5e6;align-items:center}.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-background,.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-background{background-color:#3f51b5!important}.options-container{max-height:196px;overflow:auto}.arrow-top ::ng-deep .mat-select-arrow{border-bottom:5px solid;border-top:none!important}.arrow-bottom :ng-deep .mat-select-arrow{border-top:5px solid;border-bottom:none!important}"]})],t)}(),L=function(){function t(){this.values=[],this.text="Select All",this.change=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.isChecked=function(){return this.model.value&&this.values.length&&this.model.value.length===this.values.length},t.prototype.isIndeterminate=function(){return this.model.value&&this.values.length&&this.model.value.length&&this.model.value.length<this.values.length},t.prototype.toggleSelection=function(t){t.checked?this.model.setValue(this.values):this.model.setValue([])},I([n.Input()],t.prototype,"model",void 0),I([n.Input()],t.prototype,"values",void 0),I([n.Input()],t.prototype,"text",void 0),I([n.Output()],t.prototype,"change",void 0),t=I([n.Component({selector:"nitrozen-select-check-all",template:'<mat-checkbox class="mat-option" [disableRipple]="true" [indeterminate]="isIndeterminate()" [checked]="isChecked()"\r\n  (click)="$event.stopPropagation()" (change)="toggleSelection($event)">\r\n  {{text}}\r\n</mat-checkbox>',styles:[""]})],t)}(),U=function(){function t(){}return t=I([n.NgModule({declarations:[R,L],imports:[e.CommonModule,f.MatSelectModule,l.FormsModule,l.ReactiveFormsModule,m.NgxMatSelectSearchModule,r.MatCheckboxModule,O],exports:[R,f.MatSelectModule,L,r.MatCheckboxModule]})],t)}(),H=function(){function t(t,n){this.snackBarRef=t,this.data=n}return t.ctorParameters=function(){return[{type:b.MatSnackBarRef},{type:void 0,decorators:[{type:n.Inject,args:[b.MAT_SNACK_BAR_DATA]}]}]},t=I([n.Component({selector:"custom-snackbar",template:'\n    <div\n      class="flex"\n      style="display: flex;\n    justify-content: space-between;align-items: center;"\n    >\n      <div class="data" style="white-space: pre-line;">{{ data.data }}</div>\n      <div\n        class="dismiss"\n        style="cursor:pointer;align-items: center;\n    display: flex;"\n        *ngIf="data.hasIcon"\n      >\n        <mat-icon (click)="snackBarRef.dismiss()">close</mat-icon>\n      </div>\n      <div\n        class="dismiss"\n        style="cursor:pointer;line-height: 40px;"\n        *ngIf="!data.hasIcon"\n      >\n        <div *ngIf="data.text">{{ data.text }}</div>\n      </div>\n    </div>\n  '}),C(1,n.Inject(b.MAT_SNACK_BAR_DATA))],t)}(),K=function(){function t(){}return t.prototype.ngOnInit=function(){},t=I([n.Component({selector:"nitrozen-snack-bar",template:"\n    <ng-content></ng-content>\n  ",styles:["::ng-deep .text-snackbar{border-radius:3px;background-color:#5c6bdd!important;color:#fff;font-family:Poppins;font-size:14px;font-weight:400;line-height:21px}.btn-space{display:flex;justify-content:space-evenly;padding-top:30px}::ng-deep .success-snackbar{border-radius:3px;background-color:#00c851;color:#fff;font-family:Poppins;font-size:14px;font-weight:400;line-height:21px}::ng-deep .error-snackbar{border-radius:3px;background-color:#fa3f4d;color:#fff;font-family:Poppins;font-size:14px;font-weight:400;line-height:21px}"]})],t)}(),G={},W=function(){function t(){}return t=I([n.NgModule({declarations:[K,H],imports:[e.CommonModule,h.MatIconModule],exports:[K,H,h.MatIconModule],providers:[{provide:b.MAT_SNACK_BAR_DATA,useValue:G}],entryComponents:[H]})],t)}(),J=function(){function t(){this.change=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.handleChange=function(t){console.log(t),this.change.emit(t)},I([n.Input()],t.prototype,"tab",void 0),I([n.Output()],t.prototype,"change",void 0),t=I([n.Component({selector:"nitrozen-vertical-tabs",template:'<div class="tabordion">\r\n  <section *ngFor="let tb of tab; let i = index">\r\n    <input type="radio" name="sections" id="option{{i}}" [checked]="tb.checked" (change)="handleChange(tb)">\r\n    <label for="option{{i}}">\r\n    \t<div class="tab-sls">\r\n    \t\t<div class="tab-select">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_selected_icon.svg">\r\n    \t</div>\r\n    \t<div class="tab-unselect">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_unselected.svg">\r\n    \t</div>\r\n\r\n    \t<div class="text-tabs">{{tb.name}}</div>\r\n    \t</div>\r\n    \t</label>\r\n    \x3c!-- <article>\r\n      <p>{{tb.name}}</p>\r\n    </article> --\x3e\r\n  </section>\r\n\x3c!--   <section id="section2">\r\n    <input type="radio" name="sections" id="option2">\r\n    <label for="option2">\r\n    \t<div class="tab-sls">\r\n    \t\t<div class="tab-select">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_selected_icon.svg">\r\n    \t</div>\r\n    \t<div class="tab-unselect">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_unselected.svg">\r\n    \t</div>\r\n\r\n    \t<div class="text-tabs">Catalog Portfolio</div>\r\n    \t</div>\r\n    </label>\r\n    <article>\r\n      <p>Catalog Portfolio</p>\r\n    </article>\r\n  </section>\r\n  <section id="section3">\r\n    <input type="radio" name="sections" id="option3">\r\n     <label for="option3">\r\n    \t<div class="tab-sls">\r\n    \t\t<div class="tab-select">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_selected_icon.svg">\r\n    \t</div>\r\n    \t<div class="tab-unselect">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_unselected.svg">\r\n    \t</div>\r\n\r\n    \t<div class="text-tabs">Business Profile</div>\r\n    \t</div>\r\n    </label>\r\n    <article>\r\n      <p>Business Profile</p>\r\n    </article>\r\n  </section>\r\n  <section id="section4">\r\n    <input type="radio" name="sections" id="option4">\r\n    <label for="option4">\r\n    \t<div class="tab-sls">\r\n    \t\t<div class="tab-select">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_selected_icon.svg">\r\n    \t</div>\r\n    \t<div class="tab-unselect">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_unselected.svg">\r\n    \t</div>\r\n\r\n    \t<div class="text-tabs">KYC & Bank Details</div>\r\n    \t</div>\r\n    </label>\r\n    <article>\r\n      <p>KYC & Bank Details</p>\r\n    </article>\r\n  </section>\r\n  <section id="section5">\r\n    <input type="radio" name="sections" id="option5">\r\n    <label for="option5">\r\n    \t<div class="tab-sls">\r\n    \t\t<div class="tab-select">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_selected_icon.svg">\r\n    \t</div>\r\n    \t<div class="tab-unselect">\r\n    \t\t<img class="img-tabs" src="../../../assets/icons/tab_unselected.svg">\r\n    \t</div>\r\n\r\n    \t<div class="text-tabs">Agreement</div>\r\n    \t</div>\r\n    </label>\r\n    <article>\r\n      <p>Agreement</p>\r\n    </article>\r\n  </section> --\x3e\r\n</div>',styles:['.tabordion{display:block;font-family:Poppins;margin:auto;position:relative}.tabordion input[name=sections]{left:-9999px;position:absolute;top:-9999px}.tabordion section{display:block}.tabordion section label{cursor:pointer;display:block;padding:15px 20px;position:relative;max-width:280px;border-radius:3px;width:200px;z-index:100;border:1px solid #e4e5e6;margin-bottom:10px;color:#41434c;font-family:Poppins;font-size:16px;font-weight:500;line-height:25px}.tabordion section label .tab-select{display:none}.tabordion section label .tab-unselect{display:block}.tabordion section article{display:none;left:230px;min-width:300px;padding:0 0 0 21px;position:absolute;top:0}.tabordion section article:after{bottom:0;content:"";display:block;left:-229px;position:absolute;top:0;width:220px;z-index:1}.tabordion input[name=sections]:checked+label{color:#5c6bdd;font-family:Poppins;font-size:16px;border:1px solid #fff}.tabordion input[name=sections]:checked+label .tab-select{display:block}.tabordion input[name=sections]:checked+label .tab-unselect{display:none}.tabordion input[name=sections]:checked~article{display:block}.tab-select{height:24px;width:24px}.img-tabs{padding-top:2px}.text-tabs{padding-left:12px}.tab-unselect{height:24px;width:24px}@media (max-width:533px){.tabordion,h1{width:100%}.tabordion section label{font-size:1em;width:160px}.tabordion section article{left:200px;min-width:270px}.tabordion section article:after{bottom:0;content:"";display:block;left:-199px;position:absolute;top:0;width:200px}}.tab-sls{display:flex}@media (max-width:768px){.tabordion,h1{width:96%}}@media (min-width:1366px){.tabordion,h1{width:70%}}@media (min-width:1824px){.tabordion,h1{width:100%}}']})],t)}(),Y=function(){function t(){}return t=I([n.NgModule({declarations:[J],imports:[e.CommonModule],exports:[J],schemas:[n.CUSTOM_ELEMENTS_SCHEMA]})],t)}(),Q=function(){function t(){this.change=new n.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.handleChange=function(t){console.log(t),this.change.emit(t)},I([n.Input()],t.prototype,"tab",void 0),I([n.Output()],t.prototype,"change",void 0),t=I([n.Component({selector:"nitrozen-tabs",template:'<div>\r\n<div class="tab-ordion">\r\n  <section *ngFor="let tb of tab; let i = index">\r\n    <input type="radio" name="sections" id="option{{i}}" [checked]="tb.checked" (change)="handleChange(tb)">\r\n    <label for="option{{i}}">\r\n    \t<div class="text-tabs">{{tb.name}}</div>\r\n    \t</label>\r\n  </section>\r\n</div>\r\n</div>',styles:['.tab-ordion{display:flex;font-family:Poppins;position:relative;justify-content:space-evenly;padding-top:20px;width:87%}.tab-ordion input[name=sections]{left:-9999px;position:absolute;top:-9999px}.tab-ordion section{display:flex;align-items:center}.tab-ordion section label{cursor:pointer;display:block;position:relative;border-radius:3px;z-index:100;margin-bottom:10px;padding:0 12px;color:#41434c;font-family:Poppins}.tab-ordion section label:hover{border-radius:20px;background-color:#f3f3f3;height:40px;align-items:center;display:flex}.tab-ordion section label .tab-select{display:none}.tab-ordion section label .tab-unselect{display:block}.tab-ordion section article{display:none;left:230px;min-width:300px;padding:0 0 0 21px;position:absolute;top:0}.tab-ordion section article:after{bottom:0;content:"";display:block;left:-229px;position:absolute;top:0;width:220px;z-index:1}.tab-ordion input[name=sections]:checked+label{color:#5c6bdd;font-family:Poppins;font-size:16px;border:1px solid #fff;background-color:#5c6bdd;border-radius:20px;height:40px;align-items:center;display:flex}.tab-ordion input[name=sections]:checked+label .tab-select{display:block}.tab-ordion input[name=sections]:checked+label .tab-unsele