monkey-style-guide 2.0.77 → 2.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/scss/partials/_forms.scss +8 -0
- package/assets/scss/partials/components/_buttons.scss +5 -1
- package/assets/scss/partials/components/_input.scss +1 -0
- package/bundles/monkey-style-guide.umd.js +21 -6
- package/bundles/monkey-style-guide.umd.js.map +1 -1
- package/esm2015/lib/components/input/input.component.js +21 -3
- package/esm2015/lib/components/select/select-multiple.component.js +2 -2
- package/esm2015/lib/components/select/select-search.component.js +2 -2
- package/esm2015/lib/components/select/select.component.js +2 -2
- package/fesm2015/monkey-style-guide.js +23 -5
- package/fesm2015/monkey-style-guide.js.map +1 -1
- package/lib/components/input/input.component.d.ts +2 -0
- package/monkey-style-guide-2.0.81.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-2.0.77.tgz +0 -0
|
@@ -102,6 +102,14 @@ mecx-form-field {
|
|
|
102
102
|
height: 48px;
|
|
103
103
|
border-radius: 8px;
|
|
104
104
|
}
|
|
105
|
+
|
|
106
|
+
symbol {
|
|
107
|
+
font-style: normal;
|
|
108
|
+
font-weight: normal;
|
|
109
|
+
font-size: 14px;
|
|
110
|
+
line-height: 17px;
|
|
111
|
+
color: #4b4a53;
|
|
112
|
+
}
|
|
105
113
|
}
|
|
106
114
|
|
|
107
115
|
mecx-form-field-upload-info {
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
/**************************
|
|
2
2
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
3
3
|
* This style guide was developed by Monkey Exchange Team
|
|
4
|
-
* MIT Licence
|
|
4
|
+
* MIT Licence
|
|
5
5
|
**************************/
|
|
6
6
|
@import '../variables.scss';
|
|
7
7
|
|
|
8
|
+
monkey-button[disabled] {
|
|
9
|
+
pointer-events: none;
|
|
10
|
+
}
|
|
11
|
+
|
|
8
12
|
.mecx-button {
|
|
9
13
|
cursor: pointer;
|
|
10
14
|
padding: 16px;
|
|
@@ -2245,6 +2245,7 @@
|
|
|
2245
2245
|
this._id = "mecx-input-" + MonkeyUtils.getRandomString(10);
|
|
2246
2246
|
this._disabled = false;
|
|
2247
2247
|
this._maxDateToday = new Date().toISOString().split('T')[0];
|
|
2248
|
+
this._symbol = '';
|
|
2248
2249
|
}
|
|
2249
2250
|
MonkeyInputComponent.prototype.handleValue = function (value, apply) {
|
|
2250
2251
|
if (apply === void 0) { apply = false; }
|
|
@@ -2270,19 +2271,33 @@
|
|
|
2270
2271
|
if (this.currency) {
|
|
2271
2272
|
if (!value)
|
|
2272
2273
|
value = 0;
|
|
2273
|
-
return this.currencyPipe.transform(value, ((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL', '
|
|
2274
|
+
return this.currencyPipe.transform(value, ((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL', '', '1.2-2', ((_b = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _b === void 0 ? void 0 : _b.locale) || 'pt-BR');
|
|
2274
2275
|
}
|
|
2275
2276
|
else if (this.percent) {
|
|
2276
|
-
return
|
|
2277
|
+
return "" + value;
|
|
2277
2278
|
}
|
|
2278
2279
|
return value;
|
|
2279
2280
|
};
|
|
2281
|
+
MonkeyInputComponent.prototype.handleSymbol = function () {
|
|
2282
|
+
var _a;
|
|
2283
|
+
var settings = this.settings;
|
|
2284
|
+
if (this.currency) {
|
|
2285
|
+
this._symbol = {
|
|
2286
|
+
BRL: 'R$',
|
|
2287
|
+
CLP: 'CLP',
|
|
2288
|
+
}[((_a = settings === null || settings === void 0 ? void 0 : settings.currency) === null || _a === void 0 ? void 0 : _a.code) || 'BRL'];
|
|
2289
|
+
}
|
|
2290
|
+
else if (this.percent) {
|
|
2291
|
+
this._symbol = '%';
|
|
2292
|
+
}
|
|
2293
|
+
};
|
|
2280
2294
|
MonkeyInputComponent.prototype.ngOnInit = function () {
|
|
2281
2295
|
var _this = this;
|
|
2282
2296
|
var settingsService = this.settingsService;
|
|
2283
2297
|
this._oldType = this.type;
|
|
2284
2298
|
settingsService.settings().subscribe(function (val) {
|
|
2285
2299
|
_this.settings = val;
|
|
2300
|
+
_this.handleSymbol();
|
|
2286
2301
|
});
|
|
2287
2302
|
};
|
|
2288
2303
|
MonkeyInputComponent.prototype.registerOnChange = function (fn) {
|
|
@@ -2344,7 +2359,7 @@
|
|
|
2344
2359
|
MonkeyInputComponent.decorators = [
|
|
2345
2360
|
{ type: core.Component, args: [{
|
|
2346
2361
|
selector: 'monkey-input',
|
|
2347
|
-
template: "\n <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n <monkey-icon\n [icon]=\"icon\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"icon\"\n ></monkey-icon>\n <input\n [name]=\"name\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n (keypress)=\"onKeyPress($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n [disabled]=\"_disabled\"\n [mask]=\"mask\"\n [prefix]=\"prefix\"\n *ngIf=\"mask && prefix\"\n #monkeyInput\n />\n <input\n [name]=\"name\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n (keypress)=\"onKeyPress($event)\"\n [disabled]=\"_disabled\"\n [mask]=\"mask\"\n *ngIf=\"mask && !prefix\"\n #monkeyInput\n />\n <input\n [name]=\"name\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n (keypress)=\"onKeyPress($event)\"\n [disabled]=\"_disabled\"\n [maxLength]=\"maxLength\"\n *ngIf=\"!mask && !prefix\"\n [max]=\"maxDateToday ? _maxDateToday : null\"\n #monkeyInput\n />\n <monkey-icon\n icon=\"eye-open-16\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"_oldType === 'password' && type === 'text'\"\n (click)=\"onShowAndHidePassword()\"\n ></monkey-icon>\n <monkey-icon\n icon=\"eye-closed-16\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"_oldType === 'password' && type === 'password'\"\n (click)=\"onShowAndHidePassword()\"\n ></monkey-icon>\n </mecx-form-field-body>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
2362
|
+
template: "\n <mecx-form-field [ngClass]=\"{ disabled: _disabled }\" [id]=\"_id\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body [class.error]=\"errorMessage?.trim()\">\n <monkey-icon\n [icon]=\"icon\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"icon\"\n ></monkey-icon>\n <symbol>\n {{ _symbol }}\n </symbol>\n <input\n [name]=\"name\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n (keypress)=\"onKeyPress($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n [disabled]=\"_disabled\"\n [mask]=\"mask\"\n [prefix]=\"prefix\"\n *ngIf=\"mask && prefix\"\n #monkeyInput\n />\n <input\n [name]=\"name\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n (keypress)=\"onKeyPress($event)\"\n [disabled]=\"_disabled\"\n [mask]=\"mask\"\n *ngIf=\"mask && !prefix\"\n #monkeyInput\n />\n <input\n [name]=\"name\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n (input)=\"onChangeValue($event)\"\n [id]=\"name\"\n [(ngModel)]=\"_formatedValue\"\n (keypress)=\"onKeyPress($event)\"\n [disabled]=\"_disabled\"\n [maxLength]=\"maxLength\"\n *ngIf=\"!mask && !prefix\"\n [max]=\"maxDateToday ? _maxDateToday : null\"\n #monkeyInput\n />\n <monkey-icon\n icon=\"eye-open-16\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"_oldType === 'password' && type === 'text'\"\n (click)=\"onShowAndHidePassword()\"\n ></monkey-icon>\n <monkey-icon\n icon=\"eye-closed-16\"\n [color]=\"errorMessage?.trim() ? '#fa3838' : '#4B4A53'\"\n *ngIf=\"_oldType === 'password' && type === 'password'\"\n (click)=\"onShowAndHidePassword()\"\n ></monkey-icon>\n </mecx-form-field-body>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
2348
2363
|
encapsulation: core.ViewEncapsulation.None,
|
|
2349
2364
|
providers: [
|
|
2350
2365
|
{
|
|
@@ -2736,7 +2751,7 @@
|
|
|
2736
2751
|
MonkeySelectComponent.decorators = [
|
|
2737
2752
|
{ type: core.Component, args: [{
|
|
2738
2753
|
selector: 'monkey-select',
|
|
2739
|
-
template: "\n <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body (click)=\"open()\">\n <monkey-icon [icon]=\"icon\" [color]=\"'#4B4A53'\"></monkey-icon>\n <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n <mecx-select__trigger>\n <span>\n {{ _selected?.label || labelSelect }}\n </span>\n <monkey-icon\n [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n [color]=\"'#4B4A53'\"\n ></monkey-icon>\n </mecx-select__trigger>\n </mecx-select>\n </mecx-form-field-body>\n <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n <mecx-select-options #selectOptions>\n <ng-content> </ng-content>\n </mecx-select-options>\n </mecx-select-inside>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
2754
|
+
template: "\n <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body (click)=\"open()\" [class.error]=\"errorMessage?.trim()\">\n <monkey-icon [icon]=\"icon\" [color]=\"'#4B4A53'\"></monkey-icon>\n <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n <mecx-select__trigger>\n <span>\n {{ _selected?.label || labelSelect }}\n </span>\n <monkey-icon\n [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n [color]=\"'#4B4A53'\"\n ></monkey-icon>\n </mecx-select__trigger>\n </mecx-select>\n </mecx-form-field-body>\n <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n <mecx-select-options #selectOptions>\n <ng-content> </ng-content>\n </mecx-select-options>\n </mecx-select-inside>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
2740
2755
|
encapsulation: core.ViewEncapsulation.None,
|
|
2741
2756
|
providers: [
|
|
2742
2757
|
{
|
|
@@ -2951,7 +2966,7 @@
|
|
|
2951
2966
|
MonkeySelectMultipleComponent.decorators = [
|
|
2952
2967
|
{ type: core.Component, args: [{
|
|
2953
2968
|
selector: 'monkey-select-multiple',
|
|
2954
|
-
template: "\n <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body (click)=\"open()\">\n <monkey-icon [icon]=\"icon\" [color]=\"'#4B4A53'\"></monkey-icon>\n\n <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n <mecx-select__trigger>\n <span>\n {{ _selectedValues || 'Selecione' }}\n </span>\n <monkey-icon\n [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n [color]=\"'#4B4A53'\"\n ></monkey-icon>\n </mecx-select__trigger>\n </mecx-select>\n </mecx-form-field-body>\n <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n <mecx-select-options #selectOptions>\n <ng-content> </ng-content>\n </mecx-select-options>\n </mecx-select-inside>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
2969
|
+
template: "\n <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body (click)=\"open()\" [class.error]=\"errorMessage?.trim()\">\n <monkey-icon [icon]=\"icon\" [color]=\"'#4B4A53'\"></monkey-icon>\n\n <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n <mecx-select__trigger>\n <span>\n {{ _selectedValues || 'Selecione' }}\n </span>\n <monkey-icon\n [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n [color]=\"'#4B4A53'\"\n ></monkey-icon>\n </mecx-select__trigger>\n </mecx-select>\n </mecx-form-field-body>\n <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n <mecx-select-options #selectOptions>\n <ng-content> </ng-content>\n </mecx-select-options>\n </mecx-select-inside>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
2955
2970
|
encapsulation: core.ViewEncapsulation.None,
|
|
2956
2971
|
providers: [
|
|
2957
2972
|
{
|
|
@@ -3152,7 +3167,7 @@
|
|
|
3152
3167
|
MonkeySelectSearchComponent.decorators = [
|
|
3153
3168
|
{ type: core.Component, args: [{
|
|
3154
3169
|
selector: 'monkey-select-search',
|
|
3155
|
-
template: "\n <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body (click)=\"open()\">\n <monkey-icon [icon]=\"icon\" [color]=\"'#aaaaaa'\"></monkey-icon>\n <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n <mecx-select__trigger>\n <input\n [placeholder]=\"labelSelect || placeholder\"\n (input)=\"onChangeInput($event)\"\n #inputFilter\n [ngModel]=\"_selected?.label || ''\"\n />\n <monkey-icon\n [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n [color]=\"'#4B4A53'\"\n ></monkey-icon>\n </mecx-select__trigger>\n </mecx-select>\n </mecx-form-field-body>\n <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n <mecx-select-options #selectOptions>\n <ng-content> </ng-content>\n </mecx-select-options>\n </mecx-select-inside>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
3170
|
+
template: "\n <mecx-form-field [id]=\"_id\" [ngClass]=\"{ disabled: _disabled }\">\n <mecx-form-field-header>\n <label>\n {{ label }}\n </label>\n <helper>\n {{ helperMessage }}\n </helper>\n </mecx-form-field-header>\n <mecx-form-field-body (click)=\"open()\" [class.error]=\"errorMessage?.trim()\">\n <monkey-icon [icon]=\"icon\" [color]=\"'#aaaaaa'\"></monkey-icon>\n <mecx-select class=\"trigger\" [ngClass]=\"{ open: _opened }\">\n <mecx-select__trigger>\n <input\n [placeholder]=\"labelSelect || placeholder\"\n (input)=\"onChangeInput($event)\"\n #inputFilter\n [ngModel]=\"_selected?.label || ''\"\n />\n <monkey-icon\n [icon]=\"!_opened ? 'arrow-down-16' : 'arrow-up-16'\"\n [color]=\"'#4B4A53'\"\n ></monkey-icon>\n </mecx-select__trigger>\n </mecx-select>\n </mecx-form-field-body>\n <mecx-select-inside [ngClass]=\"{ open: _opened }\">\n <mecx-select-options #selectOptions>\n <ng-content> </ng-content>\n </mecx-select-options>\n </mecx-select-inside>\n <mecx-form-field-footer>\n <info>\n {{ infoMessage }}\n </info>\n <error>\n {{ errorMessage }}\n </error>\n </mecx-form-field-footer>\n </mecx-form-field>\n ",
|
|
3156
3171
|
encapsulation: core.ViewEncapsulation.None,
|
|
3157
3172
|
providers: [
|
|
3158
3173
|
{
|