@net7/components 3.12.2 → 3.12.4
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/esm2020/lib/components/button/button.mjs +3 -1
- package/esm2020/lib/components/button/button.mock.mjs +3 -3
- package/esm2020/lib/components/input-checkbox/input-checkbox.mjs +3 -3
- package/esm2020/lib/components/input-select/input-select.mjs +3 -3
- package/esm2020/lib/components/input-select/input-select.mock.mjs +10 -4
- package/esm2020/lib/components/input-text/input-text.mjs +3 -3
- package/esm2020/lib/components/input-text/input-text.mock.mjs +2 -1
- package/esm2020/lib/components/input-textarea/input-textarea.mjs +3 -3
- package/esm2020/lib/components/loader/loader.mjs +3 -3
- package/esm2020/lib/shared-interfaces.mjs +1 -1
- package/fesm2015/net7-components.mjs +24 -15
- package/fesm2015/net7-components.mjs.map +1 -1
- package/fesm2020/net7-components.mjs +24 -15
- package/fesm2020/net7-components.mjs.map +1 -1
- package/lib/components/input-checkbox/input-checkbox.d.ts +4 -0
- package/lib/components/input-select/input-select.d.ts +37 -18
- package/lib/components/input-text/input-text.d.ts +19 -1
- package/lib/components/input-textarea/input-textarea.d.ts +39 -3
- package/lib/shared-interfaces.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/styles/components/_button.scss +14 -17
- package/src/lib/styles/components/_input-select.scss +17 -3
- package/src/lib/styles/components/_loader.scss +11 -33
|
@@ -434,10 +434,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
434
434
|
class LoaderComponent {
|
|
435
435
|
}
|
|
436
436
|
LoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
437
|
-
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<
|
|
437
|
+
LoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: LoaderComponent, selector: "n7-loader", inputs: { data: "data" }, ngImport: i0, template: "<span class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\"></span>" });
|
|
438
438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
439
439
|
type: Component,
|
|
440
|
-
args: [{ selector: 'n7-loader', template: "<
|
|
440
|
+
args: [{ selector: 'n7-loader', template: "<span class=\"n7-loader {{ data && data.classes ? data.classes : '' }}\"></span>" }]
|
|
441
441
|
}], propDecorators: { data: [{
|
|
442
442
|
type: Input
|
|
443
443
|
}] } });
|
|
@@ -464,6 +464,8 @@ class ButtonComponent {
|
|
|
464
464
|
onClick(value) {
|
|
465
465
|
if (!this.emit)
|
|
466
466
|
return;
|
|
467
|
+
if (this.data.isDisabled)
|
|
468
|
+
return;
|
|
467
469
|
this.emit('click', value);
|
|
468
470
|
}
|
|
469
471
|
}
|
|
@@ -763,10 +765,10 @@ class InputSelectComponent {
|
|
|
763
765
|
}
|
|
764
766
|
}
|
|
765
767
|
InputSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
766
|
-
InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select
|
|
768
|
+
InputSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputSelectComponent, selector: "n7-input-select", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select\"\n [ngClass]=\"input.classes\"\n [attr.name]=\"input.name\"\n [disabled]=\"input.disabled\"\n [required]=\"input.required\">\n <option *ngFor=\"let option of input.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"option.selected\"\n [hidden]=\"option.hidden\"\n [ngClass]=\"option.classes\">\n {{ option.label }}\n </option>\n </select>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
767
769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
768
770
|
type: Component,
|
|
769
|
-
args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select
|
|
771
|
+
args: [{ selector: 'n7-input-select', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-select\">\n <label *ngIf=\"input.label\"\n for=\"{{ input.id }}\" [innerHTML]=\"input.label\"></label>\n <select (change)=\"onChange(input.payload, $event.target.value)\"\n id=\"{{ input.id }}\"\n class=\"n7-facet__input-select\"\n [ngClass]=\"input.classes\"\n [attr.name]=\"input.name\"\n [disabled]=\"input.disabled\"\n [required]=\"input.required\">\n <option *ngFor=\"let option of input.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"option.selected\"\n [hidden]=\"option.hidden\"\n [ngClass]=\"option.classes\">\n {{ option.label }}\n </option>\n </select>\n</div>\n" }]
|
|
770
772
|
}], propDecorators: { data: [{
|
|
771
773
|
type: Input
|
|
772
774
|
}], emit: [{
|
|
@@ -1373,10 +1375,10 @@ class InputCheckboxComponent {
|
|
|
1373
1375
|
}
|
|
1374
1376
|
}
|
|
1375
1377
|
InputCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1376
|
-
InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputCheckboxComponent, selector: "n7-input-checkbox", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"
|
|
1378
|
+
InputCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputCheckboxComponent, selector: "n7-input-checkbox", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data\"\n class=\"n7-input-checkbox {{ data.classes || '' }}\">\n <fieldset class=\"n7-input-checkbox__fieldset\">\n <legend class=\"n7-input-checkbox__legend\"\n *ngIf=\"data.legend\"\n [innerHTML]=\"data.legend\"></legend>\n <ng-container *ngFor=\"let input of data.checkboxes\">\n <div class=\"n7-input-checkbox__input-wrapper\">\n <input type=\"checkbox\"\n id=\"{{ input.id }}\"\n [attr.name]=\"input.name\"\n class=\"n7-input-checkbox__input\"\n [ngClass]=\"input.classes\"\n [checked]=\"input.checked\"\n [disabled]=\"input.disabled\"\n (change)=\"onChange(input.payload, $event.target.checked)\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-checkbox__label\"\n for=\"{{ input.id }}\">{{ input.label }}</label>\n </div>\n </ng-container>\n </fieldset>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1377
1379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputCheckboxComponent, decorators: [{
|
|
1378
1380
|
type: Component,
|
|
1379
|
-
args: [{ selector: 'n7-input-checkbox', template: "<div *ngIf=\"data\"
|
|
1381
|
+
args: [{ selector: 'n7-input-checkbox', template: "<div *ngIf=\"data\"\n class=\"n7-input-checkbox {{ data.classes || '' }}\">\n <fieldset class=\"n7-input-checkbox__fieldset\">\n <legend class=\"n7-input-checkbox__legend\"\n *ngIf=\"data.legend\"\n [innerHTML]=\"data.legend\"></legend>\n <ng-container *ngFor=\"let input of data.checkboxes\">\n <div class=\"n7-input-checkbox__input-wrapper\">\n <input type=\"checkbox\"\n id=\"{{ input.id }}\"\n [attr.name]=\"input.name\"\n class=\"n7-input-checkbox__input\"\n [ngClass]=\"input.classes\"\n [checked]=\"input.checked\"\n [disabled]=\"input.disabled\"\n (change)=\"onChange(input.payload, $event.target.checked)\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-checkbox__label\"\n for=\"{{ input.id }}\">{{ input.label }}</label>\n </div>\n </ng-container>\n </fieldset>\n</div>\n" }]
|
|
1380
1382
|
}], propDecorators: { data: [{
|
|
1381
1383
|
type: Input
|
|
1382
1384
|
}], emit: [{
|
|
@@ -1410,10 +1412,10 @@ class InputTextareaComponent {
|
|
|
1410
1412
|
}
|
|
1411
1413
|
}
|
|
1412
1414
|
InputTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1413
|
-
InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-textarea\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-textarea__label\"\n for=\"{{ input.id }}\"\n [innerHTML]=\"input.label\">\n </label>\n <div class=\"n7-input-textarea__wrapper\"\n [ngClass]=\"{\n 'has-icon': !!input.icon\n }\">\n <textarea id=\"{{ input.id }}\"\n
|
|
1415
|
+
InputTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextareaComponent, selector: "n7-input-textarea", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-textarea\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-textarea__label\"\n for=\"{{ input.id }}\"\n [innerHTML]=\"input.label\">\n </label>\n <div class=\"n7-input-textarea__wrapper\"\n [ngClass]=\"{\n 'has-icon': !!input.icon\n }\">\n <textarea id=\"{{ input.id }}\"\n class=\"n7-input-textarea__text\"\n [ngClass]=\"input.classes\"\n [attr.name]=\"input.name\"\n [value]=\"input.value || null\"\n [disabled]=\"input.disabled\"\n [required]=\"input.required\"\n [attr.placeholder]=\"input.placeholder\"\n [attr.autocomplete]=\"input.autocomplete\"\n [attr.autofocus]=\"input.autofocus\"\n [attr.maxlength]=\"input.maxlength\"\n [attr.minlength]=\"input.minlength\"\n [attr.rows]=\"input.rows\"\n [attr.cols]=\"input.cols\"\n (input)=\"onChange(input.inputPayload, $event.target.value)\"\n (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n </textarea>\n </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1414
1416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextareaComponent, decorators: [{
|
|
1415
1417
|
type: Component,
|
|
1416
|
-
args: [{ selector: 'n7-input-textarea', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-textarea\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-textarea__label\"\n for=\"{{ input.id }}\"\n [innerHTML]=\"input.label\">\n </label>\n <div class=\"n7-input-textarea__wrapper\"\n [ngClass]=\"{\n 'has-icon': !!input.icon\n }\">\n <textarea id=\"{{ input.id }}\"\n
|
|
1418
|
+
args: [{ selector: 'n7-input-textarea', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-textarea\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-textarea__label\"\n for=\"{{ input.id }}\"\n [innerHTML]=\"input.label\">\n </label>\n <div class=\"n7-input-textarea__wrapper\"\n [ngClass]=\"{\n 'has-icon': !!input.icon\n }\">\n <textarea id=\"{{ input.id }}\"\n class=\"n7-input-textarea__text\"\n [ngClass]=\"input.classes\"\n [attr.name]=\"input.name\"\n [value]=\"input.value || null\"\n [disabled]=\"input.disabled\"\n [required]=\"input.required\"\n [attr.placeholder]=\"input.placeholder\"\n [attr.autocomplete]=\"input.autocomplete\"\n [attr.autofocus]=\"input.autofocus\"\n [attr.maxlength]=\"input.maxlength\"\n [attr.minlength]=\"input.minlength\"\n [attr.rows]=\"input.rows\"\n [attr.cols]=\"input.cols\"\n (input)=\"onChange(input.inputPayload, $event.target.value)\"\n (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n </textarea>\n </div>\n</div>\n" }]
|
|
1417
1419
|
}], propDecorators: { data: [{
|
|
1418
1420
|
type: Input
|
|
1419
1421
|
}], emit: [{
|
|
@@ -1429,10 +1431,10 @@ class InputTextComponent {
|
|
|
1429
1431
|
}
|
|
1430
1432
|
}
|
|
1431
1433
|
InputTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1432
|
-
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-text\">\n <label *ngIf=\"input.label\"\n
|
|
1434
|
+
InputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: InputTextComponent, selector: "n7-input-text", inputs: { data: "data", emit: "emit" }, ngImport: i0, template: "<div *ngIf=\"data as input\"\n class=\"n7-input-text\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-text__label\"\n for=\"{{ input.id }}\"\n [innerHTML]=\"input.label\">\n </label>\n <div class=\"n7-input-text__wrapper\"\n [ngClass]=\"{\n 'has-icon': !!input.icon\n }\">\n <input id=\"{{ input.id }}\"\n class=\"n7-input-text__text\"\n [ngClass]=\"input.classes\"\n [type]=\"input.type ? input.type : 'text'\"\n [attr.name]=\"input.name\"\n [value]=\"input.value || null\"\n [attr.placeholder]=\"input.placeholder\"\n [disabled]=\"input.disabled\"\n [required]=\"input.required\"\n [attr.min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n [attr.max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n [attr.maxlength]=\"input.maxlength\"\n [attr.minlength]=\"input.minlength\"\n (input)=\"onChange(input.inputPayload, $event.target.value)\"\n (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n <span *ngIf=\"input.icon\"\n class=\"n7-input-text__icon {{input.icon || ''}}\"\n (click)=\"onChange(input.iconPayload)\">\n </span>\n </div>\n</div>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1433
1435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
1434
1436
|
type: Component,
|
|
1435
|
-
args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-text\">\n <label *ngIf=\"input.label\"\n
|
|
1437
|
+
args: [{ selector: 'n7-input-text', template: "<div *ngIf=\"data as input\"\n class=\"n7-input-text\">\n <label *ngIf=\"input.label\"\n class=\"n7-input-text__label\"\n for=\"{{ input.id }}\"\n [innerHTML]=\"input.label\">\n </label>\n <div class=\"n7-input-text__wrapper\"\n [ngClass]=\"{\n 'has-icon': !!input.icon\n }\">\n <input id=\"{{ input.id }}\"\n class=\"n7-input-text__text\"\n [ngClass]=\"input.classes\"\n [type]=\"input.type ? input.type : 'text'\"\n [attr.name]=\"input.name\"\n [value]=\"input.value || null\"\n [attr.placeholder]=\"input.placeholder\"\n [disabled]=\"input.disabled\"\n [required]=\"input.required\"\n [attr.min]=\"input.type === 'number' && (input.min || input.min === 0) ? input.min : ''\"\n [attr.max]=\"input.type === 'number' && (input.max || input.max === 0) ? input.max : ''\"\n [attr.maxlength]=\"input.maxlength\"\n [attr.minlength]=\"input.minlength\"\n (input)=\"onChange(input.inputPayload, $event.target.value)\"\n (keyup.enter)=\"onChange(input.enterPayload, $event.target.value)\">\n <span *ngIf=\"input.icon\"\n class=\"n7-input-text__icon {{input.icon || ''}}\"\n (click)=\"onChange(input.iconPayload)\">\n </span>\n </div>\n</div>\n" }]
|
|
1436
1438
|
}], propDecorators: { data: [{
|
|
1437
1439
|
type: Input
|
|
1438
1440
|
}], emit: [{
|
|
@@ -6221,8 +6223,8 @@ const BUBBLECHART_MOCK = {
|
|
|
6221
6223
|
|
|
6222
6224
|
const BUTTON_MOCK = {
|
|
6223
6225
|
text: 'The Button\'s label',
|
|
6224
|
-
|
|
6225
|
-
isLoading: true,
|
|
6226
|
+
isDisabled: false,
|
|
6227
|
+
// isLoading: true,
|
|
6226
6228
|
anchor: {
|
|
6227
6229
|
payload: 'button-click',
|
|
6228
6230
|
},
|
|
@@ -7292,11 +7294,17 @@ const INPUT_LINK_MOCK = {
|
|
|
7292
7294
|
|
|
7293
7295
|
const INPUT_SELECT_MOCK = {
|
|
7294
7296
|
id: 'input-select-1',
|
|
7297
|
+
required: true,
|
|
7295
7298
|
options: [
|
|
7296
|
-
{
|
|
7299
|
+
{
|
|
7300
|
+
value: '',
|
|
7301
|
+
label: 'Select...',
|
|
7302
|
+
selected: true,
|
|
7303
|
+
hidden: true,
|
|
7304
|
+
},
|
|
7297
7305
|
{ value: 1, label: 'Option 1' },
|
|
7298
|
-
{ value: 2, label: 'Option 2' },
|
|
7299
|
-
{ value: 3, label: 'Option 3'
|
|
7306
|
+
{ value: 2, label: 'Option 2', disabled: true },
|
|
7307
|
+
{ value: 3, label: 'Option 3' },
|
|
7300
7308
|
{ value: 4, label: 'Option 4' },
|
|
7301
7309
|
],
|
|
7302
7310
|
payload: 'select',
|
|
@@ -7310,6 +7318,7 @@ const INPUT_TEXT_MOCK = {
|
|
|
7310
7318
|
inputPayload: 'search-input',
|
|
7311
7319
|
enterPayload: 'search-enter',
|
|
7312
7320
|
iconPayload: 'search-icon',
|
|
7321
|
+
classes: 'my-custom-class'
|
|
7313
7322
|
// type: 'number',
|
|
7314
7323
|
// min: 10,
|
|
7315
7324
|
// max: 20,
|