monkey-style-guide 2.0.133 → 2.0.136

package/fesm2020/monkey-style-guide.mjs

@@ -229,6 +229,11 @@ class MonkeyUtils {
             .join('');
         return randomString;
     }
+    static handleOnlyNumbersCurrency(value) {
+        if (!value)
+            return null;
+        return value.replace(new RegExp(/[^0-9.]/g), '');
+    }
     static handleOnlyNumbers(value) {
         if (!value)
             return null;
@@ -3070,16 +3075,24 @@ class MonkeyDateRangePickerComponent {
         this._daysArrSecond = [];
         this._disabled = false;
         this._minDate = null;
+        this._startDate = null;
+        this._endDate = null;
+        this.unsubscribeAll = new Subject();
         this.initDateRange();
     }
     set minDate(value) {
         this._minDate = !this.moveDaysForward ? null : value;
     }
     initDateRange() {
-        return (this._dateForm = this.fb.group({
+        this._dateForm = this.fb.group({
             startDate: [null, Validators.required],
             endDate: [null, Validators.required],
-        }));
+        });
+        this._dateForm?.valueChanges?.pipe(takeUntil(this.unsubscribeAll))?.subscribe((values) => {
+            const { startDate, endDate } = values;
+            this._startDate = startDate && moment(startDate);
+            this._endDate = endDate && moment(endDate);
+        });
     }
     createCalendar(month) {
         let firstDay = moment.default(month).startOf('M');
@@ -3284,6 +3297,38 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
           {{ helperMessage }}
         </helper>
       </mecx-date-range-picker-group-header>
+      <mecx-date-range-picker-selected-dates>
+        <div class="from"
+        [class.actual]="!_startDate">
+          <span class="title">
+            {{ i18n?.from }}
+          </span>
+          <span class="data">
+            <ng-container *ngIf="_startDate; else select">
+              {{ _startDate?.format('DD') }}
+              {{ i18n?.of }}
+              {{ i18n?.months?.[_startDate.format('M')] }},
+              {{ _startDate.format('YYYY') }}
+            </ng-container>
+          </span>
+        </div>
+        <div class="to" [class.actual]="_startDate">
+          <span class="title">
+            {{ i18n?.to }}
+          </span>
+          <span class="data">
+            <ng-container *ngIf="_endDate; else select">
+              {{ _endDate.format('DD') }}
+              {{ i18n?.of }}
+              {{ i18n?.months?.[_endDate.format('M')] }},
+              {{ _endDate.format('YYYY') }}
+            </ng-container>
+          </span>
+        </div>
+        <ng-template #select>
+          {{ i18n?.select }}
+        </ng-template>
+      </mecx-date-range-picker-selected-dates>
       <mecx-date-range-picker-group-body>
         <mecx-date-range-picker class="first-date-range">
           <mecx-date-range-picker-header>
@@ -3429,7 +3474,7 @@ MonkeyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         </monkey-button>
       </mecx-date-range-picker-group-action>
     </mecx-date-range-picker-group>
-  `, isInline: true, components: [{ type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, components: [{ type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["label", "icon", "iconPosition", "type", "color", "disabled", "size"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MonkeyDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3444,6 +3489,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
           {{ helperMessage }}
         </helper>
       </mecx-date-range-picker-group-header>
+      <mecx-date-range-picker-selected-dates>
+        <div class="from"
+        [class.actual]="!_startDate">
+          <span class="title">
+            {{ i18n?.from }}
+          </span>
+          <span class="data">
+            <ng-container *ngIf="_startDate; else select">
+              {{ _startDate?.format('DD') }}
+              {{ i18n?.of }}
+              {{ i18n?.months?.[_startDate.format('M')] }},
+              {{ _startDate.format('YYYY') }}
+            </ng-container>
+          </span>
+        </div>
+        <div class="to" [class.actual]="_startDate">
+          <span class="title">
+            {{ i18n?.to }}
+          </span>
+          <span class="data">
+            <ng-container *ngIf="_endDate; else select">
+              {{ _endDate.format('DD') }}
+              {{ i18n?.of }}
+              {{ i18n?.months?.[_endDate.format('M')] }},
+              {{ _endDate.format('YYYY') }}
+            </ng-container>
+          </span>
+        </div>
+        <ng-template #select>
+          {{ i18n?.select }}
+        </ng-template>
+      </mecx-date-range-picker-selected-dates>
       <mecx-date-range-picker-group-body>
         <mecx-date-range-picker class="first-date-range">
           <mecx-date-range-picker-header>
@@ -3671,7 +3748,11 @@ class MonkeyInputComponent {
         else if (this.capitalize)
             return MonkeyUtils.capitalize(`${value}`.toUpperCase());
         else if (this.currency || this.percent) {
-            return MonkeyUtils.handleOnlyNumbers(`${value}`) / (apply ? 100 : 1);
+            const handled = MonkeyUtils.handleOnlyNumbers(`${value}`);
+            const result = handled / 100;
+            if (!result)
+                return '';
+            return result.toFixed(2);
         }
         return value;
     }
@@ -4015,6 +4096,7 @@ class MonkeyInputFilterComponent {
         this.elementRef = elementRef;
         this.currencyPipe = currencyPipe;
         this.settingsService = settingsService;
+        this.iconPosition = 'right';
         this.onChange = new EventEmitter();
         this.onModelChange = (value) => { };
         this.onModelTouched = (value) => { };
@@ -4090,7 +4172,7 @@ class MonkeyInputFilterComponent {
     }
 }
 MonkeyInputFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MonkeyInputFilterComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.CurrencyPipe }, { token: MonkeyStyleGuideSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-MonkeyInputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", type: "type", infoMessage: "infoMessage", errorMessage: "errorMessage", mask: "mask", prefix: "prefix", onlyNumber: "onlyNumber", onlyAlphaNumeric: "onlyAlphaNumeric", upperCase: "upperCase", lowerCase: "lowerCase", capitalize: "capitalize", currency: "currency", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
+MonkeyInputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MonkeyInputFilterComponent, selector: "monkey-input-filter", inputs: { name: "name", label: "label", helperMessage: "helperMessage", placeholder: "placeholder", icon: "icon", type: "type", infoMessage: "infoMessage", errorMessage: "errorMessage", mask: "mask", prefix: "prefix", onlyNumber: "onlyNumber", onlyAlphaNumeric: "onlyAlphaNumeric", upperCase: "upperCase", lowerCase: "lowerCase", capitalize: "capitalize", currency: "currency", iconPosition: "iconPosition", value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "click": "onClick($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => MonkeyInputFilterComponent),
@@ -4108,6 +4190,8 @@ MonkeyInputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         </helper>
       </mecx-form-field-header>
       <mecx-form-field-body>
+        <monkey-icon [icon]="icon" [color]="'#4B4A53'"
+          *ngIf="iconPosition === 'left' && icon"></monkey-icon>
         <input
           [name]="name"
           [type]="type"
@@ -4141,7 +4225,8 @@ MonkeyInputFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
           [disabled]="_disabled"
           *ngIf="!mask && !prefix"
         />
-        <monkey-icon [icon]="icon" [color]="'#4B4A53'"></monkey-icon>
+        <monkey-icon [icon]="icon" [color]="'#4B4A53'"
+          *ngIf="iconPosition === 'right' && icon"></monkey-icon>
         <monkey-icon
           icon="eyes-16"
           [color]="'#4B4A53'"
@@ -4172,6 +4257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
         </helper>
       </mecx-form-field-header>
       <mecx-form-field-body>
+        <monkey-icon [icon]="icon" [color]="'#4B4A53'"
+          *ngIf="iconPosition === 'left' && icon"></monkey-icon>
         <input
           [name]="name"
           [type]="type"
@@ -4205,7 +4292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
           [disabled]="_disabled"
           *ngIf="!mask && !prefix"
         />
-        <monkey-icon [icon]="icon" [color]="'#4B4A53'"></monkey-icon>
+        <monkey-icon [icon]="icon" [color]="'#4B4A53'"
+          *ngIf="iconPosition === 'right' && icon"></monkey-icon>
         <monkey-icon
           icon="eyes-16"
           [color]="'#4B4A53'"
@@ -4263,6 +4351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
                 type: Input
             }], currency: [{
                 type: Input
+            }], iconPosition: [{
+                type: Input
             }], onChange: [{
                 type: Output
             }], value: [{