@datarailsshared/datarailsshared 1.3.3 → 1.3.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/assets/styles/img/spinner.gif +0 -0
- package/bundles/datarailsshared-datarailsshared.umd.js +188 -11
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.3.4.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-inputs/dr-inputs.module.js +3 -2
- package/esm2015/lib/dr-inputs/dr-select/dr-select.component.js +14 -6
- package/esm2015/lib/dr-inputs/dr-toggle/dr-toggle.component.js +55 -0
- package/esm2015/lib/dr-spinner/dr-spinner.component.js +29 -0
- package/esm2015/lib/dr-spinner/dr-spinner.directive.js +53 -0
- package/esm2015/lib/dr-spinner/dr-spinner.module.js +18 -0
- package/esm2015/public-api.js +5 -1
- package/fesm2015/datarailsshared-datarailsshared.js +166 -13
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-inputs/dr-select/dr-select.component.d.ts +4 -1
- package/lib/dr-inputs/dr-toggle/dr-toggle.component.d.ts +19 -0
- package/lib/dr-spinner/dr-spinner.component.d.ts +10 -0
- package/lib/dr-spinner/dr-spinner.directive.d.ts +15 -0
- package/lib/dr-spinner/dr-spinner.module.d.ts +2 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
- package/datarailsshared-datarailsshared-1.3.3.tgz +0 -0
|
@@ -6,7 +6,8 @@ import { DrInputComponent } from './dr-input/dr-input.component';
|
|
|
6
6
|
import { DrSelectComponent } from './dr-select/dr-select.component';
|
|
7
7
|
import { CheckboxComponent } from './checkbox/checkbox.component';
|
|
8
8
|
import { RadioButtonComponent } from './radio-button/radio-button.component';
|
|
9
|
-
|
|
9
|
+
import { DrToggleComponent } from './dr-toggle/dr-toggle.component';
|
|
10
|
+
const components = [RadioButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrToggleComponent];
|
|
10
11
|
export class DrInputsModule {
|
|
11
12
|
}
|
|
12
13
|
DrInputsModule.decorators = [
|
|
@@ -21,4 +22,4 @@ DrInputsModule.decorators = [
|
|
|
21
22
|
]
|
|
22
23
|
},] }
|
|
23
24
|
];
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItaW5wdXRzLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9kci1pbnB1dHMubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFFdEQsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDakUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDcEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDbEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDN0UsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFFcEUsTUFBTSxVQUFVLEdBQUcsQ0FBQyxvQkFBb0IsRUFBRSxpQkFBaUIsRUFBRSxnQkFBZ0IsRUFBRSxpQkFBaUIsRUFBRSxpQkFBaUIsQ0FBQyxDQUFDO0FBYXJILE1BQU0sT0FBTyxjQUFjOzs7WUFYMUIsUUFBUSxTQUFDO2dCQUNSLFlBQVksRUFBRSxVQUFVO2dCQUN4QixPQUFPLEVBQUUsVUFBVTtnQkFDbkIsT0FBTyxFQUFFO29CQUNQLFdBQVc7b0JBQ1gsbUJBQW1CO29CQUNuQixZQUFZO29CQUNaLGNBQWM7aUJBQ2Y7YUFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XHJcblxyXG5pbXBvcnQgeyBOZ1NlbGVjdE1vZHVsZSB9IGZyb20gXCJAbmctc2VsZWN0L25nLXNlbGVjdFwiO1xyXG5cclxuaW1wb3J0IHsgRHJJbnB1dENvbXBvbmVudCB9IGZyb20gJy4vZHItaW5wdXQvZHItaW5wdXQuY29tcG9uZW50JztcclxuaW1wb3J0IHsgRHJTZWxlY3RDb21wb25lbnQgfSBmcm9tICcuL2RyLXNlbGVjdC9kci1zZWxlY3QuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQ2hlY2tib3hDb21wb25lbnQgfSBmcm9tICcuL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFJhZGlvQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi9yYWRpby1idXR0b24vcmFkaW8tYnV0dG9uLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IERyVG9nZ2xlQ29tcG9uZW50IH0gZnJvbSAnLi9kci10b2dnbGUvZHItdG9nZ2xlLmNvbXBvbmVudCc7XHJcblxyXG5jb25zdCBjb21wb25lbnRzID0gW1JhZGlvQnV0dG9uQ29tcG9uZW50LCBDaGVja2JveENvbXBvbmVudCwgRHJJbnB1dENvbXBvbmVudCwgRHJTZWxlY3RDb21wb25lbnQsIERyVG9nZ2xlQ29tcG9uZW50XTtcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBjb21wb25lbnRzLFxyXG4gIGV4cG9ydHM6IGNvbXBvbmVudHMsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgRm9ybXNNb2R1bGUsXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gICAgTmdTZWxlY3RNb2R1bGUsXHJcbiAgXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIERySW5wdXRzTW9kdWxlIHtcclxuXHJcbn1cclxuIl19
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
1
|
+
import { Component, ContentChild, Input } from '@angular/core';
|
|
2
2
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
3
|
export class DrSelectComponent {
|
|
4
4
|
constructor() {
|
|
5
|
+
this.items = [];
|
|
6
|
+
this.appendTo = 'body';
|
|
7
|
+
this.disabled = false;
|
|
5
8
|
this.onChange = () => { };
|
|
6
9
|
this.onTouched = () => { };
|
|
7
10
|
}
|
|
8
11
|
writeValue(value) {
|
|
9
12
|
this.selectedItem = value;
|
|
13
|
+
this.onChange(this.selectedItem);
|
|
10
14
|
}
|
|
11
15
|
registerOnChange(fn) {
|
|
12
16
|
this.onChange = fn;
|
|
@@ -14,17 +18,20 @@ export class DrSelectComponent {
|
|
|
14
18
|
registerOnTouched(fn) {
|
|
15
19
|
this.onTouched = fn;
|
|
16
20
|
}
|
|
21
|
+
setDisabledState(isDisabled) {
|
|
22
|
+
this.disabled = isDisabled;
|
|
23
|
+
}
|
|
17
24
|
}
|
|
18
25
|
DrSelectComponent.decorators = [
|
|
19
26
|
{ type: Component, args: [{
|
|
20
27
|
selector: 'dr-select',
|
|
21
|
-
template: " <ng-select
|
|
28
|
+
template: " <ng-select [(ngModel)]=\"selectedItem\"\r\n [items]=\"items\"\r\n [bindLabel]=\"bindLabel\"\r\n [bindValue]=\"bindValue\"\r\n [multiple]=\"multiple\"\r\n [addTag]=\"addTag\"\r\n [appendTo]=\"appendTo\"\r\n [clearable]=\"clearable\"\r\n [searchable]=\"searchable\"\r\n [hideSelected]=\"hideSelected\"\r\n [placeholder]=\"placeholder\"\r\n [loading]=\"loading\"\r\n [readonly]=\"readonly\"\r\n [disabled]=\"disabled\"\r\n [id]=\"id\"\r\n [keyDownFn]=\"keyDownFn\"\r\n [searchFn]=\"searchFn\"\r\n (change)=\"onChange($event)\"\r\n class=\"dr-select\">\r\n <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n </ng-template>\r\n <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\r\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n </ng-template>\r\n </ng-select>\r\n",
|
|
22
29
|
providers: [{
|
|
23
30
|
provide: NG_VALUE_ACCESSOR,
|
|
24
31
|
useExisting: DrSelectComponent,
|
|
25
32
|
multi: true
|
|
26
33
|
}],
|
|
27
|
-
styles: [":host
|
|
34
|
+
styles: [":host{width:100%;height:32px}:host ::ng-deep ng-select.ng-select .ng-select-container{min-height:32px;height:32px;width:100%;border-radius:6px!important;border:1px solid #C3C4CE;box-shadow:none!important}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#85889c}:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#21b8f1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-input{top:0!important;line-height:30px;padding:0 50px 0 8px!important;color:#151b3f;font-size:14px;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding:0 0 0 8px;height:100%;overflow:auto}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-value{line-height:1}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container .ng-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{color:#151a41;height:24px;padding:2px 8px;font-size:12px;margin:2px 2px 2px 0;background:#E5E6EA;display:flex;flex-direction:row-reverse;align-items:center;border-radius:12px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-label{line-height:20px;padding:0!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon{border:none!important;padding:0 0 0 9px!important;color:#51566f;font-size:16px;font-weight:bold}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon,:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value-icon:hover{background:transparent!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within{background:#E5E6EA!important;border:1px solid #E5E6EA!important}:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:hover .ng-value,:host ::ng-deep ng-select.ng-select.ng-select-disabled .ng-select-container:focus-within .ng-value{color:#bcbcbc!important}:host ::ng-deep ng-select.ng-select.ng-select-single.ng-invalid.ng-touched .ng-select-container,:host ::ng-deep ng-select.ng-select.ng-select-multiple.ng-invalid.ng-touched .ng-select-container{border-color:#de2833}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select{border:1px solid #DBDEE3;border-radius:6px!important;margin-top:8px!important;overflow:hidden}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;height:36px;padding:0 12px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-marked{background:#fff}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{background:#F3F7FF;color:#151b3f}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected span,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked span{font-weight:normal!important}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected:hover,::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked:hover{background:#F6F7F8}\n"]
|
|
28
35
|
},] }
|
|
29
36
|
];
|
|
30
37
|
DrSelectComponent.propDecorators = {
|
|
@@ -45,7 +52,8 @@ DrSelectComponent.propDecorators = {
|
|
|
45
52
|
disabled: [{ type: Input }],
|
|
46
53
|
id: [{ type: Input }],
|
|
47
54
|
keyDownFn: [{ type: Input }],
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
selectedItem: [{ type: Input }],
|
|
56
|
+
labelTemplate: [{ type: ContentChild, args: ['labelTemplate',] }],
|
|
57
|
+
optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }]
|
|
50
58
|
};
|
|
51
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
59
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9kci1zZWxlY3QvZHItc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWUsTUFBTSxlQUFlLENBQUM7QUFDNUUsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBWXpFLE1BQU0sT0FBTyxpQkFBaUI7SUFWOUI7UUFhYSxVQUFLLEdBQWUsRUFBRSxDQUFDO1FBRXZCLGFBQVEsR0FBRyxNQUFNLENBQUM7UUFXbEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQVExQixhQUFRLEdBQTZCLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUM5QyxjQUFTLEdBQWUsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBZXJDLENBQUM7SUFiRyxVQUFVLENBQUMsS0FBVTtRQUNqQixJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztRQUMxQixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBQ0QsZ0JBQWdCLENBQUMsRUFBTztRQUNwQixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBQ0QsaUJBQWlCLENBQUMsRUFBTztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBQ0QsZ0JBQWdCLENBQUMsVUFBbUI7UUFDaEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDL0IsQ0FBQzs7O1lBakRKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsV0FBVztnQkFDckIsMnNDQUF5QztnQkFFekMsU0FBUyxFQUFFLENBQUM7d0JBQ1IsT0FBTyxFQUFFLGlCQUFpQjt3QkFDMUIsV0FBVyxFQUFFLGlCQUFpQjt3QkFDOUIsS0FBSyxFQUFFLElBQUk7cUJBQ2QsQ0FBQzs7YUFDTDs7O3dCQUdJLEtBQUs7b0JBQ0wsS0FBSztxQkFDTCxLQUFLO3VCQUNMLEtBQUs7d0JBQ0wsS0FBSzt3QkFDTCxLQUFLO3dCQUNMLEtBQUs7eUJBQ0wsS0FBSzt1QkFDTCxLQUFLO3VCQUNMLEtBQUs7MkJBQ0wsS0FBSzswQkFDTCxLQUFLO3NCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFDTCxLQUFLO2lCQUNMLEtBQUs7d0JBQ0wsS0FBSzsyQkFDTCxLQUFLOzRCQUVMLFlBQVksU0FBQyxlQUFlOzZCQUM1QixZQUFZLFNBQUMsZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIElucHV0LCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnZHItc2VsZWN0JyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9kci1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZHItc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBwcm92aWRlcnM6IFt7XHJcbiAgICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXHJcbiAgICAgICAgdXNlRXhpc3Rpbmc6IERyU2VsZWN0Q29tcG9uZW50LFxyXG4gICAgICAgIG11bHRpOiB0cnVlXHJcbiAgICB9XVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJTZWxlY3RDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcblxyXG4gICAgQElucHV0KCkgY2xhc3NOYW1lOiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBpdGVtczogQXJyYXk8YW55PiA9IFtdO1xyXG4gICAgQElucHV0KCkgYWRkVGFnOiBib29sZWFuIHwgKCh0ZXJtOiBzdHJpbmcpID0+IGFueSB8IFByb21pc2U8YW55Pik7XHJcbiAgICBASW5wdXQoKSBhcHBlbmRUbyA9ICdib2R5JztcclxuICAgIEBJbnB1dCgpIGJpbmRMYWJlbDogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgYmluZFZhbHVlOiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBjbGVhcmFibGU6IGJvb2xlYW47XHJcbiAgICBASW5wdXQoKSBzZWFyY2hhYmxlOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgc2VhcmNoRm46ICh0ZXJtOiBzdHJpbmcsIGl0ZW06IGFueSkgPT4gYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIG11bHRpcGxlOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgaGlkZVNlbGVjdGVkOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZztcclxuICAgIEBJbnB1dCgpIGxvYWRpbmc6IGJvb2xlYW47XHJcbiAgICBASW5wdXQoKSByZWFkb25seTogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBpZDogc3RyaW5nO1xyXG4gICAgQElucHV0KCkga2V5RG93bkZuOiAoJGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgc2VsZWN0ZWRJdGVtOiBhbnk7XHJcblxyXG4gICAgQENvbnRlbnRDaGlsZCgnbGFiZWxUZW1wbGF0ZScpIGxhYmVsVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgICBAQ29udGVudENoaWxkKCdvcHRpb25UZW1wbGF0ZScpIG9wdGlvblRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICAgIG9uQ2hhbmdlOiAodmFsdWU6IGJvb2xlYW4pID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuICAgIG9uVG91Y2hlZDogKCkgPT4gdm9pZCA9ICgpID0+IHt9O1xyXG5cclxuICAgIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtID0gdmFsdWU7XHJcbiAgICAgICAgdGhpcy5vbkNoYW5nZSh0aGlzLnNlbGVjdGVkSXRlbSk7XHJcbiAgICB9XHJcbiAgICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLm9uQ2hhbmdlID0gZm47XHJcbiAgICB9XHJcbiAgICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcclxuICAgIH1cclxuICAgIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbikge1xyXG4gICAgICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
export class DrToggleComponent {
|
|
4
|
+
constructor(cdr) {
|
|
5
|
+
this.cdr = cdr;
|
|
6
|
+
this._disabled = false;
|
|
7
|
+
this.checkedChange = new EventEmitter();
|
|
8
|
+
this.onChange = () => { };
|
|
9
|
+
this.onTouched = () => { };
|
|
10
|
+
}
|
|
11
|
+
set disabled(value) {
|
|
12
|
+
this.setDisabledState(value);
|
|
13
|
+
}
|
|
14
|
+
writeValue(value) {
|
|
15
|
+
this.checkedStatus = value;
|
|
16
|
+
this.cdr.markForCheck();
|
|
17
|
+
}
|
|
18
|
+
registerOnChange(fn) {
|
|
19
|
+
this.onChange = fn;
|
|
20
|
+
}
|
|
21
|
+
registerOnTouched(fn) {
|
|
22
|
+
this.onTouched = fn;
|
|
23
|
+
}
|
|
24
|
+
setDisabledState(isDisabled) {
|
|
25
|
+
this._disabled = isDisabled;
|
|
26
|
+
}
|
|
27
|
+
setValue() {
|
|
28
|
+
this.checkedStatus = !this.checkedStatus;
|
|
29
|
+
this.onChange(this.checkedStatus);
|
|
30
|
+
this.checkedChange.emit(this.checkedStatus);
|
|
31
|
+
this.onTouched();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
DrToggleComponent.decorators = [
|
|
35
|
+
{ type: Component, args: [{
|
|
36
|
+
selector: 'dr-toggle',
|
|
37
|
+
template: "<span *ngIf=\"toggleTitle\">{{toggleTitle}}</span>\r\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\r\n <input type=\"checkbox\"\r\n [checked]=\"checkedStatus\"\r\n [disabled]=\"_disabled\"\r\n (click)=\"setValue()\">\r\n <span class=\"toggle-body\">\r\n <i></i>\r\n <ng-content></ng-content>\r\n </span>\r\n</label>\r\n",
|
|
38
|
+
providers: [
|
|
39
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
|
|
40
|
+
],
|
|
41
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
42
|
+
styles: [":host{display:flex;justify-content:space-between;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:rgba(143,155,179,.24)!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#579bf2}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#aeb5bb}:host .toggle-container .toggle-body:active{background-color:#a6b9cb}:host .toggle-container .toggle-body-wrapper{display:flex;flex-direction:column}:host .toggle-container .toggle-body i{height:12px;width:12px;background:#fff;display:inline-block;border-radius:100px;margin-top:2px;margin-left:1.5px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;pointer-events:none}\n"]
|
|
43
|
+
},] }
|
|
44
|
+
];
|
|
45
|
+
DrToggleComponent.ctorParameters = () => [
|
|
46
|
+
{ type: ChangeDetectorRef }
|
|
47
|
+
];
|
|
48
|
+
DrToggleComponent.propDecorators = {
|
|
49
|
+
toggleTitle: [{ type: Input }],
|
|
50
|
+
successType: [{ type: Input }],
|
|
51
|
+
checkedStatus: [{ type: Input }],
|
|
52
|
+
disabled: [{ type: Input }],
|
|
53
|
+
checkedChange: [{ type: Output }]
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItdG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9kci10b2dnbGUvZHItdG9nZ2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF1QixpQkFBaUIsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBV3ZFLE1BQU0sT0FBTyxpQkFBaUI7SUFjMUIsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFiMUMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQVdSLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUk3QyxhQUFRLEdBQTZCLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUM5QyxjQUFTLEdBQWUsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBSFksQ0FBQztJQUw5QyxJQUFhLFFBQVEsQ0FBQyxLQUFLO1FBQ3ZCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBUUQsVUFBVSxDQUFDLEtBQWM7UUFDckIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDM0IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUNwQixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBQ0QsZ0JBQWdCLENBQUUsVUFBbUI7UUFDakMsSUFBSSxDQUFDLFNBQVMsR0FBRyxVQUFVLENBQUM7SUFDaEMsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUN6QyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDNUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ3JCLENBQUM7OztZQWpESixTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLFdBQVc7Z0JBQ3JCLHFiQUF5QztnQkFFekMsU0FBUyxFQUFFO29CQUNQLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDO2lCQUM1RTtnQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDbEQ7OztZQWhCRyxpQkFBaUI7OzswQkFvQmhCLEtBQUs7MEJBRUwsS0FBSzs0QkFFTCxLQUFLO3VCQUVMLEtBQUs7NEJBR0wsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcclxuICAgIENoYW5nZURldGVjdG9yUmVmLFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgRXZlbnRFbWl0dGVyLFxyXG4gICAgSW5wdXQsXHJcbiAgICBPdXRwdXRcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdkci10b2dnbGUnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyLXRvZ2dsZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9kci10b2dnbGUuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIHByb3ZpZGVyczogW1xyXG4gICAgICAgIHtwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUiwgdXNlRXhpc3Rpbmc6IERyVG9nZ2xlQ29tcG9uZW50LCBtdWx0aTogdHJ1ZX1cclxuICAgIF0sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJUb2dnbGVDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcbiAgICBfZGlzYWJsZWQgPSBmYWxzZTtcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgdG9nZ2xlVGl0bGU6IGFueTtcclxuICAgIEBJbnB1dCgpXHJcbiAgICBzdWNjZXNzVHlwZTogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpXHJcbiAgICBjaGVja2VkU3RhdHVzOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgc2V0IGRpc2FibGVkKHZhbHVlKSB7XHJcbiAgICAgICAgdGhpcy5zZXREaXNhYmxlZFN0YXRlKHZhbHVlKTtcclxuICAgIH1cclxuICAgIEBPdXRwdXQoKSBjaGVja2VkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cclxuXHJcbiAgICBvbkNoYW5nZTogKHZhbHVlOiBib29sZWFuKSA9PiB2b2lkID0gKCkgPT4ge307XHJcbiAgICBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuXHJcbiAgICB3cml0ZVZhbHVlKHZhbHVlOiBib29sZWFuKSB7XHJcbiAgICAgICAgdGhpcy5jaGVja2VkU3RhdHVzID0gdmFsdWU7XHJcbiAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KSB7XHJcbiAgICAgICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xyXG4gICAgfVxyXG5cclxuICAgIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpIHtcclxuICAgICAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xyXG4gICAgfVxyXG4gICAgc2V0RGlzYWJsZWRTdGF0ZT8oaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuX2Rpc2FibGVkID0gaXNEaXNhYmxlZDtcclxuICAgIH1cclxuXHJcbiAgICBzZXRWYWx1ZSgpIHtcclxuICAgICAgICB0aGlzLmNoZWNrZWRTdGF0dXMgPSAhdGhpcy5jaGVja2VkU3RhdHVzO1xyXG4gICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy5jaGVja2VkU3RhdHVzKTtcclxuICAgICAgICB0aGlzLmNoZWNrZWRDaGFuZ2UuZW1pdCh0aGlzLmNoZWNrZWRTdGF0dXMpO1xyXG4gICAgICAgIHRoaXMub25Ub3VjaGVkKCk7XHJcbiAgICB9XHJcbn1cclxuIl19
|