@datarailsshared/datarailsshared 1.3.34 → 1.3.37
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/datarailsshared-datarailsshared.umd.js +37 -10
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.3.37.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-dropdown/dr-dropdown-position.directive.js +6 -2
- package/esm2015/lib/dr-dropdown/dr-dropdown.component.js +13 -5
- package/esm2015/lib/dr-dropdown/dr-dropdown.directive.js +16 -2
- package/esm2015/lib/dr-inputs/dr-input/dr-input.component.js +1 -1
- package/esm2015/lib/dr-inputs/dr-select/dr-select.component.js +5 -4
- package/esm2015/lib/models/dropdown.js +1 -1
- package/fesm2015/datarailsshared-datarailsshared.js +37 -10
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-dropdown/dr-dropdown-position.directive.d.ts +1 -0
- package/lib/dr-dropdown/dr-dropdown.component.d.ts +3 -0
- package/lib/dr-dropdown/dr-dropdown.directive.d.ts +4 -0
- package/lib/dr-inputs/dr-select/dr-select.component.d.ts +1 -0
- package/lib/models/dropdown.d.ts +1 -0
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.3.34.tgz +0 -0
|
@@ -1212,7 +1212,7 @@ DrInputComponent.decorators = [
|
|
|
1212
1212
|
multi: true
|
|
1213
1213
|
}],
|
|
1214
1214
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1215
|
-
styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden;outline:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host input{display:flex;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
|
|
1215
|
+
styles: [":host{position:relative;width:100%;display:flex;flex-direction:row;min-height:32px;height:32px;font-size:14px;font-family:\"Poppins\",sans-serif;background:#fff;border:1px solid #C3C4CE;border-radius:6px;color:#85889c;padding:0 8px;overflow:hidden;outline:none}:host:hover{border-color:#85889c}:host:focus-within{border-color:#21b8f1!important;color:#151b3f}:host.disabled{pointer-events:none;border:none;color:#85889c;background:#E5E6EA}:host.ng-valid.ng-dirty{border-color:#03a678}:host.ng-invalid.ng-dirty:not(:focus-within){border-color:#de2833!important}:host.ng-untouched.ng-valid{border-color:#c3c4ce}:host input{display:flex;font-size:14px;flex-grow:1;height:100%;border:none;padding:4px 0;text-align:left}:host input::placeholder{font-size:14px;line-height:18px}:host input:disabled{border:none;color:#85889c;background:transparent}:host input::-webkit-search-decoration,:host input::-webkit-search-cancel-button,:host input::-webkit-search-results-button,:host input::-webkit-search-results-decoration{-webkit-appearance:none}:host .clear-icon{visibility:hidden}:host.clearable .clear-icon,:host.ng-touched.ng-invalid .clear-icon{visibility:visible;content:url('data:image/svg+xml; utf8, <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.91783 5.00001L9.03353 1.88395C9.11924 1.79818 9.16651 1.68374 9.16665 1.56171C9.16665 1.43962 9.11937 1.32504 9.03353 1.2394L8.76047 0.966415C8.67463 0.880433 8.56023 0.833344 8.43808 0.833344C8.31612 0.833344 8.20166 0.880433 8.11582 0.966415L5.00013 4.08227L1.88428 0.966415C1.79858 0.880433 1.68404 0.833344 1.56196 0.833344C1.44001 0.833344 1.32556 0.880433 1.23985 0.966415L0.966646 1.2394C0.788869 1.41719 0.788869 1.70637 0.966646 1.88395L4.08242 5.00001L0.966646 8.11593C0.880873 8.20184 0.833677 8.31628 0.833677 8.43831C0.833677 8.56034 0.880873 8.67478 0.966646 8.76062L1.23978 9.03361C1.32548 9.11952 1.44 9.16668 1.56188 9.16668C1.68397 9.16668 1.7985 9.11952 1.88421 9.03361L5.00005 5.91769L8.11575 9.03361C8.20159 9.11952 8.31605 9.16668 8.438 9.16668H8.43815C8.56017 9.16668 8.67456 9.11952 8.7604 9.03361L9.03346 8.76062C9.11916 8.67484 9.16643 8.56034 9.16643 8.43831C9.16643 8.31628 9.11916 8.20184 9.03346 8.116L5.91783 5.00001Z\" fill=\"%2351566F\"/></svg> ');margin:auto 8px;cursor:pointer}:host span+span,:host span+img{margin-left:0}:host.search-type{padding:0 16px;border-radius:16px}:host.search-type.ng-valid{border-color:#c3c4ce}:host.search-type .search-icon{content:url('data:image/svg+xml; utf8, <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.5816 10.2097C11.4878 10.1157 11.3605 10.0629 11.2277 10.0629H10.8175C10.7473 10.0629 10.6799 10.035 10.6303 9.98534C10.5322 9.88724 10.527 9.73044 10.6132 9.62178C11.4154 8.6112 11.8925 7.33534 11.8925 5.94625C11.8925 2.66209 9.23042 0 5.94625 0C2.66209 0 0 2.66209 0 5.94625C0 9.23042 2.66209 11.8925 5.94625 11.8925C7.33523 11.8925 8.611 11.4155 9.62155 10.6172C9.7304 10.5312 9.88711 10.5366 9.9852 10.6347C10.0349 10.6845 10.0629 10.7519 10.0629 10.8223V11.2277C10.0629 11.3605 10.1157 11.4878 10.2097 11.5816L14.2834 15.6472C14.4787 15.8421 14.795 15.8419 14.9901 15.6468L15.6468 14.9901C15.8419 14.795 15.8421 14.4787 15.6472 14.2834L11.5816 10.2097ZM5.94625 10.0629C3.67296 10.0629 1.82962 8.21955 1.82962 5.94625C1.82962 3.67296 3.67296 1.82962 5.94625 1.82962C8.21955 1.82962 10.0629 3.67296 10.0629 5.94625C10.0629 8.21955 8.21955 10.0629 5.94625 10.0629Z\" fill=\"%23BCBCBC\"/></svg> ');margin:auto 0 auto 8px;cursor:pointer}:host.with-button{padding-right:0}:host.with-button button{color:#0061ff;background:#F6F7F8;height:100%;width:auto;padding:0 8px;display:flex;align-items:center;border:none;border-left:1px solid #C3C4CE}:host ::ng-deep img[prefixIcon],:host ::ng-deep img[suffixIcon],:host ::ng-deep i[prefixIcon],:host ::ng-deep i[suffixIcon]{position:relative;margin:auto 8px}:host ::ng-deep img[prefixIcon],:host ::ng-deep i[prefixIcon]{margin-left:0}:host ::ng-deep img[suffixIcon],:host ::ng-deep i[suffixIcon]{margin-right:0}\n"]
|
|
1216
1216
|
},] }
|
|
1217
1217
|
];
|
|
1218
1218
|
DrInputComponent.ctorParameters = () => [
|
|
@@ -1288,13 +1288,13 @@ class DrSelectComponent {
|
|
|
1288
1288
|
DrSelectComponent.decorators = [
|
|
1289
1289
|
{ type: Component, args: [{
|
|
1290
1290
|
selector: 'dr-select',
|
|
1291
|
-
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",
|
|
1291
|
+
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-template *ngIf=\"optionFooterTemplate\" ng-footer-tmp let-item=\"item\">\r\n <ng-container [ngTemplateOutlet]=\"optionFooterTemplate\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\r\n </ng-template>\r\n </ng-select>\r\n",
|
|
1292
1292
|
providers: [{
|
|
1293
1293
|
provide: NG_VALUE_ACCESSOR,
|
|
1294
1294
|
useExisting: DrSelectComponent,
|
|
1295
1295
|
multi: true
|
|
1296
1296
|
}],
|
|
1297
|
-
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"]
|
|
1297
|
+
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;font-size:14px;line-height:18px}: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;font-size:14px;line-height:18px}: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"]
|
|
1298
1298
|
},] }
|
|
1299
1299
|
];
|
|
1300
1300
|
DrSelectComponent.ctorParameters = () => [
|
|
@@ -1322,7 +1322,8 @@ DrSelectComponent.propDecorators = {
|
|
|
1322
1322
|
change: [{ type: Output }],
|
|
1323
1323
|
labelTemplate: [{ type: ContentChild, args: ['labelTemplate',] }],
|
|
1324
1324
|
optionTemplate: [{ type: ContentChild, args: ['optionTemplate',] }],
|
|
1325
|
-
optionHeaderTemplate: [{ type: ContentChild, args: ['optionHeaderTemplate',] }]
|
|
1325
|
+
optionHeaderTemplate: [{ type: ContentChild, args: ['optionHeaderTemplate',] }],
|
|
1326
|
+
optionFooterTemplate: [{ type: ContentChild, args: ['optionFooterTemplate',] }]
|
|
1326
1327
|
};
|
|
1327
1328
|
|
|
1328
1329
|
class DrAvatarComponent {
|
|
@@ -2382,6 +2383,7 @@ class DrDropdownComponent {
|
|
|
2382
2383
|
if (data) {
|
|
2383
2384
|
this.option = data.option;
|
|
2384
2385
|
this.position = data.position;
|
|
2386
|
+
this.drDropdownInHover = data.drDropdownInHover;
|
|
2385
2387
|
this.containerClass = data.class;
|
|
2386
2388
|
this.list = data.list || [];
|
|
2387
2389
|
this.list.forEach(item => {
|
|
@@ -2397,6 +2399,10 @@ class DrDropdownComponent {
|
|
|
2397
2399
|
this.cdr.markForCheck();
|
|
2398
2400
|
}
|
|
2399
2401
|
}
|
|
2402
|
+
onMouseLeave() {
|
|
2403
|
+
if (this.drDropdownInHover)
|
|
2404
|
+
this.menuService.destroy();
|
|
2405
|
+
}
|
|
2400
2406
|
onClickedOutside() {
|
|
2401
2407
|
if (this.firstInit) {
|
|
2402
2408
|
this.menuService.destroy();
|
|
@@ -2431,9 +2437,12 @@ class DrDropdownComponent {
|
|
|
2431
2437
|
}
|
|
2432
2438
|
}
|
|
2433
2439
|
tooltipToShow(act) {
|
|
2434
|
-
if (act.toolTipIfDisabled && !this.disabled(act)
|
|
2440
|
+
if (act.toolTipIfDisabled && !this.disabled(act))
|
|
2435
2441
|
return '';
|
|
2436
|
-
return act.toolTip
|
|
2442
|
+
return act.toolTip;
|
|
2443
|
+
}
|
|
2444
|
+
tooltipPosition(widthMoreRight) {
|
|
2445
|
+
return widthMoreRight ? 'right' : 'left';
|
|
2437
2446
|
}
|
|
2438
2447
|
action(act) {
|
|
2439
2448
|
if (!this.disabled(act)) {
|
|
@@ -2457,9 +2466,9 @@ class DrDropdownComponent {
|
|
|
2457
2466
|
DrDropdownComponent.decorators = [
|
|
2458
2467
|
{ type: Component, args: [{
|
|
2459
2468
|
selector: 'dr-dropdown',
|
|
2460
|
-
template: "<div #menuContainer\r\n (clickOutside)=\"onClickedOutside()\"\r\n [drDropdownPosition]=\"option\"\r\n [position]=\"position\"\r\n [class]=\"containerClass\"\r\n class=\"dr-dropdown\">\r\n <div class=\"dr-dropdown__container\">\r\n <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n (click)=\"action(act)\"\r\n [drTooltip]=\"tooltipToShow(act)\"\r\n [drTooltipPosition]=\"
|
|
2469
|
+
template: "<div #menuContainer\r\n (mouseleave)=\"onMouseLeave()\"\r\n (clickOutside)=\"onClickedOutside()\"\r\n [drDropdownPosition]=\"option\"\r\n #dropdownPosition=\"dropdownPosition\"\r\n [position]=\"position\"\r\n [class]=\"containerClass\"\r\n class=\"dr-dropdown\">\r\n <div class=\"dr-dropdown__container\">\r\n <div *ngFor=\"let act of list | drDropdownItemShowPipe\"\r\n (click)=\"action(act)\"\r\n [drTooltip]=\"tooltipToShow(act)\"\r\n [drTooltipPosition]=\"tooltipPosition(dropdownPosition.widthMoreRight)\"\r\n [drTooltipOptions]=\"{ withoutArrow: true }\"\r\n [drTooltipClass]=\"'dr-dropdown__tooltip'\"\r\n class=\"dr-dropdown__container__item\"\r\n [class.item-disabled]=\"disabled(act)\"\r\n [class.item-selected]=\"selected(act)\">\r\n <i *ngIf=\"act.icon\" [class]=\"act.icon\"></i>\r\n <span class=\"dr-dropdown__container__item__text\">{{act.title}}</span>\r\n <i *ngFor=\"let actionIcon of act.actionIcons\"\r\n [class]=\"actionIcon.icon\"\r\n [class.showOnHover]=\"actionIcon.showOnHover\"\r\n (click)=\"onActionIconClick($event, actionIcon, act.data)\"></i>\r\n <i *ngIf=\"act.children?.length\" class=\"dr-icon-arrow-right\"></i>\r\n <dr-dropdown *ngIf=\"act.children?.length\" [options]=\"act.childOptions\"></dr-dropdown>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
2461
2470
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2462
|
-
styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::ng-deep .
|
|
2471
|
+
styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::ng-deep .dr-dropdown__tooltip>.default-content{max-width:300px;white-space:normal!important}.dr-dropdown{position:absolute;z-index:-1;top:0;left:0;width:auto}.dr-dropdown__container{display:flex;flex-direction:column;background:#fff;border-radius:4px;box-shadow:0 4px 8px 1px #00000040;padding:8px 0;overflow-y:auto;max-height:60vh}.dr-dropdown__container__item{display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}.dr-dropdown__container__item:hover{background-color:#f6f7f8}.dr-dropdown__container__item:hover .showOnHover{visibility:visible}.dr-dropdown__container__item.item-selected{background:#F3F7FF}.dr-dropdown__container__item.item-disabled,.dr-dropdown__container__item.item-disabled i,.dr-dropdown__container__item.item-disabled .dr-dropdown__container__item__text{color:#bcbcbc}.dr-dropdown__container__item i:first-child{margin-right:8px}.dr-dropdown__container__item__text{margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dr-dropdown__container__item i,.dr-dropdown__container__item__text{color:#151b3f}.dr-dropdown__container__item .showOnHover{visibility:hidden}.dr-dropdown.content-top{transform:translate(-50%,-100%)}.dr-dropdown.content-top-left{transform:translate(-100%,-100%)}.dr-dropdown.content-bottom{transform:translate(-50%,50%)}.dr-dropdown.content-bottom-left{transform:translate(-90%,35%)}.dr-dropdown.content-bottom-right{transform:translateY(45%)}.dr-dropdown.content-left{transform:translate(-100%)}.dr-dropdown.content-left-center{transform:translate(-100%,-50%)}.dr-dropdown.content-right{transform:translate(5%)}\n"]
|
|
2463
2472
|
},] }
|
|
2464
2473
|
];
|
|
2465
2474
|
DrDropdownComponent.ctorParameters = () => [
|
|
@@ -2481,7 +2490,18 @@ class DrDropdownDirective {
|
|
|
2481
2490
|
this._document = _document;
|
|
2482
2491
|
this.position = 'left';
|
|
2483
2492
|
}
|
|
2493
|
+
elementHover() {
|
|
2494
|
+
if (!this.drDropdownInHover)
|
|
2495
|
+
return;
|
|
2496
|
+
this.openDropdown();
|
|
2497
|
+
}
|
|
2484
2498
|
elementClick() {
|
|
2499
|
+
this.openDropdown();
|
|
2500
|
+
}
|
|
2501
|
+
documentClick(e) {
|
|
2502
|
+
this.closeDropdown(e);
|
|
2503
|
+
}
|
|
2504
|
+
openDropdown() {
|
|
2485
2505
|
const option = this.el.nativeElement.getBoundingClientRect();
|
|
2486
2506
|
this._document.querySelectorAll('dr-dropdown').forEach(item => item.remove());
|
|
2487
2507
|
if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
|
|
@@ -2492,13 +2512,14 @@ class DrDropdownDirective {
|
|
|
2492
2512
|
this.service.destroy();
|
|
2493
2513
|
this.showMenu({
|
|
2494
2514
|
option,
|
|
2515
|
+
drDropdownInHover: this.drDropdownInHover,
|
|
2495
2516
|
position: this.position,
|
|
2496
2517
|
list: this.drDropdown,
|
|
2497
2518
|
class: this.drDropdownClass
|
|
2498
2519
|
});
|
|
2499
2520
|
}
|
|
2500
2521
|
}
|
|
2501
|
-
|
|
2522
|
+
closeDropdown(e) {
|
|
2502
2523
|
const menuItem = e.target.classList;
|
|
2503
2524
|
if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
|
|
2504
2525
|
return;
|
|
@@ -2538,7 +2559,9 @@ DrDropdownDirective.propDecorators = {
|
|
|
2538
2559
|
position: [{ type: Input }],
|
|
2539
2560
|
drDropdown: [{ type: Input }],
|
|
2540
2561
|
drDropdownClass: [{ type: Input }],
|
|
2562
|
+
drDropdownInHover: [{ type: Input }],
|
|
2541
2563
|
contentCmpRef: [{ type: ViewChild, args: [DrDropdownComponent, { static: true, read: ViewContainerRef },] }],
|
|
2564
|
+
elementHover: [{ type: HostListener, args: ['mouseenter',] }],
|
|
2542
2565
|
elementClick: [{ type: HostListener, args: ['click',] }],
|
|
2543
2566
|
documentClick: [{ type: HostListener, args: ['document:mouseup', ['$event'],] }]
|
|
2544
2567
|
};
|
|
@@ -2579,6 +2602,8 @@ class DrDropdownPositionDirective {
|
|
|
2579
2602
|
const heightMoreWindowBottom = menuHeight + this.drDropdownPosition.y > window.innerHeight;
|
|
2580
2603
|
const heightMoreWindowTop = menuHeight - this.drDropdownPosition.y + this.drDropdownPosition.height / 2 > 48; // header height;
|
|
2581
2604
|
const widthMoreWindowRight = this.drDropdownPosition.x + 250 > window.innerWidth;
|
|
2605
|
+
const spaceBetweenElAndRightBorder = window.innerWidth - (this.drDropdownPosition.x + this.el.nativeElement.offsetWidth);
|
|
2606
|
+
this.widthMoreRight = this.drDropdownPosition.x < spaceBetweenElAndRightBorder;
|
|
2582
2607
|
if (heightMoreWindowBottom) {
|
|
2583
2608
|
this.position = 'top';
|
|
2584
2609
|
}
|
|
@@ -2607,6 +2632,7 @@ class DrDropdownPositionDirective {
|
|
|
2607
2632
|
const defaultChildPadding = 3;
|
|
2608
2633
|
const widthMoreWindowRight = window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
|
|
2609
2634
|
const widthMoreWindowBottom = window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
|
|
2635
|
+
this.widthMoreRight = !(widthMoreWindowRight < 0);
|
|
2610
2636
|
const calculatedHorizantallyPos = widthMoreWindowRight < 0
|
|
2611
2637
|
? -this.position.x + -defaultChildPadding
|
|
2612
2638
|
: this.position.x + defaultChildPadding + xDifference;
|
|
@@ -2619,7 +2645,8 @@ class DrDropdownPositionDirective {
|
|
|
2619
2645
|
}
|
|
2620
2646
|
DrDropdownPositionDirective.decorators = [
|
|
2621
2647
|
{ type: Directive, args: [{
|
|
2622
|
-
selector: '[drDropdownPosition]'
|
|
2648
|
+
selector: '[drDropdownPosition]',
|
|
2649
|
+
exportAs: 'dropdownPosition'
|
|
2623
2650
|
},] }
|
|
2624
2651
|
];
|
|
2625
2652
|
DrDropdownPositionDirective.ctorParameters = () => [
|