sidesys-generic-ui 0.0.10 → 0.0.12
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/card/s-card.component.mjs +2 -2
- package/esm2020/lib/checkbox/s-checkbox.component.mjs +33 -4
- package/esm2020/lib/form/s-form.component.mjs +1 -1
- package/esm2020/lib/input/components/input-text/s-input-text.component.mjs +70 -6
- package/esm2020/lib/input/components/input-textarea/s-input-textarea.component.mjs +32 -4
- package/esm2020/lib/input/index.mjs +1 -3
- package/esm2020/lib/input/input.module.mjs +8 -14
- package/esm2020/lib/login/s-login.component.mjs +1 -1
- package/esm2020/lib/pagination/new/s-pag.component.mjs +6 -5
- package/esm2020/lib/radio/s-radio.component.mjs +33 -4
- package/esm2020/lib/select/select-multiple/s-select-multiple.component.mjs +32 -5
- package/esm2020/lib/select/select-simple/s-select-simple.component.mjs +46 -22
- package/esm2020/lib/toggle-switch/s-toggle-switch.component.mjs +32 -4
- package/fesm2015/sidesys-generic-ui.mjs +335 -138
- package/fesm2015/sidesys-generic-ui.mjs.map +1 -1
- package/fesm2020/sidesys-generic-ui.mjs +323 -130
- package/fesm2020/sidesys-generic-ui.mjs.map +1 -1
- package/lib/checkbox/s-checkbox.component.d.ts +7 -1
- package/lib/input/components/input-text/s-input-text.component.d.ts +14 -2
- package/lib/input/components/input-textarea/s-input-textarea.component.d.ts +7 -1
- package/lib/input/index.d.ts +0 -2
- package/lib/input/input.module.d.ts +6 -7
- package/lib/pagination/new/s-pag.component.d.ts +2 -2
- package/lib/radio/s-radio.component.d.ts +7 -1
- package/lib/select/select-multiple/s-select-multiple.component.d.ts +7 -1
- package/lib/select/select-simple/s-select-simple.component.d.ts +12 -5
- package/lib/toggle-switch/s-toggle-switch.component.d.ts +7 -1
- package/package.json +1 -1
- package/esm2020/lib/input/components/input-email/s-input-email.component.mjs +0 -14
- package/esm2020/lib/input/components/input-password/s-input-password.component.mjs +0 -14
- package/lib/input/components/input-email/s-input-email.component.d.ts +0 -8
- package/lib/input/components/input-password/s-input-password.component.d.ts +0 -8
|
@@ -45,10 +45,10 @@ export class SCardComponent {
|
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
SCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SCardComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
SCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SCardComponent, selector: "s-card", inputs: { title: "title", subtitle: "subtitle", menu: "menu", check: "check", showHorizontal: "showHorizontal", image: "image", fullimage: "fullimage", icon: "icon", size: "size", label: "label", style: "style" }, outputs: { clickEvent: "clickEvent", checkEvent: "checkEvent" }, ngImport: i0, template: "<div class=\"card {{size}}\" attr.style=\"{{style}}\">\r\n <div *ngIf=\"!showHorizontal && check\" class=\"card-check\">\r\n <s-checkbox class=\"card-check-component\" [value]=\"check.value\" [model]=\"check.model\" [disable]=\"check.disable\"\r\n [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <div *ngIf=\"!showHorizontal && image\" class=\"card-img\">\r\n <img [src]=\"localImage\" class=\"card-image\" alt=\"card-image\" [ngClass]=\"{'full-image': fullimage}\">\r\n </div>\r\n <div *ngIf=\"!showHorizontal && !image && icon\" class=\"card-icon\">\r\n <s-icon-mat [style]=\"'font-size: 150px;'\">{{icon}}</s-icon-mat>\r\n </div>\r\n <div class=\"card-title\" [ngClass]=\"{'card-title-horizontal': showHorizontal}\">\r\n <div class=\"card-check-horizontal\" *ngIf=\"showHorizontal && check\">\r\n <s-checkbox *ngIf=\"showHorizontal && check\" [value]=\"check.value\" [model]=\"check.model\"\r\n [disable]=\"check.disable\" [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <h6 *ngIf=\"title\">{{title}}</h6>\r\n <span *ngIf=\"!showHorizontal && subtitle\" class=\"s-caption\">{{subtitle}}</span>\r\n <div *ngIf=\"buttons && buttons.length > 0\" class=\"card-title-menu-section\">\r\n <s-icon-mat class=\"card-title-menu\" *ngIf=\"menu\" (click)=\"showDropDown()\">more_vert</s-icon-mat>\r\n <s-drop-down [display]=\"showDropDownCard\" [right]=\"true\" [buttons]=\"buttons\"\r\n (buttonClick)=\"onClickEvent($event)\">\r\n </s-drop-down>\r\n </div>\r\n <ng-content *ngIf=\"!showHorizontal\"></ng-content>\r\n <s-tag *ngIf=\"label\" type=\"success\">{{label}}</s-tag>\r\n </div>\r\n</div>", styles: [".card{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.25rem;display:inline-block;box-shadow:0 0 20px #0000001a}.card.sm{width:calc(25% - 5px)}.card.md{width:calc(50% - 5px)}.card.lg{width:calc(75% - 5px)}.card.full{width:calc(100% - 5px)}.card-check{position:relative}.card-check-component{position:absolute;top:10px;left:10px}.card-check-horizontal{display:inline-block;display:flex;flex-direction:column;justify-content:center;padding:5px 20px 0 0}.card-img,.card-icon{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0}.card-image{max-width:100%;height:200px;border-radius:.25rem .25rem 0 0}.full-image{width:100%}.card-title{padding:16px;position:relative;display:flex;flex-direction:column;background-clip:border-box}.card-title-horizontal{flex-direction:row}.card-title-menu-section{position:absolute;right:16px}.card-title-menu{cursor:pointer}\n"], components: [{ type: i2.SCheckboxComponent, selector: "s-checkbox", inputs: ["value", "model", "disable", "isUndefined", "label"], outputs: ["emitSelection"] }, { type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { type: i4.SDropDownComponent, selector: "s-drop-down", inputs: ["display", "buttons", "right"], outputs: ["buttonClick"] }, { type: i5.STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled", "close"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
48
|
+
SCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SCardComponent, selector: "s-card", inputs: { title: "title", subtitle: "subtitle", menu: "menu", check: "check", showHorizontal: "showHorizontal", image: "image", fullimage: "fullimage", icon: "icon", size: "size", label: "label", style: "style" }, outputs: { clickEvent: "clickEvent", checkEvent: "checkEvent" }, ngImport: i0, template: "<div class=\"card {{size}}\" attr.style=\"{{style}}\">\r\n <div *ngIf=\"!showHorizontal && check\" class=\"card-check\">\r\n <s-checkbox class=\"card-check-component\" [value]=\"check.value\" [model]=\"check.model\" [disable]=\"check.disable\"\r\n [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <div *ngIf=\"!showHorizontal && image\" class=\"card-img\">\r\n <img [src]=\"localImage\" class=\"card-image\" alt=\"card-image\" [ngClass]=\"{'full-image': fullimage}\">\r\n </div>\r\n <div *ngIf=\"!showHorizontal && !image && icon\" class=\"card-icon\">\r\n <s-icon-mat [style]=\"'font-size: 150px;'\">{{icon}}</s-icon-mat>\r\n </div>\r\n <div class=\"card-title\" [ngClass]=\"{'card-title-horizontal': showHorizontal}\">\r\n <div class=\"card-check-horizontal\" *ngIf=\"showHorizontal && check\">\r\n <s-checkbox *ngIf=\"showHorizontal && check\" [value]=\"check.value\" [model]=\"check.model\"\r\n [disable]=\"check.disable\" [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <h6 *ngIf=\"title\">{{title}}</h6>\r\n <span *ngIf=\"!showHorizontal && subtitle\" class=\"s-caption\">{{subtitle}}</span>\r\n <div *ngIf=\"buttons && buttons.length > 0\" class=\"card-title-menu-section\">\r\n <s-icon-mat class=\"card-title-menu\" *ngIf=\"menu\" (click)=\"showDropDown()\">more_vert</s-icon-mat>\r\n <s-drop-down [display]=\"showDropDownCard\" [right]=\"true\" [buttons]=\"buttons\"\r\n (buttonClick)=\"onClickEvent($event)\">\r\n </s-drop-down>\r\n </div>\r\n <ng-content *ngIf=\"!showHorizontal\"></ng-content>\r\n <s-tag *ngIf=\"label\" type=\"success\">{{label}}</s-tag>\r\n </div>\r\n</div>", styles: [".card{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.25rem;display:inline-block;margin-bottom:.5rem;box-shadow:0 0 20px #0000001a}.card.sm{width:calc(25% - 5px)}.card.md{width:calc(50% - 5px)}.card.lg{width:calc(75% - 5px)}.card.full{width:calc(100% - 5px)}.card-check{position:relative}.card-check-component{position:absolute;top:10px;left:10px}.card-check-horizontal{display:inline-block;display:flex;flex-direction:column;justify-content:center;padding:5px 20px 0 0}.card-img,.card-icon{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0}.card-image{max-width:100%;height:200px;border-radius:.25rem .25rem 0 0}.full-image{width:100%}.card-title{padding:16px;position:relative;display:flex;flex-direction:column;background-clip:border-box}.card-title-horizontal{flex-direction:row}.card-title-menu-section{position:absolute;right:16px}.card-title-menu{cursor:pointer}\n"], components: [{ type: i2.SCheckboxComponent, selector: "s-checkbox", inputs: ["value", "model", "disable", "isUndefined", "label"], outputs: ["emitSelection"] }, { type: i3.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { type: i4.SDropDownComponent, selector: "s-drop-down", inputs: ["display", "buttons", "right"], outputs: ["buttonClick"] }, { type: i5.STagComponent, selector: "s-tag", inputs: ["type", "size", "disabled", "close"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SCardComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
|
-
args: [{ selector: 's-card', encapsulation: ViewEncapsulation.None, template: "<div class=\"card {{size}}\" attr.style=\"{{style}}\">\r\n <div *ngIf=\"!showHorizontal && check\" class=\"card-check\">\r\n <s-checkbox class=\"card-check-component\" [value]=\"check.value\" [model]=\"check.model\" [disable]=\"check.disable\"\r\n [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <div *ngIf=\"!showHorizontal && image\" class=\"card-img\">\r\n <img [src]=\"localImage\" class=\"card-image\" alt=\"card-image\" [ngClass]=\"{'full-image': fullimage}\">\r\n </div>\r\n <div *ngIf=\"!showHorizontal && !image && icon\" class=\"card-icon\">\r\n <s-icon-mat [style]=\"'font-size: 150px;'\">{{icon}}</s-icon-mat>\r\n </div>\r\n <div class=\"card-title\" [ngClass]=\"{'card-title-horizontal': showHorizontal}\">\r\n <div class=\"card-check-horizontal\" *ngIf=\"showHorizontal && check\">\r\n <s-checkbox *ngIf=\"showHorizontal && check\" [value]=\"check.value\" [model]=\"check.model\"\r\n [disable]=\"check.disable\" [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <h6 *ngIf=\"title\">{{title}}</h6>\r\n <span *ngIf=\"!showHorizontal && subtitle\" class=\"s-caption\">{{subtitle}}</span>\r\n <div *ngIf=\"buttons && buttons.length > 0\" class=\"card-title-menu-section\">\r\n <s-icon-mat class=\"card-title-menu\" *ngIf=\"menu\" (click)=\"showDropDown()\">more_vert</s-icon-mat>\r\n <s-drop-down [display]=\"showDropDownCard\" [right]=\"true\" [buttons]=\"buttons\"\r\n (buttonClick)=\"onClickEvent($event)\">\r\n </s-drop-down>\r\n </div>\r\n <ng-content *ngIf=\"!showHorizontal\"></ng-content>\r\n <s-tag *ngIf=\"label\" type=\"success\">{{label}}</s-tag>\r\n </div>\r\n</div>", styles: [".card{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.25rem;display:inline-block;box-shadow:0 0 20px #0000001a}.card.sm{width:calc(25% - 5px)}.card.md{width:calc(50% - 5px)}.card.lg{width:calc(75% - 5px)}.card.full{width:calc(100% - 5px)}.card-check{position:relative}.card-check-component{position:absolute;top:10px;left:10px}.card-check-horizontal{display:inline-block;display:flex;flex-direction:column;justify-content:center;padding:5px 20px 0 0}.card-img,.card-icon{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0}.card-image{max-width:100%;height:200px;border-radius:.25rem .25rem 0 0}.full-image{width:100%}.card-title{padding:16px;position:relative;display:flex;flex-direction:column;background-clip:border-box}.card-title-horizontal{flex-direction:row}.card-title-menu-section{position:absolute;right:16px}.card-title-menu{cursor:pointer}\n"] }]
|
|
51
|
+
args: [{ selector: 's-card', encapsulation: ViewEncapsulation.None, template: "<div class=\"card {{size}}\" attr.style=\"{{style}}\">\r\n <div *ngIf=\"!showHorizontal && check\" class=\"card-check\">\r\n <s-checkbox class=\"card-check-component\" [value]=\"check.value\" [model]=\"check.model\" [disable]=\"check.disable\"\r\n [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <div *ngIf=\"!showHorizontal && image\" class=\"card-img\">\r\n <img [src]=\"localImage\" class=\"card-image\" alt=\"card-image\" [ngClass]=\"{'full-image': fullimage}\">\r\n </div>\r\n <div *ngIf=\"!showHorizontal && !image && icon\" class=\"card-icon\">\r\n <s-icon-mat [style]=\"'font-size: 150px;'\">{{icon}}</s-icon-mat>\r\n </div>\r\n <div class=\"card-title\" [ngClass]=\"{'card-title-horizontal': showHorizontal}\">\r\n <div class=\"card-check-horizontal\" *ngIf=\"showHorizontal && check\">\r\n <s-checkbox *ngIf=\"showHorizontal && check\" [value]=\"check.value\" [model]=\"check.model\"\r\n [disable]=\"check.disable\" [isUndefined]=\"check.undefined\" (emitSelection)=\"onCheckEvent($event)\"></s-checkbox>\r\n </div>\r\n <h6 *ngIf=\"title\">{{title}}</h6>\r\n <span *ngIf=\"!showHorizontal && subtitle\" class=\"s-caption\">{{subtitle}}</span>\r\n <div *ngIf=\"buttons && buttons.length > 0\" class=\"card-title-menu-section\">\r\n <s-icon-mat class=\"card-title-menu\" *ngIf=\"menu\" (click)=\"showDropDown()\">more_vert</s-icon-mat>\r\n <s-drop-down [display]=\"showDropDownCard\" [right]=\"true\" [buttons]=\"buttons\"\r\n (buttonClick)=\"onClickEvent($event)\">\r\n </s-drop-down>\r\n </div>\r\n <ng-content *ngIf=\"!showHorizontal\"></ng-content>\r\n <s-tag *ngIf=\"label\" type=\"success\">{{label}}</s-tag>\r\n </div>\r\n</div>", styles: [".card{color:var(--secondary-700);min-width:0;word-wrap:break-word;background-color:var(--neutrals-1200);border-radius:.25rem;display:inline-block;margin-bottom:.5rem;box-shadow:0 0 20px #0000001a}.card.sm{width:calc(25% - 5px)}.card.md{width:calc(50% - 5px)}.card.lg{width:calc(75% - 5px)}.card.full{width:calc(100% - 5px)}.card-check{position:relative}.card-check-component{position:absolute;top:10px;left:10px}.card-check-horizontal{display:inline-block;display:flex;flex-direction:column;justify-content:center;padding:5px 20px 0 0}.card-img,.card-icon{line-height:0;text-align:center;border-radius:.25rem .25rem 0 0}.card-image{max-width:100%;height:200px;border-radius:.25rem .25rem 0 0}.full-image{width:100%}.card-title{padding:16px;position:relative;display:flex;flex-direction:column;background-clip:border-box}.card-title-horizontal{flex-direction:row}.card-title-menu-section{position:absolute;right:16px}.card-title-menu{cursor:pointer}\n"] }]
|
|
52
52
|
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { title: [{
|
|
53
53
|
type: Input
|
|
54
54
|
}], subtitle: [{
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
1
|
+
import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
2
3
|
import * as i0 from "@angular/core";
|
|
3
4
|
import * as i1 from "@angular/forms";
|
|
4
5
|
import * as i2 from "@angular/common";
|
|
5
6
|
export class SCheckboxComponent {
|
|
6
7
|
constructor() {
|
|
8
|
+
this.onChange = (_) => { };
|
|
9
|
+
this.onTouch = () => { };
|
|
7
10
|
this.disable = false;
|
|
8
11
|
this.isUndefined = false;
|
|
9
12
|
this.label = "";
|
|
@@ -12,15 +15,41 @@ export class SCheckboxComponent {
|
|
|
12
15
|
ngOnInit() {
|
|
13
16
|
}
|
|
14
17
|
doCheck(event) {
|
|
18
|
+
this.onTouch();
|
|
19
|
+
this.onChange(event);
|
|
15
20
|
this.isUndefined = false;
|
|
16
21
|
this.emitSelection.emit({ value: this.value, event: event });
|
|
17
22
|
}
|
|
23
|
+
writeValue(value) {
|
|
24
|
+
if (value) {
|
|
25
|
+
this.model = value;
|
|
26
|
+
this.value = value;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
registerOnChange(fn) {
|
|
30
|
+
this.onChange = fn;
|
|
31
|
+
}
|
|
32
|
+
registerOnTouched(fn) {
|
|
33
|
+
this.onTouch = fn;
|
|
34
|
+
}
|
|
18
35
|
}
|
|
19
36
|
SCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
SCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SCheckboxComponent, selector: "s-checkbox", inputs: { value: "value", model: "model", disable: "disable", isUndefined: "isUndefined", label: "label" }, outputs: { emitSelection: "emitSelection" },
|
|
37
|
+
SCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SCheckboxComponent, selector: "s-checkbox", inputs: { value: "value", model: "model", disable: "disable", isUndefined: "isUndefined", label: "label" }, outputs: { emitSelection: "emitSelection" }, providers: [
|
|
38
|
+
{
|
|
39
|
+
provide: NG_VALUE_ACCESSOR,
|
|
40
|
+
useExisting: forwardRef(() => SCheckboxComponent),
|
|
41
|
+
multi: true
|
|
42
|
+
}
|
|
43
|
+
], ngImport: i0, template: "<input type=\"checkbox\" [ngClass]=\"isUndefined ? 'undefined':''\" [value]=\"value\" [ngModel]=\"model\" [disabled]=\"disable\"\r\n (ngModelChange)=\"doCheck($event)\" />\r\n<label [ngClass]=\"!isUndefined && !model && disable ? 'disabled': ''\" *ngIf=\"label\"\r\n class=\"s-body-2 label-check\">{{label}}</label>", styles: ["input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:12px;height:12px;border:1px solid var(--neutrals-800);border-radius:2px;display:inline-grid;place-content:center;vertical-align:middle}input[type=checkbox]:before{content:\"\";width:12px;height:12px;transform:scale(0);box-shadow:inset 1px 1px var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(3.5px 5px,5px 6.5px,8.5px 3px,10px 4.5px,5px 9.5px,2px 6.5px)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox].undefined{background-color:var(--primary-600);border-color:var(--primary-600)}input[type=checkbox].undefined:before{transform:scale(1);clip-path:polygon(2px 5px,10px 5px,10px 7px,2px 7px)}input[type=checkbox]:checked{background-color:var(--primary-600);border-color:var(--primary-600)}input[type=checkbox][disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}input[type=checkbox][disabled]:checked,input[type=checkbox][disabled].undefined{background-color:var(--primary-500);border-color:var(--primary-500)}label.label-check{margin-left:8px}label.disabled{color:var(--neutrals-700)}\n"], directives: [{ type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
21
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SCheckboxComponent, decorators: [{
|
|
22
45
|
type: Component,
|
|
23
|
-
args: [{ selector: 's-checkbox',
|
|
46
|
+
args: [{ selector: 's-checkbox', providers: [
|
|
47
|
+
{
|
|
48
|
+
provide: NG_VALUE_ACCESSOR,
|
|
49
|
+
useExisting: forwardRef(() => SCheckboxComponent),
|
|
50
|
+
multi: true
|
|
51
|
+
}
|
|
52
|
+
], template: "<input type=\"checkbox\" [ngClass]=\"isUndefined ? 'undefined':''\" [value]=\"value\" [ngModel]=\"model\" [disabled]=\"disable\"\r\n (ngModelChange)=\"doCheck($event)\" />\r\n<label [ngClass]=\"!isUndefined && !model && disable ? 'disabled': ''\" *ngIf=\"label\"\r\n class=\"s-body-2 label-check\">{{label}}</label>", styles: ["input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:var(--neutrals-1200);margin:0;font:inherit;width:12px;height:12px;border:1px solid var(--neutrals-800);border-radius:2px;display:inline-grid;place-content:center;vertical-align:middle}input[type=checkbox]:before{content:\"\";width:12px;height:12px;transform:scale(0);box-shadow:inset 1px 1px var(--neutrals-1200);background-color:var(--neutrals-1200);transform-origin:bottom left;clip-path:polygon(3.5px 5px,5px 6.5px,8.5px 3px,10px 4.5px,5px 9.5px,2px 6.5px)}input[type=checkbox]:checked:before{transform:scale(1)}input[type=checkbox].undefined{background-color:var(--primary-600);border-color:var(--primary-600)}input[type=checkbox].undefined:before{transform:scale(1);clip-path:polygon(2px 5px,10px 5px,10px 7px,2px 7px)}input[type=checkbox]:checked{background-color:var(--primary-600);border-color:var(--primary-600)}input[type=checkbox][disabled]{background-color:var(--neutrals-1000);border-color:var(--neutrals-900)}input[type=checkbox][disabled]:checked,input[type=checkbox][disabled].undefined{background-color:var(--primary-500);border-color:var(--primary-500)}label.label-check{margin-left:8px}label.disabled{color:var(--neutrals-700)}\n"] }]
|
|
24
53
|
}], ctorParameters: function () { return []; }, propDecorators: { value: [{
|
|
25
54
|
type: Input
|
|
26
55
|
}], model: [{
|
|
@@ -34,4 +63,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImpor
|
|
|
34
63
|
}], emitSelection: [{
|
|
35
64
|
type: Output
|
|
36
65
|
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
66
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicy1jaGVja2JveC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zaWRlc3lzLWdlbmVyaWMtdWkvc3JjL2xpYi9jaGVja2JveC9zLWNoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpZGVzeXMtZ2VuZXJpYy11aS9zcmMvbGliL2NoZWNrYm94L3MtY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFVLFlBQVksRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0YsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBZXpFLE1BQU0sT0FBTyxrQkFBa0I7SUFZN0I7UUFWQSxhQUFRLEdBQUcsQ0FBQyxDQUFNLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUMzQixZQUFPLEdBQUcsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBSVgsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUN6QixnQkFBVyxHQUFZLEtBQUssQ0FBQztRQUM3QixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVwQyxDQUFDO0lBRWYsUUFBUTtJQUNSLENBQUM7SUFFRCxPQUFPLENBQUMsS0FBVTtRQUNoQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEVBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBQyxDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7WUFDbEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7U0FDcEI7SUFDSCxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUN0QixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLEVBQUUsQ0FBQztJQUNwQixDQUFDOzsrR0FyQ1Usa0JBQWtCO21HQUFsQixrQkFBa0IsOExBVGxCO1FBQ1Q7WUFDRSxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsa0JBQWtCLENBQUM7WUFDakQsS0FBSyxFQUFFLElBQUk7U0FDWjtLQUNGLDBCQ2JILG1VQUdrRDsyRkRhckMsa0JBQWtCO2tCQWI5QixTQUFTOytCQUNFLFlBQVksYUFHWDt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxtQkFBbUIsQ0FBQzs0QkFDakQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7MEVBUVEsS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgT25Jbml0LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzLWNoZWNrYm94JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcy1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcy1jaGVja2JveC5jb21wb25lbnQuc2NzcyddLFxyXG4gIHByb3ZpZGVyczogW1xyXG4gICAge1xyXG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcclxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU0NoZWNrYm94Q29tcG9uZW50KSxcclxuICAgICAgbXVsdGk6IHRydWVcclxuICAgIH1cclxuICBdXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgU0NoZWNrYm94Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0ICwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG5cclxuICBvbkNoYW5nZSA9IChfOiBhbnkpID0+IHsgfTtcclxuICBvblRvdWNoID0gKCkgPT4geyB9O1xyXG5cclxuICBASW5wdXQoKSB2YWx1ZTogYW55O1xyXG4gIEBJbnB1dCgpIG1vZGVsOiBhbnk7XHJcbiAgQElucHV0KCkgZGlzYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGlzVW5kZWZpbmVkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgbGFiZWw6IHN0cmluZyA9IFwiXCI7XHJcbiAgQE91dHB1dCgpIGVtaXRTZWxlY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IoKXt9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgZG9DaGVjayhldmVudDogYW55KSB7XHJcbiAgICB0aGlzLm9uVG91Y2goKTtcclxuICAgIHRoaXMub25DaGFuZ2UoZXZlbnQpO1xyXG4gICAgdGhpcy5pc1VuZGVmaW5lZCA9IGZhbHNlO1xyXG4gICAgdGhpcy5lbWl0U2VsZWN0aW9uLmVtaXQoe3ZhbHVlOiB0aGlzLnZhbHVlLCBldmVudDogZXZlbnR9KTtcclxuICB9XHJcblxyXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgaWYgKHZhbHVlKSB7XHJcbiAgICAgIHRoaXMubW9kZWwgPSB2YWx1ZVxyXG4gICAgICB0aGlzLnZhbHVlID0gdmFsdWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgIHRoaXMub25Ub3VjaCA9IGZuO1xyXG4gIH1cclxufVxyXG4iLCI8aW5wdXQgdHlwZT1cImNoZWNrYm94XCIgW25nQ2xhc3NdPVwiaXNVbmRlZmluZWQgPyAndW5kZWZpbmVkJzonJ1wiIFt2YWx1ZV09XCJ2YWx1ZVwiIFtuZ01vZGVsXT1cIm1vZGVsXCIgW2Rpc2FibGVkXT1cImRpc2FibGVcIlxyXG4gICAgKG5nTW9kZWxDaGFuZ2UpPVwiZG9DaGVjaygkZXZlbnQpXCIgLz5cclxuPGxhYmVsIFtuZ0NsYXNzXT1cIiFpc1VuZGVmaW5lZCAmJiAhbW9kZWwgJiYgZGlzYWJsZSA/ICdkaXNhYmxlZCc6ICcnXCIgKm5nSWY9XCJsYWJlbFwiXHJcbiAgICBjbGFzcz1cInMtYm9keS0yIGxhYmVsLWNoZWNrXCI+e3tsYWJlbH19PC9sYWJlbD4iXX0=
|
|
@@ -104,7 +104,7 @@ export class SFormComponent {
|
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
SFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
SFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SFormComponent, selector: "s-form", inputs: { controls: "controls", submitClick: "submitClick", requiredMessage: "requiredMessage", emailMessage: "emailMessage", dafaultMessage: "dafaultMessage" }, outputs: { controlsChangeEvent: "controlsChangeEvent", submitEvent: "submitEvent", changeSelectEvent: "changeSelectEvent", clickButtonEvent: "clickButtonEvent" }, usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"form && controls\" [formGroup]=\"form\">\r\n <div class=\"form-control\" [ngStyle]=\"{width: c.width + '%', display: c.width < 100 ? 'inline-block' : 'initial'}\"\r\n *ngFor=\"let c of controls\">\r\n <div *ngIf=\"c.show && enabledTypes.indexOf(c.inputType) != -1\">\r\n <div *ngIf=\"c.inputType != 'button' && c.inputType != 'select' && c.inputType != 'checkbox'\">\r\n <input [id]=\"c.formControlName\" [type]=\"c.inputType\" [disabled]=\"c.disabled\"\r\n [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <label class=\"label\">{{c.label}}</label>\r\n <s-input-text [type]=\"c.inputType\" [text]=\"c.value\" [disabled]=\"c.disabled\"\r\n [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\" [placeHolder]=\"c.inputPlaceHolder\"\r\n [name]=\"c.formControlName + c.inputType\"\r\n (textChangeEvent)=\"changeControl(c.formControlName, $event)\"\r\n [title]=\"c.inputPlaceHolder\"></s-input-text>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'button' && c.button != undefined\">\r\n <div class=\"form-group\">\r\n <s-button [pill]=\"c.button.pill\" [invert]=\"c.button.invert\" [type]=\"c.button.type\" size=\"sm\"\r\n [title]=\"c.inputPlaceHolder\" [class]=\"c.button.class\" [size]=\"c.button.size ? c.button.size : 'md' \" (click)=\"buttonClick(c.formControlName)\">\r\n {{c.label}}\r\n <s-icon-mat *ngIf=\"c.button.icon\">{{c.button.icon}}</s-icon-mat>\r\n </s-button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'checkbox'\">\r\n <input [id]=\"c.formControlName\" [type]=\"c.inputType\" [disabled]=\"c.disabled\"\r\n [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <s-checkbox [value]=\"c.value\" [label]=\"c.label\" (emitSelection)=\"changeControl(c.formControlName, $event.event.toString())\"></s-checkbox>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'select'\">\r\n <select [id]=\"c.formControlName\" [name]=\"c.formControlName\" [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <option *ngFor=\"let o of c.selectModel\" [value]=\"o.key\" [selected]=\"o.key == c.value\">{{o.value}}\r\n </option>\r\n </select>\r\n <div class=\"form-group\">\r\n <label class=\"label\">{{c.label}}</label>\r\n <s-select-simple [options]=\"c.selectModel\" (selectEvent)=\"changeSelect($event, c.formControlName)\" [title]=\"c.inputPlaceHolder\" [selectedValue]=\"c.value\"></s-select-simple>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>", styles: [".form-control{vertical-align:middle}.button .primary .round-sm .sm{width:100%!important}\n"], components: [{ type: i1.SInputTextComponent, selector: "s-input-text", inputs: ["text", "name", "placeHolder", "disabled", "theme", "type", "classAdd", "help", "size"], outputs: ["textChangeEvent", "clickHelpIconEvent"] }, { type: i2.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { type: i3.SButtonComponent, selector: "s-button", inputs: ["disabled", "class", "rounded", "pill", "size", "invert", "selected", "type", "border", "loading", "position", "theme"] }, { type: i4.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { type: i5.SCheckboxComponent, selector: "s-checkbox", inputs: ["value", "model", "disable", "isUndefined", "label"], outputs: ["emitSelection"] }, { type: i6.SSelectSimpleComponent, selector: "s-select-simple", inputs: ["placeholder", "options", "selectedValue", "
|
|
107
|
+
SFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: SFormComponent, selector: "s-form", inputs: { controls: "controls", submitClick: "submitClick", requiredMessage: "requiredMessage", emailMessage: "emailMessage", dafaultMessage: "dafaultMessage" }, outputs: { controlsChangeEvent: "controlsChangeEvent", submitEvent: "submitEvent", changeSelectEvent: "changeSelectEvent", clickButtonEvent: "clickButtonEvent" }, usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"form && controls\" [formGroup]=\"form\">\r\n <div class=\"form-control\" [ngStyle]=\"{width: c.width + '%', display: c.width < 100 ? 'inline-block' : 'initial'}\"\r\n *ngFor=\"let c of controls\">\r\n <div *ngIf=\"c.show && enabledTypes.indexOf(c.inputType) != -1\">\r\n <div *ngIf=\"c.inputType != 'button' && c.inputType != 'select' && c.inputType != 'checkbox'\">\r\n <input [id]=\"c.formControlName\" [type]=\"c.inputType\" [disabled]=\"c.disabled\"\r\n [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <label class=\"label\">{{c.label}}</label>\r\n <s-input-text [type]=\"c.inputType\" [text]=\"c.value\" [disabled]=\"c.disabled\"\r\n [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\" [placeHolder]=\"c.inputPlaceHolder\"\r\n [name]=\"c.formControlName + c.inputType\"\r\n (textChangeEvent)=\"changeControl(c.formControlName, $event)\"\r\n [title]=\"c.inputPlaceHolder\"></s-input-text>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'button' && c.button != undefined\">\r\n <div class=\"form-group\">\r\n <s-button [pill]=\"c.button.pill\" [invert]=\"c.button.invert\" [type]=\"c.button.type\" size=\"sm\"\r\n [title]=\"c.inputPlaceHolder\" [class]=\"c.button.class\" [size]=\"c.button.size ? c.button.size : 'md' \" (click)=\"buttonClick(c.formControlName)\">\r\n {{c.label}}\r\n <s-icon-mat *ngIf=\"c.button.icon\">{{c.button.icon}}</s-icon-mat>\r\n </s-button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'checkbox'\">\r\n <input [id]=\"c.formControlName\" [type]=\"c.inputType\" [disabled]=\"c.disabled\"\r\n [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <s-checkbox [value]=\"c.value\" [label]=\"c.label\" (emitSelection)=\"changeControl(c.formControlName, $event.event.toString())\"></s-checkbox>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'select'\">\r\n <select [id]=\"c.formControlName\" [name]=\"c.formControlName\" [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <option *ngFor=\"let o of c.selectModel\" [value]=\"o.key\" [selected]=\"o.key == c.value\">{{o.value}}\r\n </option>\r\n </select>\r\n <div class=\"form-group\">\r\n <label class=\"label\">{{c.label}}</label>\r\n <s-select-simple [options]=\"c.selectModel\" (selectEvent)=\"changeSelect($event, c.formControlName)\" [title]=\"c.inputPlaceHolder\" [selectedValue]=\"c.value\"></s-select-simple>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>", styles: [".form-control{vertical-align:middle}.button .primary .round-sm .sm{width:100%!important}\n"], components: [{ type: i1.SInputTextComponent, selector: "s-input-text", inputs: ["text", "name", "placeHolder", "disabled", "max", "min", "step", "theme", "type", "classAdd", "help", "size"], outputs: ["textChangeEvent", "clickHelpIconEvent"] }, { type: i2.SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { type: i3.SButtonComponent, selector: "s-button", inputs: ["disabled", "class", "rounded", "pill", "size", "invert", "selected", "type", "border", "loading", "position", "theme"] }, { type: i4.SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { type: i5.SCheckboxComponent, selector: "s-checkbox", inputs: ["value", "model", "disable", "isUndefined", "label"], outputs: ["emitSelection"] }, { type: i6.SSelectSimpleComponent, selector: "s-select-simple", inputs: ["placeholder", "options", "selectedValue", "selectLabel", "display", "size"], outputs: ["selectEvent"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
108
108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: SFormComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
110
|
args: [{ selector: 's-form', encapsulation: ViewEncapsulation.None, template: "<form *ngIf=\"form && controls\" [formGroup]=\"form\">\r\n <div class=\"form-control\" [ngStyle]=\"{width: c.width + '%', display: c.width < 100 ? 'inline-block' : 'initial'}\"\r\n *ngFor=\"let c of controls\">\r\n <div *ngIf=\"c.show && enabledTypes.indexOf(c.inputType) != -1\">\r\n <div *ngIf=\"c.inputType != 'button' && c.inputType != 'select' && c.inputType != 'checkbox'\">\r\n <input [id]=\"c.formControlName\" [type]=\"c.inputType\" [disabled]=\"c.disabled\"\r\n [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <label class=\"label\">{{c.label}}</label>\r\n <s-input-text [type]=\"c.inputType\" [text]=\"c.value\" [disabled]=\"c.disabled\"\r\n [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\" [placeHolder]=\"c.inputPlaceHolder\"\r\n [name]=\"c.formControlName + c.inputType\"\r\n (textChangeEvent)=\"changeControl(c.formControlName, $event)\"\r\n [title]=\"c.inputPlaceHolder\"></s-input-text>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'button' && c.button != undefined\">\r\n <div class=\"form-group\">\r\n <s-button [pill]=\"c.button.pill\" [invert]=\"c.button.invert\" [type]=\"c.button.type\" size=\"sm\"\r\n [title]=\"c.inputPlaceHolder\" [class]=\"c.button.class\" [size]=\"c.button.size ? c.button.size : 'md' \" (click)=\"buttonClick(c.formControlName)\">\r\n {{c.label}}\r\n <s-icon-mat *ngIf=\"c.button.icon\">{{c.button.icon}}</s-icon-mat>\r\n </s-button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'checkbox'\">\r\n <input [id]=\"c.formControlName\" [type]=\"c.inputType\" [disabled]=\"c.disabled\"\r\n [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <div class=\"form-group\">\r\n <s-checkbox [value]=\"c.value\" [label]=\"c.label\" (emitSelection)=\"changeControl(c.formControlName, $event.event.toString())\"></s-checkbox>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n <div *ngIf=\"c.inputType == 'select'\">\r\n <select [id]=\"c.formControlName\" [name]=\"c.formControlName\" [formControlName]=\"c.formControlName\" style=\"display: none;\">\r\n <option *ngFor=\"let o of c.selectModel\" [value]=\"o.key\" [selected]=\"o.key == c.value\">{{o.value}}\r\n </option>\r\n </select>\r\n <div class=\"form-group\">\r\n <label class=\"label\">{{c.label}}</label>\r\n <s-select-simple [options]=\"c.selectModel\" (selectEvent)=\"changeSelect($event, c.formControlName)\" [title]=\"c.inputPlaceHolder\" [selectedValue]=\"c.value\"></s-select-simple>\r\n <s-error-control [theme]=\"checkErrors(c.formControlName) ? 'red' : 'default'\">\r\n <span *ngIf=\"checkErrors(c.formControlName)\">\r\n {{getErrorMessage(c.formControlName)}}\r\n </span>\r\n </s-error-control>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</form>", styles: [".form-control{vertical-align:middle}.button .primary .round-sm .sm{width:100%!important}\n"] }]
|