sidesys-generic-ui 0.0.2 → 0.0.3
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/bundles/sidesys-generic-ui.umd.js +6 -4
- package/bundles/sidesys-generic-ui.umd.js.map +1 -1
- package/esm2015/lib/form/s-form-control.js +3 -1
- package/esm2015/lib/form/s-form.component.js +3 -3
- package/esm2015/lib/input/components/input-text/s-input-text.component.js +3 -3
- package/fesm2015/sidesys-generic-ui.js +6 -4
- package/fesm2015/sidesys-generic-ui.js.map +1 -1
- package/lib/form/s-form-control.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1068,7 +1068,7 @@
|
|
|
1068
1068
|
Object.defineProperty(SInputTextComponent.prototype, "type", {
|
|
1069
1069
|
get: function () { return this._type; },
|
|
1070
1070
|
set: function (val) {
|
|
1071
|
-
this._type = ['text', 'password', 'email', 'phone', 'url', 'search', 'number', 'color'].indexOf(val) != -1 ? val : 'text';
|
|
1071
|
+
this._type = ['text', 'password', 'email', 'phone', 'url', 'search', 'number', 'color', 'date'].indexOf(val) != -1 ? val : 'text';
|
|
1072
1072
|
},
|
|
1073
1073
|
enumerable: false,
|
|
1074
1074
|
configurable: true
|
|
@@ -1128,7 +1128,7 @@
|
|
|
1128
1128
|
return SInputTextComponent;
|
|
1129
1129
|
}());
|
|
1130
1130
|
SInputTextComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SInputTextComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1131
|
-
SInputTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SInputTextComponent, selector: "s-input-text", inputs: { text: "text", name: "name", placeHolder: "placeHolder", disabled: "disabled", theme: "theme", type: "type", classAdd: "classAdd", help: "help", size: "size" }, outputs: { textChangeEvent: "textChangeEvent", clickHelpIconEvent: "clickHelpIconEvent" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- El switch case con cada caso por input ['text', 'password', 'email' , 'phone' , 'url' , 'search']-->\r\n\r\n <!-- case text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div class=\"content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <!-- <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">email</s-icon-mat>\r\n </div> -->\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case password -->\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <div class=\"content-input-main-626 content-input-main-password {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">vpn_key</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input type=\"{{visibility ? 'text' : 'password'}}\" [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\"\r\n (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon cursor\" (click)=\"visibility = !visibility\">{{visibility ? 'visibility' :\r\n 'visibility_off'}}</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case email -->\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <div class=\"content-input-main-626 content-input-main-email {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">mail_outline</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- case phone -->\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <div class=\"content-input-main-626 content-input-main-phone {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">phone</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- case url -->\r\n <ng-container *ngSwitchCase=\"'url'\">\r\n <div class=\"content-input-main-626 content-input-main-url {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n http://\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- case search -->\r\n <ng-container *ngSwitchCase=\"'search'\">\r\n <div class=\"content-input-main-626 content-input-main-search {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">search</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <!-- <div class=\"content-right\">\r\n <s-icon-mat class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case color -->\r\n <ng-container *ngSwitchCase=\"'color'\">\r\n <div class=\"content-input-main-626 content-input-main-color {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <input #color [id]=\"name\" [name]=\"name\" type=\"color\" [disabled]=\"disabled\" [(ngModel)]=\"inputText\"\r\n (ngModelChange)=\"onTextChange()\" style=\"width: 40px; padding: 0;\">\r\n </div>\r\n <div class=\"content-center\" (click)=\"this.color.click()\">\r\n <input [type]=\"text\" autocomplete=\"off\" [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" disabled>\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case default -->\r\n <ng-container *ngSwitchDefault>\r\n <div class=\"content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <!-- <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">email</s-icon-mat>\r\n </div> -->\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</ng-container>", styles: [".content-input-main-626:has(input:focus){border:1px solid var(--primary-600);box-shadow:0 0 0 4px #0091fe26,0 1px 2px #1018280d}.content-input-main-626.theme-green:has(input:focus){border:1px solid var(--green-500);box-shadow:0 0 0 4px #36b37e26,0 1px 2px #1018280d}.content-input-main-626.theme-yellow:has(input:focus){border:1px solid var(--yellow-500);box-shadow:0 0 0 4px #ffab0026,0 1px 2px #1018280d}.content-input-main-626.theme-red:has(input:focus){border:1px solid var(--red-500);box-shadow:0 0 0 4px #ff563026,0 1px 2px #1018280d}.content-input-main-626.sm input{height:22px;font-size:.75rem}.content-input-main-626.sm .icon{width:20px;cursor:default}.content-input-main-626.sm .icon span{font-size:1.2em;display:flex}.content-input-main-626{display:flex;border:1px solid var(--secondary-500);border-radius:4px;padding:0 8px;margin:3px 0;background-color:var(--neutrals-1200)}.content-input-main-626 input{width:100%;border:0px;color:var(--secondary-600);writing-mode:unset;height:36px;font-size:inherit;background-color:var(--neutrals-1200)}.content-input-main-626 input:focus,.content-input-main-626 input:focus-visible{outline:none}.content-input-main-626 .icon{width:20px;cursor:default}.content-input-main-626 .icon span{display:flex}.content-input-main-626 .content-center{width:100%;background-color:var(--neutrals-1200)}.content-input-main-626 .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:8px;color:var(--primary-600)}.content-input-main-626 .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:8px;color:var(--secondary-600)}.disabled-active{background-color:var(--neutrals-1100)}.theme-red{border:1px solid var(--red-500)}.theme-red .icon.report span{color:var(--red-600)}.theme-green{border:1px solid var(--green-500)}.theme-green .icon.report span{color:var(--green-600)}.theme-yellow{border:1px solid var(--yellow-500)}.theme-yellow .icon.report span{color:var(--yellow-600)}.content-input-main-626.content-input-main-password .content-right .icon span{color:var(--secondary-500)}.content-input-main-url .content-left,.content-input-main-color .content-left{border-right:1px solid var(--secondary-500);padding-right:8px;color:var(--secondary-500);font-size:.9rem;padding-left:8px}.content-input-main-url,.content-input-main-color{padding-left:0}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--neutrals-1200) inset!important}\n"], components: [{ type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.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: i1__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
1131
|
+
SInputTextComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SInputTextComponent, selector: "s-input-text", inputs: { text: "text", name: "name", placeHolder: "placeHolder", disabled: "disabled", theme: "theme", type: "type", classAdd: "classAdd", help: "help", size: "size" }, outputs: { textChangeEvent: "textChangeEvent", clickHelpIconEvent: "clickHelpIconEvent" }, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"type\">\r\n <!-- El switch case con cada caso por input ['text', 'password', 'email' , 'phone' , 'url' , 'search']-->\r\n\r\n <!-- case text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <!-- <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">email</s-icon-mat>\r\n </div> -->\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case password -->\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-password {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">vpn_key</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input type=\"{{visibility ? 'text' : 'password'}}\" [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\"\r\n (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon cursor\"\r\n (click)=\"visibility = !visibility\">{{visibility ? 'visibility' :\r\n 'visibility_off'}}</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case email -->\r\n <ng-container *ngSwitchCase=\"'email'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-email {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">mail_outline</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- case phone -->\r\n <ng-container *ngSwitchCase=\"'phone'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-phone {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">phone</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- case url -->\r\n <ng-container *ngSwitchCase=\"'url'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-url {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n http://\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- case search -->\r\n <ng-container *ngSwitchCase=\"'search'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-search {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">search</s-icon-mat>\r\n </div>\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <!-- <div class=\"content-right\">\r\n <s-icon-mat class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case color -->\r\n <ng-container *ngSwitchCase=\"'color'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-color {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-left\">\r\n <input #color [id]=\"name\" [name]=\"name\" type=\"color\" [disabled]=\"disabled\" [(ngModel)]=\"inputText\"\r\n (ngModelChange)=\"onTextChange()\" style=\"width: 40px; padding: 0;\">\r\n </div>\r\n <div class=\"content-center\" (click)=\"this.color.click()\">\r\n <input [type]=\"text\" autocomplete=\"off\" [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" disabled>\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <div\r\n class=\"content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" (ngModelChange)=\"onTextChange()\"\r\n [ngModel]=\"inputText | date:'yyyy-MM-dd' : 'UTC'\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- case default -->\r\n <ng-container *ngSwitchDefault>\r\n <div\r\n class=\"content-input-main-626 content-input-main-text {{size}} theme-{{theme}} {{classAdd}} {{disabledstyle}}\">\r\n <!-- <div class=\"content-left\">\r\n <s-icon-mat class=\"icon\">email</s-icon-mat>\r\n </div> -->\r\n <div class=\"content-center\">\r\n <input [disabled]=\"disabled\" [type]=\"type\" [id]=\"name\" [name]=\"name\" autocomplete=\"off\"\r\n [placeholder]=\"placeHolder\" [(ngModel)]=\"inputText\" (ngModelChange)=\"onTextChange()\">\r\n </div>\r\n <div *ngIf=\"theme != 'default'\" class=\"content-right\">\r\n <s-icon-mat [type]=\"inconSymbol?'symbol':'icon'\" class=\"icon report\">{{iconName}}</s-icon-mat>\r\n </div>\r\n\r\n <div *ngIf=\"theme == 'default' && help\" class=\"content-right\">\r\n <s-icon-mat (click)=\"clickIcon()\" class=\"icon cursor\">help_outline</s-icon-mat>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n</ng-container>", styles: [".content-input-main-626:has(input:focus){border:1px solid var(--primary-600);box-shadow:0 0 0 4px #0091fe26,0 1px 2px #1018280d}.content-input-main-626.theme-green:has(input:focus){border:1px solid var(--green-500);box-shadow:0 0 0 4px #36b37e26,0 1px 2px #1018280d}.content-input-main-626.theme-yellow:has(input:focus){border:1px solid var(--yellow-500);box-shadow:0 0 0 4px #ffab0026,0 1px 2px #1018280d}.content-input-main-626.theme-red:has(input:focus){border:1px solid var(--red-500);box-shadow:0 0 0 4px #ff563026,0 1px 2px #1018280d}.content-input-main-626.sm input{height:22px;font-size:.75rem}.content-input-main-626.sm .icon{width:20px;cursor:default}.content-input-main-626.sm .icon span{font-size:1.2em;display:flex}.content-input-main-626{display:flex;border:1px solid var(--secondary-500);border-radius:4px;padding:0 8px;margin:3px 0;background-color:var(--neutrals-1200)}.content-input-main-626 input{width:100%;border:0px;color:var(--secondary-600);writing-mode:unset;height:36px;font-size:inherit;background-color:var(--neutrals-1200)}.content-input-main-626 input:focus,.content-input-main-626 input:focus-visible{outline:none}.content-input-main-626 .icon{width:20px;cursor:default}.content-input-main-626 .icon span{display:flex}.content-input-main-626 .content-center{width:100%;background-color:var(--neutrals-1200)}.content-input-main-626 .content-left{display:flex;align-items:center;justify-content:space-evenly;margin-right:8px;color:var(--primary-600)}.content-input-main-626 .content-right{display:flex;align-items:center;justify-content:space-evenly;margin-left:8px;color:var(--secondary-600)}.disabled-active{background-color:var(--neutrals-1100)}.theme-red{border:1px solid var(--red-500)}.theme-red .icon.report span{color:var(--red-600)}.theme-green{border:1px solid var(--green-500)}.theme-green .icon.report span{color:var(--green-600)}.theme-yellow{border:1px solid var(--yellow-500)}.theme-yellow .icon.report span{color:var(--yellow-600)}.content-input-main-626.content-input-main-password .content-right .icon span{color:var(--secondary-500)}.content-input-main-url .content-left,.content-input-main-color .content-left{border-right:1px solid var(--secondary-500);padding-right:8px;color:var(--secondary-500);font-size:.9rem;padding-left:8px}.content-input-main-url,.content-input-main-color{padding-left:0}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--neutrals-1200) inset!important}\n"], components: [{ type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }], directives: [{ type: i2__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.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: i1__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "date": i2__namespace.DatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
1132
1132
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SInputTextComponent, decorators: [{
|
|
1133
1133
|
type: i0.Component,
|
|
1134
1134
|
args: [{
|
|
@@ -2796,7 +2796,7 @@
|
|
|
2796
2796
|
this.changeSelectEvent = new i0.EventEmitter();
|
|
2797
2797
|
this.clickButtonEvent = new i0.EventEmitter();
|
|
2798
2798
|
this.submitted = false;
|
|
2799
|
-
this.enabledTypes = ['text', 'password', 'email', 'phone', 'url', 'number', 'button', 'checkbox', 'select', 'color'];
|
|
2799
|
+
this.enabledTypes = ['text', 'password', 'email', 'phone', 'url', 'number', 'button', 'checkbox', 'select', 'color', 'date'];
|
|
2800
2800
|
}
|
|
2801
2801
|
SFormComponent.prototype.ngOnChanges = function (changes) {
|
|
2802
2802
|
var _this = this;
|
|
@@ -2884,7 +2884,7 @@
|
|
|
2884
2884
|
return SFormComponent;
|
|
2885
2885
|
}());
|
|
2886
2886
|
SFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SFormComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2887
|
-
SFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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\" (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}\n"], components: [{ type: SInputTextComponent, selector: "s-input-text", inputs: ["text", "name", "placeHolder", "disabled", "theme", "type", "classAdd", "help", "size"], outputs: ["textChangeEvent", "clickHelpIconEvent"] }, { type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { type: SButtonComponent, selector: "s-button", inputs: ["disabled", "class", "rounded", "pill", "size", "invert", "selected", "type", "border", "loading", "position", "theme"] }, { type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { type: SCheckboxComponent, selector: "s-checkbox", inputs: ["value", "model", "disable", "isUndefined", "label"], outputs: ["emitSelection"] }, { type: SSelectSimpleComponent, selector: "s-select-simple", inputs: ["placeholder", "options", "selectedValue", "label", "display", "size"], outputs: ["selectEvent"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.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: i1__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2887
|
+
SFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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__namespace, 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 ?? '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: SInputTextComponent, selector: "s-input-text", inputs: ["text", "name", "placeHolder", "disabled", "theme", "type", "classAdd", "help", "size"], outputs: ["textChangeEvent", "clickHelpIconEvent"] }, { type: SErrorControl, selector: "s-error-control", inputs: ["theme", "icon", "iconCustom", "size"] }, { type: SButtonComponent, selector: "s-button", inputs: ["disabled", "class", "rounded", "pill", "size", "invert", "selected", "type", "border", "loading", "position", "theme"] }, { type: SIconMaterialComponent, selector: "s-icon-mat", inputs: ["size", "color", "fill", "weight", "grade", "opticalSize", "style", "type"] }, { type: SCheckboxComponent, selector: "s-checkbox", inputs: ["value", "model", "disable", "isUndefined", "label"], outputs: ["emitSelection"] }, { type: SSelectSimpleComponent, selector: "s-select-simple", inputs: ["placeholder", "options", "selectedValue", "label", "display", "size"], outputs: ["selectEvent"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.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: i1__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i1__namespace.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1__namespace.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1__namespace.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
|
|
2888
2888
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SFormComponent, decorators: [{
|
|
2889
2889
|
type: i0.Component,
|
|
2890
2890
|
args: [{
|
|
@@ -3199,6 +3199,8 @@
|
|
|
3199
3199
|
this.invert = false;
|
|
3200
3200
|
this.type = 'primary';
|
|
3201
3201
|
this.icon = '';
|
|
3202
|
+
this.class = '';
|
|
3203
|
+
this.size = 'md';
|
|
3202
3204
|
}
|
|
3203
3205
|
return ButtonControl;
|
|
3204
3206
|
}());
|