@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
|
@@ -1638,7 +1638,7 @@
|
|
|
1638
1638
|
multi: true
|
|
1639
1639
|
}],
|
|
1640
1640
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
1641
|
-
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"]
|
|
1641
|
+
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"]
|
|
1642
1642
|
},] }
|
|
1643
1643
|
];
|
|
1644
1644
|
DrInputComponent.ctorParameters = function () { return [
|
|
@@ -1731,13 +1731,13 @@
|
|
|
1731
1731
|
DrSelectComponent.decorators = [
|
|
1732
1732
|
{ type: i0.Component, args: [{
|
|
1733
1733
|
selector: 'dr-select',
|
|
1734
|
-
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",
|
|
1734
|
+
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",
|
|
1735
1735
|
providers: [{
|
|
1736
1736
|
provide: forms.NG_VALUE_ACCESSOR,
|
|
1737
1737
|
useExisting: DrSelectComponent,
|
|
1738
1738
|
multi: true
|
|
1739
1739
|
}],
|
|
1740
|
-
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"]
|
|
1740
|
+
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"]
|
|
1741
1741
|
},] }
|
|
1742
1742
|
];
|
|
1743
1743
|
DrSelectComponent.ctorParameters = function () { return [
|
|
@@ -1765,7 +1765,8 @@
|
|
|
1765
1765
|
change: [{ type: i0.Output }],
|
|
1766
1766
|
labelTemplate: [{ type: i0.ContentChild, args: ['labelTemplate',] }],
|
|
1767
1767
|
optionTemplate: [{ type: i0.ContentChild, args: ['optionTemplate',] }],
|
|
1768
|
-
optionHeaderTemplate: [{ type: i0.ContentChild, args: ['optionHeaderTemplate',] }]
|
|
1768
|
+
optionHeaderTemplate: [{ type: i0.ContentChild, args: ['optionHeaderTemplate',] }],
|
|
1769
|
+
optionFooterTemplate: [{ type: i0.ContentChild, args: ['optionFooterTemplate',] }]
|
|
1769
1770
|
};
|
|
1770
1771
|
|
|
1771
1772
|
var DrAvatarComponent = /** @class */ (function () {
|
|
@@ -2925,6 +2926,7 @@
|
|
|
2925
2926
|
if (data) {
|
|
2926
2927
|
this.option = data.option;
|
|
2927
2928
|
this.position = data.position;
|
|
2929
|
+
this.drDropdownInHover = data.drDropdownInHover;
|
|
2928
2930
|
this.containerClass = data.class;
|
|
2929
2931
|
this.list = data.list || [];
|
|
2930
2932
|
this.list.forEach(function (item) {
|
|
@@ -2943,6 +2945,10 @@
|
|
|
2943
2945
|
enumerable: false,
|
|
2944
2946
|
configurable: true
|
|
2945
2947
|
});
|
|
2948
|
+
DrDropdownComponent.prototype.onMouseLeave = function () {
|
|
2949
|
+
if (this.drDropdownInHover)
|
|
2950
|
+
this.menuService.destroy();
|
|
2951
|
+
};
|
|
2946
2952
|
DrDropdownComponent.prototype.onClickedOutside = function () {
|
|
2947
2953
|
if (this.firstInit) {
|
|
2948
2954
|
this.menuService.destroy();
|
|
@@ -2977,9 +2983,12 @@
|
|
|
2977
2983
|
}
|
|
2978
2984
|
};
|
|
2979
2985
|
DrDropdownComponent.prototype.tooltipToShow = function (act) {
|
|
2980
|
-
if (act.toolTipIfDisabled && !this.disabled(act)
|
|
2986
|
+
if (act.toolTipIfDisabled && !this.disabled(act))
|
|
2981
2987
|
return '';
|
|
2982
|
-
return act.toolTip
|
|
2988
|
+
return act.toolTip;
|
|
2989
|
+
};
|
|
2990
|
+
DrDropdownComponent.prototype.tooltipPosition = function (widthMoreRight) {
|
|
2991
|
+
return widthMoreRight ? 'right' : 'left';
|
|
2983
2992
|
};
|
|
2984
2993
|
DrDropdownComponent.prototype.action = function (act) {
|
|
2985
2994
|
if (!this.disabled(act)) {
|
|
@@ -3004,9 +3013,9 @@
|
|
|
3004
3013
|
DrDropdownComponent.decorators = [
|
|
3005
3014
|
{ type: i0.Component, args: [{
|
|
3006
3015
|
selector: 'dr-dropdown',
|
|
3007
|
-
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]=\"
|
|
3016
|
+
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",
|
|
3008
3017
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
3009
|
-
styles: ["::ng-deep .dr-dropdown__container__item .dr-dropdown{visibility:hidden}::ng-deep .dr-dropdown__container__item:hover .dr-dropdown{visibility:visible}::ng-deep .
|
|
3018
|
+
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"]
|
|
3010
3019
|
},] }
|
|
3011
3020
|
];
|
|
3012
3021
|
DrDropdownComponent.ctorParameters = function () { return [
|
|
@@ -3028,7 +3037,18 @@
|
|
|
3028
3037
|
this._document = _document;
|
|
3029
3038
|
this.position = 'left';
|
|
3030
3039
|
}
|
|
3040
|
+
DrDropdownDirective.prototype.elementHover = function () {
|
|
3041
|
+
if (!this.drDropdownInHover)
|
|
3042
|
+
return;
|
|
3043
|
+
this.openDropdown();
|
|
3044
|
+
};
|
|
3031
3045
|
DrDropdownDirective.prototype.elementClick = function () {
|
|
3046
|
+
this.openDropdown();
|
|
3047
|
+
};
|
|
3048
|
+
DrDropdownDirective.prototype.documentClick = function (e) {
|
|
3049
|
+
this.closeDropdown(e);
|
|
3050
|
+
};
|
|
3051
|
+
DrDropdownDirective.prototype.openDropdown = function () {
|
|
3032
3052
|
var option = this.el.nativeElement.getBoundingClientRect();
|
|
3033
3053
|
this._document.querySelectorAll('dr-dropdown').forEach(function (item) { return item.remove(); });
|
|
3034
3054
|
if (this.contentCmpRef && this.contentCmpRef.destroyCbs) {
|
|
@@ -3039,13 +3059,14 @@
|
|
|
3039
3059
|
this.service.destroy();
|
|
3040
3060
|
this.showMenu({
|
|
3041
3061
|
option: option,
|
|
3062
|
+
drDropdownInHover: this.drDropdownInHover,
|
|
3042
3063
|
position: this.position,
|
|
3043
3064
|
list: this.drDropdown,
|
|
3044
3065
|
class: this.drDropdownClass
|
|
3045
3066
|
});
|
|
3046
3067
|
}
|
|
3047
3068
|
};
|
|
3048
|
-
DrDropdownDirective.prototype.
|
|
3069
|
+
DrDropdownDirective.prototype.closeDropdown = function (e) {
|
|
3049
3070
|
var menuItem = e.target.classList;
|
|
3050
3071
|
if (menuItem.contains('dr-dropdown__container__item') || menuItem.contains('dr-dropdown__container__item__text')) {
|
|
3051
3072
|
return;
|
|
@@ -3086,7 +3107,9 @@
|
|
|
3086
3107
|
position: [{ type: i0.Input }],
|
|
3087
3108
|
drDropdown: [{ type: i0.Input }],
|
|
3088
3109
|
drDropdownClass: [{ type: i0.Input }],
|
|
3110
|
+
drDropdownInHover: [{ type: i0.Input }],
|
|
3089
3111
|
contentCmpRef: [{ type: i0.ViewChild, args: [DrDropdownComponent, { static: true, read: i0.ViewContainerRef },] }],
|
|
3112
|
+
elementHover: [{ type: i0.HostListener, args: ['mouseenter',] }],
|
|
3090
3113
|
elementClick: [{ type: i0.HostListener, args: ['click',] }],
|
|
3091
3114
|
documentClick: [{ type: i0.HostListener, args: ['document:mouseup', ['$event'],] }]
|
|
3092
3115
|
};
|
|
@@ -3127,6 +3150,8 @@
|
|
|
3127
3150
|
var heightMoreWindowBottom = menuHeight + this.drDropdownPosition.y > window.innerHeight;
|
|
3128
3151
|
var heightMoreWindowTop = menuHeight - this.drDropdownPosition.y + this.drDropdownPosition.height / 2 > 48; // header height;
|
|
3129
3152
|
var widthMoreWindowRight = this.drDropdownPosition.x + 250 > window.innerWidth;
|
|
3153
|
+
var spaceBetweenElAndRightBorder = window.innerWidth - (this.drDropdownPosition.x + this.el.nativeElement.offsetWidth);
|
|
3154
|
+
this.widthMoreRight = this.drDropdownPosition.x < spaceBetweenElAndRightBorder;
|
|
3130
3155
|
if (heightMoreWindowBottom) {
|
|
3131
3156
|
this.position = 'top';
|
|
3132
3157
|
}
|
|
@@ -3155,6 +3180,7 @@
|
|
|
3155
3180
|
var defaultChildPadding = 3;
|
|
3156
3181
|
var widthMoreWindowRight = window.innerWidth - this.position.clientX - this.el.nativeElement.offsetWidth - defaultPadding;
|
|
3157
3182
|
var widthMoreWindowBottom = window.innerHeight - this.position.clientY - this.el.nativeElement.offsetHeight - defaultPadding;
|
|
3183
|
+
this.widthMoreRight = !(widthMoreWindowRight < 0);
|
|
3158
3184
|
var calculatedHorizantallyPos = widthMoreWindowRight < 0
|
|
3159
3185
|
? -this.position.x + -defaultChildPadding
|
|
3160
3186
|
: this.position.x + defaultChildPadding + xDifference;
|
|
@@ -3168,7 +3194,8 @@
|
|
|
3168
3194
|
}());
|
|
3169
3195
|
DrDropdownPositionDirective.decorators = [
|
|
3170
3196
|
{ type: i0.Directive, args: [{
|
|
3171
|
-
selector: '[drDropdownPosition]'
|
|
3197
|
+
selector: '[drDropdownPosition]',
|
|
3198
|
+
exportAs: 'dropdownPosition'
|
|
3172
3199
|
},] }
|
|
3173
3200
|
];
|
|
3174
3201
|
DrDropdownPositionDirective.ctorParameters = function () { return [
|