UNPKG

121 kBJavaScriptView Raw
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material'), require('@angular/animations'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/material/select'), require('ngx-mat-select-search'), require('@angular/common/http'), require('ngx-image-cropper')) :
3 typeof define === 'function' && define.amd ? define('nitrozen', ['exports', '@angular/core', '@angular/common', '@angular/material', '@angular/animations', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/material/select', 'ngx-mat-select-search', '@angular/common/http', 'ngx-image-cropper'], factory) :
4 (global = global || self, factory(global.nitrozen = {}, global.ng.core, global.ng.common, global.ng.material, global.ng.animations, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.material.select, global.ngxMatSelectSearch, global.ng.common.http, global.ngxImageCropper));
5}(this, (function (exports, core, common, material, animations, forms, rxjs, operators, select, ngxMatSelectSearch, http, ngxImageCropper) { 'use strict';
6
7 /*! *****************************************************************************
8 Copyright (c) Microsoft Corporation. All rights reserved.
9 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
10 this file except in compliance with the License. You may obtain a copy of the
11 License at http://www.apache.org/licenses/LICENSE-2.0
12
13 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14 KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
15 WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
16 MERCHANTABLITY OR NON-INFRINGEMENT.
17
18 See the Apache Version 2.0 License for specific language governing permissions
19 and limitations under the License.
20 ***************************************************************************** */
21 /* global Reflect, Promise */
22
23 var extendStatics = function(d, b) {
24 extendStatics = Object.setPrototypeOf ||
25 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
26 function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
27 return extendStatics(d, b);
28 };
29
30 function __extends(d, b) {
31 extendStatics(d, b);
32 function __() { this.constructor = d; }
33 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
34 }
35
36 var __assign = function() {
37 __assign = Object.assign || function __assign(t) {
38 for (var s, i = 1, n = arguments.length; i < n; i++) {
39 s = arguments[i];
40 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
41 }
42 return t;
43 };
44 return __assign.apply(this, arguments);
45 };
46
47 function __rest(s, e) {
48 var t = {};
49 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
50 t[p] = s[p];
51 if (s != null && typeof Object.getOwnPropertySymbols === "function")
52 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
53 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
54 t[p[i]] = s[p[i]];
55 }
56 return t;
57 }
58
59 function __decorate(decorators, target, key, desc) {
60 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
61 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
62 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
63 return c > 3 && r && Object.defineProperty(target, key, r), r;
64 }
65
66 function __param(paramIndex, decorator) {
67 return function (target, key) { decorator(target, key, paramIndex); }
68 }
69
70 function __metadata(metadataKey, metadataValue) {
71 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
72 }
73
74 function __awaiter(thisArg, _arguments, P, generator) {
75 return new (P || (P = Promise))(function (resolve, reject) {
76 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
77 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
78 function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
79 step((generator = generator.apply(thisArg, _arguments || [])).next());
80 });
81 }
82
83 function __generator(thisArg, body) {
84 var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
85 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
86 function verb(n) { return function (v) { return step([n, v]); }; }
87 function step(op) {
88 if (f) throw new TypeError("Generator is already executing.");
89 while (_) try {
90 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
91 if (y = 0, t) op = [op[0] & 2, t.value];
92 switch (op[0]) {
93 case 0: case 1: t = op; break;
94 case 4: _.label++; return { value: op[1], done: false };
95 case 5: _.label++; y = op[1]; op = [0]; continue;
96 case 7: op = _.ops.pop(); _.trys.pop(); continue;
97 default:
98 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
99 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
100 if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
101 if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
102 if (t[2]) _.ops.pop();
103 _.trys.pop(); continue;
104 }
105 op = body.call(thisArg, _);
106 } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
107 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
108 }
109 }
110
111 function __exportStar(m, exports) {
112 for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
113 }
114
115 function __values(o) {
116 var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
117 if (m) return m.call(o);
118 return {
119 next: function () {
120 if (o && i >= o.length) o = void 0;
121 return { value: o && o[i++], done: !o };
122 }
123 };
124 }
125
126 function __read(o, n) {
127 var m = typeof Symbol === "function" && o[Symbol.iterator];
128 if (!m) return o;
129 var i = m.call(o), r, ar = [], e;
130 try {
131 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
132 }
133 catch (error) { e = { error: error }; }
134 finally {
135 try {
136 if (r && !r.done && (m = i["return"])) m.call(i);
137 }
138 finally { if (e) throw e.error; }
139 }
140 return ar;
141 }
142
143 function __spread() {
144 for (var ar = [], i = 0; i < arguments.length; i++)
145 ar = ar.concat(__read(arguments[i]));
146 return ar;
147 }
148
149 function __spreadArrays() {
150 for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
151 for (var r = Array(s), k = 0, i = 0; i < il; i++)
152 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
153 r[k] = a[j];
154 return r;
155 };
156
157 function __await(v) {
158 return this instanceof __await ? (this.v = v, this) : new __await(v);
159 }
160
161 function __asyncGenerator(thisArg, _arguments, generator) {
162 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
163 var g = generator.apply(thisArg, _arguments || []), i, q = [];
164 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
165 function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
166 function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
167 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
168 function fulfill(value) { resume("next", value); }
169 function reject(value) { resume("throw", value); }
170 function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
171 }
172
173 function __asyncDelegator(o) {
174 var i, p;
175 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
176 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
177 }
178
179 function __asyncValues(o) {
180 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
181 var m = o[Symbol.asyncIterator], i;
182 return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
183 function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
184 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
185 }
186
187 function __makeTemplateObject(cooked, raw) {
188 if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
189 return cooked;
190 };
191
192 function __importStar(mod) {
193 if (mod && mod.__esModule) return mod;
194 var result = {};
195 if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
196 result.default = mod;
197 return result;
198 }
199
200 function __importDefault(mod) {
201 return (mod && mod.__esModule) ? mod : { default: mod };
202 }
203
204 var ButtonComponent = /** @class */ (function () {
205 function ButtonComponent() {
206 this.clicked = new core.EventEmitter();
207 }
208 ButtonComponent.prototype.ngOnInit = function () {
209 this.theme = this.theme ? this.theme : 'primary';
210 };
211 ButtonComponent.prototype.clickedButton = function (event) {
212 // this.showProgress = true;
213 this.btnWidth = event.currentTarget['offsetWidth'] - 80;
214 this.clicked.emit(event);
215 };
216 __decorate([
217 core.Input()
218 ], ButtonComponent.prototype, "showProgress", void 0);
219 __decorate([
220 core.Input()
221 ], ButtonComponent.prototype, "isContained", void 0);
222 __decorate([
223 core.Input()
224 ], ButtonComponent.prototype, "theme", void 0);
225 __decorate([
226 core.Input()
227 ], ButtonComponent.prototype, "focused", void 0);
228 __decorate([
229 core.Input()
230 ], ButtonComponent.prototype, "large", void 0);
231 __decorate([
232 core.Input()
233 ], ButtonComponent.prototype, "isStroked", void 0);
234 __decorate([
235 core.Input()
236 ], ButtonComponent.prototype, "shouldBeDisabled", void 0);
237 __decorate([
238 core.Input()
239 ], ButtonComponent.prototype, "showIcon", void 0);
240 __decorate([
241 core.Output()
242 ], ButtonComponent.prototype, "clicked", void 0);
243 ButtonComponent = __decorate([
244 core.Component({
245 selector: 'nitrozen-button',
246 template: "<div [ngClass]=\"{\n 'primary-section': theme === 'primary' ,\n 'secondary-section': theme === 'accent'\n }\">\n<button mat-raised-button 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>\n\n<div class=\"btn-icon-show\">\n <div 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 <ng-content></ng-content>\n </div>\n\n\n <div class=\"btn-spin\" [ngClass]=\"{\n 'btn-spin-stroke': isStroked,\n 'btn-spin-contained':isContained,\n 'btn-progress': !showProgress,\n 'btn-notprogress' : showProgress\n }\" *ngIf=\"showIcon\">\n <img src=\"./../../assets/icons/Bag_Icon.svg\">\n</div>\n <div class=\"btn-spin\" [ngStyle]=\"{'width.px': btnWidth}\" [ngClass]=\"{\n 'btn-spin-stroke': isStroked,\n 'btn-spin-contained':isContained,\n 'btn-notprogress': !showProgress,\n 'btn-progress' : showProgress\n }\">\n <img *ngIf=\"isContained\" class=\"btn-spinner\" style=\"width: 50px;\" src=\"../../../assets/icons/loader-white-1.gif\">\n <img *ngIf=\"isStroked && theme === 'primary'\" class=\"btn-spinner\" style=\"width: 50px;\" src=\"../../../assets/icons/loader-green.gif\">\n <img *ngIf=\"isStroked && theme === 'accent'\" class=\"btn-spinner\" style=\"width: 50px;\" src=\"../../../assets/icons/loader-blue.gif\">\n <!-- <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> -->\n</div>\n</div>\n</button>\n</div>\n\n",
247 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}"]
248 })
249 ], ButtonComponent);
250 return ButtonComponent;
251 }());
252
253 var ButtonModule = /** @class */ (function () {
254 function ButtonModule() {
255 }
256 ButtonModule = __decorate([
257 core.NgModule({
258 declarations: [ButtonComponent],
259 imports: [
260 common.CommonModule,
261 material.MatButtonModule,
262 material.MatProgressSpinnerModule
263 ],
264 exports: [
265 ButtonComponent,
266 material.MatButtonModule,
267 material.MatProgressSpinnerModule
268 ]
269 })
270 ], ButtonModule);
271 return ButtonModule;
272 }());
273
274 var ButtonTextComponent = /** @class */ (function () {
275 function ButtonTextComponent() {
276 this.clicked = new core.EventEmitter();
277 }
278 ButtonTextComponent.prototype.ngOnInit = function () {
279 // this.type = this.type ? this.type : '';
280 };
281 ButtonTextComponent.prototype.clickedButton = function (event) {
282 this.clicked.emit(event);
283 };
284 __decorate([
285 core.Input()
286 ], ButtonTextComponent.prototype, "shouldBeDisabled", void 0);
287 __decorate([
288 core.Input()
289 ], ButtonTextComponent.prototype, "theme", void 0);
290 __decorate([
291 core.Input()
292 ], ButtonTextComponent.prototype, "focused", void 0);
293 __decorate([
294 core.Input()
295 ], ButtonTextComponent.prototype, "prefixIcon", void 0);
296 __decorate([
297 core.Input()
298 ], ButtonTextComponent.prototype, "postfixIcon", void 0);
299 __decorate([
300 core.Input()
301 ], ButtonTextComponent.prototype, "type", void 0);
302 __decorate([
303 core.Output()
304 ], ButtonTextComponent.prototype, "clicked", void 0);
305 ButtonTextComponent = __decorate([
306 core.Component({
307 selector: 'nitrozen-button-text',
308 template: "<div [ngClass]=\"{\n 'primary-section': theme === 'primary' ,\n 'secondary-section': theme === 'accent',\n 'warn-section':theme === 'warn'\n }\">\n <div>\n<button [ngClass]=\"{'btn-focused':focused,'btn-warn-thm':theme === 'warn','btn-prim-thm':theme === 'primary'}\" mat-button (click)=\"clickedButton($event)\" [disabled]=\"shouldBeDisabled\">\n\t<div>\n\t\t<span class=\"btn-spin\" *ngIf=\"prefixIcon\">\n <img src=\"./../../assets/icons/arrow-icon.svg\">\n</span>\n\t<span class=\"btn-txt\" [ngClass]=\"{\n 'primary-section': theme === 'primary' ,\n 'secondary-section': theme === 'accent',\n 'warn-section':theme === 'warn'\n }\">\n <ng-content></ng-content>\n </span>\n <span class=\"btn-spin-post\" *ngIf=\"postfixIcon\">\n <img src=\"./../../assets/icons/arrow-icon.svg\">\n</span>\n \n</div>\n</button>\n</div>\n</div>\n",
309 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}"]
310 })
311 ], ButtonTextComponent);
312 return ButtonTextComponent;
313 }());
314
315 var ButtonTextModule = /** @class */ (function () {
316 function ButtonTextModule() {
317 }
318 ButtonTextModule = __decorate([
319 core.NgModule({
320 declarations: [ButtonTextComponent],
321 imports: [
322 common.CommonModule,
323 material.MatButtonModule,
324 material.MatProgressSpinnerModule
325 ],
326 exports: [
327 ButtonTextComponent,
328 material.MatButtonModule,
329 material.MatProgressSpinnerModule
330 ]
331 })
332 ], ButtonTextModule);
333 return ButtonTextModule;
334 }());
335
336 var CheckboxComponent = /** @class */ (function () {
337 function CheckboxComponent() {
338 /**
339 * Define if the checkbox is disabled
340 */
341 this.disabled = false;
342 /**
343 * Define if the checkbox should be indeterminate
344 */
345 this.indeterminate = false;
346 this.change = new core.EventEmitter();
347 }
348 CheckboxComponent.prototype.ngOnInit = function () {
349 };
350 CheckboxComponent.prototype.onCheckboxStateChanged = function (e) {
351 console.log(e);
352 this.change.emit(e);
353 };
354 __decorate([
355 core.Input()
356 ], CheckboxComponent.prototype, "checked", void 0);
357 __decorate([
358 core.Input()
359 ], CheckboxComponent.prototype, "disabled", void 0);
360 __decorate([
361 core.Input()
362 ], CheckboxComponent.prototype, "indeterminate", void 0);
363 __decorate([
364 core.Output()
365 ], CheckboxComponent.prototype, "change", void 0);
366 CheckboxComponent = __decorate([
367 core.Component({
368 selector: 'nitrozen-checkbox',
369 template: "<mat-checkbox \nclass=\"nitro-checkbox\" \n[checked]=\"checked\" \n[indeterminate]=\"indeterminate\"\n[disabled]=\"disabled\"\n(change)=\"onCheckboxStateChanged($event)\">\n\n\n<ng-content></ng-content>\n\n</mat-checkbox>",
370 styles: [""]
371 })
372 ], CheckboxComponent);
373 return CheckboxComponent;
374 }());
375
376 var CheckboxModule = /** @class */ (function () {
377 function CheckboxModule() {
378 }
379 CheckboxModule = __decorate([
380 core.NgModule({
381 declarations: [CheckboxComponent],
382 imports: [
383 common.CommonModule,
384 material.MatCheckboxModule
385 ],
386 exports: [CheckboxComponent, material.MatCheckboxModule]
387 })
388 ], CheckboxModule);
389 return CheckboxModule;
390 }());
391
392 var RadioButtonComponent = /** @class */ (function () {
393 function RadioButtonComponent() {
394 /**
395 * Define if the checkbox is disabled
396 */
397 this.disabled = false;
398 this.change = new core.EventEmitter();
399 }
400 RadioButtonComponent.prototype.ngOnInit = function () {
401 };
402 RadioButtonComponent.prototype.onRadioButtonStateChanged = function (e) {
403 console.log(e);
404 this.change.emit(e);
405 };
406 __decorate([
407 core.Input()
408 ], RadioButtonComponent.prototype, "selected", void 0);
409 __decorate([
410 core.Input()
411 ], RadioButtonComponent.prototype, "disabled", void 0);
412 __decorate([
413 core.Output()
414 ], RadioButtonComponent.prototype, "change", void 0);
415 RadioButtonComponent = __decorate([
416 core.Component({
417 selector: 'nitrozen-radio-button',
418 template: " <mat-radio-button color=\"primary\"\n[disabled]=\"disabled\"\n(change)=\"onRadioButtonStateChanged($event)\">\n\n\n<ng-content></ng-content>\n</mat-radio-button> \n",
419 styles: ["::ng-deep .mat-radio-label-content{padding-left:12px!important;font-family:Poppins!important}"]
420 })
421 ], RadioButtonComponent);
422 return RadioButtonComponent;
423 }());
424
425 var RadioButtonModule = /** @class */ (function () {
426 function RadioButtonModule() {
427 }
428 RadioButtonModule = __decorate([
429 core.NgModule({
430 declarations: [RadioButtonComponent],
431 imports: [
432 common.CommonModule,
433 material.MatRadioModule
434 ],
435 exports: [RadioButtonComponent, material.MatRadioModule]
436 })
437 ], RadioButtonModule);
438 return RadioButtonModule;
439 }());
440
441 var InputTypes;
442 (function (InputTypes) {
443 InputTypes["text"] = "text";
444 InputTypes["number"] = "number";
445 InputTypes["password"] = "password";
446 InputTypes["textarea"] = "textarea";
447 })(InputTypes || (InputTypes = {}));
448
449 var nextId = 0;
450 var INPUT_VALUE_ACCESSOR = {
451 provide: forms.NG_VALUE_ACCESSOR,
452 useExisting: core.forwardRef(function () { return InputComponent; }),
453 multi: true
454 };
455 var INPUT_VALIDATORS = {
456 provide: forms.NG_VALIDATORS,
457 useExisting: core.forwardRef(function () { return InputComponent; }),
458 multi: true
459 };
460 var InputComponent = /** @class */ (function () {
461 function InputComponent(cd) {
462 this.cd = cd;
463 this.label = '';
464 this.type = InputTypes.text;
465 this.blocked = false;
466 this.placeholder = '';
467 this.disabled = false;
468 this.search = false;
469 this.showSuccess = false;
470 this.noneditable = false;
471 this.required = false;
472 this.requiredIndicator = '*';
473 this.tooltip = false;
474 this.passwordToggleEnabled = false;
475 this.passwordTextVisible = false;
476 this.autoSelect = false;
477 this.autofocus = false;
478 this.autocomplete = false;
479 this.autocorrect = false;
480 this.spellcheck = false;
481 this.change = new core.EventEmitter();
482 this.blur = new core.EventEmitter();
483 this.focus = new core.EventEmitter();
484 this.keyup = new core.EventEmitter();
485 this.click = new core.EventEmitter();
486 this.getHostCssClasses = 'ngx-input';
487 this.focused = false;
488 this.onTouchedCallback = function () {
489 // placeholder
490 };
491 this.onChangeCallback = function () {
492 // placeholder
493 };
494 }
495 Object.defineProperty(InputComponent.prototype, "value", {
496 get: function () {
497 return this._value;
498 },
499 set: function (val) {
500 if (val !== this._value) {
501 this._value = val;
502 this.onChangeCallback(this._value);
503 }
504 },
505 enumerable: true,
506 configurable: true
507 });
508 Object.defineProperty(InputComponent.prototype, "focusedOrDirty", {
509 get: function () {
510 if (this.focused) {
511 return true;
512 }
513 if (typeof this.value === 'string') {
514 return this.value && this.value.length;
515 }
516 return typeof this.value !== 'undefined' && this.value !== null;
517 },
518 enumerable: true,
519 configurable: true
520 });
521 Object.defineProperty(InputComponent.prototype, "isTouched", {
522 get: function () {
523 return this.inputModel ? this.inputModel.touched : false;
524 },
525 enumerable: true,
526 configurable: true
527 });
528 Object.defineProperty(InputComponent.prototype, "labelState", {
529 get: function () {
530 if (this.placeholder)
531 return 'outside';
532 if (this.focusedOrDirty)
533 return 'outside';
534 return 'inside';
535 },
536 enumerable: true,
537 configurable: true
538 });
539 Object.defineProperty(InputComponent.prototype, "underlineState", {
540 get: function () {
541 if (this.focused)
542 return 'expanded';
543 return 'collapsed';
544 },
545 enumerable: true,
546 configurable: true
547 });
548 Object.defineProperty(InputComponent.prototype, "requiredIndicatorView", {
549 get: function () {
550 if (!this.requiredIndicator || !this.required)
551 return '';
552 return this.requiredIndicator;
553 },
554 enumerable: true,
555 configurable: true
556 });
557 Object.defineProperty(InputComponent.prototype, "element", {
558 get: function () {
559 if (this.type === InputTypes.textarea)
560 return this.textareaControl;
561 return this.inputControl;
562 },
563 enumerable: true,
564 configurable: true
565 });
566 InputComponent.prototype.validate = function (c) {
567 if (this.type !== 'number') {
568 return null;
569 }
570 return __assign({}, forms.Validators.max(this.max)(c), forms.Validators.min(this.min)(c));
571 };
572 InputComponent.prototype.ngOnInit = function () {
573 if (!this.value)
574 this.value = '';
575 };
576 InputComponent.prototype.ngAfterViewInit = function () {
577 var _this = this;
578 if (this.autofocus) {
579 setTimeout(function () {
580 _this.element.nativeElement.focus();
581 });
582 }
583 // sometimes the label doesn't update on load
584 setTimeout(function () { return _this.cd.markForCheck(); });
585 };
586 InputComponent.prototype.ngOnChanges = function (changes) {
587 if ('max' in changes || 'min' in changes) {
588 this.onChangeCallback(this._value);
589 }
590 };
591 InputComponent.prototype.onChange = function (event) {
592 event.stopPropagation();
593 this.change.emit(this.value);
594 };
595 InputComponent.prototype.onKeyUp = function (event) {
596 event.stopPropagation();
597 this.keyup.emit(event);
598 };
599 InputComponent.prototype.onFocus = function (event) {
600 var _this = this;
601 event.stopPropagation();
602 if (this.autoSelect) {
603 setTimeout(function () {
604 _this.element.nativeElement.select();
605 });
606 }
607 this.focused = true;
608 this.focus.emit(event);
609 this.onTouchedCallback();
610 };
611 InputComponent.prototype.onBlur = function (event) {
612 event.stopPropagation();
613 this.focused = false;
614 this.blur.emit(event);
615 };
616 InputComponent.prototype.writeValue = function (val) {
617 if (val !== this._value) {
618 this._value = val;
619 }
620 };
621 InputComponent.prototype.registerOnChange = function (fn) {
622 this.onChangeCallback = fn;
623 };
624 InputComponent.prototype.registerOnTouched = function (fn) {
625 this.onTouchedCallback = fn;
626 };
627 InputComponent.prototype.togglePassword = function () {
628 var _this = this;
629 this.passwordTextVisible = !this.passwordTextVisible;
630 setTimeout(function () {
631 if (_this.passwordTextVisible) {
632 _this.passwordControl.nativeElement.focus();
633 }
634 else {
635 _this.element.nativeElement.focus();
636 }
637 });
638 };
639 InputComponent.prototype.setDisabledState = function (isDisabled) {
640 this.disabled = isDisabled;
641 };
642 InputComponent.ctorParameters = function () { return [
643 { type: core.ChangeDetectorRef }
644 ]; };
645 __decorate([
646 core.Input()
647 ], InputComponent.prototype, "id", void 0);
648 __decorate([
649 core.Input()
650 ], InputComponent.prototype, "name", void 0);
651 __decorate([
652 core.Input()
653 ], InputComponent.prototype, "label", void 0);
654 __decorate([
655 core.Input()
656 ], InputComponent.prototype, "type", void 0);
657 __decorate([
658 core.Input()
659 ], InputComponent.prototype, "hint", void 0);
660 __decorate([
661 core.Input()
662 ], InputComponent.prototype, "error", void 0);
663 __decorate([
664 core.Input()
665 ], InputComponent.prototype, "blocked", void 0);
666 __decorate([
667 core.Input()
668 ], InputComponent.prototype, "success", void 0);
669 __decorate([
670 core.Input()
671 ], InputComponent.prototype, "placeholder", void 0);
672 __decorate([
673 core.Input()
674 ], InputComponent.prototype, "disabled", void 0);
675 __decorate([
676 core.Input()
677 ], InputComponent.prototype, "tabindex", void 0);
678 __decorate([
679 core.Input()
680 ], InputComponent.prototype, "search", void 0);
681 __decorate([
682 core.Input()
683 ], InputComponent.prototype, "showSuccess", void 0);
684 __decorate([
685 core.Input()
686 ], InputComponent.prototype, "righttext", void 0);
687 __decorate([
688 core.Input()
689 ], InputComponent.prototype, "toolmsg", void 0);
690 __decorate([
691 core.Input()
692 ], InputComponent.prototype, "pattern", void 0);
693 __decorate([
694 core.Input()
695 ], InputComponent.prototype, "noneditable", void 0);
696 __decorate([
697 core.Input()
698 ], InputComponent.prototype, "min", void 0);
699 __decorate([
700 core.Input()
701 ], InputComponent.prototype, "max", void 0);
702 __decorate([
703 core.Input()
704 ], InputComponent.prototype, "minlength", void 0);
705 __decorate([
706 core.Input()
707 ], InputComponent.prototype, "maxlength", void 0);
708 __decorate([
709 core.Input()
710 ], InputComponent.prototype, "required", void 0);
711 __decorate([
712 core.Input()
713 ], InputComponent.prototype, "requiredIndicator", void 0);
714 __decorate([
715 core.Input()
716 ], InputComponent.prototype, "tooltip", void 0);
717 __decorate([
718 core.Input()
719 ], InputComponent.prototype, "passwordToggleEnabled", void 0);
720 __decorate([
721 core.Input()
722 ], InputComponent.prototype, "passwordTextVisible", void 0);
723 __decorate([
724 core.Input()
725 ], InputComponent.prototype, "autoSelect", void 0);
726 __decorate([
727 core.Input()
728 ], InputComponent.prototype, "autofocus", void 0);
729 __decorate([
730 core.Input()
731 ], InputComponent.prototype, "autocomplete", void 0);
732 __decorate([
733 core.Input()
734 ], InputComponent.prototype, "autocorrect", void 0);
735 __decorate([
736 core.Input()
737 ], InputComponent.prototype, "spellcheck", void 0);
738 __decorate([
739 core.Output()
740 ], InputComponent.prototype, "change", void 0);
741 __decorate([
742 core.Output()
743 ], InputComponent.prototype, "blur", void 0);
744 __decorate([
745 core.Output()
746 ], InputComponent.prototype, "focus", void 0);
747 __decorate([
748 core.Output()
749 ], InputComponent.prototype, "keyup", void 0);
750 __decorate([
751 core.Output()
752 ], InputComponent.prototype, "click", void 0);
753 __decorate([
754 core.HostBinding('class')
755 ], InputComponent.prototype, "getHostCssClasses", void 0);
756 __decorate([
757 core.HostBinding('class.ng-dirty')
758 ], InputComponent.prototype, "focusedOrDirty", null);
759 __decorate([
760 core.HostBinding('class.ng-touched')
761 ], InputComponent.prototype, "isTouched", null);
762 __decorate([
763 core.ViewChild('inputControl')
764 ], InputComponent.prototype, "inputControl", void 0);
765 __decorate([
766 core.ViewChild('inputModel')
767 ], InputComponent.prototype, "inputModel", void 0);
768 __decorate([
769 core.ViewChild('textareaControl')
770 ], InputComponent.prototype, "textareaControl", void 0);
771 __decorate([
772 core.ViewChild('passwordControl')
773 ], InputComponent.prototype, "passwordControl", void 0);
774 InputComponent = __decorate([
775 core.Component({
776 selector: 'nitrozen-input',
777 providers: [INPUT_VALUE_ACCESSOR, INPUT_VALIDATORS],
778 encapsulation: core.ViewEncapsulation.None,
779 animations: [
780 animations.trigger('labelState', [
781 animations.state('inside', animations.style({
782 'font-size': '1em',
783 top: '0'
784 })),
785 animations.state('outside', animations.style({
786 'font-size': '.7rem',
787 top: '-15px'
788 })),
789 animations.transition('inside => outside', animations.animate('150ms ease-out')),
790 animations.transition('outside => inside', animations.animate('150ms ease-out'))
791 ]),
792 animations.trigger('underlineState', [
793 animations.state('collapsed', animations.style({
794 width: '0%'
795 })),
796 animations.state('expanded', animations.style({
797 width: '100%'
798 })),
799 animations.transition('collapsed => expanded', animations.animate('150ms ease-out')),
800 animations.transition('expanded => collapsed', animations.animate('150ms ease-out'))
801 ])
802 ],
803 template: "<div class=\"nitro-input-wrap\" [ngClass]=\"{'input-noneditable':noneditable}\">\n <div class=\"ngx-input-flex-wrap\">\n \n <div class=\"nitro-input-flex-wrap-inner\">\n <div class=\"nitro-input-box-wrap\">\n <div class=\"prefix-icon\">\n <ng-content select=\"nitrozen-input-prefix\"></ng-content>\n </div>\n <textarea [ngClass]=\"{'search-txt': search }\"\n *ngIf=\"type === 'textarea'\"\n class=\"ngx-input-textarea\"\n rows=\"1\"\n autosize\n [(ngModel)]=\"value\"\n [id]=\"id\"\n [name]=\"name\"\n [pattern]=\"pattern\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [attr.tabindex]=\"tabindex\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.autocorrect]=\"autocorrect\"\n [attr.spellcheck]=\"spellcheck\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n [required]=\"required\"\n (change)=\"onChange($event)\"\n (keyup)=\"onKeyUp($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"click.emit($event)\"\n #inputModel=\"ngModel\"\n #textareaControl\n >\n </textarea>\n <input [ngClass]=\"{'search-txt': search,'blocked':blocked }\"\n *ngIf=\"type !== 'textarea'\"\n class=\"ngx-input-box\"\n [(ngModel)]=\"value\"\n [hidden]=\"passwordTextVisible\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [pattern]=\"pattern\"\n [min]=\"'' + min\"\n [max]=\"'' + max\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n [attr.tabindex]=\"tabindex\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.autocorrect]=\"autocorrect\"\n [attr.spellcheck]=\"spellcheck\"\n (change)=\"onChange($event)\"\n (keyup)=\"onKeyUp($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"click.emit($event)\"\n [required]=\"required\"\n #inputModel=\"ngModel\"\n #inputControl\n />\n <input [ngClass]=\"{'search-txt': search }\"\n *ngIf=\"passwordToggleEnabled\"\n [hidden]=\"!passwordTextVisible\"\n type=\"text\"\n class=\"ngx-input-box\"\n type=\"text\"\n [id]=\"id + '-password'\"\n [placeholder]=\"placeholder\"\n [name]=\"name\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n [attr.autocomplete]=\"autocomplete\"\n [attr.autocorrect]=\"autocorrect\"\n [attr.spellcheck]=\"spellcheck\"\n [attr.tabindex]=\"tabindex\"\n [(ngModel)]=\"value\"\n (change)=\"onChange($event)\"\n (keyup)=\"onKeyUp($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (click)=\"click.emit($event)\"\n [required]=\"required\"\n #inputTextModel=\"ngModel\"\n #passwordControl\n />\n <span\n *ngIf=\"type === 'password' && passwordToggleEnabled\"\n class=\"icon-eye\"\n title=\"Toggle Text Visibility\"\n (click)=\"togglePassword()\"\n >\n </span>\n <div class=\"nitro-input-label\">\n <span [innerHTML]=\"label\"></span> <span class=\"required-indicator\" [innerHTML]=\"requiredIndicatorView\"></span>\n <span class=\"nitro-tool\" [matTooltipPosition]=\"'above'\" matTooltipClass='input-tooltip' matTooltip=\"{{toolmsg}}\" [hidden]=\"!tooltip\"> <img src=\"../../../assets/icons/tooltip.svg\"></span>\n </div>\n <div class=\"suffix-icon\">\n <ng-content select=\"nitrozen-input-suffix\"></ng-content>\n </div>\n </div>\n \n </div>\n \n </div>\n <!-- <div class=\"ngx-input-underline\">\n <div class=\"underline-fill\"></div>\n </div> -->\n <div class=\"ngx-input-hint\" *ngIf=\"hint\">\n <!-- <ng-content select=\"ngx-input-hint\"></ng-content> -->\n <span [innerHTML]=\"hint\"></span>\n </div>\n <div class=\"nitro-cmp\">\n <div>\n <div class=\"nitro-input-error\" [ngClass]=\"{'is-focused':focused}\" *ngIf=\"error\">\n <!-- <ng-content select=\"ngx-input-hint\"></ng-content> -->\n <span [innerHTML]=\"error\"></span>\n </div>\n <div class=\"nitro-input-success\" *ngIf=\"success\">\n <!-- <ng-content select=\"ngx-input-hint\"></ng-content> -->\n <div class=\"nito-ss-img\" *ngIf=\"showSuccess\">\n <img src=\"../../../assets/icons/check-circle.svg\">\n </div>\n <div class=\"ss-txt\" *ngIf=\"showSuccess\">\n <span [innerHTML]=\"success\"></span>\n </div>\n </div>\n </div>\n <div class=\"ngx-input-hint\" *ngIf=\"righttext\">\n <span [innerHTML]=\"righttext\"></span>\n </div>\n </div>\n </div>\n\n\n\n",
804 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}"]
805 })
806 ], InputComponent);
807 return InputComponent;
808 }());
809
810 var InputSuffixComponent = /** @class */ (function () {
811 function InputSuffixComponent() {
812 }
813 InputSuffixComponent = __decorate([
814 core.Component({
815 selector: 'nitrozen-input-suffix',
816 template: "\n <ng-content></ng-content>\n "
817 })
818 ], InputSuffixComponent);
819 return InputSuffixComponent;
820 }());
821
822 var InputPrefixComponent = /** @class */ (function () {
823 function InputPrefixComponent() {
824 }
825 InputPrefixComponent = __decorate([
826 core.Component({
827 selector: 'nitrozen-input-prefix',
828 template: "\n <ng-content></ng-content>\n "
829 })
830 ], InputPrefixComponent);
831 return InputPrefixComponent;
832 }());
833
834 var InputModule = /** @class */ (function () {
835 function InputModule() {
836 }
837 InputModule = __decorate([
838 core.NgModule({
839 declarations: [InputComponent, InputSuffixComponent, InputPrefixComponent],
840 imports: [
841 common.CommonModule,
842 material.MatInputModule,
843 material.MatProgressSpinnerModule,
844 forms.FormsModule,
845 forms.ReactiveFormsModule,
846 material.MatSlideToggleModule,
847 material.MatTooltipModule
848 ],
849 exports: [
850 InputComponent,
851 InputSuffixComponent,
852 InputPrefixComponent,
853 material.MatInputModule,
854 forms.FormsModule,
855 forms.ReactiveFormsModule,
856 material.MatProgressSpinnerModule,
857 material.MatSlideToggleModule,
858 material.MatTooltipModule
859 ]
860 })
861 ], InputModule);
862 return InputModule;
863 }());
864
865 var SelectComponent = /** @class */ (function () {
866 function SelectComponent() {
867 }
868 SelectComponent.prototype.ngOnInit = function () {
869 };
870 SelectComponent = __decorate([
871 core.Component({
872 selector: 'app-select',
873 template: "<p>\n select works!\n</p>\n",
874 styles: [""]
875 })
876 ], SelectComponent);
877 return SelectComponent;
878 }());
879
880 var SelectModule = /** @class */ (function () {
881 function SelectModule() {
882 }
883 SelectModule = __decorate([
884 core.NgModule({
885 declarations: [SelectComponent],
886 imports: [
887 common.CommonModule
888 ]
889 })
890 ], SelectModule);
891 return SelectModule;
892 }());
893
894 var SearchableSelectComponent = /** @class */ (function () {
895 function SearchableSelectComponent() {
896 this.destroy$ = new rxjs.Subject();
897 this.selectCtrl = new forms.FormControl();
898 this.selectFilterCtrl = new forms.FormControl();
899 this.customClass = '';
900 this.isColumnHeader = true;
901 this.placeholder = "Select";
902 this.label = this.placeholder;
903 this.displayName = "name";
904 this.id = "id";
905 this.isMultiple = false;
906 this.isSearch = true;
907 this.change = new core.EventEmitter();
908 this.optionListObject = {};
909 }
910 SearchableSelectComponent.prototype.ngOnInit = function () {
911 var _this = this;
912 this.filteredoptions = this.options;
913 this.selectCtrl.setValue(this.value);
914 this.options.forEach(function (option) {
915 _this.optionListObject[option[_this.id]] = option;
916 });
917 this.selectFilterCtrl.valueChanges.pipe(operators.takeUntil(this.destroy$))
918 .subscribe(function () {
919 _this.filterOptions();
920 });
921 this.selectCtrl.valueChanges.pipe(operators.takeUntil(this.destroy$))
922 .subscribe(function (event) {
923 if (!_this.isMultiple) {
924 _this.change.emit({
925 value: _this.selectCtrl.value,
926 objectValue: _this.optionListObject[_this.selectCtrl.value]
927 });
928 }
929 });
930 };
931 SearchableSelectComponent.prototype.ngOnChanges = function (event) {
932 var _this = this;
933 if (event.value) {
934 this.selectCtrl.setValue(event.value.currentValue, { emitEvent: false });
935 }
936 if (event.options) {
937 this.options = event.options.currentValue;
938 this.filteredoptions = this.options;
939 this.options.forEach(function (option) {
940 _this.optionListObject[option[_this.id]] = option;
941 });
942 }
943 };
944 SearchableSelectComponent.prototype.submitOptions = function () {
945 var objectValue = this.getArrayValueObjects(this.selectCtrl.value);
946 this.change.emit({
947 value: this.selectCtrl.value,
948 objectValue: objectValue
949 });
950 this.select.close();
951 };
952 SearchableSelectComponent.prototype.clearOptions = function () {
953 this.selectCtrl.setValue([]);
954 this.change.emit({
955 value: [],
956 objectValue: []
957 });
958 this.select.close();
959 };
960 SearchableSelectComponent.prototype.getArrayValueObjects = function (value) {
961 var _this = this;
962 var objectValue = [];
963 value.forEach(function (selectedValue) {
964 objectValue.push(_this.optionListObject[selectedValue]);
965 });
966 return objectValue;
967 };
968 SearchableSelectComponent.prototype.filterOptions = function () {
969 var _this = this;
970 if (!this.options) {
971 return;
972 }
973 // get the search keyword
974 var search = this.selectFilterCtrl.value;
975 if (!search) {
976 this.filteredoptions = this.options.slice();
977 return;
978 }
979 else {
980 search = search.toLowerCase();
981 }
982 // filter the options
983 this.filteredoptions = this.options.filter(function (option) { return option[_this.displayName].toLowerCase().indexOf(search) > -1; });
984 };
985 SearchableSelectComponent.prototype.selectAllChanged = function (event) {
986 // alert(event);
987 };
988 __decorate([
989 core.ViewChild('select')
990 ], SearchableSelectComponent.prototype, "select", void 0);
991 __decorate([
992 core.Input()
993 ], SearchableSelectComponent.prototype, "customClass", void 0);
994 __decorate([
995 core.Input()
996 ], SearchableSelectComponent.prototype, "isColumnHeader", void 0);
997 __decorate([
998 core.Input()
999 ], SearchableSelectComponent.prototype, "placeholder", void 0);
1000 __decorate([
1001 core.Input()
1002 ], SearchableSelectComponent.prototype, "label", void 0);
1003 __decorate([
1004 core.Input()
1005 ], SearchableSelectComponent.prototype, "value", void 0);
1006 __decorate([
1007 core.Input()
1008 ], SearchableSelectComponent.prototype, "options", void 0);
1009 __decorate([
1010 core.Input()
1011 ], SearchableSelectComponent.prototype, "displayName", void 0);
1012 __decorate([
1013 core.Input()
1014 ], SearchableSelectComponent.prototype, "id", void 0);
1015 __decorate([
1016 core.Input()
1017 ], SearchableSelectComponent.prototype, "isMultiple", void 0);
1018 __decorate([
1019 core.Input()
1020 ], SearchableSelectComponent.prototype, "isSearch", void 0);
1021 __decorate([
1022 core.Output()
1023 ], SearchableSelectComponent.prototype, "change", void 0);
1024 SearchableSelectComponent = __decorate([
1025 core.Component({
1026 selector: 'app-select',
1027 template: "<div class=\"nitro-div\">\n <mat-form-field [floatLabel]=\"'always'\">\n <mat-label>{{label}}</mat-label>\n\n <mat-select #select [ngClass]=\"select.panelOpen ? 'arrow-top' : 'arrow-bottom'\"[placeholder]=\"placeholder\" [formControl]=\"selectCtrl\" [multiple]=\"isMultiple\" triggerValue=\"Select\" [disableOptionCentering]=\"true\" #select\n [panelClass]=\"isMultiple ? 'nitro-searchable-multiple-select-panel' : 'nitro-searchable-select-panel'\" name=\"form_value\">\n <!-- <mat-select-trigger *ngIf=\"isColumnHeader\">\n <span class=\"place-holder\">\n {{placeholder}}\n </span>\n </mat-select-trigger> -->\n <div class=\"options-container\">\n\n <mat-option *ngIf=\"isSearch\">\n <ngx-mat-select-search [formControl]=\"selectFilterCtrl\" [placeholderLabel]=\"'Search'\"\n [noEntriesFoundLabel]=\"'No match found'\"></ngx-mat-select-search>\n </mat-option>\n <nitrozen-select-check-all *ngIf=\"isMultiple\" [text]=\"''\" [model]=\"selectCtrl\" [values]=\"options\" (change)=\"selectAllChanged($event)\">\n </nitrozen-select-check-all>\n <mat-option *ngFor=\"let option of filteredoptions\" [value]=\"option[id]\">\n {{option[displayName]}}\n </mat-option>\n </div>\n <div class=\"select-action-container\" *ngIf=\"isMultiple\">\n <nitrozen-button-text (clicked)=\"clearOptions()\">Clear</nitrozen-button-text>\n <nitrozen-button-text (clicked)=\"submitOptions()\">Submit</nitrozen-button-text>\n\n </div>\n\n <!-- <app-button [type]=\"'small-success'\" [label]=\"'Submit'\" (click)=\"submitOptions()\">\n <span>Submit</span>\n </app-button>\n <app-button [type]=\"'small-default'\" [label]=\"'Clear'\" (click)=\"clearOptions()\">\n <span>Clear</span>\n </app-button> \n </div> -->\n </mat-select>\n <mat-placeholder class=\"place-holder\">{{placeholder}}</mat-placeholder>\n </mat-form-field>\n <div>{{model}}</div>\n</div>",
1028 encapsulation: core.ViewEncapsulation.None,
1029 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}.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}"]
1030 })
1031 ], SearchableSelectComponent);
1032 return SearchableSelectComponent;
1033 }());
1034
1035 var SelectCheckAllComponent = /** @class */ (function () {
1036 function SelectCheckAllComponent() {
1037 this.values = [];
1038 this.text = 'Select All';
1039 this.change = new core.EventEmitter();
1040 }
1041 SelectCheckAllComponent.prototype.ngOnInit = function () {
1042 };
1043 SelectCheckAllComponent.prototype.isChecked = function () {
1044 return this.model.value && this.values.length
1045 && this.model.value.length === this.values.length;
1046 };
1047 SelectCheckAllComponent.prototype.isIndeterminate = function () {
1048 return this.model.value && this.values.length && this.model.value.length
1049 && this.model.value.length < this.values.length;
1050 };
1051 SelectCheckAllComponent.prototype.toggleSelection = function (change) {
1052 // console.log(change);
1053 // console.log(this.model.value);
1054 // this.change.emit(change.checked);
1055 // console.log(JSON.stringify(this.values));
1056 if (change.checked) {
1057 this.model.setValue(this.values);
1058 }
1059 else {
1060 this.model.setValue([]);
1061 }
1062 };
1063 __decorate([
1064 core.Input()
1065 ], SelectCheckAllComponent.prototype, "model", void 0);
1066 __decorate([
1067 core.Input()
1068 ], SelectCheckAllComponent.prototype, "values", void 0);
1069 __decorate([
1070 core.Input()
1071 ], SelectCheckAllComponent.prototype, "text", void 0);
1072 __decorate([
1073 core.Output()
1074 ], SelectCheckAllComponent.prototype, "change", void 0);
1075 SelectCheckAllComponent = __decorate([
1076 core.Component({
1077 selector: 'nitrozen-select-check-all',
1078 template: "<mat-checkbox class=\"mat-option\" [disableRipple]=\"true\" [indeterminate]=\"isIndeterminate()\" [checked]=\"isChecked()\"\n (click)=\"$event.stopPropagation()\" (change)=\"toggleSelection($event)\">\n {{text}}\n</mat-checkbox>",
1079 styles: ['']
1080 })
1081 ], SelectCheckAllComponent);
1082 return SelectCheckAllComponent;
1083 }());
1084
1085 var SearchableSelectModule = /** @class */ (function () {
1086 function SearchableSelectModule() {
1087 }
1088 SearchableSelectModule = __decorate([
1089 core.NgModule({
1090 declarations: [SearchableSelectComponent, SelectCheckAllComponent],
1091 imports: [
1092 common.CommonModule, select.MatSelectModule, forms.FormsModule, forms.ReactiveFormsModule, ngxMatSelectSearch.NgxMatSelectSearchModule, material.MatCheckboxModule, ButtonTextModule
1093 ],
1094 exports: [SearchableSelectComponent, select.MatSelectModule, SelectCheckAllComponent, material.MatCheckboxModule]
1095 })
1096 ], SearchableSelectModule);
1097 return SearchableSelectModule;
1098 }());
1099
1100 var CustomSnackbarComponent = /** @class */ (function () {
1101 function CustomSnackbarComponent(snackBarRef, data) {
1102 this.snackBarRef = snackBarRef;
1103 this.data = data;
1104 }
1105 CustomSnackbarComponent.ctorParameters = function () { return [
1106 { type: material.MatSnackBarRef },
1107 { type: undefined, decorators: [{ type: core.Inject, args: [material.MAT_SNACK_BAR_DATA,] }] }
1108 ]; };
1109 CustomSnackbarComponent = __decorate([
1110 core.Component({
1111 selector: 'custom-snackbar',
1112 template: "\n <div class=\"flex\" style=\"display: flex;\n justify-content: space-between;align-items: center;\">\n <div class=\"data\" style=\"white-space: pre-line;\">{{data.data}}</div>\n <div class=\"dismiss\" style=\"cursor:pointer;align-items: center;\n display: flex;\" *ngIf=\"data.hasIcon\">\n <mat-icon (click)=\"snackBarRef.dismiss()\">close</mat-icon>\n </div>\n <div class=\"dismiss\" style=\"cursor:pointer;line-height: 40px;\" *ngIf=\"!data.hasIcon\">\n <div *ngIf=\"data.text\">{{data.text}}</div>\n </div>\n</div>\n\n "
1113 }),
1114 __param(1, core.Inject(material.MAT_SNACK_BAR_DATA))
1115 ], CustomSnackbarComponent);
1116 return CustomSnackbarComponent;
1117 }());
1118
1119 var SnackBarComponent = /** @class */ (function () {
1120 function SnackBarComponent() {
1121 }
1122 SnackBarComponent.prototype.ngOnInit = function () {
1123 };
1124 SnackBarComponent = __decorate([
1125 core.Component({
1126 selector: 'nitrozen-snack-bar',
1127 template: "\n <ng-content></ng-content>\n ",
1128 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}"]
1129 })
1130 ], SnackBarComponent);
1131 return SnackBarComponent;
1132 }());
1133
1134 var ɵ0 = {};
1135 var SnackBarModule = /** @class */ (function () {
1136 function SnackBarModule() {
1137 }
1138 SnackBarModule = __decorate([
1139 core.NgModule({
1140 declarations: [SnackBarComponent, CustomSnackbarComponent],
1141 imports: [
1142 common.CommonModule,
1143 material.MatIconModule
1144 ],
1145 exports: [
1146 SnackBarComponent,
1147 CustomSnackbarComponent,
1148 material.MatIconModule
1149 ],
1150 providers: [{ provide: material.MAT_SNACK_BAR_DATA, useValue: ɵ0 }],
1151 entryComponents: [
1152 CustomSnackbarComponent
1153 ]
1154 })
1155 ], SnackBarModule);
1156 return SnackBarModule;
1157 }());
1158
1159 var VerticalTabsComponent = /** @class */ (function () {
1160 function VerticalTabsComponent() {
1161 this.change = new core.EventEmitter();
1162 }
1163 VerticalTabsComponent.prototype.ngOnInit = function () {
1164 };
1165 VerticalTabsComponent.prototype.handleChange = function (obj) {
1166 console.log(obj);
1167 this.change.emit(obj);
1168 };
1169 __decorate([
1170 core.Input()
1171 ], VerticalTabsComponent.prototype, "tab", void 0);
1172 __decorate([
1173 core.Output()
1174 ], VerticalTabsComponent.prototype, "change", void 0);
1175 VerticalTabsComponent = __decorate([
1176 core.Component({
1177 selector: 'nitrozen-vertical-tabs',
1178 template: "<div class=\"tabordion\">\n <section *ngFor=\"let tb of tab; let i = index\">\n <input type=\"radio\" name=\"sections\" id=\"option{{i}}\" [checked]=\"tb.checked\" (change)=\"handleChange(tb)\">\n <label for=\"option{{i}}\">\n \t<div class=\"tab-sls\">\n \t\t<div class=\"tab-select\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n \t</div>\n \t<div class=\"tab-unselect\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n \t</div>\n\n \t<div class=\"text-tabs\">{{tb.name}}</div>\n \t</div>\n \t</label>\n <!-- <article>\n <p>{{tb.name}}</p>\n </article> -->\n </section>\n<!-- <section id=\"section2\">\n <input type=\"radio\" name=\"sections\" id=\"option2\">\n <label for=\"option2\">\n \t<div class=\"tab-sls\">\n \t\t<div class=\"tab-select\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n \t</div>\n \t<div class=\"tab-unselect\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n \t</div>\n\n \t<div class=\"text-tabs\">Catalog Portfolio</div>\n \t</div>\n </label>\n <article>\n <p>Catalog Portfolio</p>\n </article>\n </section>\n <section id=\"section3\">\n <input type=\"radio\" name=\"sections\" id=\"option3\">\n <label for=\"option3\">\n \t<div class=\"tab-sls\">\n \t\t<div class=\"tab-select\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n \t</div>\n \t<div class=\"tab-unselect\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n \t</div>\n\n \t<div class=\"text-tabs\">Business Profile</div>\n \t</div>\n </label>\n <article>\n <p>Business Profile</p>\n </article>\n </section>\n <section id=\"section4\">\n <input type=\"radio\" name=\"sections\" id=\"option4\">\n <label for=\"option4\">\n \t<div class=\"tab-sls\">\n \t\t<div class=\"tab-select\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n \t</div>\n \t<div class=\"tab-unselect\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n \t</div>\n\n \t<div class=\"text-tabs\">KYC & Bank Details</div>\n \t</div>\n </label>\n <article>\n <p>KYC & Bank Details</p>\n </article>\n </section>\n <section id=\"section5\">\n <input type=\"radio\" name=\"sections\" id=\"option5\">\n <label for=\"option5\">\n \t<div class=\"tab-sls\">\n \t\t<div class=\"tab-select\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_selected_icon.svg\">\n \t</div>\n \t<div class=\"tab-unselect\">\n \t\t<img class=\"img-tabs\" src=\"../../../assets/icons/tab_unselected.svg\">\n \t</div>\n\n \t<div class=\"text-tabs\">Agreement</div>\n \t</div>\n </label>\n <article>\n <p>Agreement</p>\n </article>\n </section> -->\n</div>",
1179 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%}}"]
1180 })
1181 ], VerticalTabsComponent);
1182 return VerticalTabsComponent;
1183 }());
1184
1185 var VerticalTabsModule = /** @class */ (function () {
1186 function VerticalTabsModule() {
1187 }
1188 VerticalTabsModule = __decorate([
1189 core.NgModule({
1190 declarations: [VerticalTabsComponent],
1191 imports: [
1192 common.CommonModule
1193 ],
1194 exports: [
1195 VerticalTabsComponent
1196 ],
1197 schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
1198 })
1199 ], VerticalTabsModule);
1200 return VerticalTabsModule;
1201 }());
1202
1203 var TabsComponent = /** @class */ (function () {
1204 function TabsComponent() {
1205 this.change = new core.EventEmitter();
1206 }
1207 TabsComponent.prototype.ngOnInit = function () {
1208 };
1209 TabsComponent.prototype.handleChange = function (obj) {
1210 console.log(obj);
1211 this.change.emit(obj);
1212 };
1213 __decorate([
1214 core.Input()
1215 ], TabsComponent.prototype, "tab", void 0);
1216 __decorate([
1217 core.Output()
1218 ], TabsComponent.prototype, "change", void 0);
1219 TabsComponent = __decorate([
1220 core.Component({
1221 selector: 'nitrozen-tabs',
1222 template: "<div>\n<div class=\"tab-ordion\">\n <section *ngFor=\"let tb of tab; let i = index\">\n <input type=\"radio\" name=\"sections\" id=\"option{{i}}\" [checked]=\"tb.checked\" (change)=\"handleChange(tb)\">\n <label for=\"option{{i}}\">\n \t<div class=\"text-tabs\">{{tb.name}}</div>\n \t</label>\n </section>\n</div>\n</div>",
1223 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-unselect{display:none}.tab-ordion input[name=sections]:checked+label .text-tabs{color:#fff}.tab-ordion input[name=sections]:checked~article{display:block}.tab-select{height:24px;width:24px}.img-tabs{padding-top:2px}.text-tabs{color:#4d4d4e;font-family:Poppins;font-size:14px;line-height:21px;width:100%}.tab-unselect{height:24px;width:24px}@media (max-width:533px){.tab-ordion,h1{width:100%}.tab-ordion section label{font-size:1em;width:160px}.tab-ordion section article{left:200px;min-width:270px}.tab-ordion section article:after{bottom:0;content:\"\";display:block;left:-199px;position:absolute;top:0;width:200px}}.tab-sls{display:flex}@media (max-width:768px){h1{width:96%}.tab-ordion{width:18%}}@media (min-width:1366px){.tab-ordion,h1{width:70%}}@media (min-width:1824px){h1{width:100%}.tab-ordion{width:55%}}"]
1224 })
1225 ], TabsComponent);
1226 return TabsComponent;
1227 }());
1228
1229 var TabsModule = /** @class */ (function () {
1230 function TabsModule() {
1231 }
1232 TabsModule = __decorate([
1233 core.NgModule({
1234 declarations: [TabsComponent],
1235 imports: [
1236 common.CommonModule
1237 ],
1238 exports: [
1239 TabsComponent
1240 ],
1241 schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
1242 })
1243 ], TabsModule);
1244 return TabsModule;
1245 }());
1246
1247 var CropModalComponent = /** @class */ (function () {
1248 function CropModalComponent(dialogRef, data) {
1249 this.dialogRef = dialogRef;
1250 this.data = data;
1251 this.croppedImage = '';
1252 }
1253 CropModalComponent.prototype.onNoClick = function () {
1254 this.dialogRef.close(this.croppedImage);
1255 };
1256 CropModalComponent.prototype.myMethod = function () {
1257 this.dialogRef.close();
1258 };
1259 CropModalComponent.prototype.imageCropped = function (event) {
1260 this.croppedImage = event.base64;
1261 };
1262 CropModalComponent.prototype.ngOnInit = function () {
1263 };
1264 CropModalComponent.ctorParameters = function () { return [
1265 { type: material.MatDialogRef },
1266 { type: undefined, decorators: [{ type: core.Inject, args: [material.MAT_DIALOG_DATA,] }] }
1267 ]; };
1268 CropModalComponent = __decorate([
1269 core.Component({
1270 selector: 'nitrozen-crop-modal',
1271 template: "<div class=\"alert-modal\">\n\t<div class=\"dialog-tt\" mat-dialog-title>Crop Image</div>\n\t<div mat-dialog-content>\n\t\t<!-- <input type=\"file\" (change)=\"fileChangeEvent($event)\" />\n\t\t<img src=\"{{data.name}}\"> -->\n\t\t<div>\n\t\t\t<image-cropper\n\t\t\t[imageBase64]=\"data.name\"\n\t\t\tformat=\"png,jpeg\"\n\t\t\t(imageCropped)=\"imageCropped($event)\"\n\t\t\t[aspectRatio]=\"data.config\"\n\t\t\t></image-cropper>\n\t\t</div>\n\t</div>\n\t<div class=\"dialog-act\" mat-dialog-actions>\n\t\t<div>\n\t\t\t<nitrozen-button [isContained]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" (clicked)=\"onNoClick()\">Submit</nitrozen-button>\n\t\t</div>\n\t\t<div class=\"cancel-btns\">\n\t\t\t<nitrozen-button [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\" (clicked)=\"myMethod()\"\n\t\t\t>Cancel</nitrozen-button>\n\t\t</div>\n\t</div>\n</div>",
1272 styles: [".dialog-tt{color:#41434c;font-family:Poppins;font-size:16px;font-weight:700;line-height:25px;visibility:hidden}.dialog-act{display:flex;justify-content:flex-end;padding-top:40px}.cancel-btns{padding-left:12px}"]
1273 }),
1274 __param(1, core.Inject(material.MAT_DIALOG_DATA))
1275 ], CropModalComponent);
1276 return CropModalComponent;
1277 }());
1278
1279 var FileUploadComponent = /** @class */ (function () {
1280 function FileUploadComponent(_http, dialog) {
1281 this._http = _http;
1282 this.dialog = dialog;
1283 /** Link text */
1284 this.text = 'Drag and drop your file here.';
1285 /** Name used in form which will be sent in HTTP request. */
1286 this.param = 'file';
1287 /** Target URL for file uploading. */
1288 this.target = 'https://file.io';
1289 this.required = false;
1290 this.download = false;
1291 this.enableCrop = false;
1292 /** Allow you to add handler after its completion. Bubble up response text from remote. */
1293 this.complete = new core.EventEmitter();
1294 this.dimen = new core.EventEmitter();
1295 this.files = [];
1296 this.canChange = false;
1297 this.logo_active = false;
1298 // @HostListener('window:keyup', ['$event'])
1299 // keyEvent(event: KeyboardEvent) {
1300 // event.stopPropagation();
1301 // if (event.keyCode === 9 && event.target.parentElement.parentElement.parentElement.contains('logo-img')) {
1302 // this.logoActive = true;
1303 // this.landscapeActive = false;
1304 // this.portActive = false;
1305 // }
1306 // if (event.keyCode === 9 && event.target.parentElement.parentElement.parentElement.contains('landscape-img')) {
1307 // this.landscapeActive = true;
1308 // this.logoActive = false;
1309 // this.portActive = false;
1310 // }
1311 // if (event.keyCode === 9 && event.target.parentElement.parentElement.parentElement.contains('protrait-img')) {
1312 // this.logoActive = false;
1313 // this.landscapeActive = false;
1314 // this.portActive = true;
1315 // }
1316 // }
1317 this.typesMap = {
1318 csv: {
1319 accept: 'text/csv',
1320 contentType: ['application/vnd.ms-excel', 'text/csv', 'text/plain'],
1321 readMethod: 'text',
1322 errorMsg: 'Invalid File Format. only CSV files are allowed'
1323 },
1324 image: {
1325 accept: 'image/*',
1326 readMethod: 'dataurl',
1327 errorMsg: 'Invalid File Format. only IMAGE files are allowed'
1328 },
1329 image_jpg: {
1330 accept: 'image/jpeg',
1331 readMethod: 'dataurl',
1332 errorMsg: 'Invalid File Format. only JPEG files are allowed'
1333 },
1334 video: {
1335 accept: 'video/*',
1336 readMethod: 'dataurl',
1337 errorMsg: 'Invalid File Format. only VIDEO files are allowed'
1338 },
1339 pdf: {
1340 accept: 'application/pdf',
1341 contentType: ['application/pdf'],
1342 errorMsg: 'Invalid File Format. only CSV files are allowed'
1343 },
1344 json: {
1345 accept: 'application/json',
1346 contentType: 'application/json',
1347 readMethod: 'text',
1348 errorMsg: 'Invalid File Format. only JSON files are allowed'
1349 }
1350 };
1351 }
1352 FileUploadComponent.prototype.ngOnInit = function () {
1353 };
1354 FileUploadComponent.prototype.onClick = function () {
1355 var _this = this;
1356 this.files = [];
1357 this.logo_active = true;
1358 var fileUpload = document.getElementById('fileUpload');
1359 //this.ff = fileUpload;
1360 // document.getElementById('fileUpload').onfocus = this.checkIt();
1361 fileUpload.onchange = function ($event) {
1362 console.log($event);
1363 for (var index = 0; index < fileUpload.files.length; index++) {
1364 var file = fileUpload.files[index];
1365 _this.files.push({
1366 data: file, state: 'in',
1367 inProgress: false, progress: 0, canRetry: false, canCancel: true
1368 });
1369 }
1370 _this.uploadFiles();
1371 };
1372 fileUpload.click();
1373 };
1374 // checkIt() {
1375 // if(this.ff && this.ff.value.length){
1376 // this.logo_active = false;
1377 // } else {
1378 // this.logo_active = true;
1379 // document.getElementById('fileUpload').onfocus = null;
1380 // }
1381 // }
1382 FileUploadComponent.prototype.cancelFile = function (file) {
1383 this.canChange = false;
1384 this.logo_active = false;
1385 file.sub.unsubscribe();
1386 this.removeFileFromArray(file);
1387 };
1388 FileUploadComponent.prototype.retryFile = function (file) {
1389 this.uploadFile(file);
1390 file.canRetry = false;
1391 };
1392 FileUploadComponent.prototype.uploadDragFile = function (event) {
1393 this.files = [];
1394 this.logo_active = true;
1395 for (var index = 0; index < event.length; index++) {
1396 var element = event[index];
1397 this.files.push({
1398 data: element, state: 'in',
1399 inProgress: false, progress: 0, canRetry: false, canCancel: true
1400 });
1401 this.uploadFiles();
1402 }
1403 };
1404 FileUploadComponent.prototype.downloadImage = function (downloadUrl) {
1405 window.open(downloadUrl, "_blank");
1406 };
1407 FileUploadComponent.prototype.getImageDimension = function (obj) {
1408 var fr = new Image();
1409 fr.onload = function () {
1410 this.dimens = {
1411 width: fr.width,
1412 height: fr.height,
1413 crop: obj.crop ? obj.crop : false
1414 };
1415 this.dimen.emit(this.dimens);
1416 }.bind(this);
1417 fr.src = this.url;
1418 };
1419 FileUploadComponent.prototype.uploadFile = function (file) {
1420 var _this = this;
1421 this.canChange = true;
1422 this.uploadedFileName = file.data.name;
1423 var reader = new FileReader();
1424 reader.readAsDataURL(file.data); // read file as data url
1425 reader.onload = function (event) {
1426 _this.url = event.target['result'];
1427 _this.getImageDimension({ crop: false });
1428 };
1429 this.file_type = file.data.type;
1430 this.logo_active = false;
1431 this.complete.emit(file.data);
1432 // const fd = new FormData();
1433 // fd.append(this.param, file.data);
1434 // const req = new HttpRequest('POST', this.target, fd, {
1435 // reportProgress: true
1436 // });
1437 // file.inProgress = true;
1438 // file.sub = this._http.request(req).pipe(
1439 // map(event => {
1440 // switch (event.type) {
1441 // case HttpEventType.UploadProgress:
1442 // file.progress = Math.round(event.loaded * 100 / event.total);
1443 // break;
1444 // case HttpEventType.Response:
1445 // return event;
1446 // }
1447 // }),
1448 // tap(message => { }),
1449 // last(),
1450 // catchError((error: HttpErrorResponse) => {
1451 // file.inProgress = false;
1452 // file.canRetry = true;
1453 // return of(`${file.data.name} upload failed.`);
1454 // })
1455 // ).subscribe(
1456 // (event: any) => {
1457 // if (typeof (event) === 'object') {
1458 // this.removeFileFromArray(file);
1459 // this.complete.emit(event.body);
1460 // }
1461 // }
1462 // );
1463 };
1464 FileUploadComponent.prototype.uploadFiles = function () {
1465 var _this = this;
1466 var fileUpload = document.getElementById('fileUpload');
1467 fileUpload.value = '';
1468 this.files.forEach(function (file) {
1469 _this.uploadFile(file);
1470 });
1471 };
1472 FileUploadComponent.prototype.openCropTool = function (event) {
1473 var _this = this;
1474 event.stopPropagation();
1475 var dialogRef = this.dialog.open(CropModalComponent, {
1476 width: '480px',
1477 data: { name: this.url, config: this.config },
1478 autoFocus: false
1479 });
1480 dialogRef.afterClosed().subscribe(function (res) {
1481 if (res) {
1482 _this.url = res;
1483 _this.complete.emit(_this.url);
1484 _this.getImageDimension({ crop: true });
1485 }
1486 });
1487 };
1488 FileUploadComponent.prototype.removeFileFromArray = function (file) {
1489 var index = this.files.indexOf(file);
1490 if (index > -1) {
1491 this.files.splice(index, 1);
1492 }
1493 };
1494 FileUploadComponent.prototype.myMethod = function (e) { };
1495 FileUploadComponent.ctorParameters = function () { return [
1496 { type: http.HttpClient },
1497 { type: material.MatDialog }
1498 ]; };
1499 __decorate([
1500 core.Input()
1501 ], FileUploadComponent.prototype, "text", void 0);
1502 __decorate([
1503 core.Input()
1504 ], FileUploadComponent.prototype, "param", void 0);
1505 __decorate([
1506 core.Input()
1507 ], FileUploadComponent.prototype, "view", void 0);
1508 __decorate([
1509 core.Input()
1510 ], FileUploadComponent.prototype, "size", void 0);
1511 __decorate([
1512 core.Input()
1513 ], FileUploadComponent.prototype, "dimension", void 0);
1514 __decorate([
1515 core.Input()
1516 ], FileUploadComponent.prototype, "error", void 0);
1517 __decorate([
1518 core.Input()
1519 ], FileUploadComponent.prototype, "msg", void 0);
1520 __decorate([
1521 core.Input()
1522 ], FileUploadComponent.prototype, "target", void 0);
1523 __decorate([
1524 core.Input()
1525 ], FileUploadComponent.prototype, "accept", void 0);
1526 __decorate([
1527 core.Input()
1528 ], FileUploadComponent.prototype, "required", void 0);
1529 __decorate([
1530 core.Input()
1531 ], FileUploadComponent.prototype, "download", void 0);
1532 __decorate([
1533 core.Input()
1534 ], FileUploadComponent.prototype, "enableCrop", void 0);
1535 __decorate([
1536 core.Input()
1537 ], FileUploadComponent.prototype, "downloadUrl", void 0);
1538 __decorate([
1539 core.Input()
1540 ], FileUploadComponent.prototype, "replaceable", void 0);
1541 __decorate([
1542 core.Input()
1543 ], FileUploadComponent.prototype, "newSrc", void 0);
1544 __decorate([
1545 core.Input()
1546 ], FileUploadComponent.prototype, "config", void 0);
1547 __decorate([
1548 core.Input()
1549 ], FileUploadComponent.prototype, "type", void 0);
1550 __decorate([
1551 core.Output()
1552 ], FileUploadComponent.prototype, "complete", void 0);
1553 __decorate([
1554 core.Output()
1555 ], FileUploadComponent.prototype, "dimen", void 0);
1556 FileUploadComponent = __decorate([
1557 core.Component({
1558 selector: 'nitrozen-file-upload',
1559 template: "<div *ngIf=\"type === 'no-preview'\">\n <div class=\"file-cnt\" (click)=\"onClick()\" appDragDrop (onFileDropped)=\"uploadDragFile($event)\">\n <div class=\"file-side-cont\" [ngClass]=\"{'file-active': logo_active}\" >\n <div class=\"img-ic\" *ngIf=\"!replaceable\">\n <img src=\"./../../assets/icons/fileupload_upload.svg\">\n </div>\n <div class=\"img-ic-new\" *ngIf=\"replaceable && file_type !== 'application/pdf'\">\n <img src=\"./../../assets/icons/fileupload_general.svg\" style=\"height: 48px;object-fit: cover;\">\n </div>\n <div class=\"img-ic-new\" *ngIf=\"replaceable && file_type === 'application/pdf'\">\n <img src=\"./../../assets/icons/fileupload_placeholder_pdf.svg\" style=\"height: 48px;object-fit: cover;\">\n </div>\n <div class=\"img-txt\">\n <div class=\"txt-cnt-left\" *ngIf=\"!canChange\">{{text}}</div>\n <div class=\"txt-cnt-left\" *ngIf=\"canChange\">{{uploadedFileName}}</div>\n <div class=\"txt-msg\" title=\"{{msg}}\">{{msg}}</div>\n <div *ngIf=\"size\" class=\"txt-msg\" title=\"{{size}}\">{{size}}</div>\n <div *ngIf=\"dimension\" class=\"txt-msg\" title=\"{{dimension}}\">{{dimension}}</div>\n </div>\n \n <div class=\"file-btn\">\n <div *ngIf=\"enableCrop && replaceable\">\n <div class=\"url-down\" (click)=\"openCropTool($event)\">\n <img src=\"./../../assets/icons/crop_icon.svg\">\n </div>\n </div>\n <div *ngIf=\"downloadUrl\">\n <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n <img src=\"./../../assets/icons/fileupoload-download.svg\">\n </div>\n </div>\n <div class=\"flat-btn-underline\" *ngIf=\"!canChange\">\n <nitrozen-button-rounded [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\"\n >Upload</nitrozen-button-rounded>\n </div>\n <div class=\"flat-btn-underline\" *ngIf=\"canChange\">\n <a class=\"btn-text file-change\">Change</a>\n </div>\n </div>\n </div>\n </div>\n <!-- <ul>\n <li *ngFor=\"let file of files\" [@fadeInOut]=\"file.state\">\n <mat-progress-bar [value]=\"file.progress\"></mat-progress-bar>\n <span id=\"file-label\">\n {{file.data.name}}\n <a title=\"Retry\" (click)=\"retryFile(file)\" *ngIf=\"file.canRetry\">\n <mat-icon>refresh</mat-icon></a>\n <a title=\"Cancel\" (click)=\"cancelFile(file)\" *ngIf=\"file.canCancel\">\n <mat-icon>cancel</mat-icon></a>\n </span>\n </li>\n </ul> -->\n <input type=\"file\" id=\"fileUpload\" [required]=\"required\" name=\"fileUpload\" multiple=\"multiple\"\n accept=\"{{accept}}\" style=\"display:none;\"/>\n\n <div *ngIf=\"error\"><span [innerHTML]=\"error\"></span></div>\n</div>\n<div *ngIf=\"type === 'preview' && view === 'landscape'\">\n <div class=\"file-cnt-image\" [ngClass]=\"{'file-height': canChange}\" (click)=\"onClick()\" appDragDrop (onFileDropped)=\"uploadDragFile($event)\">\n <div class=\"inner-cnt\" [ngClass]=\"{'file-active': logo_active}\" >\n <div class=\"image-cnt\" [ngClass]=\"{'file-image-height': canChange}\">\n <div class=\"img-ic-image\" *ngIf=\"!canChange && !replaceable\">\n <img src=\"./../../assets/icons/fileupload_large_upload.svg\">\n </div>\n <div class=\"img-txt-image\" *ngIf=\"!canChange && !replaceable\">\n <div class=\"txt-cnt\">Drag and drop a file here</div>\n <div class=\"txt-cnt\">or</div>\n <div class=\"pad-12\">\n <nitrozen-button-rounded [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\"\n >Upload</nitrozen-button-rounded>\n </div>\n <div class=\"pad-12\" *ngIf=\"!canChange\">\n <div class=\"txt-msg-cn\" title=\"{{msg}}\">{{msg}}</div>\n <div *ngIf=\"size\" class=\"txt-msg-cn\" title=\"{{size}}\">{{size}}</div>\n <div *ngIf=\"dimension\" class=\"txt-msg-cn\" title=\"{{dimension}}\">{{dimension}}</div>\n </div>\n <!-- <div class=\"txt-cnt\" *ngIf=\"canChange\">{{uploadedFileName}}</div> -->\n <!-- <div class=\"txt-msg\" title=\"{{msg}}\">{{msg}}</div> -->\n </div>\n <div>\n <div *ngIf=\"canChange && !replaceable\">\n <img class=\"url-img\" src=\"{{url}}\">\n </div>\n <div *ngIf=\"replaceable\">\n <img class=\"url-img\" src=\"{{newSrc}}\">\n </div>\n </div>\n </div>\n <div class=\"icn-down-pos\" *ngIf=\"canChange && downloadUrl\">\n <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n <img src=\"./../../assets/icons/fileupoload-download.svg\">\n </div>\n </div>\n <div class=\"icn-down-crop\" *ngIf=\"canChange && enableCrop\">\n <div class=\"url-down\" (click)=\"openCropTool($event)\">\n <img class=\"crop-icn\" src=\"./../../assets/icons/crop_icon.svg\">\n </div>\n </div>\n </div>\n <div class=\"file-btn-image\" *ngIf=\"canChange\">\n <div class=\"img-new-cnt\">\n <div class=\"txt-cnt-image\" *ngIf=\"canChange\">{{uploadedFileName}}</div>\n <div class=\"txt-msg-image\" title=\"{{msg}}\">{{msg}}</div>\n <div *ngIf=\"size\" class=\"txt-msg-image\" title=\"{{size}}\">{{size}}</div>\n <div *ngIf=\"dimension\" class=\"txt-msg-image\" title=\"{{dimension}}\">{{dimension}}</div>\n </div>\n <div class=\"change-btn\" *ngIf=\"canChange\">\n <div class=\"flat-btn-underline\">\n <a class=\"btn-text file-change\">Change</a>\n </div>\n </div>\n </div>\n </div>\n <input type=\"file\" id=\"fileUpload\" [required]=\"required\" name=\"fileUpload\" multiple=\"multiple\"\n accept=\"{{accept}}\" style=\"display:none;\"/>\n\n <div *ngIf=\"error\"><span [innerHTML]=\"error\"></span></div>\n</div>\n<div *ngIf=\"type === 'preview' && view === 'protrait'\">\n <div class=\"file-cnt-image file-flx\" [ngClass]=\"{'file-height': canChange}\">\n <div class=\"main-file-drop\" (click)=\"onClick()\" appDragDrop (onFileDropped)=\"uploadDragFile($event)\">\n <div class=\"inner-cnt-prot\" [ngClass]=\"{'file-active': logo_active}\" >\n <div class=\"image-cnt-new\">\n <div class=\"img-ic-image\" *ngIf=\"!canChange && !replaceable\">\n <img src=\"./../../assets/icons/fileupload_large_upload.svg\">\n </div>\n <div class=\"img-txt-image\" *ngIf=\"!canChange && !replaceable\">\n <!-- <div class=\"txt-cnt break-txt\">Drag and drop a file here or click to upload</div> -->\n <div class=\"txt-cnt\">Drag and drop a file here</div>\n <div class=\"txt-cnt\">or</div>\n <div class=\"pad-12\">\n <nitrozen-button-rounded [showProgress]=\"false\" [isStroked]=\"true\" [theme]=\"'primary'\" [showIcon]=\"false\" [shouldBeDisabled]=\"false\">Upload</nitrozen-button-rounded>\n </div>\n <div class=\"pad-12\" *ngIf=\"!canChange\">\n <div class=\"txt-msg-cn\" title=\"{{msg}}\">{{msg}}</div>\n <div *ngIf=\"size\" class=\"txt-msg-cn\" title=\"{{size}}\">{{size}}</div>\n <div *ngIf=\"dimension\" class=\"txt-msg-cn\" title=\"{{dimension}}\">{{dimension}}</div>\n </div>\n </div>\n <div>\n <div *ngIf=\"canChange && !replaceable\">\n <img class=\"url-img-port\" src=\"{{url}}\">\n </div>\n <div *ngIf=\"replaceable\">\n <img class=\"url-img-port\" src=\"{{newSrc}}\">\n </div>\n <!-- <div class=\"icn-down-pos\" *ngIf=\"downloadUrl\">\n <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n <img src=\"./../../assets/icons/fileupoload-download.svg\">\n </div>\n </div> -->\n </div>\n </div>\n <div class=\"icn-down-pos\" *ngIf=\"canChange && downloadUrl\">\n <div class=\"url-down\" (click)=\"downloadImage(downloadUrl)\">\n <img src=\"./../../assets/icons/fileupoload-download.svg\">\n </div>\n </div>\n <div class=\"icn-down-crop-pro\" *ngIf=\"canChange && enableCrop\">\n <div class=\"url-down\" (click)=\"openCropTool($event)\">\n <img src=\"./../../assets/icons/crop_icon.svg\">\n </div>\n </div>\n </div>\n </div>\n <div class=\"file-btn-image\" *ngIf=\"canChange\">\n <div class=\"img-new-cnt\">\n <div class=\"txt-cnt-image\" *ngIf=\"canChange\">{{uploadedFileName}}</div>\n <div class=\"txt-msg-image\" title=\"{{msg}}\">{{msg}}</div>\n <div *ngIf=\"size\" class=\"txt-msg-image\" title=\"{{size}}\">{{size}}</div>\n <div *ngIf=\"dimension\" class=\"txt-msg-image\" title=\"{{dimension}}\">{{dimension}}</div>\n </div>\n <div class=\"change-btn\" *ngIf=\"canChange\">\n <div class=\"flat-btn-underline\">\n <a class=\"btn-text file-change\" (click)=\"onClick()\">Change</a>\n </div>\n </div>\n </div>\n </div>\n <input type=\"file\" id=\"fileUpload\" [required]=\"required\" name=\"fileUpload\" multiple=\"multiple\"\n accept=\"{{accept}}\" style=\"display:none;\"/>\n <div *ngIf=\"error\"><span [innerHTML]=\"error\"></span></div>\n</div>",
1560 animations: [
1561 animations.trigger('fadeInOut', [
1562 animations.state('in', animations.style({ opacity: 100 })),
1563 animations.transition('* => void', [
1564 animations.animate(300, animations.style({ opacity: 0 }))
1565 ])
1566 ])
1567 ],
1568 styles: [".file-cnt{display:flex;width:65%;border-radius:3px;padding:12px;border:1px solid #e4e5e6;cursor:pointer;background-color:#f8f8f8}.file-side-cont{display:flex;width:100%;border:1px dashed #d7d7d7;border-radius:3px;background-color:#fff;padding:12px}.crop-icn{width:40px}.file-active{border:1px dashed #00f!important}.url-down{display:flex;height:100%;padding-right:25%}.icn-down-pos{position:absolute;right:10px;bottom:20px;top:175px;z-index:1}.icn-down-crop{position:absolute;right:60px;bottom:20px;top:175px;z-index:1}.icn-down-crop-pro{position:absolute;z-index:1;bottom:20px;right:40px}.file-cnt-image{width:486px;border:1px solid #e4e5e6;border-radius:3px;background-color:#f8f8f8;position:relative;cursor:pointer}.file-height{height:480px}.file-flx{display:flex;justify-content:center}.main-file-drop{width:265px;border-radius:3px;border:1px solid #e4e5e6;background-color:#d8d8d8;position:relative;cursor:pointer;height:330px;margin:10px 0}.img-txt-image{padding-top:12px}.break-txt{word-break:break-all;width:201px;text-align:center!important}.image-cnt-new{vertical-align:middle;margin:0 -50% 0 0;position:absolute;top:51%;left:50%;transform:translate(-50%,-50%)}.img-ic{border-radius:3px;padding:10px;align-items:center;display:flex}.img-ic-new{align-items:center;display:flex}.url-img{height:335px;width:466px;-o-object-fit:cover;object-fit:cover}.url-img-port{height:330px;width:266px;-o-object-fit:cover;object-fit:cover}.change-btn{display:flex;align-items:center;padding-right:12px}.img-new-cnt{flex:1;padding:12px}.text-msg-image{color:#9b9b9b;font-family:Poppins;font-size:12px;text-align:left;padding-left:10px}.file-btn-image{position:absolute;bottom:-40px;left:50%;transform:translate(-50%,-50%);width:96%;background:#fff;display:flex;justify-content:space-around}.inner-cnt{height:332px;border:1px dashed #d7d7d7;border-radius:3px;background-color:#fff;margin:10px}.inner-cnt-prot{border:1px dashed #d7d7d7;border-radius:3px;background-color:#fff;height:328px}.file-change{color:#5c6bdd!important;font-size:12px!important}.image-cnt{vertical-align:middle;margin:0 -50% 0 0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.file-image-height{top:37.8%}.img-txt{padding-left:24px;padding-top:10px}.txt-cnt{color:#61636a;font-family:Poppins;font-size:16px;text-align:center;text-overflow:ellipsis;max-width:275px;overflow:auto}.txt-cnt-left{color:#41434c;font-family:Poppins;font-size:12px;text-align:left;text-overflow:ellipsis;max-width:275px;overflow:auto}.txt-cnt-image{color:#41434c;font-family:Poppins;font-size:12px;text-overflow:ellipsis;max-width:275px;overflow:auto;text-align:left}.txt-msg{color:#9b9b9b;font-family:Poppins;font-size:12px;text-align:left;width:275px}.pad-12{padding-top:12px}.txt-msg-cn{text-align:center;color:#9b9b9b;font-family:Poppins;font-size:12px;width:275px}.txt-msg-image{color:#9b9b9b;font-family:Poppins;font-size:12px;text-align:left;width:275px}"]
1569 })
1570 ], FileUploadComponent);
1571 return FileUploadComponent;
1572 }());
1573 var FileUploadModel = /** @class */ (function () {
1574 function FileUploadModel() {
1575 }
1576 return FileUploadModel;
1577 }());
1578
1579 var ButtonRoundedComponent = /** @class */ (function () {
1580 function ButtonRoundedComponent() {
1581 this.clicked = new core.EventEmitter();
1582 }
1583 ButtonRoundedComponent.prototype.ngOnInit = function () {
1584 this.theme = this.theme ? this.theme : 'primary';
1585 };
1586 ButtonRoundedComponent.prototype.clickedButton = function (event) {
1587 this.clicked.emit(event);
1588 };
1589 __decorate([
1590 core.Input()
1591 ], ButtonRoundedComponent.prototype, "showProgress", void 0);
1592 __decorate([
1593 core.Input()
1594 ], ButtonRoundedComponent.prototype, "isContained", void 0);
1595 __decorate([
1596 core.Input()
1597 ], ButtonRoundedComponent.prototype, "focused", void 0);
1598 __decorate([
1599 core.Input()
1600 ], ButtonRoundedComponent.prototype, "isStroked", void 0);
1601 __decorate([
1602 core.Input()
1603 ], ButtonRoundedComponent.prototype, "theme", void 0);
1604 __decorate([
1605 core.Input()
1606 ], ButtonRoundedComponent.prototype, "shouldBeDisabled", void 0);
1607 __decorate([
1608 core.Input()
1609 ], ButtonRoundedComponent.prototype, "showIcon", void 0);
1610 __decorate([
1611 core.Output()
1612 ], ButtonRoundedComponent.prototype, "clicked", void 0);
1613 ButtonRoundedComponent = __decorate([
1614 core.Component({
1615 selector: 'nitrozen-button-rounded',
1616 template: "<div class=\"primary-theme\" [ngClass]=\"{\n 'primary-section': theme === 'primary' ,\n 'secondary-section': theme === 'accent'\n }\">\n\t<button mat-button class=\"btn-nitrozen\" \n[ngClass]=\"{\n 'mat-stroked-button': isStroked,\n 'mat-flat-button':isContained,\n 'btn-focused':focused,\n 'hover-state':showProgress\n }\"\n [disabled]=\"shouldBeDisabled\"\n (click)=\"clickedButton($event)\"\n\n>\n\n<div class=\"btn-icon-show\">\n <span 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 <ng-content></ng-content>\n </span>\n\n <div class=\"btn-spin\" [ngClass]=\"{\n 'btn-spin-stroke': isStroked,\n 'btn-spin-contained':isContained,\n 'btn-progress': !showProgress,\n 'btn-notprogress' : showProgress\n }\" *ngIf=\"showIcon\">\n <img src=\"./../../assets/icons/Bag_Icon.svg\">\n</div>\n <div class=\"btn-spin fx-wt\" [ngClass]=\"{\n 'btn-spin-stroke': isStroked,\n 'btn-spin-contained':isContained,\n 'btn-notprogress': !showProgress,\n 'btn-progress' : showProgress\n }\" *ngIf=\"!shouldBeDisabled\">\n <img *ngIf=\"isContained\" class=\"btn-spinner\" style=\"width: 40px;\" src=\"../../../assets/icons/loader-white-1.gif\">\n <img *ngIf=\"isStroked && theme === 'primary'\" class=\"btn-spinner\" style=\"width: 40px;\" src=\"../../../assets/icons/loader-blue.gif\">\n <img *ngIf=\"isStroked && theme === 'accent'\" class=\"btn-spinner\" style=\"width: 40px;\" src=\"../../../assets/icons/loader-blue.gif\">\n <!-- <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> -->\n</div>\n</div>\n\n\n<!-- <span class=\"btn-txt\" *ngIf=\"!showProgress && !showIcon\">\n <ng-content></ng-content>\n </span> -->\n\n \n</button>\n\n\n</div>\n",
1617 styles: [".btn-nitrozen{height:40px;border-radius:21px;padding:0 32px;outline:0;cursor:pointer}.hover-state{pointer-events:none}.btn-notprogress{opacity:0;transition:opacity .25s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn-progress{opacity:1}.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:#5c6bdd;text-underline-position:under}.primary-section .mat-flat-button{background-color:#5c6bdd}.primary-section .mat-flat-button:hover:not([disabled]){background-color:#4f5ecc}.primary-section .mat-flat-button:focus{text-decoration:underline;color:#fff;text-underline-position:under}.primary-section .mat-stroked-button{border:1px solid #5c6bdd!important}.primary-section .mat-stroked-button:hover:not([disabled]){background-color:rgba(79,94,204,.12)}.primary-section .mat-stroked-button:focus{text-decoration:underline;color:#5c6bdd;text-underline-position:under}.primary-section .btn-spin-stroke .mat-spinner circle,.primary-section .btn-spin-stroke ::ng-deep .mat-progress-spinner circle{stroke:#5c6bdd}.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:#5c6bdd}.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:#5c6bdd}.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 .mat-stroked-button:disabled .btn-stroke-color,.secondary-section .mat-stroked-button[disabled=disabled] .btn-stroke-color{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}"]
1618 })
1619 ], ButtonRoundedComponent);
1620 return ButtonRoundedComponent;
1621 }());
1622
1623 var ButtonRoundedModule = /** @class */ (function () {
1624 function ButtonRoundedModule() {
1625 }
1626 ButtonRoundedModule = __decorate([
1627 core.NgModule({
1628 declarations: [ButtonRoundedComponent],
1629 imports: [
1630 common.CommonModule,
1631 material.MatButtonModule,
1632 material.MatProgressSpinnerModule
1633 ],
1634 exports: [
1635 ButtonRoundedComponent,
1636 material.MatButtonModule,
1637 material.MatProgressSpinnerModule
1638 ]
1639 })
1640 ], ButtonRoundedModule);
1641 return ButtonRoundedModule;
1642 }());
1643
1644 var DragDropDirective = /** @class */ (function () {
1645 function DragDropDirective() {
1646 this.onFileDropped = new core.EventEmitter();
1647 }
1648 // @HostBinding('style.background-color') private background = '#f5fcff'
1649 // @HostBinding('style.opacity') private opacity = '1'
1650 //Dragover listener
1651 DragDropDirective.prototype.onDragOver = function (evt) {
1652 evt.preventDefault();
1653 evt.stopPropagation();
1654 // this.background = '#9ecbec';
1655 // this.opacity = '0.8'
1656 };
1657 //Dragleave listener
1658 DragDropDirective.prototype.onDragLeave = function (evt) {
1659 evt.preventDefault();
1660 evt.stopPropagation();
1661 // this.background = '#f5fcff'
1662 // this.opacity = '1'
1663 };
1664 //Drop listener
1665 DragDropDirective.prototype.ondrop = function (evt) {
1666 evt.preventDefault();
1667 evt.stopPropagation();
1668 // this.background = '#f5fcff'
1669 // this.opacity = '1'
1670 var files = evt.dataTransfer.files;
1671 if (files.length > 0) {
1672 this.onFileDropped.emit(files);
1673 }
1674 };
1675 __decorate([
1676 core.Output()
1677 ], DragDropDirective.prototype, "onFileDropped", void 0);
1678 __decorate([
1679 core.HostListener('dragover', ['$event'])
1680 ], DragDropDirective.prototype, "onDragOver", null);
1681 __decorate([
1682 core.HostListener('dragleave', ['$event'])
1683 ], DragDropDirective.prototype, "onDragLeave", null);
1684 __decorate([
1685 core.HostListener('drop', ['$event'])
1686 ], DragDropDirective.prototype, "ondrop", null);
1687 DragDropDirective = __decorate([
1688 core.Directive({
1689 selector: '[appDragDrop]'
1690 })
1691 ], DragDropDirective);
1692 return DragDropDirective;
1693 }());
1694
1695 var FileUploadModule = /** @class */ (function () {
1696 function FileUploadModule() {
1697 }
1698 FileUploadModule = __decorate([
1699 core.NgModule({
1700 declarations: [FileUploadComponent, DragDropDirective, CropModalComponent],
1701 imports: [
1702 common.CommonModule,
1703 material.MatButtonModule,
1704 ButtonTextModule,
1705 ButtonModule,
1706 ButtonRoundedModule,
1707 material.MatProgressSpinnerModule,
1708 material.MatProgressBarModule,
1709 ngxImageCropper.ImageCropperModule,
1710 material.MatIconModule
1711 ],
1712 exports: [
1713 FileUploadComponent,
1714 material.MatButtonModule,
1715 material.MatProgressSpinnerModule,
1716 material.MatProgressBarModule,
1717 material.MatIconModule
1718 ],
1719 entryComponents: [CropModalComponent]
1720 })
1721 ], FileUploadModule);
1722 return FileUploadModule;
1723 }());
1724
1725 exports.ButtonModule = ButtonModule;
1726 exports.ButtonTextModule = ButtonTextModule;
1727 exports.CheckboxModule = CheckboxModule;
1728 exports.FileUploadModule = FileUploadModule;
1729 exports.InputModule = InputModule;
1730 exports.RadioButtonModule = RadioButtonModule;
1731 exports.SearchableSelectModule = SearchableSelectModule;
1732 exports.SelectModule = SelectModule;
1733 exports.SnackBarModule = SnackBarModule;
1734 exports.TabsModule = TabsModule;
1735 exports.VerticalTabsModule = VerticalTabsModule;
1736 exports.ɵ0 = ɵ0;
1737 exports.ɵa = ButtonComponent;
1738 exports.ɵb = ButtonTextComponent;
1739 exports.ɵc = CheckboxComponent;
1740 exports.ɵd = RadioButtonComponent;
1741 exports.ɵe = InputComponent;
1742 exports.ɵf = InputSuffixComponent;
1743 exports.ɵg = InputPrefixComponent;
1744 exports.ɵh = SelectComponent;
1745 exports.ɵi = SearchableSelectComponent;
1746 exports.ɵj = SelectCheckAllComponent;
1747 exports.ɵk = SnackBarComponent;
1748 exports.ɵl = CustomSnackbarComponent;
1749 exports.ɵm = VerticalTabsComponent;
1750 exports.ɵn = TabsComponent;
1751 exports.ɵo = FileUploadComponent;
1752 exports.ɵp = DragDropDirective;
1753 exports.ɵq = CropModalComponent;
1754 exports.ɵr = ButtonRoundedModule;
1755 exports.ɵs = ButtonRoundedComponent;
1756
1757 Object.defineProperty(exports, '__esModule', { value: true });
1758
1759})));
1760//# sourceMappingURL=nitrozen.umd.js.map