npm - @yoozsoft/yoozsoft-ng - Versions diffs - 5.3.5 → 6.0.4 - Mend

@yoozsoft/yoozsoft-ng 5.3.5 → 6.0.4

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.

Files changed (68) hide show

package/README.md CHANGED Viewed

@@ -1,10 +1,10 @@
 # Yoozsoft Ng
-Angular widgets built up using Bootstrap 5 CSS and NG Bootstrap 19 widgets with APIs designed for the Angular ecosystem, that are in standalone style.
-We are using TypeScript and targeting the Ng Bootstrap 19 widgets and Bootstrap 5 CSS framework.
+Angular widgets built up using Bootstrap 5 CSS and NG Bootstrap 20 widgets with APIs designed for the Angular ecosystem, that are in standalone style.
+We are using TypeScript and targeting the Ng Bootstrap 20 widgets and Bootstrap 5 CSS framework.
 As with Bootstrap 5 and Angular 2, this library is a work in progress.
-The dependencies are [Angular](https://angular.io/), [Ng Bootstrap](https://ng-bootstrap.github.io/) 19 widgets, [Bootstrap](https://getbootstrap.com/) 5 CSS, [Popper](https://popper.js.org/).
+The dependencies are [Angular](https://angular.io/), [Ng Bootstrap](https://ng-bootstrap.github.io/) 20 widgets, [Bootstrap](https://getbootstrap.com/) 5 CSS, [Popper](https://popper.js.org/).
 ## Table of Contents
@@ -25,7 +25,7 @@ Visit the [Yoozsoft Website](https://www.yoozsoft.com/ys-ng) for general informa
 ## Dependencies
-The only dependencies are Angular, Ng Bootstrap 19 widgets, Bootstrap 5 CSS, and Popper. The supported versions are:
+The only dependencies are Angular, Ng Bootstrap 20 widgets, Bootstrap 5 CSS, and Popper. The supported versions are:
 <table>
     <thead>
@@ -73,6 +73,13 @@ The only dependencies are Angular, Ng Bootstrap 19 widgets, Bootstrap 5 CSS, and
             <td>5.3.6</td>
             <td>2.11.8</td>
         </tr>
+         <tr>
+            <th scope="row">6.x.x</th>
+            <td>^21.0.0</td>
+            <td>20.0.0</td>
+            <td>5.3.8</td>
+            <td>2.11.8</td>
+        </tr>
     </tbody>
 </table>

package/assets/js/UTIF.js-master/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "name": "utif",
+  "description": "Fast and advanced TIFF decoder",
+  "version": "3.1.0",
+  "homepage": "https://github.com/photopea/UTIF.js",
+  "author": "photopea (https://github.com/photopea)",
+  "contributors": [
+    "Scimonster (https://github.com/Scimonster)"
+  ],
+  "license": "MIT",
+  "repository": "github:photopea/UTIF.js",
+  "bugs": {
+    "url": "https://github.com/photopea/UTIF.js/issues"
+  },
+  "main": "UTIF",
+  "keywords": [
+    "tiff",
+    "image",
+    "conversion"
+  ],
+  "dependencies": {
+    "pako": "^1.0.5"
+  }
+}

package/autocomplete/package.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs",
+  "typings": "../types/yoozsoft-yoozsoft-ng-autocomplete.d.ts"
+}

package/datepicker/package.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs",
+  "typings": "../types/yoozsoft-yoozsoft-ng-datepicker.d.ts"
+}

package/directives/package.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/yoozsoft-yoozsoft-ng-directives.mjs",
+  "typings": "../types/yoozsoft-yoozsoft-ng-directives.d.ts"
+}

package/dropdown/package.json ADDED Viewed

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/yoozsoft-yoozsoft-ng-dropdown.mjs",
+  "typings": "../types/yoozsoft-yoozsoft-ng-dropdown.d.ts"
+}

package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs CHANGED Viewed

