@datarailsshared/datarailsshared 1.3.30 → 1.3.31
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/_datarailsshared.styles.css +3 -3
- package/assets/styles/_styles.scss +2 -2
- package/assets/styles/img/default-avatar.svg +5 -5
- package/bundles/datarailsshared-datarailsshared.umd.js +3374 -3346
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.3.31.tgz +0 -0
- package/datarailsshared-datarailsshared.d.ts +7 -7
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/datarailsshared-datarailsshared.js +7 -7
- package/esm2015/lib/date-tags/date-tag.component.js +70 -70
- package/esm2015/lib/date-tags/date-tag.module.js +50 -50
- package/esm2015/lib/date-tags/day-tag/day-tag.component.js +81 -81
- package/esm2015/lib/date-tags/forecast-tag/forecast-tag.component.js +143 -143
- package/esm2015/lib/date-tags/month-tag/month-tag.component.js +87 -87
- package/esm2015/lib/date-tags/quarter-tag/quarter-tag.component.js +101 -101
- package/esm2015/lib/date-tags/week-tag/week-tag.component.js +124 -124
- package/esm2015/lib/date-tags/year-tag/year-tag.component.js +93 -93
- package/esm2015/lib/dr-avatar/dr-avatar.component.js +42 -42
- package/esm2015/lib/dr-avatar/dr-avatar.module.js +26 -26
- package/esm2015/lib/dr-avatar/dr-avatar.pipe.js +15 -15
- package/esm2015/lib/dr-dropdown/dr-dropdown-item-show.pipe.js +12 -12
- package/esm2015/lib/dr-dropdown/dr-dropdown-position.directive.js +89 -89
- package/esm2015/lib/dr-dropdown/dr-dropdown.component.js +103 -103
- package/esm2015/lib/dr-dropdown/dr-dropdown.directive.js +75 -75
- package/esm2015/lib/dr-dropdown/dr-dropdown.module.js +34 -34
- package/esm2015/lib/dr-dropdown/dr-dropdown.service.js +24 -24
- package/esm2015/lib/dr-inputs/button/button.component.js +79 -79
- package/esm2015/lib/dr-inputs/checkbox/checkbox.component.js +63 -63
- package/esm2015/lib/dr-inputs/dr-date-picker/dr-date-picker-format.directive.js +47 -47
- package/esm2015/lib/dr-inputs/dr-date-picker/dr-date-picker.component.js +131 -131
- package/esm2015/lib/dr-inputs/dr-input/dr-input.component.js +181 -166
- package/esm2015/lib/dr-inputs/dr-inputs.module.js +43 -43
- package/esm2015/lib/dr-inputs/dr-select/dr-select.component.js +87 -87
- package/esm2015/lib/dr-inputs/dr-toggle/dr-toggle.component.js +64 -64
- package/esm2015/lib/dr-inputs/dr-toggle-button/dr-toggle-button.component.js +52 -52
- package/esm2015/lib/dr-inputs/radio-button/radio-button.component.js +64 -64
- package/esm2015/lib/dr-inputs/radio-button/radio-group.component.js +164 -164
- package/esm2015/lib/dr-popover/dr-popover-ref.js +20 -20
- package/esm2015/lib/dr-popover/dr-popover.component.js +77 -77
- package/esm2015/lib/dr-popover/dr-popover.directive.js +72 -72
- package/esm2015/lib/dr-popover/dr-popover.module.js +23 -23
- package/esm2015/lib/dr-popover/dr-popover.service.js +102 -102
- package/esm2015/lib/dr-spinner/dr-spinner.component.js +29 -29
- package/esm2015/lib/dr-spinner/dr-spinner.directive.js +53 -53
- package/esm2015/lib/dr-spinner/dr-spinner.module.js +18 -18
- package/esm2015/lib/dr-tabs/dr-tab.component.js +23 -23
- package/esm2015/lib/dr-tabs/dr-tabs.component.js +28 -27
- package/esm2015/lib/dr-tabs/dr-tabs.module.js +30 -30
- package/esm2015/lib/dr-tags/dr-tag.component.js +54 -54
- package/esm2015/lib/dr-tags/dr-tag.module.js +22 -22
- package/esm2015/lib/dr-tooltip/dr-tooltip.component.js +30 -30
- package/esm2015/lib/dr-tooltip/dr-tooltip.directive.js +102 -102
- package/esm2015/lib/dr-tooltip/dr-tooltip.module.js +23 -23
- package/esm2015/lib/list-tags/list-tag.component.js +41 -41
- package/esm2015/lib/list-tags/list-tag.module.js +29 -29
- package/esm2015/lib/models/constants.js +97 -97
- package/esm2015/lib/models/datePicker.js +37 -37
- package/esm2015/lib/models/dropdown.js +2 -2
- package/esm2015/lib/models/popover.js +27 -27
- package/esm2015/lib/models/serverTags.js +2 -2
- package/esm2015/public-api.js +50 -50
- package/fesm2015/datarailsshared-datarailsshared.js +2794 -2778
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/date-tags/date-tag.component.d.ts +27 -27
- package/lib/date-tags/date-tag.module.d.ts +4 -4
- package/lib/date-tags/day-tag/day-tag.component.d.ts +12 -12
- package/lib/date-tags/forecast-tag/forecast-tag.component.d.ts +21 -21
- package/lib/date-tags/month-tag/month-tag.component.d.ts +14 -14
- package/lib/date-tags/quarter-tag/quarter-tag.component.d.ts +17 -17
- package/lib/date-tags/week-tag/week-tag.component.d.ts +19 -19
- package/lib/date-tags/year-tag/year-tag.component.d.ts +14 -14
- package/lib/dr-avatar/dr-avatar.component.d.ts +10 -10
- package/lib/dr-avatar/dr-avatar.module.d.ts +2 -2
- package/lib/dr-avatar/dr-avatar.pipe.d.ts +4 -4
- package/lib/dr-dropdown/dr-dropdown-item-show.pipe.d.ts +5 -5
- package/lib/dr-dropdown/dr-dropdown-position.directive.d.ts +11 -11
- package/lib/dr-dropdown/dr-dropdown.component.d.ts +23 -23
- package/lib/dr-dropdown/dr-dropdown.directive.d.ts +19 -19
- package/lib/dr-dropdown/dr-dropdown.module.d.ts +2 -2
- package/lib/dr-dropdown/dr-dropdown.service.d.ts +11 -11
- package/lib/dr-inputs/button/button.component.d.ts +20 -20
- package/lib/dr-inputs/checkbox/checkbox.component.d.ts +20 -20
- package/lib/dr-inputs/dr-date-picker/dr-date-picker-format.directive.d.ts +10 -10
- package/lib/dr-inputs/dr-date-picker/dr-date-picker.component.d.ts +28 -28
- package/lib/dr-inputs/dr-input/dr-input.component.d.ts +55 -53
- package/lib/dr-inputs/dr-inputs.module.d.ts +2 -2
- package/lib/dr-inputs/dr-select/dr-select.component.d.ts +36 -36
- package/lib/dr-inputs/dr-toggle/dr-toggle.component.d.ts +23 -23
- package/lib/dr-inputs/dr-toggle-button/dr-toggle-button.component.d.ts +17 -17
- package/lib/dr-inputs/radio-button/radio-button.component.d.ts +21 -21
- package/lib/dr-inputs/radio-button/radio-group.component.d.ts +39 -39
- package/lib/dr-popover/dr-popover-ref.d.ts +16 -16
- package/lib/dr-popover/dr-popover.component.d.ts +26 -26
- package/lib/dr-popover/dr-popover.directive.d.ts +26 -26
- package/lib/dr-popover/dr-popover.module.d.ts +2 -2
- package/lib/dr-popover/dr-popover.service.d.ts +17 -17
- package/lib/dr-spinner/dr-spinner.component.d.ts +10 -10
- package/lib/dr-spinner/dr-spinner.directive.d.ts +15 -15
- package/lib/dr-spinner/dr-spinner.module.d.ts +2 -2
- package/lib/dr-tabs/dr-tab.component.d.ts +8 -8
- package/lib/dr-tabs/dr-tabs.component.d.ts +11 -10
- package/lib/dr-tabs/dr-tabs.module.d.ts +2 -2
- package/lib/dr-tags/dr-tag.component.d.ts +15 -15
- package/lib/dr-tags/dr-tag.module.d.ts +2 -2
- package/lib/dr-tooltip/dr-tooltip.component.d.ts +16 -16
- package/lib/dr-tooltip/dr-tooltip.directive.d.ts +23 -23
- package/lib/dr-tooltip/dr-tooltip.module.d.ts +2 -2
- package/lib/list-tags/list-tag.component.d.ts +14 -14
- package/lib/list-tags/list-tag.module.d.ts +2 -2
- package/lib/models/constants.d.ts +87 -87
- package/lib/models/datePicker.d.ts +21 -21
- package/lib/models/dropdown.d.ts +47 -47
- package/lib/models/popover.d.ts +32 -32
- package/lib/models/serverTags.d.ts +28 -28
- package/package.json +1 -1
- package/public-api.d.ts +49 -49
- package/datarailsshared-datarailsshared-1.3.30.tgz +0 -0
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
import { Component, ContentChild, EventEmitter, Input, Output, ElementRef } from '@angular/core';
|
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
-
const SELECT_HOST_ATTRIBUTES = [
|
|
4
|
-
'no-left-border',
|
|
5
|
-
'no-left-border-radius',
|
|
6
|
-
'no-right-border',
|
|
7
|
-
'no-right-border-radius',
|
|
8
|
-
];
|
|
9
|
-
export class DrSelectComponent {
|
|
10
|
-
constructor(elementRef) {
|
|
11
|
-
this.elementRef = elementRef;
|
|
12
|
-
this.items = [];
|
|
13
|
-
this.appendTo = 'body';
|
|
14
|
-
this.disabled = false;
|
|
15
|
-
this.keyDownFn = () => true;
|
|
16
|
-
this.change = new EventEmitter();
|
|
17
|
-
this.onChange = () => { };
|
|
18
|
-
this.onTouched = () => { };
|
|
19
|
-
for (const attr of SELECT_HOST_ATTRIBUTES) {
|
|
20
|
-
if (this.hasHostAttributes(attr)) {
|
|
21
|
-
(this.getHostElement()).classList.add(attr);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
writeValue(value) {
|
|
26
|
-
this.selectedItem = value;
|
|
27
|
-
this.onChange(this.selectedItem);
|
|
28
|
-
}
|
|
29
|
-
registerOnChange(fn) {
|
|
30
|
-
this.onChange = fn;
|
|
31
|
-
if (fn && this.selectedItem) {
|
|
32
|
-
this.onChange(this.selectedItem);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
registerOnTouched(fn) {
|
|
36
|
-
this.onTouched = fn;
|
|
37
|
-
}
|
|
38
|
-
setDisabledState(isDisabled) {
|
|
39
|
-
this.disabled = isDisabled;
|
|
40
|
-
}
|
|
41
|
-
getHostElement() {
|
|
42
|
-
return this.elementRef.nativeElement;
|
|
43
|
-
}
|
|
44
|
-
hasHostAttributes(...attributes) {
|
|
45
|
-
return attributes.some(attribute => this.getHostElement().hasAttribute(attribute));
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
DrSelectComponent.decorators = [
|
|
49
|
-
{ type: Component, args: [{
|
|
50
|
-
selector: 'dr-select',
|
|
51
|
-
template: " <ng-select [(ngModel)]=\"selectedItem\"\n [items]=\"items\"\n [bindLabel]=\"bindLabel\"\n [bindValue]=\"bindValue\"\n [multiple]=\"multiple\"\n [addTag]=\"addTag\"\n [appendTo]=\"appendTo\"\n [clearable]=\"clearable\"\n [searchable]=\"searchable\"\n [hideSelected]=\"hideSelected\"\n [placeholder]=\"placeholder\"\n [loading]=\"loading\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [id]=\"id\"\n [keyDownFn]=\"keyDownFn\"\n [searchFn]=\"searchFn\"\n (change)=\"change.emit(selectedItem); onChange(selectedItem)\"\n class=\"dr-select\">\n <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"labelTemplate\" ng-label-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"labelTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n </ng-template>\n <ng-template *ngIf=\"optionTemplate\" ng-option-tmp let-item=\"item\">\n <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n </ng-template>\n </ng-select>\n",
|
|
52
|
-
providers: [{
|
|
53
|
-
provide: NG_VALUE_ACCESSOR,
|
|
54
|
-
useExisting: DrSelectComponent,
|
|
55
|
-
multi: true
|
|
56
|
-
}],
|
|
57
|
-
styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}: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-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}: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:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::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"]
|
|
58
|
-
},] }
|
|
59
|
-
];
|
|
60
|
-
DrSelectComponent.ctorParameters = () => [
|
|
61
|
-
{ type: ElementRef }
|
|
62
|
-
];
|
|
63
|
-
DrSelectComponent.propDecorators = {
|
|
64
|
-
className: [{ type: Input }],
|
|
65
|
-
items: [{ type: Input }],
|
|
66
|
-
addTag: [{ type: Input }],
|
|
67
|
-
appendTo: [{ type: Input }],
|
|
68
|
-
bindLabel: [{ type: Input }],
|
|
69
|
-
bindValue: [{ type: Input }],
|
|
70
|
-
clearable: [{ type: Input }],
|
|
71
|
-
searchable: [{ type: Input }],
|
|
72
|
-
searchFn: [{ type: Input }],
|
|
73
|
-
multiple: [{ type: Input }],
|
|
74
|
-
hideSelected: [{ type: Input }],
|
|
75
|
-
placeholder: [{ type: Input }],
|
|
76
|
-
loading: [{ type: Input }],
|
|
77
|
-
readonly: [{ type: Input }],
|
|
78
|
-
disabled: [{ type: Input }],
|
|
79
|
-
id: [{ type: Input }],
|
|
80
|
-
keyDownFn: [{ type: Input }],
|
|
81
|
-
selectedItem: [{ type: Input }],
|
|
82
|
-
change: [{ type: Output }],
|
|
83
|
-
labelTemplate: [{ type: ContentChild, args: ['labelTemplate',] }],
|
|
84
|
-
optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }],
|
|
85
|
-
optionHeaderTemplate: [{ type: ContentChild, args: ['optionHeaderTemplate',] }]
|
|
86
|
-
};
|
|
87
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { Component, ContentChild, EventEmitter, Input, Output, ElementRef } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
const SELECT_HOST_ATTRIBUTES = [
|
|
4
|
+
'no-left-border',
|
|
5
|
+
'no-left-border-radius',
|
|
6
|
+
'no-right-border',
|
|
7
|
+
'no-right-border-radius',
|
|
8
|
+
];
|
|
9
|
+
export class DrSelectComponent {
|
|
10
|
+
constructor(elementRef) {
|
|
11
|
+
this.elementRef = elementRef;
|
|
12
|
+
this.items = [];
|
|
13
|
+
this.appendTo = 'body';
|
|
14
|
+
this.disabled = false;
|
|
15
|
+
this.keyDownFn = () => true;
|
|
16
|
+
this.change = new EventEmitter();
|
|
17
|
+
this.onChange = () => { };
|
|
18
|
+
this.onTouched = () => { };
|
|
19
|
+
for (const attr of SELECT_HOST_ATTRIBUTES) {
|
|
20
|
+
if (this.hasHostAttributes(attr)) {
|
|
21
|
+
(this.getHostElement()).classList.add(attr);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
writeValue(value) {
|
|
26
|
+
this.selectedItem = value;
|
|
27
|
+
this.onChange(this.selectedItem);
|
|
28
|
+
}
|
|
29
|
+
registerOnChange(fn) {
|
|
30
|
+
this.onChange = fn;
|
|
31
|
+
if (fn && this.selectedItem) {
|
|
32
|
+
this.onChange(this.selectedItem);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
registerOnTouched(fn) {
|
|
36
|
+
this.onTouched = fn;
|
|
37
|
+
}
|
|
38
|
+
setDisabledState(isDisabled) {
|
|
39
|
+
this.disabled = isDisabled;
|
|
40
|
+
}
|
|
41
|
+
getHostElement() {
|
|
42
|
+
return this.elementRef.nativeElement;
|
|
43
|
+
}
|
|
44
|
+
hasHostAttributes(...attributes) {
|
|
45
|
+
return attributes.some(attribute => this.getHostElement().hasAttribute(attribute));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
DrSelectComponent.decorators = [
|
|
49
|
+
{ type: Component, args: [{
|
|
50
|
+
selector: 'dr-select',
|
|
51
|
+
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)=\"change.emit(selectedItem); onChange(selectedItem)\"\r\n class=\"dr-select\">\r\n <ng-template *ngIf=\"optionHeaderTemplate\" ng-header-tmp let-item=\"item\">\r\n <ng-container [ngTemplateOutlet]=\"optionHeaderTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n </ng-template>\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",
|
|
52
|
+
providers: [{
|
|
53
|
+
provide: NG_VALUE_ACCESSOR,
|
|
54
|
+
useExisting: DrSelectComponent,
|
|
55
|
+
multi: true
|
|
56
|
+
}],
|
|
57
|
+
styles: [":host{width:100%;height:32px}:host.no-left-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-left-radius:0!important;border-top-left-radius:0!important}:host.no-right-border-radius ::ng-deep ng-select.ng-select .ng-select-container{border-bottom-right-radius:0!important;border-top-right-radius:0!important}:host.no-right-border ::ng-deep ng-select.ng-select .ng-select-container{border-right:none!important}:host.no-left-border ::ng-deep ng-select.ng-select .ng-select-container{border-left:none!important}: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-input{padding:0 0 0 3px!important}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container{max-height:58px;height:100%}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container{max-height:58px}: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:empty{display:none}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;min-height:36px;padding:8px 12px;font-size:14px;line-height:22px}::ng-deep ng-dropdown-panel.ng-dropdown-panel.dr-select .ng-dropdown-panel-items .ng-option>.ng-option-label{text-overflow:ellipsis;overflow:hidden}::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"]
|
|
58
|
+
},] }
|
|
59
|
+
];
|
|
60
|
+
DrSelectComponent.ctorParameters = () => [
|
|
61
|
+
{ type: ElementRef }
|
|
62
|
+
];
|
|
63
|
+
DrSelectComponent.propDecorators = {
|
|
64
|
+
className: [{ type: Input }],
|
|
65
|
+
items: [{ type: Input }],
|
|
66
|
+
addTag: [{ type: Input }],
|
|
67
|
+
appendTo: [{ type: Input }],
|
|
68
|
+
bindLabel: [{ type: Input }],
|
|
69
|
+
bindValue: [{ type: Input }],
|
|
70
|
+
clearable: [{ type: Input }],
|
|
71
|
+
searchable: [{ type: Input }],
|
|
72
|
+
searchFn: [{ type: Input }],
|
|
73
|
+
multiple: [{ type: Input }],
|
|
74
|
+
hideSelected: [{ type: Input }],
|
|
75
|
+
placeholder: [{ type: Input }],
|
|
76
|
+
loading: [{ type: Input }],
|
|
77
|
+
readonly: [{ type: Input }],
|
|
78
|
+
disabled: [{ type: Input }],
|
|
79
|
+
id: [{ type: Input }],
|
|
80
|
+
keyDownFn: [{ type: Input }],
|
|
81
|
+
selectedItem: [{ type: Input }],
|
|
82
|
+
change: [{ type: Output }],
|
|
83
|
+
labelTemplate: [{ type: ContentChild, args: ['labelTemplate',] }],
|
|
84
|
+
optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }],
|
|
85
|
+
optionHeaderTemplate: [{ type: ContentChild, args: ['optionHeaderTemplate',] }]
|
|
86
|
+
};
|
|
87
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9kci1zZWxlY3QvZHItc2VsZWN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBZSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDOUcsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXpFLE1BQU0sc0JBQXNCLEdBQUc7SUFDM0IsZ0JBQWdCO0lBQ2hCLHVCQUF1QjtJQUN2QixpQkFBaUI7SUFDakIsd0JBQXdCO0NBQzNCLENBQUM7QUFZRixNQUFNLE9BQU8saUJBQWlCO0lBMEIxQixZQUFvQixVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQXZCOUMsVUFBSyxHQUFlLEVBQUUsQ0FBQztRQUV2QixhQUFRLEdBQUcsTUFBTSxDQUFDO1FBV2xCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFakIsY0FBUyxHQUF1QyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUM7UUFFMUQsV0FBTSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO1FBYzlELGFBQVEsR0FBNkIsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQzlDLGNBQVMsR0FBZSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFSN0IsS0FBSyxNQUFNLElBQUksSUFBSSxzQkFBc0IsRUFBRTtZQUN2QyxJQUFJLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDOUIsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO2FBQy9DO1NBQ0o7SUFDTCxDQUFDO0lBS0QsVUFBVSxDQUFDLEtBQVU7UUFDakIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7UUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7UUFFbkIsSUFBSSxFQUFFLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztTQUNwQztJQUNMLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3JCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNoQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUMvQixDQUFDO0lBRU8sY0FBYztRQUNsQixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO0lBQ3pDLENBQUM7SUFFTyxpQkFBaUIsQ0FBQyxHQUFHLFVBQW9CO1FBQzdDLE9BQU8sVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQztJQUN2RixDQUFDOzs7WUExRUosU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSxXQUFXO2dCQUNyQixzOUNBQXlDO2dCQUV6QyxTQUFTLEVBQUUsQ0FBQzt3QkFDUixPQUFPLEVBQUUsaUJBQWlCO3dCQUMxQixXQUFXLEVBQUUsaUJBQWlCO3dCQUM5QixLQUFLLEVBQUUsSUFBSTtxQkFDZCxDQUFDOzthQUNMOzs7WUFuQjJFLFVBQVU7Ozt3QkFzQmpGLEtBQUs7b0JBQ0wsS0FBSztxQkFDTCxLQUFLO3VCQUNMLEtBQUs7d0JBQ0wsS0FBSzt3QkFDTCxLQUFLO3dCQUNMLEtBQUs7eUJBQ0wsS0FBSzt1QkFDTCxLQUFLO3VCQUNMLEtBQUs7MkJBQ0wsS0FBSzswQkFDTCxLQUFLO3NCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFDTCxLQUFLO2lCQUNMLEtBQUs7d0JBQ0wsS0FBSzsyQkFDTCxLQUFLO3FCQUNMLE1BQU07NEJBRU4sWUFBWSxTQUFDLGVBQWU7NkJBQzVCLFlBQVksU0FBQyxnQkFBZ0I7bUNBQzdCLFlBQVksU0FBQyxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0LCBUZW1wbGF0ZVJlZiwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5jb25zdCBTRUxFQ1RfSE9TVF9BVFRSSUJVVEVTID0gW1xyXG4gICAgJ25vLWxlZnQtYm9yZGVyJyxcclxuICAgICduby1sZWZ0LWJvcmRlci1yYWRpdXMnLFxyXG4gICAgJ25vLXJpZ2h0LWJvcmRlcicsXHJcbiAgICAnbm8tcmlnaHQtYm9yZGVyLXJhZGl1cycsXHJcbl07XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnZHItc2VsZWN0JyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9kci1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZHItc2VsZWN0LmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBwcm92aWRlcnM6IFt7XHJcbiAgICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXHJcbiAgICAgICAgdXNlRXhpc3Rpbmc6IERyU2VsZWN0Q29tcG9uZW50LFxyXG4gICAgICAgIG11bHRpOiB0cnVlXHJcbiAgICB9XVxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHJTZWxlY3RDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XHJcblxyXG4gICAgQElucHV0KCkgY2xhc3NOYW1lOiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBpdGVtczogQXJyYXk8YW55PiA9IFtdO1xyXG4gICAgQElucHV0KCkgYWRkVGFnOiBib29sZWFuIHwgKCh0ZXJtOiBzdHJpbmcpID0+IGFueSB8IFByb21pc2U8YW55Pik7XHJcbiAgICBASW5wdXQoKSBhcHBlbmRUbyA9ICdib2R5JztcclxuICAgIEBJbnB1dCgpIGJpbmRMYWJlbDogc3RyaW5nO1xyXG4gICAgQElucHV0KCkgYmluZFZhbHVlOiBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBjbGVhcmFibGU6IGJvb2xlYW47XHJcbiAgICBASW5wdXQoKSBzZWFyY2hhYmxlOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgc2VhcmNoRm46ICh0ZXJtOiBzdHJpbmcsIGl0ZW06IGFueSkgPT4gYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIG11bHRpcGxlOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgaGlkZVNlbGVjdGVkOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZztcclxuICAgIEBJbnB1dCgpIGxvYWRpbmc6IGJvb2xlYW47XHJcbiAgICBASW5wdXQoKSByZWFkb25seTogYm9vbGVhbjtcclxuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBpZDogc3RyaW5nO1xyXG4gICAgQElucHV0KCkga2V5RG93bkZuOiAoJGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiBib29sZWFuID0gKCkgPT4gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHNlbGVjdGVkSXRlbTogYW55O1xyXG4gICAgQE91dHB1dCgpIGNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgICBAQ29udGVudENoaWxkKCdsYWJlbFRlbXBsYXRlJykgbGFiZWxUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcclxuICAgIEBDb250ZW50Q2hpbGQoJ29wdGlvblRlbXBsYXRlJykgb3B0aW9uVGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgICBAQ29udGVudENoaWxkKCdvcHRpb25IZWFkZXJUZW1wbGF0ZScpIG9wdGlvbkhlYWRlclRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pIHtcclxuICAgICAgICBmb3IgKGNvbnN0IGF0dHIgb2YgU0VMRUNUX0hPU1RfQVRUUklCVVRFUykge1xyXG4gICAgICAgICAgICBpZiAodGhpcy5oYXNIb3N0QXR0cmlidXRlcyhhdHRyKSkge1xyXG4gICAgICAgICAgICAgICAgKHRoaXMuZ2V0SG9zdEVsZW1lbnQoKSkuY2xhc3NMaXN0LmFkZChhdHRyKTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBvbkNoYW5nZTogKHZhbHVlOiBib29sZWFuKSA9PiB2b2lkID0gKCkgPT4ge307XHJcbiAgICBvblRvdWNoZWQ6ICgpID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuXHJcbiAgICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnNlbGVjdGVkSXRlbSA9IHZhbHVlO1xyXG4gICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy5zZWxlY3RlZEl0ZW0pO1xyXG4gICAgfVxyXG5cclxuICAgIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcclxuXHJcbiAgICAgICAgaWYgKGZuICYmIHRoaXMuc2VsZWN0ZWRJdGVtKSB7XHJcbiAgICAgICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy5zZWxlY3RlZEl0ZW0pO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcclxuICAgIH1cclxuXHJcbiAgICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pIHtcclxuICAgICAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGdldEhvc3RFbGVtZW50KCk6IEhUTUxFbGVtZW50ICB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgaGFzSG9zdEF0dHJpYnV0ZXMoLi4uYXR0cmlidXRlczogc3RyaW5nW10pOiBib29sZWFuIHtcclxuICAgICAgICByZXR1cm4gYXR0cmlidXRlcy5zb21lKGF0dHJpYnV0ZSA9PiB0aGlzLmdldEhvc3RFbGVtZW50KCkuaGFzQXR0cmlidXRlKGF0dHJpYnV0ZSkpO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, HostBinding } 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._elementClass = [];
|
|
8
|
-
this.checkedChange = new EventEmitter();
|
|
9
|
-
this.onChange = () => { };
|
|
10
|
-
this.onTouched = () => { };
|
|
11
|
-
}
|
|
12
|
-
set disabled(value) {
|
|
13
|
-
this.setDisabledState(value);
|
|
14
|
-
}
|
|
15
|
-
get elementClass() { return this._elementClass.join(' '); }
|
|
16
|
-
ngAfterViewInit() {
|
|
17
|
-
if (this.toggleTitleRight) {
|
|
18
|
-
this._elementClass.push('toggle-label-alignment');
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
writeValue(value) {
|
|
22
|
-
this.checkedStatus = value;
|
|
23
|
-
this.cdr.markForCheck();
|
|
24
|
-
}
|
|
25
|
-
registerOnChange(fn) {
|
|
26
|
-
this.onChange = fn;
|
|
27
|
-
}
|
|
28
|
-
registerOnTouched(fn) {
|
|
29
|
-
this.onTouched = fn;
|
|
30
|
-
}
|
|
31
|
-
setDisabledState(isDisabled) {
|
|
32
|
-
this._disabled = isDisabled;
|
|
33
|
-
}
|
|
34
|
-
setValue() {
|
|
35
|
-
this.checkedStatus = !this.checkedStatus;
|
|
36
|
-
this.onChange(this.checkedStatus);
|
|
37
|
-
this.checkedChange.emit(this.checkedStatus);
|
|
38
|
-
this.onTouched();
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
DrToggleComponent.decorators = [
|
|
42
|
-
{ type: Component, args: [{
|
|
43
|
-
selector: 'dr-toggle',
|
|
44
|
-
template: "<span class=\"mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{toggleTitle}}</span>\n<label class=\"toggle-container\" [class.success]=\"successType\" [class.disabled]=\"_disabled\">\n <input type=\"checkbox\"\n [checked]=\"checkedStatus\"\n [disabled]=\"_disabled\"\n (click)=\"setValue()\">\n <span class=\"toggle-body\">\n <i></i>\n <ng-content></ng-content>\n </span>\n</label>\n<span class=\"ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{toggleTitle}}</span>\n",
|
|
45
|
-
providers: [
|
|
46
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
|
|
47
|
-
],
|
|
48
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
49
|
-
styles: [":host{display:flex;justify-content:space-between;align-items:center}:host.toggle-label-alignment{justify-content:start}: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:#
|
|
50
|
-
},] }
|
|
51
|
-
];
|
|
52
|
-
DrToggleComponent.ctorParameters = () => [
|
|
53
|
-
{ type: ChangeDetectorRef }
|
|
54
|
-
];
|
|
55
|
-
DrToggleComponent.propDecorators = {
|
|
56
|
-
toggleTitle: [{ type: Input }],
|
|
57
|
-
toggleTitleRight: [{ type: Input }],
|
|
58
|
-
successType: [{ type: Input }],
|
|
59
|
-
checkedStatus: [{ type: Input }],
|
|
60
|
-
disabled: [{ type: Input }],
|
|
61
|
-
checkedChange: [{ type: Output }],
|
|
62
|
-
elementClass: [{ type: HostBinding, args: ['class',] }]
|
|
63
|
-
};
|
|
64
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, HostBinding } 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._elementClass = [];
|
|
8
|
+
this.checkedChange = new EventEmitter();
|
|
9
|
+
this.onChange = () => { };
|
|
10
|
+
this.onTouched = () => { };
|
|
11
|
+
}
|
|
12
|
+
set disabled(value) {
|
|
13
|
+
this.setDisabledState(value);
|
|
14
|
+
}
|
|
15
|
+
get elementClass() { return this._elementClass.join(' '); }
|
|
16
|
+
ngAfterViewInit() {
|
|
17
|
+
if (this.toggleTitleRight) {
|
|
18
|
+
this._elementClass.push('toggle-label-alignment');
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
writeValue(value) {
|
|
22
|
+
this.checkedStatus = value;
|
|
23
|
+
this.cdr.markForCheck();
|
|
24
|
+
}
|
|
25
|
+
registerOnChange(fn) {
|
|
26
|
+
this.onChange = fn;
|
|
27
|
+
}
|
|
28
|
+
registerOnTouched(fn) {
|
|
29
|
+
this.onTouched = fn;
|
|
30
|
+
}
|
|
31
|
+
setDisabledState(isDisabled) {
|
|
32
|
+
this._disabled = isDisabled;
|
|
33
|
+
}
|
|
34
|
+
setValue() {
|
|
35
|
+
this.checkedStatus = !this.checkedStatus;
|
|
36
|
+
this.onChange(this.checkedStatus);
|
|
37
|
+
this.checkedChange.emit(this.checkedStatus);
|
|
38
|
+
this.onTouched();
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
DrToggleComponent.decorators = [
|
|
42
|
+
{ type: Component, args: [{
|
|
43
|
+
selector: 'dr-toggle',
|
|
44
|
+
template: "<span class=\"mr-3\" *ngIf=\"toggleTitle && !toggleTitleRight\">{{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<span class=\"ml-3\" *ngIf=\"toggleTitle && toggleTitleRight\">{{toggleTitle}}</span>\r\n",
|
|
45
|
+
providers: [
|
|
46
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
|
|
47
|
+
],
|
|
48
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
49
|
+
styles: [":host{display:flex;justify-content:space-between;align-items:center}:host.toggle-label-alignment{justify-content:start}: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:#4646ce}: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:#8f929e;line-height:1}: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"]
|
|
50
|
+
},] }
|
|
51
|
+
];
|
|
52
|
+
DrToggleComponent.ctorParameters = () => [
|
|
53
|
+
{ type: ChangeDetectorRef }
|
|
54
|
+
];
|
|
55
|
+
DrToggleComponent.propDecorators = {
|
|
56
|
+
toggleTitle: [{ type: Input }],
|
|
57
|
+
toggleTitleRight: [{ type: Input }],
|
|
58
|
+
successType: [{ type: Input }],
|
|
59
|
+
checkedStatus: [{ type: Input }],
|
|
60
|
+
disabled: [{ type: Input }],
|
|
61
|
+
checkedChange: [{ type: Output }],
|
|
62
|
+
elementClass: [{ type: HostBinding, args: ['class',] }]
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItdG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RhdGFyYWlsc3NoYXJlZC9zcmMvbGliL2RyLWlucHV0cy9kci10b2dnbGUvZHItdG9nZ2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sV0FBVyxFQUVkLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBdUIsaUJBQWlCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQVd2RSxNQUFNLE9BQU8saUJBQWlCO0lBbUIxQixZQUFvQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQWxCMUMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixrQkFBYSxHQUFhLEVBQUUsQ0FBQztRQWFuQixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFZN0MsYUFBUSxHQUE2QixHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDOUMsY0FBUyxHQUFlLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQVRZLENBQUM7SUFQOUMsSUFBYSxRQUFRLENBQUMsS0FBYztRQUNoQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUdELElBQTBCLFlBQVksS0FBWSxPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUEsQ0FBQztJQUl2RixlQUFlO1FBQ1gsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDekIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztTQUNuRDtJQUNILENBQUM7SUFLSCxVQUFVLENBQUMsS0FBYztRQUNyQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3BCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3JCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFDRCxnQkFBZ0IsQ0FBRSxVQUFtQjtRQUNqQyxJQUFJLENBQUMsU0FBUyxHQUFHLFVBQVUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM1QyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDckIsQ0FBQzs7O1lBNURKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsV0FBVztnQkFDckIsa2pCQUF5QztnQkFFekMsU0FBUyxFQUFFO29CQUNQLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDO2lCQUM1RTtnQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7YUFDbEQ7OztZQWxCRyxpQkFBaUI7OzswQkF1QmhCLEtBQUs7K0JBRUwsS0FBSzswQkFFTCxLQUFLOzRCQUVMLEtBQUs7dUJBRUwsS0FBSzs0QkFHTCxNQUFNOzJCQUVOLFdBQVcsU0FBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXHJcbiAgICBDb21wb25lbnQsXHJcbiAgICBFdmVudEVtaXR0ZXIsXHJcbiAgICBJbnB1dCxcclxuICAgIE91dHB1dCxcclxuICAgIEhvc3RCaW5kaW5nLFxyXG4gICAgQWZ0ZXJWaWV3SW5pdFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQge0NvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2RyLXRvZ2dsZScsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZHItdG9nZ2xlLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2RyLXRvZ2dsZS5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgcHJvdmlkZXJzOiBbXHJcbiAgICAgICAge3Byb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogRHJUb2dnbGVDb21wb25lbnQsIG11bHRpOiB0cnVlfVxyXG4gICAgXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBEclRvZ2dsZUNvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBBZnRlclZpZXdJbml0IHtcclxuICAgIF9kaXNhYmxlZCA9IGZhbHNlO1xyXG4gICAgX2VsZW1lbnRDbGFzczogc3RyaW5nW10gPSBbXTtcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgdG9nZ2xlVGl0bGU6IGFueTtcclxuICAgIEBJbnB1dCgpXHJcbiAgICB0b2dnbGVUaXRsZVJpZ2h0OiBib29sZWFuO1xyXG4gICAgQElucHV0KClcclxuICAgIHN1Y2Nlc3NUeXBlOiBib29sZWFuO1xyXG4gICAgQElucHV0KClcclxuICAgIGNoZWNrZWRTdGF0dXM6IGJvb2xlYW47XHJcbiAgICBASW5wdXQoKSBzZXQgZGlzYWJsZWQodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgICAgICB0aGlzLnNldERpc2FibGVkU3RhdGUodmFsdWUpO1xyXG4gICAgfVxyXG4gICAgQE91dHB1dCgpIGNoZWNrZWRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBlbGVtZW50Q2xhc3MoKTogc3RyaW5nIHtyZXR1cm4gdGhpcy5fZWxlbWVudENsYXNzLmpvaW4oJyAnKTt9XHJcblxyXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxyXG5cclxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy50b2dnbGVUaXRsZVJpZ2h0KSB7XHJcbiAgICAgICAgICB0aGlzLl9lbGVtZW50Q2xhc3MucHVzaCgndG9nZ2xlLWxhYmVsLWFsaWdubWVudCcpO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG5cclxuICAgIG9uQ2hhbmdlOiAodmFsdWU6IGJvb2xlYW4pID0+IHZvaWQgPSAoKSA9PiB7fTtcclxuICAgIG9uVG91Y2hlZDogKCkgPT4gdm9pZCA9ICgpID0+IHt9O1xyXG5cclxuICAgIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pIHtcclxuICAgICAgICB0aGlzLmNoZWNrZWRTdGF0dXMgPSB2YWx1ZTtcclxuICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcclxuICAgIH1cclxuXHJcbiAgICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpIHtcclxuICAgICAgICB0aGlzLm9uQ2hhbmdlID0gZm47XHJcbiAgICB9XHJcblxyXG4gICAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSkge1xyXG4gICAgICAgIHRoaXMub25Ub3VjaGVkID0gZm47XHJcbiAgICB9XHJcbiAgICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5fZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xyXG4gICAgfVxyXG5cclxuICAgIHNldFZhbHVlKCkge1xyXG4gICAgICAgIHRoaXMuY2hlY2tlZFN0YXR1cyA9ICF0aGlzLmNoZWNrZWRTdGF0dXM7XHJcbiAgICAgICAgdGhpcy5vbkNoYW5nZSh0aGlzLmNoZWNrZWRTdGF0dXMpO1xyXG4gICAgICAgIHRoaXMuY2hlY2tlZENoYW5nZS5lbWl0KHRoaXMuY2hlY2tlZFN0YXR1cyk7XHJcbiAgICAgICAgdGhpcy5vblRvdWNoZWQoKTtcclxuICAgIH1cclxufVxyXG4iXX0=
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, } from '@angular/core';
|
|
2
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
-
export class DrToggleButtonComponent {
|
|
4
|
-
constructor(cdr) {
|
|
5
|
-
this.cdr = cdr;
|
|
6
|
-
this._disabled = false;
|
|
7
|
-
this.onChange = () => { };
|
|
8
|
-
this.onTouched = () => { };
|
|
9
|
-
}
|
|
10
|
-
set disabled(value) {
|
|
11
|
-
this.setDisabledState(value);
|
|
12
|
-
}
|
|
13
|
-
writeValue(value) {
|
|
14
|
-
this.selectedValue = value;
|
|
15
|
-
this.cdr.markForCheck();
|
|
16
|
-
}
|
|
17
|
-
registerOnChange(fn) {
|
|
18
|
-
this.onChange = fn;
|
|
19
|
-
}
|
|
20
|
-
registerOnTouched(fn) {
|
|
21
|
-
this.onTouched = fn;
|
|
22
|
-
}
|
|
23
|
-
setDisabledState(isDisabled) {
|
|
24
|
-
this._disabled = isDisabled;
|
|
25
|
-
}
|
|
26
|
-
setValue(item) {
|
|
27
|
-
this.selectedValue = item;
|
|
28
|
-
this.onChange(this.selectedValue);
|
|
29
|
-
this.onTouched();
|
|
30
|
-
this.cdr.markForCheck();
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
DrToggleButtonComponent.decorators = [
|
|
34
|
-
{ type: Component, args: [{
|
|
35
|
-
selector: 'dr-toggle-button',
|
|
36
|
-
template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\n <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\n [class.selected]=\"item === selectedValue\"\n class=\"toggle-container__item\">\n {{item.name || item}}\n </div>\n</div>\n",
|
|
37
|
-
providers: [
|
|
38
|
-
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DrToggleButtonComponent), multi: true }
|
|
39
|
-
],
|
|
40
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
41
|
-
styles: [".toggle-container{display:flex;flex-wrap:nowrap;background:#F6F7F8;border:1px solid #C3C4CE;box-sizing:border-box;border-radius:20px;height:28px}.toggle-container.disabled{pointer-events:none}.toggle-container__item{height:28px;display:flex;align-items:center;justify-content:center;padding:4px 16px;border-radius:20px;margin:-1px;cursor:pointer}.toggle-container__item.selected{background:#F3F7FF;border:1px solid #579BF2;color:#0061ff;font-weight:600}\n"]
|
|
42
|
-
},] }
|
|
43
|
-
];
|
|
44
|
-
DrToggleButtonComponent.ctorParameters = () => [
|
|
45
|
-
{ type: ChangeDetectorRef }
|
|
46
|
-
];
|
|
47
|
-
DrToggleButtonComponent.propDecorators = {
|
|
48
|
-
items: [{ type: Input }],
|
|
49
|
-
selectedValue: [{ type: Input }],
|
|
50
|
-
disabled: [{ type: Input }]
|
|
51
|
-
};
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
export class DrToggleButtonComponent {
|
|
4
|
+
constructor(cdr) {
|
|
5
|
+
this.cdr = cdr;
|
|
6
|
+
this._disabled = false;
|
|
7
|
+
this.onChange = () => { };
|
|
8
|
+
this.onTouched = () => { };
|
|
9
|
+
}
|
|
10
|
+
set disabled(value) {
|
|
11
|
+
this.setDisabledState(value);
|
|
12
|
+
}
|
|
13
|
+
writeValue(value) {
|
|
14
|
+
this.selectedValue = value;
|
|
15
|
+
this.cdr.markForCheck();
|
|
16
|
+
}
|
|
17
|
+
registerOnChange(fn) {
|
|
18
|
+
this.onChange = fn;
|
|
19
|
+
}
|
|
20
|
+
registerOnTouched(fn) {
|
|
21
|
+
this.onTouched = fn;
|
|
22
|
+
}
|
|
23
|
+
setDisabledState(isDisabled) {
|
|
24
|
+
this._disabled = isDisabled;
|
|
25
|
+
}
|
|
26
|
+
setValue(item) {
|
|
27
|
+
this.selectedValue = item;
|
|
28
|
+
this.onChange(this.selectedValue);
|
|
29
|
+
this.onTouched();
|
|
30
|
+
this.cdr.markForCheck();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
DrToggleButtonComponent.decorators = [
|
|
34
|
+
{ type: Component, args: [{
|
|
35
|
+
selector: 'dr-toggle-button',
|
|
36
|
+
template: "<div class=\"toggle-container\" [class.disabled]=\"this._disabled \">\r\n <div *ngFor=\"let item of items\" (click)=\"setValue(item)\"\r\n [class.selected]=\"item === selectedValue\"\r\n class=\"toggle-container__item\">\r\n {{item.name || item}}\r\n </div>\r\n</div>\r\n",
|
|
37
|
+
providers: [
|
|
38
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DrToggleButtonComponent), multi: true }
|
|
39
|
+
],
|
|
40
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
41
|
+
styles: [".toggle-container{display:flex;flex-wrap:nowrap;background:#F6F7F8;border:1px solid #C3C4CE;box-sizing:border-box;border-radius:20px;height:28px}.toggle-container.disabled{pointer-events:none}.toggle-container__item{height:28px;display:flex;align-items:center;justify-content:center;padding:4px 16px;border-radius:20px;margin:-1px;cursor:pointer}.toggle-container__item.selected{background:#F3F7FF;border:1px solid #579BF2;color:#0061ff;font-weight:600}\n"]
|
|
42
|
+
},] }
|
|
43
|
+
];
|
|
44
|
+
DrToggleButtonComponent.ctorParameters = () => [
|
|
45
|
+
{ type: ChangeDetectorRef }
|
|
46
|
+
];
|
|
47
|
+
DrToggleButtonComponent.propDecorators = {
|
|
48
|
+
items: [{ type: Input }],
|
|
49
|
+
selectedValue: [{ type: Input }],
|
|
50
|
+
disabled: [{ type: Input }]
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHItdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kYXRhcmFpbHNzaGFyZWQvc3JjL2xpYi9kci1pbnB1dHMvZHItdG9nZ2xlLWJ1dHRvbi9kci10b2dnbGUtYnV0dG9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQUUsVUFBVSxFQUNyQixLQUFLLEdBQ1IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBYXpFLE1BQU0sT0FBTyx1QkFBdUI7SUFTaEMsWUFBb0IsR0FBc0I7UUFBdEIsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFSMUMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQVVsQixhQUFRLEdBQTZCLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUM5QyxjQUFTLEdBQWUsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBSFksQ0FBQztJQUo5QyxJQUFhLFFBQVEsQ0FBQyxLQUFjO1FBQ2hDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBT0QsVUFBVSxDQUFDLEtBQVU7UUFDakIsSUFBSSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7UUFDM0IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBTztRQUNwQixJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBQ0QsZ0JBQWdCLENBQUUsVUFBbUI7UUFDakMsSUFBSSxDQUFDLFNBQVMsR0FBRyxVQUFVLENBQUM7SUFDaEMsQ0FBQztJQUVELFFBQVEsQ0FBQyxJQUFJO1FBQ1QsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDbEMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7O1lBOUNKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1Qix3VEFBZ0Q7Z0JBRWhELFNBQVMsRUFBRTtvQkFDUCxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLHVCQUF1QixDQUFDLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQztpQkFDcEc7Z0JBQ0QsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07O2FBQ2xEOzs7WUFkRyxpQkFBaUI7OztvQkFvQmhCLEtBQUs7NEJBQ0wsS0FBSzt1QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgQ2hhbmdlRGV0ZWN0b3JSZWYsXHJcbiAgICBDb21wb25lbnQsIGZvcndhcmRSZWYsXHJcbiAgICBJbnB1dCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2RyLXRvZ2dsZS1idXR0b24nLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RyLXRvZ2dsZS1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZHItdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgcHJvdmlkZXJzOiBbXHJcbiAgICAgICAge3Byb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBEclRvZ2dsZUJ1dHRvbkNvbXBvbmVudCksIG11bHRpOiB0cnVlfVxyXG4gICAgXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcblxyXG5cclxuZXhwb3J0IGNsYXNzIERyVG9nZ2xlQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gICAgX2Rpc2FibGVkID0gZmFsc2U7XHJcblxyXG4gICAgQElucHV0KCkgaXRlbXM6IHN0cmluZ1tdIHwgYW55W107XHJcbiAgICBASW5wdXQoKSBzZWxlY3RlZFZhbHVlOiBib29sZWFuO1xyXG4gICAgQElucHV0KCkgc2V0IGRpc2FibGVkKHZhbHVlOiBib29sZWFuKSB7XHJcbiAgICAgICAgdGhpcy5zZXREaXNhYmxlZFN0YXRlKHZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XHJcblxyXG4gICAgb25DaGFuZ2U6ICh2YWx1ZTogYm9vbGVhbikgPT4gdm9pZCA9ICgpID0+IHt9O1xyXG4gICAgb25Ub3VjaGVkOiAoKSA9PiB2b2lkID0gKCkgPT4ge307XHJcblxyXG4gICAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KSB7XHJcbiAgICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlID0gdmFsdWU7XHJcbiAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KSB7XHJcbiAgICAgICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xyXG4gICAgfVxyXG5cclxuICAgIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpIHtcclxuICAgICAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xyXG4gICAgfVxyXG4gICAgc2V0RGlzYWJsZWRTdGF0ZT8oaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuX2Rpc2FibGVkID0gaXNEaXNhYmxlZDtcclxuICAgIH1cclxuXHJcbiAgICBzZXRWYWx1ZShpdGVtKSB7XHJcbiAgICAgICAgdGhpcy5zZWxlY3RlZFZhbHVlID0gaXRlbTtcclxuICAgICAgICB0aGlzLm9uQ2hhbmdlKHRoaXMuc2VsZWN0ZWRWYWx1ZSk7XHJcbiAgICAgICAgdGhpcy5vblRvdWNoZWQoKTtcclxuICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcclxuICAgIH1cclxufVxyXG4iXX0=
|