@datarailsshared/datarailsshared 1.3.22 → 1.3.23

package/fesm2015/datarailsshared-datarailsshared.js

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, Inject, ViewChild, Optional, Injector, Injectable, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, ElementRef, Inject, PLATFORM_ID, ContentChildren, Renderer2, HostBinding, ContentChild, Pipe, TemplateRef, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, ViewChild, Optional, Injector, Injectable, NgModule } from '@angular/core';
 import { FormControl, NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule } from '@angular/material-moment-adapter';
 import * as momentImported from 'moment';
-import { noop as noop$1, Subject } from 'rxjs';
+import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import { Subject, from, merge, fromEvent, noop as noop$1 } from 'rxjs';
+import { startWith, switchMap, takeUntil, filter, first } from 'rxjs/operators';
 import { transition, style, animate, trigger } from '@angular/animations';
 import * as i1 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { DOCUMENT, CommonModule } from '@angular/common';
-import { first } from 'rxjs/operators';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -785,6 +785,7 @@ DayTagComponent.propDecorators = {
 class RadioButtonComponent {
     constructor(cdr) {
         this.cdr = cdr;
+        this.valueChange = new EventEmitter();
         this.onChange = (onchanges => { });
         this.onTouched = () => { };
     }
@@ -808,6 +809,14 @@ class RadioButtonComponent {
     }
     valueChanged(event) {
         this.onChange(this.modelValue);
+        this.valueChange.emit(this.value);
+    }
+    _setName(name) {
+        this.name = name;
+        this.cdr.markForCheck();
+    }
+    _markForCheck() {
+        this.cdr.markForCheck();
     }
 }
 RadioButtonComponent.decorators = [
@@ -822,8 +831,7 @@ RadioButtonComponent.decorators = [
                     }
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.ShadowDom,
-                styles: ["label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image: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\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{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\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
+                styles: [":host{display:flex;line-height:22px}label input[type=radio].radiobox+span{vertical-align:middle;line-height:20px}input+span,input+span:after,input+span:before{box-sizing:content-box!important;-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important}input{visibility:hidden;position:absolute;width:18px;height:18px}label input+span{position:relative;z-index:19;display:inline-block;margin:0 5px 0 0;line-height:17px;min-height:14px;min-width:14px}label input+span:hover{cursor:pointer}label input+span:before{content:\"\";font-size:14px;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;padding:1px;height:12px;line-height:13px;width:12px;margin-right:5px;border:1px solid #C3C4CE;background-color:#fff;font-weight:normal;margin-top:-1px}label input+span:before{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}label input:checked+span:before,label:hover input:checked+span:before{background:white;border-color:#579bf2;color:#579bf2}label input:checked+span:before,label:hover input:checked+span:before{font-family:\"DataRails\"!important;background-image: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\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23579BF2\"/></svg> ');background-repeat:no-repeat;background-position:center;color:#579bf2}label input:disabled+span:before{border-color:#bcbcbc}label input[disabled]:checked+span:before{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\"><circle cx=\"5\" cy=\"5\" r=\"4.5\" fill=\"%23BCBCBC\"/></svg> ');border-color:#bcbcbc}label span:hover:before{border-color:#85889c}\n"]
             },] }
 ];
 RadioButtonComponent.ctorParameters = () => [
@@ -832,7 +840,165 @@ RadioButtonComponent.ctorParameters = () => [
 RadioButtonComponent.propDecorators = {
     disabled: [{ type: Input }],
     name: [{ type: Input }],
-    _value: [{ type: Input, args: ['value',] }]
+    _value: [{ type: Input, args: ['value',] }],
+    valueChange: [{ type: Output }]
+};
+
+class RadioGroupComponent {
+    constructor(hostElement, platformId, document) {
+        this.hostElement = hostElement;
+        this.platformId = platformId;
+        this.document = document;
+        this.destroy$ = new Subject();
+        this.valueChange = new EventEmitter();
+        this.onChange = (value) => { };
+        this.onTouched = () => { };
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.updateValues();
+    }
+    get name() {
+        return this._name;
+    }
+    set name(name) {
+        this._name = name;
+        this.updateNames();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(disabled) {
+        this._disabled = !!disabled;
+        this.updateDisabled();
+    }
+    ngAfterContentInit() {
+        // In case option 'name' isn't set on nb-radio component,
+        // we need to set it's name right away, so it won't overlap with options
+        // without names from other radio groups. Otherwise they all would have
+        // same name and will be considered as options from one group so only the
+        // last option will stay selected.
+        this.updateNames();
+        this.radios.changes
+            .pipe(startWith(this.radios), 
+        // 'changes' emit during change detection run and we can't update
+        // option properties right of since they already was initialized.
+        // Instead we schedule microtask to update radios after change detection
+        // run is finished and trigger one more change detection run.
+        switchMap((radios) => from(Promise.resolve(radios))), takeUntil(this.destroy$))
+            .subscribe(() => this.updateAndSubscribeToRadios());
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    updateAndSubscribeToRadios() {
+        this.updateValueFromCheckedOption();
+        this.updateNames();
+        this.updateValues();
+        this.updateDisabled();
+        this.subscribeOnRadiosValueChange();
+        this.subscribeOnRadiosBlur();
+    }
+    updateNames() {
+        if (this.radios) {
+            this.radios.forEach((radio) => radio._setName(this.name));
+        }
+    }
+    updateValues() {
+        this.updateAndMarkForCheckRadios((radio) => {
+            if (radio.value === this.value) {
+                radio.modelValue = radio.value;
+            }
+        });
+    }
+    updateDisabled() {
+        if (typeof this.disabled !== 'undefined') {
+            this.updateAndMarkForCheckRadios((radio) => radio.disabled = this.disabled);
+        }
+    }
+    subscribeOnRadiosValueChange() {
+        if (!this.radios || !this.radios.length) {
+            return;
+        }
+        merge(...this.radios.map((radio) => radio.valueChange))
+            .pipe(takeUntil(merge(this.radios.changes, this.destroy$)))
+            .subscribe((value) => {
+            this.writeValue(value);
+            this.propagateValue(value);
+        });
+    }
+    propagateValue(value) {
+        this.valueChange.emit(value);
+        this.onChange(value);
+    }
+    subscribeOnRadiosBlur() {
+        const hasNoRadios = !this.radios || !this.radios.length;
+        if (!isPlatformBrowser(this.platformId) || hasNoRadios) {
+            return;
+        }
+        const hostElement = this.hostElement.nativeElement;
+        fromEvent(hostElement, 'focusin')
+            .pipe(filter(event => hostElement.contains(event.target)), switchMap(() => merge(fromEvent(this.document, 'focusin'), fromEvent(this.document, 'click'))), filter(event => !hostElement.contains(event.target)), takeUntil(merge(this.radios.changes, this.destroy$)))
+            .subscribe(() => this.onTouched());
+    }
+    updateAndMarkForCheckRadios(updateFn) {
+        if (this.radios) {
+            this.radios.forEach((radio) => {
+                updateFn(radio);
+                radio._markForCheck();
+            });
+        }
+    }
+    updateValueFromCheckedOption() {
+        const checkedRadio = this.radios.find((radio) => radio.modelValue);
+        const isValueMissing = this.value === undefined || this.value === null;
+        if (checkedRadio && isValueMissing && checkedRadio.value !== this.value) {
+            this.value = checkedRadio.value;
+        }
+    }
+}
+RadioGroupComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'dr-radio-group',
+                template: `
+    <ng-content select="dr-radio-button"></ng-content>`,
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => RadioGroupComponent),
+                        multi: true,
+                    },
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush
+            },] }
+];
+RadioGroupComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+RadioGroupComponent.propDecorators = {
+    value: [{ type: Input }],
+    name: [{ type: Input }],
+    disabled: [{ type: Input }],
+    radios: [{ type: ContentChildren, args: [RadioButtonComponent, { descendants: true },] }],
+    valueChange: [{ type: Output }]
 };
 
 class CheckboxComponent {
@@ -1024,7 +1190,7 @@ class DrInputComponent {
 DrInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-input',
-                template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"blur.emit(value); onTouched()\"\r\n       [disabled]=\"_disabled\"\r\n       [readonly]=\"readonly\"\r\n       [type]=\"type\"\r\n       [placeholder]=\"placeholder\"\r\n       [name]=\"name\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"writeValue(null)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n        (click)=\"onButtonClicked($event)\">\r\n    {{_buttonOptions.text}}\r\n</button>\r\n",
+                template: "<ng-content select=\"[prefixIcon]\"></ng-content>\r\n<input [(ngModel)]=\"value\"\r\n       (ngModelChange)=\"updateChanges()\"\r\n       (blur)=\"blur.emit(value); onTouched()\"\r\n       [disabled]=\"_disabled\"\r\n       [readonly]=\"readonly\"\r\n       [type]=\"type\"\r\n       [placeholder]=\"placeholder\"\r\n       [name]=\"name\"\r\n       [min]=\"min\"\r\n       [step]=\"step\"\r\n>\r\n<span class=\"clear-icon\" (click)=\"writeValue(null)\"></span>\r\n<span *ngIf=\"type === 'search'\" class=\"search-icon\" (click)=\"onSearchClicked($event)\"></span>\r\n<ng-content select=\"[suffixIcon]\"></ng-content>\r\n<button *ngIf=\"_buttonOptions.show || (_buttonOptions.showOnFocus && _buttonOptions.focusSet)\"\r\n        (click)=\"onButtonClicked($event)\">\r\n    {{_buttonOptions.text}}\r\n</button>\r\n",
                 providers: [{
                         provide: NG_VALUE_ACCESSOR,
                         useExisting: forwardRef(() => DrInputComponent),
@@ -1047,6 +1213,8 @@ DrInputComponent.propDecorators = {
     placeholder: [{ type: Input }],
     readonly: [{ type: Input }],
     clearable: [{ type: Input }],
+    min: [{ type: Input }],
+    step: [{ type: Input }],
     blur: [{ type: Output }],
     elementClass: [{ type: HostBinding, args: ['class',] }],
     searchHandler: [{ type: Output }],
@@ -1399,6 +1567,7 @@ class DrToggleComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this._disabled = false;
+        this._elementClass = [];
         this.checkedChange = new EventEmitter();
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -1406,6 +1575,12 @@ class DrToggleComponent {
     set disabled(value) {
         this.setDisabledState(value);
     }
+    get elementClass() { return this._elementClass.join(' '); }
+    ngAfterViewInit() {
+        if (this.toggleTitleRight) {
+            this._elementClass.push('toggle-label-alignment');
+        }
+    }
     writeValue(value) {
         this.checkedStatus = value;
         this.cdr.markForCheck();
@@ -1434,7 +1609,7 @@ DrToggleComponent.decorators = [
                     { provide: NG_VALUE_ACCESSOR, useExisting: DrToggleComponent, multi: true }
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;justify-content:space-between;align-items:center}:host .toggle-container.disabled{pointer-events:none}:host .toggle-container.disabled .toggle-body{background-color:#8f9bb329!important}:host .toggle-container.disabled .toggle-body i{background:rgba(143,155,179,.24)!important}:host .toggle-container.success input:checked+span.toggle-body{background-color:#03a678}:host .toggle-container input{display:none}:host .toggle-container input:checked+span.toggle-body>i,:host .toggle-container input:checked+span.toggle-body:active>i{margin-left:16px}:host .toggle-container input:checked+span.toggle-body{background-color:#579bf2}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#aeb5bb;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"]
+                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:#579bf2}:host .toggle-container .toggle-body{cursor:pointer;display:block;width:30px;height:16px;margin:7px auto;border-radius:15px;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;background-color:#aeb5bb;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"]
             },] }
 ];
 DrToggleComponent.ctorParameters = () => [
@@ -1446,7 +1621,8 @@ DrToggleComponent.propDecorators = {
     successType: [{ type: Input }],
     checkedStatus: [{ type: Input }],
     disabled: [{ type: Input }],
-    checkedChange: [{ type: Output }]
+    checkedChange: [{ type: Output }],
+    elementClass: [{ type: HostBinding, args: ['class',] }]
 };
 
 class DrToggleButtonComponent {
@@ -2512,6 +2688,7 @@ DrTagModule.decorators = [
 const components$1 = [
     DrButtonComponent,
     RadioButtonComponent,
+    RadioGroupComponent,
     CheckboxComponent,
     DrInputComponent,
     DrSelectComponent,
@@ -2663,5 +2840,5 @@ DrTabsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
+export { AnyTagComponent, CheckboxComponent, DateTagComponent, DateTagModule, DayTagComponent, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrButtonComponent, DrDatePickerComponent, DrDatePickerFormatDirective, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrInputComponent, DrInputsModule, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrSelectComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, ForecastTagComponent, ISpinnerOptions, ListTagComponent, ListTagModule, MonthTagComponent, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, TooltipComponent, WeekTagComponent, YearTagComponent, components$2 as ɵa, POPUP_ANIMATION as ɵb, CustomDateFormat as ɵc };
 //# sourceMappingURL=datarailsshared-datarailsshared.js.map