@@ -207,8 +207,8 @@ class YsAutocompleteComponent {
             this.showDropdown = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsAutocompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsAutocompleteComponent, isStandalone: true, selector: "ys-autocomplete", inputs: { options: "options", optionLabel: "optionLabel", placeholder: "placeholder", multiple: "multiple", showClear: "showClear", disabled: "disabled", styleClass: "styleClass", badgeStyleClass: "badgeStyleClass", loading: "loading", loadingMessage: "loadingMessage", noResultMessage: "noResultMessage", infiniteScroll: "infiniteScroll", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize" }, outputs: { loadMore: "loadMore", selected: "selected", removed: "removed" }, host: { listeners: { "keydown": "handleKeyboard($event)", "document:click": "onClickOutside($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsAutocompleteComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsAutocompleteComponent, isStandalone: true, selector: "ys-autocomplete", inputs: { options: "options", optionLabel: "optionLabel", placeholder: "placeholder", multiple: "multiple", showClear: "showClear", disabled: "disabled", styleClass: "styleClass", badgeStyleClass: "badgeStyleClass", loading: "loading", loadingMessage: "loadingMessage", noResultMessage: "noResultMessage", infiniteScroll: "infiniteScroll", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize" }, outputs: { loadMore: "loadMore", selected: "selected", removed: "removed" }, host: { listeners: { "keydown": "handleKeyboard($event)", "document:click": "onClickOutside($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsAutocompleteComponent),
@@ -216,7 +216,7 @@ class YsAutocompleteComponent {
             },
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"ys-autocomplete position-relative\">\r\n    <div class=\"input-group flex-wrap\">\r\n        @if (multiple && selectedOptions.length > 0) {\r\n        <div class=\"d-flex flex-wrap\">\r\n            @for (item of selectedOptions; track item) {\r\n            <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [ngClass]=\"badgeStyleClass\">\r\n                {{ getLabel(item) }}\r\n                <i class=\"fa fa-times ms-2 cursor-pointer\" (click)=\"removeItem(item)\"></i>\r\n            </span>\r\n            }\r\n        </div>\r\n        }\r\n\r\n        <div class=\"input-group w-100\">\r\n            <input #inputRef type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"searchTerm\"\r\n                (input)=\"onSearchChange()\" (focus)=\"showDropdown = true\" [ngClass]=\"styleClass\" />\r\n\r\n            @if (showClear) {\r\n            @if ((multiple && selectedOptions.length > 0) || (!multiple && searchTerm)) {\r\n            <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\r\n                [disabled]=\"disabled\">\r\n                <span class=\"fa fa-times\"></span>\r\n            </button>\r\n            }\r\n            }\r\n            <span class=\"input-group-text\" (click)=\"showDropdown = !showDropdown\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </span>\r\n        </div>\r\n    </div>\r\n\r\n    @if (showDropdown) {\r\n    <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\r\n        @if (loading) {\r\n        <div class=\"list-group-item text-center\">\r\n            <i class=\"fa fa-spinner fa-spin me-2\"></i>{{ loadingMessage }}\r\n        </div>\r\n        }\r\n        @else if (error) {\r\n        <div class=\"list-group-item text-danger text-center\">{{ error }}</div>\r\n        }\r\n        @else if (filteredOptions.length === 0) {\r\n        <div class=\"list-group-item text-muted text-center\">\r\n            {{ noResultMessage }}\r\n        </div>\r\n        }\r\n        <!-- \u2705 \u062D\u0627\u0644\u062A Virtual Scroll \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u0628\u0632\u0631\u06AF -->\r\n        @else if (virtualScroll && filteredOptions.length > 100) {\r\n        <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize\" class=\"list-group w-100 overflow-y-auto\">\r\n            <ul class=\"list-group w-100\">\r\n                @for (item of filteredOptions; track item; let i = $index) {\r\n                <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n                    (click)=\"onSelect(item)\">\r\n                    @if (itemTemplate) {\r\n                    <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    } @else {\r\n                    {{ getLabel(item) }}\r\n                    }\r\n                </li>\r\n                }\r\n            </ul>\r\n        </cdk-virtual-scroll-viewport>\r\n        }\r\n        <!-- \u2705 \u062D\u0627\u0644\u062A \u0645\u0639\u0645\u0648\u0644\u06CC \u0628\u0631\u0627\u06CC \u0644\u06CC\u0633\u062A\u200C\u0647\u0627\u06CC \u06A9\u0648\u0686\u06A9 -->\r\n        @else {\r\n        <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll\" (scroll)=\"onScroll($event)\">\r\n            @for (item of filteredOptions; track item; let i = $index) {\r\n            <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n                (click)=\"onSelect(item)\">\r\n                @if (itemTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                } @else {\r\n                {{ getLabel(item) }}\r\n                }\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n    </div>\r\n    }\r\n\r\n</div>", styles: [".ys-autocomplete .dropdown-container,.ys-autocomplete .list-group{z-index:1000;max-height:200px}.ys-autocomplete cdk-virtual-scroll-viewport{height:200px;display:block}.ys-autocomplete .btn-clear:hover{background-color:var(--bs-btn-hover-bg)}.ys-autocomplete .badge{font-size:.9rem;cursor:default;font-weight:var(--bs-body-font-weight)}.ys-autocomplete .badge i{cursor:pointer;font-size:.8rem}.ys-autocomplete .badge:hover{font-weight:var(--bs-badge-font-weight)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-autocomplete', imports: [FormsModule, NgTemplateOutlet, NgClass, ScrollingModule], providers: [
                         {

package/fesm2022/yoozsoft-yoozsoft-ng-autocomplete.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"yoozsoft-yoozsoft-ng-autocomplete.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/src/ys-autocomplete/ys-autocomplete.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/src/ys-autocomplete/ys-autocomplete.component.html","../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/yoozsoft-yoozsoft-ng-autocomplete.ts"],"sourcesContent":["import { ScrollingModule } from '@angular/cdk/scrolling';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, TemplateRef, ViewChild } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { catchError, debounceTime, distinctUntilChanged, Observable, of, Subject, switchMap } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'ys-autocomplete',\r\n imports: [FormsModule, NgTemplateOutlet, NgClass, ScrollingModule],\r\n templateUrl: './ys-autocomplete.component.html',\r\n styleUrl: './ys-autocomplete.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsAutocompleteComponent),\r\n multi: true,\r\n },\r\n ],\r\n})\r\nexport class YsAutocompleteComponent implements ControlValueAccessor {\r\n\r\n searchTerm = '';\r\n filteredOptions: any[] = [];\r\n selectedOptions: any[] = [];\r\n showDropdown = false;\r\n activeIndex = -1;\r\n error: string \| null = null;\r\n\r\n /** Array or async function /\r\n @Input() options?: any[] \| ((term: string) => Observable<any[]>);\r\n\r\n /* Label display field /\r\n @Input() optionLabel = 'label';\r\n\r\n /* placeholder /\r\n @Input() placeholder: string = '';\r\n\r\n /* Multiple choice mode /\r\n @Input() multiple = false;\r\n\r\n /* Button to clear selection /\r\n @Input() showClear = false;\r\n\r\n @Input() disabled: boolean = false;\r\n\r\n /* Custom template /\r\n @ContentChild(TemplateRef) itemTemplate?: TemplateRef<any>;\r\n\r\n @Input() styleClass?: string;\r\n /* Badge style class on Multiple choice mode /\r\n @Input() badgeStyleClass: string = 'text-bg-light';\r\n @Input() loading: boolean = false;\r\n @Input() loadingMessage: string = 'Loading...';\r\n /* No results found message /\r\n @Input() noResultMessage: string = 'No results found.';\r\n\r\n /* Infinite scroll feature enabled /\r\n @Input() infiniteScroll = false;\r\n\r\n @Input() virtualScroll: boolean = true;\r\n @Input() virtualScrollItemSize: number = 36;\r\n // [virtualScrollOptions]=\"options\"\r\n\r\n /* Event to request more items /\r\n @Output() loadMore = new EventEmitter<string>();\r\n\r\n /* Output selection /\r\n @Output() selected = new EventEmitter<any>();\r\n /* Output selection after removed item /\r\n @Output() removed = new EventEmitter<any>();\r\n\r\n private search$ = new Subject<string>();\r\n private _onChange: (value: any) => void = () => { };\r\n private _onTouched: () => void = () => { };\r\n\r\n @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;\r\n\r\n get isArrayItems(): boolean { return Array.isArray(this.options); }\r\n get isFunctionItems(): boolean { return typeof this.options === 'function'; }\r\n\r\n constructor(private elRef: ElementRef) { }\r\n\r\n ngOnInit() {\r\n if (Array.isArray(this.options)) {\r\n this.filteredOptions = this.options;\r\n }\r\n\r\n /* Only in async function mode /\r\n if (typeof this.options === 'function') {\r\n const fetchFn = this.options as (term: string) => Observable<any[]>;\r\n this.search$\r\n .pipe(\r\n debounceTime(300),\r\n distinctUntilChanged(),\r\n switchMap((term) => {\r\n this.loading = true;\r\n this.error = null;\r\n return fetchFn(term).pipe(\r\n catchError((err) => {\r\n this.error = 'Error receiving data!';\r\n console.error(err);\r\n return of([]);\r\n })\r\n );\r\n })\r\n )\r\n .subscribe((results) => {\r\n this.filteredOptions = results;\r\n this.loading = false;\r\n this.showDropdown = true;\r\n });\r\n }\r\n\r\n }\r\n\r\n /* For the initial value of FormControl /\r\n writeValue(value: any): void {\r\n if (this.multiple) {\r\n this.selectedOptions = value ? [...value] : [];\r\n } else {\r\n this.searchTerm = value ? this.getLabel(value) : '';\r\n }\r\n }\r\n\r\n registerOnChange(fn: any): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: any): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n if (this.inputRef) {\r\n this.inputRef.nativeElement.disabled = isDisabled;\r\n }\r\n }\r\n\r\n onSearchChange() {\r\n const term = this.searchTerm.trim();\r\n\r\n if (Array.isArray(this.options)) {\r\n const lower = term.toLowerCase();\r\n this.filteredOptions = this.options.filter((item) =>\r\n this.getLabel(item).toLowerCase().includes(lower)\r\n );\r\n this.showDropdown = this.filteredOptions.length >= 0;\r\n } else if (typeof this.options === 'function') {\r\n this.search$.next(term);\r\n }\r\n\r\n if (!this.multiple && !term) {\r\n this.clearSelection();\r\n }\r\n }\r\n\r\n getLabel(item: any): string {\r\n if (!item) return '';\r\n if (typeof item === 'string') return item;\r\n if (item && this.optionLabel && item[this.optionLabel]) {\r\n return item[this.optionLabel];\r\n }\r\n return '';\r\n }\r\n\r\n onSelect(item: any) {\r\n if (this.multiple) {\r\n const exists = this.selectedOptions.some(\r\n (x) => this.getLabel(x) === this.getLabel(item)\r\n );\r\n if (!exists) {\r\n this.selectedOptions.push(item);\r\n this._onChange(this.selectedOptions);\r\n this._onTouched();\r\n this.selected.emit(this.selectedOptions);\r\n }\r\n this.searchTerm = '';\r\n this.showDropdown = true;\r\n this.onSearchChange();\r\n } else {\r\n this.searchTerm = this.getLabel(item);\r\n this._onChange(item);\r\n this._onTouched();\r\n this.selected.emit(item);\r\n this.showDropdown = false;\r\n }\r\n\r\n this.activeIndex = -1;\r\n }\r\n\r\n removeItem(item: any) {\r\n this.selectedOptions = this.selectedOptions.filter(\r\n (x) => this.getLabel(x) !== this.getLabel(item)\r\n );\r\n this._onChange(this.selectedOptions);\r\n this.removed.emit(this.selectedOptions);\r\n }\r\n\r\n onScroll(event: Event) {\r\n if (!this.infiniteScroll \|\| this.loading) return;\r\n\r\n const target = event.target as HTMLElement;\r\n const nearBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;\r\n\r\n if (nearBottom) {\r\n // Request more items\r\n this.loadMore.emit(this.searchTerm);\r\n }\r\n }\r\n\r\n clearSelection() {\r\n if (this.multiple) {\r\n this.selectedOptions = [];\r\n this._onChange(this.selectedOptions);\r\n this.removed.emit(this.selectedOptions);\r\n } else {\r\n this.searchTerm = '';\r\n this._onChange(null);\r\n this.selected.emit(null);\r\n }\r\n\r\n this.showDropdown = false;\r\n }\r\n\r\n /* Keyboard control /\r\n @HostListener('keydown', ['$event'])\r\n handleKeyboard(event: KeyboardEvent) {\r\n if (!this.showDropdown \|\| this.filteredOptions.length === 0) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;\r\n event.preventDefault();\r\n break;\r\n case 'ArrowUp':\r\n this.activeIndex =\r\n (this.activeIndex - 1 + this.filteredOptions.length) %\r\n this.filteredOptions.length;\r\n event.preventDefault();\r\n break;\r\n case 'Enter':\r\n if (this.activeIndex >= 0) {\r\n this.onSelect(this.filteredOptions[this.activeIndex]);\r\n event.preventDefault();\r\n }\r\n break;\r\n case 'Escape':\r\n this.showDropdown = false;\r\n break;\r\n }\r\n }\r\n\r\n /* Close by clicking outside /\r\n @HostListener('document:click', ['$event'])\r\n onClickOutside(event: MouseEvent) {\r\n const clickedInside = this.elRef.nativeElement.contains(event.target);\r\n if (!clickedInside) {\r\n this.showDropdown = false;\r\n }\r\n }\r\n\r\n}\r\n","<div class=\"ys-autocomplete position-relative\">\r\n <div class=\"input-group flex-wrap\">\r\n @if (multiple && selectedOptions.length > 0) {\r\n <div class=\"d-flex flex-wrap\">\r\n @for (item of selectedOptions; track item) {\r\n <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [ngClass]=\"badgeStyleClass\">\r\n {{ getLabel(item) }}\r\n <i class=\"fa fa-times ms-2 cursor-pointer\" (click)=\"removeItem(item)\"></i>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"searchTerm\"\r\n (input)=\"onSearchChange()\" (focus)=\"showDropdown = true\" [ngClass]=\"styleClass\" />\r\n\r\n @if (showClear) {\r\n @if ((multiple && selectedOptions.length > 0) \|\| (!multiple && searchTerm)) {\r\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\r\n [disabled]=\"disabled\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n }\r\n }\r\n <span class=\"input-group-text\" (click)=\"showDropdown = !showDropdown\">\r\n <i class=\"fa fa-search\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\r\n @if (loading) {\r\n <div class=\"list-group-item text-center\">\r\n <i class=\"fa fa-spinner fa-spin me-2\"></i>{{ loadingMessage }}\r\n </div>\r\n }\r\n @else if (error) {\r\n <div class=\"list-group-item text-danger text-center\">{{ error }}</div>\r\n }\r\n @else if (filteredOptions.length === 0) {\r\n <div class=\"list-group-item text-muted text-center\">\r\n {{ noResultMessage }}\r\n </div>\r\n }\r\n <!-- ✅ حالت Virtual Scroll برای لیست‌های بزرگ -->\r\n @else if (virtualScroll && filteredOptions.length > 100) {\r\n <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize\" class=\"list-group w-100 overflow-y-auto\">\r\n <ul class=\"list-group w-100\">\r\n @for (item of filteredOptions; track item; let i = $index) {\r\n <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n (click)=\"onSelect(item)\">\r\n @if (itemTemplate) {\r\n <ng-container ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ getLabel(item) }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </cdk-virtual-scroll-viewport>\r\n }\r\n <!-- ✅ حالت معمولی برای لیست‌های کوچک -->\r\n @else {\r\n <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll\" (scroll)=\"onScroll($event)\">\r\n @for (item of filteredOptions; track item; let i = $index) {\r\n <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n (click)=\"onSelect(item)\">\r\n @if (itemTemplate) {\r\n <ng-container ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ getLabel(item) }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n }\r\n\r\n</div>","/\r\n * Public API Surface of ys-autocomplete\r\n /\r\n\r\nexport from './src/ys-autocomplete/ys-autocomplete.component';\r\n\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"yoozsoft-yoozsoft-ng-autocomplete.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/src/ys-autocomplete/ys-autocomplete.component.ts","../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/src/ys-autocomplete/ys-autocomplete.component.html","../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/autocomplete/yoozsoft-yoozsoft-ng-autocomplete.ts"],"sourcesContent":["import { ScrollingModule } from '@angular/cdk/scrolling';\r\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\r\nimport { Component, ContentChild, ElementRef, EventEmitter, forwardRef, HostListener, Input, Output, TemplateRef, ViewChild } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { catchError, debounceTime, distinctUntilChanged, Observable, of, Subject, switchMap } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'ys-autocomplete',\r\n imports: [FormsModule, NgTemplateOutlet, NgClass, ScrollingModule],\r\n templateUrl: './ys-autocomplete.component.html',\r\n styleUrl: './ys-autocomplete.component.scss',\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => YsAutocompleteComponent),\r\n multi: true,\r\n },\r\n ],\r\n})\r\nexport class YsAutocompleteComponent implements ControlValueAccessor {\r\n\r\n searchTerm = '';\r\n filteredOptions: any[] = [];\r\n selectedOptions: any[] = [];\r\n showDropdown = false;\r\n activeIndex = -1;\r\n error: string \| null = null;\r\n\r\n /** Array or async function /\r\n @Input() options?: any[] \| ((term: string) => Observable<any[]>);\r\n\r\n /* Label display field /\r\n @Input() optionLabel = 'label';\r\n\r\n /* placeholder /\r\n @Input() placeholder: string = '';\r\n\r\n /* Multiple choice mode /\r\n @Input() multiple = false;\r\n\r\n /* Button to clear selection /\r\n @Input() showClear = false;\r\n\r\n @Input() disabled: boolean = false;\r\n\r\n /* Custom template /\r\n @ContentChild(TemplateRef) itemTemplate?: TemplateRef<any>;\r\n\r\n @Input() styleClass?: string;\r\n /* Badge style class on Multiple choice mode /\r\n @Input() badgeStyleClass: string = 'text-bg-light';\r\n @Input() loading: boolean = false;\r\n @Input() loadingMessage: string = 'Loading...';\r\n /* No results found message /\r\n @Input() noResultMessage: string = 'No results found.';\r\n\r\n /* Infinite scroll feature enabled /\r\n @Input() infiniteScroll = false;\r\n\r\n @Input() virtualScroll: boolean = true;\r\n @Input() virtualScrollItemSize: number = 36;\r\n // [virtualScrollOptions]=\"options\"\r\n\r\n /* Event to request more items /\r\n @Output() loadMore = new EventEmitter<string>();\r\n\r\n /* Output selection /\r\n @Output() selected = new EventEmitter<any>();\r\n /* Output selection after removed item /\r\n @Output() removed = new EventEmitter<any>();\r\n\r\n private search$ = new Subject<string>();\r\n private _onChange: (value: any) => void = () => { };\r\n private _onTouched: () => void = () => { };\r\n\r\n @ViewChild('inputRef') inputRef!: ElementRef<HTMLInputElement>;\r\n\r\n get isArrayItems(): boolean { return Array.isArray(this.options); }\r\n get isFunctionItems(): boolean { return typeof this.options === 'function'; }\r\n\r\n constructor(private elRef: ElementRef) { }\r\n\r\n ngOnInit() {\r\n if (Array.isArray(this.options)) {\r\n this.filteredOptions = this.options;\r\n }\r\n\r\n /* Only in async function mode /\r\n if (typeof this.options === 'function') {\r\n const fetchFn = this.options as (term: string) => Observable<any[]>;\r\n this.search$\r\n .pipe(\r\n debounceTime(300),\r\n distinctUntilChanged(),\r\n switchMap((term) => {\r\n this.loading = true;\r\n this.error = null;\r\n return fetchFn(term).pipe(\r\n catchError((err) => {\r\n this.error = 'Error receiving data!';\r\n console.error(err);\r\n return of([]);\r\n })\r\n );\r\n })\r\n )\r\n .subscribe((results) => {\r\n this.filteredOptions = results;\r\n this.loading = false;\r\n this.showDropdown = true;\r\n });\r\n }\r\n\r\n }\r\n\r\n /* For the initial value of FormControl /\r\n writeValue(value: any): void {\r\n if (this.multiple) {\r\n this.selectedOptions = value ? [...value] : [];\r\n } else {\r\n this.searchTerm = value ? this.getLabel(value) : '';\r\n }\r\n }\r\n\r\n registerOnChange(fn: any): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: any): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n setDisabledState?(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n if (this.inputRef) {\r\n this.inputRef.nativeElement.disabled = isDisabled;\r\n }\r\n }\r\n\r\n onSearchChange() {\r\n const term = this.searchTerm.trim();\r\n\r\n if (Array.isArray(this.options)) {\r\n const lower = term.toLowerCase();\r\n this.filteredOptions = this.options.filter((item) =>\r\n this.getLabel(item).toLowerCase().includes(lower)\r\n );\r\n this.showDropdown = this.filteredOptions.length >= 0;\r\n } else if (typeof this.options === 'function') {\r\n this.search$.next(term);\r\n }\r\n\r\n if (!this.multiple && !term) {\r\n this.clearSelection();\r\n }\r\n }\r\n\r\n getLabel(item: any): string {\r\n if (!item) return '';\r\n if (typeof item === 'string') return item;\r\n if (item && this.optionLabel && item[this.optionLabel]) {\r\n return item[this.optionLabel];\r\n }\r\n return '';\r\n }\r\n\r\n onSelect(item: any) {\r\n if (this.multiple) {\r\n const exists = this.selectedOptions.some(\r\n (x) => this.getLabel(x) === this.getLabel(item)\r\n );\r\n if (!exists) {\r\n this.selectedOptions.push(item);\r\n this._onChange(this.selectedOptions);\r\n this._onTouched();\r\n this.selected.emit(this.selectedOptions);\r\n }\r\n this.searchTerm = '';\r\n this.showDropdown = true;\r\n this.onSearchChange();\r\n } else {\r\n this.searchTerm = this.getLabel(item);\r\n this._onChange(item);\r\n this._onTouched();\r\n this.selected.emit(item);\r\n this.showDropdown = false;\r\n }\r\n\r\n this.activeIndex = -1;\r\n }\r\n\r\n removeItem(item: any) {\r\n this.selectedOptions = this.selectedOptions.filter(\r\n (x) => this.getLabel(x) !== this.getLabel(item)\r\n );\r\n this._onChange(this.selectedOptions);\r\n this.removed.emit(this.selectedOptions);\r\n }\r\n\r\n onScroll(event: Event) {\r\n if (!this.infiniteScroll \|\| this.loading) return;\r\n\r\n const target = event.target as HTMLElement;\r\n const nearBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;\r\n\r\n if (nearBottom) {\r\n // Request more items\r\n this.loadMore.emit(this.searchTerm);\r\n }\r\n }\r\n\r\n clearSelection() {\r\n if (this.multiple) {\r\n this.selectedOptions = [];\r\n this._onChange(this.selectedOptions);\r\n this.removed.emit(this.selectedOptions);\r\n } else {\r\n this.searchTerm = '';\r\n this._onChange(null);\r\n this.selected.emit(null);\r\n }\r\n\r\n this.showDropdown = false;\r\n }\r\n\r\n /* Keyboard control /\r\n @HostListener('keydown', ['$event'])\r\n handleKeyboard(event: KeyboardEvent) {\r\n if (!this.showDropdown \|\| this.filteredOptions.length === 0) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;\r\n event.preventDefault();\r\n break;\r\n case 'ArrowUp':\r\n this.activeIndex =\r\n (this.activeIndex - 1 + this.filteredOptions.length) %\r\n this.filteredOptions.length;\r\n event.preventDefault();\r\n break;\r\n case 'Enter':\r\n if (this.activeIndex >= 0) {\r\n this.onSelect(this.filteredOptions[this.activeIndex]);\r\n event.preventDefault();\r\n }\r\n break;\r\n case 'Escape':\r\n this.showDropdown = false;\r\n break;\r\n }\r\n }\r\n\r\n /* Close by clicking outside /\r\n @HostListener('document:click', ['$event'])\r\n onClickOutside(event: MouseEvent) {\r\n const clickedInside = this.elRef.nativeElement.contains(event.target);\r\n if (!clickedInside) {\r\n this.showDropdown = false;\r\n }\r\n }\r\n\r\n}\r\n","<div class=\"ys-autocomplete position-relative\">\r\n <div class=\"input-group flex-wrap\">\r\n @if (multiple && selectedOptions.length > 0) {\r\n <div class=\"d-flex flex-wrap\">\r\n @for (item of selectedOptions; track item) {\r\n <span class=\"badge me-1 mb-1 p-2 d-flex align-items-center\" [ngClass]=\"badgeStyleClass\">\r\n {{ getLabel(item) }}\r\n <i class=\"fa fa-times ms-2 cursor-pointer\" (click)=\"removeItem(item)\"></i>\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"input-group w-100\">\r\n <input #inputRef type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"searchTerm\"\r\n (input)=\"onSearchChange()\" (focus)=\"showDropdown = true\" [ngClass]=\"styleClass\" />\r\n\r\n @if (showClear) {\r\n @if ((multiple && selectedOptions.length > 0) \|\| (!multiple && searchTerm)) {\r\n <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearSelection()\"\r\n [disabled]=\"disabled\">\r\n <span class=\"fa fa-times\"></span>\r\n </button>\r\n }\r\n }\r\n <span class=\"input-group-text\" (click)=\"showDropdown = !showDropdown\">\r\n <i class=\"fa fa-search\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n @if (showDropdown) {\r\n <div class=\"dropdown-container position-absolute w-100 shadow-sm bg-white border rounded\">\r\n @if (loading) {\r\n <div class=\"list-group-item text-center\">\r\n <i class=\"fa fa-spinner fa-spin me-2\"></i>{{ loadingMessage }}\r\n </div>\r\n }\r\n @else if (error) {\r\n <div class=\"list-group-item text-danger text-center\">{{ error }}</div>\r\n }\r\n @else if (filteredOptions.length === 0) {\r\n <div class=\"list-group-item text-muted text-center\">\r\n {{ noResultMessage }}\r\n </div>\r\n }\r\n <!-- ✅ حالت Virtual Scroll برای لیست‌های بزرگ -->\r\n @else if (virtualScroll && filteredOptions.length > 100) {\r\n <cdk-virtual-scroll-viewport [itemSize]=\"virtualScrollItemSize\" class=\"list-group w-100 overflow-y-auto\">\r\n <ul class=\"list-group w-100\">\r\n @for (item of filteredOptions; track item; let i = $index) {\r\n <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n (click)=\"onSelect(item)\">\r\n @if (itemTemplate) {\r\n <ng-container ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ getLabel(item) }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </cdk-virtual-scroll-viewport>\r\n }\r\n <!-- ✅ حالت معمولی برای لیست‌های کوچک -->\r\n @else {\r\n <ul class=\"list-group w-100 overflow-y-auto\" [class.scrollable]=\"infiniteScroll\" (scroll)=\"onScroll($event)\">\r\n @for (item of filteredOptions; track item; let i = $index) {\r\n <li class=\"list-group-item list-group-item-action\" [class.active]=\"i === activeIndex\"\r\n (click)=\"onSelect(item)\">\r\n @if (itemTemplate) {\r\n <ng-container ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n } @else {\r\n {{ getLabel(item) }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </div>\r\n }\r\n\r\n</div>","/\r\n * Public API Surface of ys-autocomplete\r\n /\r\n\r\nexport from './src/ys-autocomplete/ys-autocomplete.component';\r\n\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/yoozsoft-yoozsoft-ng-datepicker.mjs CHANGED Viewed

@@ -98,10 +98,10 @@ class YsDateParserFormatterService extends NgbDateParserFormatter {
     format(date) {
         return date ? date.year + this.DELIMITER + date.month + this.DELIMITER + date.day : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDateParserFormatterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDateParserFormatterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -133,10 +133,10 @@ const I18N_VALUES = {
 };
 class I18n {
     language = LanguageType[LanguageType.en];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: I18n });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: I18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: I18n });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: I18n, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: I18n, decorators: [{
             type: Injectable
         }] });
 class YsDatepickerI18nService extends NgbDatepickerI18n {
@@ -159,10 +159,10 @@ class YsDatepickerI18nService extends NgbDatepickerI18n {
     getDayAriaLabel(date) {
         return `${date.day}-${date.month}-${date.year}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerI18nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerI18nService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -241,8 +241,8 @@ class YsDatepickerComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerComponent, isStandalone: true, selector: "ys-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDatepickerComponent, isStandalone: true, selector: "ys-datepicker", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerComponent),
@@ -253,7 +253,7 @@ class YsDatepickerComponent {
             { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
         ], ngImport: i0, template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n  [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n  (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"dp.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i2.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker', imports: [NgbDatepickerModule, FormsModule], providers: [
                         {
@@ -357,8 +357,8 @@ class YsDatepickerPersianComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerPersianComponent, isStandalone: true, selector: "ys-datepicker-persian", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDatepickerPersianComponent, isStandalone: true, selector: "ys-datepicker-persian", inputs: { firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", todayLabel: "todayLabel", footer: "footer", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerPersianComponent),
@@ -370,7 +370,7 @@ class YsDatepickerPersianComponent {
             { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
         ], ngImport: i0, template: "<ngb-datepicker #dp [(ngModel)]=\"value\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n  [footerTemplate]=\"footerTemplate\" placeholder=\"yyyy/mm/dd\" [disabled]=\"disabled\"\r\n  (ngModelChange)=\"valueChanged(value)\" />\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"dp.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "component", type: i2.NgbDatepicker, selector: "ngb-datepicker", inputs: ["contentTemplate", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "maxDate", "minDate", "navigation", "outsideDays", "showWeekNumbers", "startDate", "weekdays"], outputs: ["navigate", "dateSelect"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerPersianComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
                         {
@@ -478,8 +478,8 @@ class YsDatepickerPopupPersianComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerPopupPersianComponent, isStandalone: true, selector: "ys-datepicker-popup-persian", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerPopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDatepickerPopupPersianComponent, isStandalone: true, selector: "ys-datepicker-popup-persian", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerPopupPersianComponent),
@@ -489,9 +489,9 @@ class YsDatepickerPopupPersianComponent {
             { provide: NgbCalendar, useClass: NgbCalendarPersian },
             { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
             { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-popup-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
                         {
@@ -601,8 +601,8 @@ class YsDatepickerPopupComponent {
         this.value = this.today;
         this.valueChanged(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerPopupComponent, isStandalone: true, selector: "ys-datepicker-popup", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerPopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDatepickerPopupComponent, isStandalone: true, selector: "ys-datepicker-popup", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerPopupComponent),
@@ -611,9 +611,9 @@ class YsDatepickerPopupComponent {
             I18n,
             { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
             { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"input-group\">\r\n      <input class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dp\" [(ngModel)]=\"value\" ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\" [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n        [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" [dayTemplate]=\"customDay\"\r\n        (ngModelChange)=\"valueChanged(value)\" readonly />\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n          <i class=\"{{calendarIconClass}}\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n\r\n  <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n    let-focused=\"focused\">\r\n    <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\" [class.bg-info]=\"selected\"\r\n      [class.text-white]=\"selected\" [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\">\r\n      {{ date.day }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <ng-template #footerTemplate>\r\n    @if (isFooter) {\r\n      <span>\r\n        <hr class=\"my-0\" />\r\n        @if (footer) {\r\n          <span>\r\n            {{footer}}\r\n          </span>\r\n        }\r\n        @if (!footer) {\r\n          <span>\r\n            <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n            [disabled]=\"disabled\">{{todayLabel}}</button>\r\n            <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n          </span>\r\n        }\r\n      </span>\r\n    }\r\n  </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.custom-day:hover,.custom-day.focused{background-color:var(--bs-gray-300)}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-popup', imports: [NgbDatepickerModule, FormsModule], providers: [
                         {
@@ -758,8 +758,8 @@ class YsDatepickerRangePopupPersianComponent {
         this.toDate = this.today;
         this.valueChanged();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerRangePopupPersianComponent, isStandalone: true, selector: "ys-datepicker-range-popup-persian", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDatepickerRangePopupPersianComponent, isStandalone: true, selector: "ys-datepicker-range-popup-persian", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerRangePopupPersianComponent),
@@ -769,9 +769,9 @@ class YsDatepickerRangePopupPersianComponent {
             { provide: NgbCalendar, useClass: NgbCalendarPersian },
             { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
             { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-range-popup-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
                         {
@@ -908,8 +908,8 @@ class YsDatepickerRangePopupComponent {
         this.toDate = this.today;
         this.valueChanged();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: YsDatepickerRangePopupComponent, isStandalone: true, selector: "ys-datepicker-range-popup", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerRangePopupComponent, deps: [{ token: I18n }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDatepickerRangePopupComponent, isStandalone: true, selector: "ys-datepicker-range-popup", inputs: { container: "container", firstDayOfWeek: "firstDayOfWeek", weekend: "weekend", language: "language", isFooter: "isFooter", closeLabel: "closeLabel", todayLabel: "todayLabel", footer: "footer", calendarIconClass: "calendarIconClass", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => YsDatepickerRangePopupComponent),
@@ -918,9 +918,9 @@ class YsDatepickerRangePopupComponent {
             I18n,
             { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
             { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
-        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+        ], ngImport: i0, template: "<form class=\"row row-cols-sm-auto\">\r\n  <div class=\"col-12\">\r\n    <div class=\"dp-hidden position-absolute\">\r\n      <div class=\"input-group\">\r\n        <input name=\"datepicker\" class=\"form-control\" ngbDatepicker #datepicker=\"ngbDatepicker\"\r\n          [autoClose]=\"'outside'\" (dateSelect)=\"onDateSelection($event)\" [displayMonths]=\"2\"\r\n          [dayTemplate]=\"customDay\" outsideDays=\"hidden\" [startDate]=\"fromDate!\" tabindex=\"-1\"\r\n          [container]=\"container\" [markDisabled]=\"markDisabled\" [disabled]=\"disabled\"\r\n          [footerTemplate]=\"footerTemplate\" [firstDayOfWeek]=\"firstDayOfWeek\" readonly />\r\n        </div>\r\n      </div>\r\n      <div class=\"input-group\">\r\n        <input #dpFromDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpFromDate\"\r\n          [value]=\"formatter.format(fromDate)\" (input)=\"fromDate = validateInput(fromDate, dpFromDate.value)\"\r\n          [disabled]=\"disabled\" readonly />\r\n          <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n            <i class=\"{{calendarIconClass}}\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-12\">\r\n        <div class=\"input-group\">\r\n          <input #dpToDate class=\"form-control\" placeholder=\"yyyy/mm/dd\" name=\"dpToDate\"\r\n            [value]=\"formatter.format(toDate)\" (input)=\"toDate = validateInput(toDate, dpToDate.value)\"\r\n            [disabled]=\"disabled\" readonly />\r\n            <button class=\"btn btn-outline-secondary\" (click)=\"datepicker.toggle()\" type=\"button\" [disabled]=\"disabled\">\r\n              <i class=\"{{calendarIconClass}}\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n\r\n      <ng-template #customDay let-date let-currentMonth=\"currentMonth\" let-selected=\"selected\" let-disabled=\"disabled\"\r\n        let-focused=\"focused\">\r\n        <span class=\"custom-day\" [class.weekend]=\"isWeekend(date)\" [class.focused]=\"focused\"\r\n          [class.hidden]=\"date.month !== currentMonth\" [class.text-muted]=\"disabled\" [class.range]=\"isRange(date)\"\r\n          [class.faded]=\"isHovered(date) || isInside(date)\" (mouseenter)=\"hoveredDate = date\"\r\n          (mouseleave)=\"hoveredDate = null\">\r\n          {{ date.day }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        @if (isFooter) {\r\n          <span>\r\n            <hr class=\"my-0\" />\r\n            @if (footer) {\r\n              <span>\r\n                {{footer}}\r\n              </span>\r\n            }\r\n            @if (!footer) {\r\n              <span>\r\n                <button class=\"btn btn-primary btn-sm m-2 float-start\" (click)=\"datepicker.navigateTo(); setToday();\"\r\n                [disabled]=\"disabled\">{{todayLabel}}</button>\r\n                <button class=\"btn btn-secondary btn-sm m-2 float-end\" (click)=\"datepicker.close()\">{{closeLabel}}</button>\r\n              </span>\r\n            }\r\n          </span>\r\n        }\r\n      </ng-template>", styles: ["::ng-deep html[dir=rtl] .ngb-dp-arrow-prev .ngb-dp-navigation-chevron{transform:rotate(45deg)}::ng-deep html[dir=rtl] .ngb-dp-arrow-next .ngb-dp-navigation-chevron{transform:rotate(-135deg)}::ng-deep html[dir=rtl] .form-select{background-position:left .75rem center}::ng-deep html[dir=rtl] .ngb-dp-month:first-child .ngb-dp-week{padding-right:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month:last-child .ngb-dp-week{padding-left:.25rem}::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-month-name,::ng-deep html[dir=rtl] .ngb-dp-month+.ngb-dp-month .ngb-dp-week{padding-right:1rem}::ng-deep html[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,::ng-deep html[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}::ng-deep html[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-right:calc(var(--bs-border-width) * -1);border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-top-right-radius:0;border-bottom-right-radius:0}::ng-deep .ngb-dp-day{display:flex;align-items:center}.custom-day{text-align:center;padding:.185rem .25rem;border-radius:.25rem;display:inline-block;width:2rem;height:2rem;line-height:1.7}.weekend{color:var(--bs-danger)}.dp-hidden{width:0;margin:0;border:none;padding:0}.custom-day.focused{background-color:var(--bs-gray-300)}.custom-day.range,.custom-day:hover{background-color:var(--bs-info);color:var(--bs-white)}.custom-day.faded{background-color:var(--bs-info);opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ys-datepicker-range-popup', imports: [NgbDatepickerModule, FormsModule], providers: [
                         {