@yoozsoft/yoozsoft-ng 5.3.4 → 6.0.2

package/fesm2022/yoozsoft-yoozsoft-ng.mjs

@@ -1,11 +1,2602 @@
+import * as i2 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, TemplateRef, forwardRef, HostListener, ViewChild, Output, Input, ContentChild, Component, Injectable, inject, Directive, ElementRef } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, switchMap, catchError, of, BehaviorSubject } from 'rxjs';
+import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDateParserFormatter, NgbDatepickerI18n, NgbCalendar, NgbDatepickerModule, NgbCalendarPersian, NgbDate, NgbTooltip, NgbTooltipModule, NgbPagination, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1$1 from '@angular/router';
+import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
+
+class YsAutocompleteComponent {
+    elRef;
+    searchTerm = '';
+    filteredOptions = [];
+    selectedOptions = [];
+    showDropdown = false;
+    activeIndex = -1;
+    error = null;
+    /** Array or async function */
+    options;
+    /** Label display field */
+    optionLabel = 'label';
+    /** placeholder */
+    placeholder = '';
+    /** Multiple choice mode */
+    multiple = false;
+    /** Button to clear selection */
+    showClear = false;
+    disabled = false;
+    /** Custom template */
+    itemTemplate;
+    styleClass;
+    /** Badge style class on Multiple choice mode  */
+    badgeStyleClass = 'text-bg-light';
+    loading = false;
+    loadingMessage = 'Loading...';
+    /** No results found message */
+    noResultMessage = 'No results found.';
+    /** Infinite scroll feature enabled */
+    infiniteScroll = false;
+    virtualScroll = true;
+    virtualScrollItemSize = 36;
+    //   [virtualScrollOptions]="options"
+    /** Event to request more items */
+    loadMore = new EventEmitter();
+    /** Output selection */
+    selected = new EventEmitter();
+    /** Output selection after removed item */
+    removed = new EventEmitter();
+    search$ = new Subject();
+    _onChange = () => { };
+    _onTouched = () => { };
+    inputRef;
+    get isArrayItems() { return Array.isArray(this.options); }
+    get isFunctionItems() { return typeof this.options === 'function'; }
+    constructor(elRef) {
+        this.elRef = elRef;
+    }
+    ngOnInit() {
+        if (Array.isArray(this.options)) {
+            this.filteredOptions = this.options;
+        }
+        /** Only in async function mode */
+        if (typeof this.options === 'function') {
+            const fetchFn = this.options;
+            this.search$
+                .pipe(debounceTime(300), distinctUntilChanged(), switchMap((term) => {
+                this.loading = true;
+                this.error = null;
+                return fetchFn(term).pipe(catchError((err) => {
+                    this.error = 'Error receiving data!';
+                    console.error(err);
+                    return of([]);
+                }));
+            }))
+                .subscribe((results) => {
+                this.filteredOptions = results;
+                this.loading = false;
+                this.showDropdown = true;
+            });
+        }
+    }
+    /** For the initial value of FormControl */
+    writeValue(value) {
+        if (this.multiple) {
+            this.selectedOptions = value ? [...value] : [];
+        }
+        else {
+            this.searchTerm = value ? this.getLabel(value) : '';
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (this.inputRef) {
+            this.inputRef.nativeElement.disabled = isDisabled;
+        }
+    }
+    onSearchChange() {
+        const term = this.searchTerm.trim();
+        if (Array.isArray(this.options)) {
+            const lower = term.toLowerCase();
+            this.filteredOptions = this.options.filter((item) => this.getLabel(item).toLowerCase().includes(lower));
+            this.showDropdown = this.filteredOptions.length >= 0;
+        }
+        else if (typeof this.options === 'function') {
+            this.search$.next(term);
+        }
+        if (!this.multiple && !term) {
+            this.clearSelection();
+        }
+    }
+    getLabel(item) {
+        if (!item)
+            return '';
+        if (typeof item === 'string')
+            return item;
+        if (item && this.optionLabel && item[this.optionLabel]) {
+            return item[this.optionLabel];
+        }
+        return '';
+    }
+    onSelect(item) {
+        if (this.multiple) {
+            const exists = this.selectedOptions.some((x) => this.getLabel(x) === this.getLabel(item));
+            if (!exists) {
+                this.selectedOptions.push(item);
+                this._onChange(this.selectedOptions);
+                this._onTouched();
+                this.selected.emit(this.selectedOptions);
+            }
+            this.searchTerm = '';
+            this.showDropdown = true;
+            this.onSearchChange();
+        }
+        else {
+            this.searchTerm = this.getLabel(item);
+            this._onChange(item);
+            this._onTouched();
+            this.selected.emit(item);
+            this.showDropdown = false;
+        }
+        this.activeIndex = -1;
+    }
+    removeItem(item) {
+        this.selectedOptions = this.selectedOptions.filter((x) => this.getLabel(x) !== this.getLabel(item));
+        this._onChange(this.selectedOptions);
+        this.removed.emit(this.selectedOptions);
+    }
+    onScroll(event) {
+        if (!this.infiniteScroll || this.loading)
+            return;
+        const target = event.target;
+        const nearBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;
+        if (nearBottom) {
+            // Request more items
+            this.loadMore.emit(this.searchTerm);
+        }
+    }
+    clearSelection() {
+        if (this.multiple) {
+            this.selectedOptions = [];
+            this._onChange(this.selectedOptions);
+            this.removed.emit(this.selectedOptions);
+        }
+        else {
+            this.searchTerm = '';
+            this._onChange(null);
+            this.selected.emit(null);
+        }
+        this.showDropdown = false;
+    }
+    /** Keyboard control */
+    handleKeyboard(event) {
+        if (!this.showDropdown || this.filteredOptions.length === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                this.activeIndex = (this.activeIndex + 1) % this.filteredOptions.length;
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.activeIndex =
+                    (this.activeIndex - 1 + this.filteredOptions.length) %
+                        this.filteredOptions.length;
+                event.preventDefault();
+                break;
+            case 'Enter':
+                if (this.activeIndex >= 0) {
+                    this.onSelect(this.filteredOptions[this.activeIndex]);
+                    event.preventDefault();
+                }
+                break;
+            case 'Escape':
+                this.showDropdown = false;
+                break;
+        }
+    }
+    /** Close by clicking outside */
+    onClickOutside(event) {
+        const clickedInside = this.elRef.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.showDropdown = false;
+        }
+    }
+    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),
+                multi: true,
+            },
+        ], 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: "21.0.6", ngImport: i0, type: YsAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-autocomplete', imports: [FormsModule, NgTemplateOutlet, NgClass, ScrollingModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsAutocompleteComponent),
+                            multi: true,
+                        },
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], styleClass: [{
+                type: Input
+            }], badgeStyleClass: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], loadingMessage: [{
+                type: Input
+            }], noResultMessage: [{
+                type: Input
+            }], infiniteScroll: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], virtualScrollItemSize: [{
+                type: Input
+            }], loadMore: [{
+                type: Output
+            }], selected: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['inputRef']
+            }], handleKeyboard: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of ys-autocomplete
+ */
+
+class DateTimeFormat {
+}
+
+class JalaliDate {
+    static daysInMonth = {
+        g_days_in_month: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+        j_days_in_month: [31, 31, 31, 31, 31, 31, 30, 30, 30, 30, 30, 29]
+    };
+    static jalaliToGregorian(jalaliYear, jalaliMonth, jalaliDay) {
+        jalaliYear = parseInt(`${jalaliYear}`);
+        jalaliMonth = parseInt(`${jalaliMonth}`);
+        jalaliDay = parseInt(`${jalaliDay}`);
+        var jy = jalaliYear - 979;
+        var jm = jalaliMonth - 1;
+        var jd = jalaliDay - 1;
+        var j_day_no = 365 * jy + parseInt(`${jy / 33}`) * 8 + parseInt(`${(jy % 33 + 3) / 4}`);
+        for (var i = 0; i < jm; ++i)
+            j_day_no += this.daysInMonth.j_days_in_month[i];
+        j_day_no += jd;
+        var g_day_no = j_day_no + 79;
+        var gy = 1600 + 400 * parseInt(`${g_day_no / 146097}`);
+        g_day_no = g_day_no % 146097;
+        var leap = true;
+        if (g_day_no >= 36525) {
+            g_day_no--;
+            gy += 100 * parseInt(`${g_day_no / 36524}`);
+            g_day_no = g_day_no % 36524;
+            if (g_day_no >= 365)
+                g_day_no++;
+            else
+                leap = false;
+        }
+        gy += 4 * parseInt(`${g_day_no / 1461}`);
+        g_day_no %= 1461;
+        if (g_day_no >= 366) {
+            leap = false;
+            g_day_no--;
+            gy += parseInt(`${g_day_no / 365}`);
+            g_day_no = g_day_no % 365;
+        }
+        for (var i = 0; g_day_no >= this.daysInMonth.g_days_in_month[i] + ((i == 1 && leap) ? 1 : 0); i++)
+            g_day_no -= this.daysInMonth.g_days_in_month[i] + ((i == 1 && leap) ? 1 : 0);
+        var gm = i + 1;
+        var gd = g_day_no + 1;
+        return [gy, gm, gd];
+    }
+    static gregorianToJalali(gregorianYear, gregorianMonth, gregorianDay) {
+        gregorianYear = parseInt(`${gregorianYear}`);
+        gregorianMonth = parseInt(`${gregorianMonth}`);
+        gregorianDay = parseInt(`${gregorianDay}`);
+        var gy = gregorianYear - 1600;
+        var gm = gregorianMonth - 1;
+        var gd = gregorianDay - 1;
+        var g_day_no = 365 * gy + parseInt(`${(gy + 3) / 4}`) - parseInt(`${(gy + 99) / 100}`) + parseInt(`${(gy + 399) / 400}`);
+        for (var i = 0; i < gm; ++i)
+            g_day_no += this.daysInMonth.g_days_in_month[i];
+        if (gm > 1 && ((gy % 4 == 0 && gy % 100 != 0) || (gy % 400 == 0)))
+            ++g_day_no;
+        g_day_no += gd;
+        var j_day_no = g_day_no - 79;
+        var j_np = parseInt(`${j_day_no / 12053}`);
+        j_day_no %= 12053;
+        var jy = 979 + 33 * j_np + 4 * parseInt(`${j_day_no / 1461}`);
+        j_day_no %= 1461;
+        if (j_day_no >= 366) {
+            jy += parseInt(`${(j_day_no - 1) / 365}`);
+            j_day_no = (j_day_no - 1) % 365;
+        }
+        for (var i = 0; i < 11 && j_day_no >= this.daysInMonth.j_days_in_month[i]; ++i) {
+            j_day_no -= this.daysInMonth.j_days_in_month[i];
+        }
+        var jm = i + 1;
+        var jd = j_day_no + 1;
+        return [jy, jm, jd];
+    }
+}
+
+class YsDateParserFormatterService extends NgbDateParserFormatter {
+    DELIMITER = '/';
+    parse(value) {
+        if (value) {
+            const date = value.split(this.DELIMITER);
+            return {
+                day: parseInt(date[0], 10),
+                month: parseInt(date[1], 10),
+                year: parseInt(date[2], 10),
+            };
+        }
+        return null;
+    }
+    format(date) {
+        return date ? date.year + this.DELIMITER + date.month + this.DELIMITER + date.day : '';
+    }
+    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: "21.0.6", ngImport: i0, type: YsDateParserFormatterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+var LanguageType;
+(function (LanguageType) {
+    LanguageType[LanguageType["en"] = 0] = "en";
+    LanguageType[LanguageType["fa"] = 1] = "fa";
+    LanguageType[LanguageType["fr"] = 2] = "fr";
+})(LanguageType || (LanguageType = {}));
+const I18N_VALUES = {
+    "en": {
+        weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        weekLabel: 'week'
+    },
+    "fa": {
+        weekdays: ['د', 'س', 'چ', 'پ', 'ج', 'ش', 'ی'],
+        months: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
+        weekLabel: 'هفته'
+    },
+    "fr": {
+        weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
+        months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'],
+        weekLabel: 'sem'
+    }
+};
+class I18n {
+    language = LanguageType[LanguageType.en];
+    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: "21.0.6", ngImport: i0, type: I18n, decorators: [{
+            type: Injectable
+        }] });
+class YsDatepickerI18nService extends NgbDatepickerI18n {
+    _i18n = inject(I18n);
+    constructor() {
+        super();
+    }
+    getWeekdayLabel(weekday) {
+        return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
+    }
+    getWeekLabel() {
+        return I18N_VALUES[this._i18n.language].weekLabel;
+    }
+    getMonthShortName(month) {
+        return I18N_VALUES[this._i18n.language].months[month - 1];
+    }
+    getMonthFullName(month) {
+        return this.getMonthShortName(month);
+    }
+    getDayAriaLabel(date) {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+    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: "21.0.6", ngImport: i0, type: YsDatepickerI18nService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class YsDatepickerComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    today = inject(NgbCalendar).getToday();
+    firstDayOfWeek = 1;
+    weekend = [6, 7];
+    _language = LanguageType[LanguageType.en];
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    isFooter = true;
+    todayLabel = "Today";
+    footer = null;
+    _value = null;
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+    }
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(i18N) {
+        this.i18N = i18N;
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.value = null;
+            return;
+        }
+        var date = obj;
+        this.value = { year: date.getFullYear(), month: (date.getMonth() + 1), day: date.getDate() };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    markDisabled = (date, current) => date.month !== current?.month;
+    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    valueChanged(newDate) {
+        if (newDate) {
+            if (typeof newDate == 'string') {
+                let temp = newDate.split('/');
+                let res = new Date(+temp[0], (+temp[1]) - 1, +temp[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+            else {
+                let res = new Date(newDate.year, newDate.month - 1, newDate.day);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+        }
+        else {
+            this.onChange(null);
+            this.onTouched(null);
+        }
+    }
+    setToday() {
+        this.value = this.today;
+        this.valueChanged(this.value);
+    }
+    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),
+                multi: true
+            },
+            I18n,
+            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+            { 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$1.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: 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"] }] });
+}
+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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class YsDatepickerPersianComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    today = inject(NgbCalendar).getToday();
+    firstDayOfWeek = 6;
+    weekend = [5];
+    _language = LanguageType[LanguageType.fa];
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    isFooter = true;
+    todayLabel = "امروز";
+    footer = null;
+    _value = null;
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+    }
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(i18N) {
+        this.i18N = i18N;
+        this.language = LanguageType[LanguageType.fa];
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.value = null;
+            return;
+        }
+        var date = obj;
+        let persianDate = JalaliDate.gregorianToJalali(date.getFullYear(), date.getMonth() + 1, date.getDate());
+        this.value = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    markDisabled = (date, current) => date.month !== current?.month;
+    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    valueChanged(newDate) {
+        if (newDate) {
+            if (typeof newDate == 'string') {
+                let temp = newDate.split('/');
+                let convertedDate = JalaliDate.jalaliToGregorian(+temp[0], (+temp[1]) - 1, +temp[2]);
+                let res = new Date(+convertedDate[0], (+convertedDate[1]) - 1, +convertedDate[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+            else {
+                let convertedDate = JalaliDate.jalaliToGregorian(newDate.year, newDate.month, newDate.day);
+                var res = new Date(+convertedDate[0], +convertedDate[1] - 1, +convertedDate[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+        }
+        else {
+            this.onChange(null);
+            this.onTouched(null);
+        }
+    }
+    setToday() {
+        this.value = this.today;
+        this.valueChanged(this.value);
+    }
+    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),
+                multi: true
+            },
+            I18n,
+            { provide: NgbCalendar, useClass: NgbCalendarPersian },
+            { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+            { 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$1.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: 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"] }] });
+}
+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: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerPersianComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbCalendar, useClass: NgbCalendarPersian },
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class YsDatepickerPopupPersianComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    today = inject(NgbCalendar).getToday();
+    _value = null;
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+    }
+    container = null;
+    firstDayOfWeek = 6;
+    weekend = [5];
+    _language = LanguageType[LanguageType.fa];
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    isFooter = true;
+    closeLabel = "بستن";
+    todayLabel = "امروز";
+    footer = null;
+    calendarIconClass = "fa-solid fa-calendar-days";
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(i18N) {
+        this.i18N = i18N;
+        this.language = LanguageType[LanguageType.fa];
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.value = null;
+            return;
+        }
+        var date = obj;
+        let persianDate = JalaliDate.gregorianToJalali(date.getFullYear(), date.getMonth() + 1, date.getDate());
+        this.value = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    markDisabled = (date, current) => date.month !== current?.month;
+    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    valueChanged(newDate) {
+        if (newDate) {
+            if (typeof newDate == 'string') {
+                let temp = newDate.split('/');
+                let convertedDate = JalaliDate.jalaliToGregorian(+temp[0], (+temp[1]) - 1, +temp[2]);
+                let res = new Date(+convertedDate[0], (+convertedDate[1]) - 1, +convertedDate[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+            else {
+                let convertedDate = JalaliDate.jalaliToGregorian(newDate.year, newDate.month, newDate.day);
+                var res = new Date(+convertedDate[0], +convertedDate[1] - 1, +convertedDate[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+        }
+        else {
+            this.onChange(null);
+            this.onTouched(null);
+        }
+    }
+    setToday() {
+        this.value = this.today;
+        this.valueChanged(this.value);
+    }
+    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),
+                multi: true
+            },
+            I18n,
+            { 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$1.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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.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: "21.0.6", ngImport: i0, type: YsDatepickerPopupPersianComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker-popup-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerPopupPersianComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbCalendar, useClass: NgbCalendarPersian },
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], closeLabel: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], calendarIconClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class YsDatepickerPopupComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    today = inject(NgbCalendar).getToday();
+    _value = null;
+    get value() {
+        return this._value;
+    }
+    set value(val) {
+        this._value = val;
+    }
+    container = null;
+    firstDayOfWeek = 1;
+    weekend = [6, 7];
+    _language = LanguageType[LanguageType.en];
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    isFooter = true;
+    closeLabel = "Close";
+    todayLabel = "Today";
+    footer = null;
+    calendarIconClass = "fa-solid fa-calendar-days";
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(i18N) {
+        this.i18N = i18N;
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.value = null;
+            return;
+        }
+        var date = obj;
+        this.value = { year: date.getFullYear(), month: (date.getMonth() + 1), day: date.getDate() };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    markDisabled = (date, current) => date.month !== current?.month;
+    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    valueChanged(newDate) {
+        if (newDate) {
+            if (typeof newDate == 'string') {
+                let temp = newDate.split('/');
+                let res = new Date(+temp[0], (+temp[1]) - 1, +temp[2]);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+            else {
+                let res = new Date(newDate.year, newDate.month - 1, newDate.day);
+                this.onChange(res);
+                this.onTouched(res);
+            }
+        }
+        else {
+            this.onChange(null);
+            this.onTouched(null);
+        }
+    }
+    setToday() {
+        this.value = this.today;
+        this.valueChanged(this.value);
+    }
+    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),
+                multi: true
+            },
+            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$1.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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.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: "21.0.6", ngImport: i0, type: YsDatepickerPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker-popup', imports: [NgbDatepickerModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerPopupComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], closeLabel: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], calendarIconClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class YsDatepickerRangePopupPersianComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    formatter = inject(NgbDateParserFormatter);
+    today = inject(NgbCalendar).getToday();
+    date;
+    hoveredDate = null;
+    _fromDate = null;
+    get fromDate() { return this._fromDate; }
+    set fromDate(value) {
+        this._fromDate = value;
+    }
+    _toDate = null;
+    get toDate() { return this._toDate; }
+    set toDate(value) {
+        this._toDate = value;
+    }
+    container = null;
+    firstDayOfWeek = 6;
+    weekend = [5];
+    _language = LanguageType[LanguageType.fa];
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    isFooter = true;
+    closeLabel = "بستن";
+    todayLabel = "امروز";
+    footer = null;
+    calendarIconClass = "fa-solid fa-calendar-days";
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(i18N) {
+        this.i18N = i18N;
+        this.language = LanguageType[LanguageType.fa];
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.fromDate = null;
+            this.toDate = null;
+            return;
+        }
+        var fDate = obj.fromDate;
+        let persianDate = JalaliDate.gregorianToJalali(fDate.getFullYear(), fDate.getMonth() + 1, fDate.getDate());
+        this.fromDate = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+        var tDate = obj.toDate;
+        persianDate = JalaliDate.gregorianToJalali(tDate.getFullYear(), tDate.getMonth() + 1, tDate.getDate());
+        this.toDate = { year: persianDate[0], month: persianDate[1], day: persianDate[2] };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onDateSelection(date) {
+        if (!this.fromDate && !this.toDate) {
+            this.fromDate = date;
+        }
+        else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
+            this.toDate = date;
+        }
+        else {
+            this.toDate = null;
+            this.fromDate = date;
+        }
+        this.valueChanged();
+    }
+    isHovered(date) {
+        return (this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate));
+    }
+    isInside(date) {
+        return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
+    }
+    isRange(date) {
+        return (date.equals(this.fromDate) ||
+            (this.toDate && date.equals(this.toDate)) ||
+            this.isInside(date) ||
+            this.isHovered(date));
+    }
+    markDisabled = (date, current) => date.month !== current?.month;
+    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    validateInput(currentValue, input) {
+        const parsed = this.formatter.parse(input);
+        return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
+    }
+    valueChanged() {
+        let range = { fromDate: null, toDate: null };
+        if (this.fromDate) {
+            let fromDateConverted = JalaliDate.jalaliToGregorian(this.fromDate.year, this.fromDate.month, this.fromDate.day);
+            range.fromDate = new Date(fromDateConverted[0], fromDateConverted[1] - 1, fromDateConverted[2]);
+        }
+        if (this.toDate) {
+            let toDateConverted = JalaliDate.jalaliToGregorian(this.toDate.year, this.toDate.month, this.toDate.day);
+            range.toDate = new Date(toDateConverted[0], toDateConverted[1] - 1, toDateConverted[2]);
+        }
+        this.onChange(range);
+        this.onTouched(range);
+    }
+    setToday() {
+        this.fromDate = this.today;
+        this.toDate = this.today;
+        this.valueChanged();
+    }
+    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),
+                multi: true
+            },
+            I18n,
+            { 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$1.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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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: "21.0.6", ngImport: i0, type: YsDatepickerRangePopupPersianComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker-range-popup-persian', imports: [NgbDatepickerModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerRangePopupPersianComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbCalendar, useClass: NgbCalendarPersian },
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], closeLabel: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], calendarIconClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class YsDatepickerRangePopupComponent {
+    i18N;
+    calendar = inject(NgbCalendar);
+    formatter = inject(NgbDateParserFormatter);
+    today = inject(NgbCalendar).getToday();
+    hoveredDate = null;
+    _fromDate = null;
+    get fromDate() { return this._fromDate; }
+    set fromDate(value) {
+        this._fromDate = value;
+    }
+    _toDate = null;
+    get toDate() { return this._toDate; }
+    set toDate(value) {
+        this._toDate = value;
+    }
+    container = null;
+    firstDayOfWeek = 1;
+    weekend = [6, 7];
+    _language = LanguageType[LanguageType.en];
+    get language() {
+        return this._language;
+    }
+    set language(value) {
+        this._language = value;
+        this.i18N.language = this._language;
+    }
+    isFooter = true;
+    closeLabel = "Close";
+    todayLabel = "Today";
+    footer = null;
+    calendarIconClass = "fa-solid fa-calendar-days";
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(i18N) {
+        this.i18N = i18N;
+    }
+    writeValue(obj) {
+        if (!obj) {
+            this.fromDate = null;
+            this.toDate = null;
+            return;
+        }
+        let d = obj;
+        var fDate = d.fromDate;
+        this.fromDate = { year: fDate.getFullYear(), month: (fDate.getMonth() + 1), day: fDate.getDate() };
+        var tDate = d.toDate;
+        this.toDate = { year: tDate.getFullYear(), month: (tDate.getMonth() + 1), day: tDate.getDate() };
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onDateSelection(date) {
+        if (!this.fromDate && !this.toDate) {
+            this.fromDate = date;
+        }
+        else if (this.fromDate && !this.toDate && date && date.after(this.fromDate)) {
+            this.toDate = date;
+        }
+        else {
+            this.toDate = null;
+            this.fromDate = date;
+        }
+        this.valueChanged();
+    }
+    isHovered(date) {
+        return (this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate));
+    }
+    isInside(date) {
+        return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
+    }
+    isRange(date) {
+        return (date.equals(this.fromDate) ||
+            (this.toDate && date.equals(this.toDate)) ||
+            this.isInside(date) ||
+            this.isHovered(date));
+    }
+    markDisabled = (date, current) => date.month !== current?.month;
+    isWeekend = (date) => this.weekend.includes(this.calendar.getWeekday(date));
+    validateInput(currentValue, input) {
+        const parsed = this.formatter.parse(input);
+        return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
+    }
+    valueChanged() {
+        const fromDateTemp = this.fromDate ? new Date(this.fromDate.year, this.fromDate.month - 1, this.fromDate.day) : null;
+        const toDateTemp = this.toDate ? new Date(this.toDate.year, this.toDate.month - 1, this.toDate.day) : null;
+        const res = { fromDate: fromDateTemp, toDate: toDateTemp };
+        this.onChange(res);
+        this.onTouched(res);
+    }
+    setToday() {
+        this.fromDate = this.today;
+        this.toDate = this.today;
+        this.valueChanged();
+    }
+    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),
+                multi: true
+            },
+            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$1.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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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: "21.0.6", ngImport: i0, type: YsDatepickerRangePopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-datepicker-range-popup', imports: [NgbDatepickerModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDatepickerRangePopupComponent),
+                            multi: true
+                        },
+                        I18n,
+                        { provide: NgbDatepickerI18n, useClass: YsDatepickerI18nService },
+                        { provide: NgbDateParserFormatter, useClass: YsDateParserFormatterService }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: I18n }], propDecorators: { container: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], weekend: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }], isFooter: [{
+                type: Input
+            }], closeLabel: [{
+                type: Input
+            }], todayLabel: [{
+                type: Input
+            }], footer: [{
+                type: Input
+            }], calendarIconClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-datepicker
+ */
+
+class YsPasswordMatchDirective {
+    matchWith = '';
+    validate(control) {
+        return this.matchWith ? passwordMatchValidator(this.matchWith)(control) : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPasswordMatchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: YsPasswordMatchDirective, isStandalone: true, selector: "[ysPasswordMatch]", inputs: { matchWith: ["passwordMatch", "matchWith"] }, providers: [
+            {
+                provide: NG_ASYNC_VALIDATORS,
+                useExisting: forwardRef(() => YsPasswordMatchDirective),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPasswordMatchDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ysPasswordMatch]',
+                    providers: [
+                        {
+                            provide: NG_ASYNC_VALIDATORS,
+                            useExisting: forwardRef(() => YsPasswordMatchDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { matchWith: [{
+                type: Input,
+                args: ['passwordMatch']
+            }] } });
+/**
+ * Validate password and repeat password matching.
+ * @param matchWith AbstractControl name to matching.
+ * @returns Returns null if the controls value matches, otherwise returns passwordMismatch error.
+ */
+function passwordMatchValidator(matchWith) {
+    return (control) => {
+        const password = control.parent?.get(matchWith);
+        const confirmPassword = control;
+        return password && confirmPassword && password.value === confirmPassword.value ? null : { mismatch: true };
+    };
+}
+
+/*
+ * Public API Surface of ys-directives
+ */
+
+class YsDropdownComponent {
+    /** لیست گزینه‌ها */
+    _options = [];
+    set options(value) { this._options = this.normalizeOptions(value); }
+    get options() { return this._options; }
+    optionLabel = 'label';
+    placeholder = '';
+    searchPlaceholder = '';
+    selectedMaxLength = 3;
+    selectedMaxLengthTemplate = '{length} items selected';
+    selectionSeparator = ", ";
+    /** انتخاب چندگانه یا تکی */
+    multiple = false;
+    showClear = false;
+    /** تمپلیت سفارشی برای آیتم‌ها */
+    itemTemplate;
+    /** مقدار انتخاب‌شده */
+    selected = this.multiple ? [] : null;
+    /** قابلیت جستجو */
+    searchable = false;
+    disabled = false;
+    /** رویداد خروجی هنگام تغییر انتخاب */
+    selectionChange = new EventEmitter();
+    searchTerm = '';
+    isOpen = false;
+    highlightedIndex = -1;
+    elRef = inject(ElementRef);
+    _onChange = () => { };
+    _onTouched = () => { };
+    writeValue(obj) {
+        if (this.multiple) {
+            this.selected = obj ? [...obj] : [];
+        }
+        else {
+            this.selected = obj;
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    normalizeOptions(list) {
+        if (!Array.isArray(list))
+            return [];
+        return list.map(item => {
+            // 1. اگر primitive بود
+            if (['string', 'number', 'boolean'].includes(typeof item)) {
+                return {
+                    raw: item,
+                    label: String(item),
+                    value: item
+                };
+            }
+            // 2. اگر OptionItem<T> بود
+            if ('value' in item) {
+                return {
+                    raw: item,
+                    label: item.label ?? String(item.value),
+                    value: item.value,
+                    ...item
+                };
+            }
+            // 3. object معمولی
+            return {
+                raw: item,
+                label: item[this.optionLabel] ?? JSON.stringify(item),
+                value: item
+            };
+        });
+    }
+    get selectedLabels() {
+        if (this.multiple) {
+            if (!Array.isArray(this.selected))
+                return '';
+            // لیست object های انتخابی را پیدا می‌کنیم
+            const selectedItems = this.options.filter(o => this.selected.includes(o.value));
+            const count = selectedItems.length;
+            // اگر بیشتر از حد مجاز باشد → متن سفارشی
+            if (count > this.selectedMaxLength) {
+                return this.selectedMaxLengthTemplate.replace('{length}', count + '');
+            }
+            // در غیر این‌صورت لیبل‌ها را نمایش بده
+            return selectedItems.map(o => o.label).join(this.selectionSeparator);
+        }
+        const item = this.options.find(o => o.value === this.selected);
+        return item?.label ?? '';
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.highlightedIndex = -1;
+        }
+    }
+    filterOptions() {
+        let list = this.options;
+        if (this.searchable && this.searchTerm.trim()) {
+            const term = this.searchTerm.toLowerCase();
+            list = this.options.filter(opt => opt[this.optionLabel].toLowerCase().includes(term));
+        }
+        // هر بار جستجو انجام شد index ریست بشه
+        this.highlightedIndex = Math.min(this.highlightedIndex, list.length - 1);
+        return list;
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        const returnedValue = option.value; // مقدار نهایی برای فرم
+        if (this.multiple) {
+            const exists = this.selected?.some((x) => x === returnedValue);
+            this.selected = exists
+                ? this.selected.filter((x) => x !== returnedValue)
+                : [...(this.selected || []), returnedValue];
+        }
+        else {
+            this.selected = returnedValue;
+            this.isOpen = false;
+        }
+        this._onChange(this.selected);
+        this.selectionChange.emit(this.selected);
+    }
+    isSelected(option) {
+        if (this.multiple) {
+            return Array.isArray(this.selected)
+                ? this.selected.includes(option.value)
+                : false;
+        }
+        return this.selected === option.value;
+    }
+    clearSelection() {
+        this.selected = this.multiple ? [] : null;
+        this._onChange(this.selected);
+        this._onTouched();
+        this.selectionChange.emit(this.selected);
+    }
+    onKeyDown(event) {
+        const filtered = this.filterOptions();
+        if (!filtered.length)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedIndex = (this.highlightedIndex + 1) % filtered.length;
+                this.scrollToHighlighted();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : filtered.length - 1;
+                this.scrollToHighlighted();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.highlightedIndex >= 0 && this.highlightedIndex < filtered.length) {
+                    this.selectOption(filtered[this.highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    scrollToHighlighted() {
+        // تأخیر جزئی برای اطمینان از رندر کامل
+        setTimeout(() => {
+            const dropdown = this.elRef.nativeElement.querySelector('.dropdown-menu');
+            const items = dropdown?.querySelectorAll('.dropdown-item');
+            const activeItem = items?.[this.highlightedIndex];
+            if (activeItem && dropdown) {
+                const itemTop = activeItem.offsetTop;
+                const itemBottom = itemTop + activeItem.offsetHeight;
+                const dropdownScrollTop = dropdown.scrollTop;
+                const dropdownHeight = dropdown.clientHeight;
+                if (itemBottom > dropdownScrollTop + dropdownHeight) {
+                    dropdown.scrollTop = itemBottom - dropdownHeight;
+                }
+                else if (itemTop < dropdownScrollTop) {
+                    dropdown.scrollTop = itemTop;
+                }
+            }
+        });
+    }
+    /** Close by clicking outside */
+    onClickOutside(event) {
+        const clickedInside = this.elRef.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.isOpen = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsDropdownComponent, isStandalone: true, selector: "ys-dropdown", inputs: { options: "options", optionLabel: "optionLabel", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", selectedMaxLength: "selectedMaxLength", selectedMaxLengthTemplate: "selectedMaxLengthTemplate", selectionSeparator: "selectionSeparator", multiple: "multiple", showClear: "showClear", itemTemplate: "itemTemplate", selected: "selected", searchable: "searchable", disabled: "disabled" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsDropdownComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"dropdown ys-dropdown\">\r\n    <div class=\"input-group w-100\">\r\n        <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n            (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" [disabled]=\"disabled\" />\r\n\r\n        @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n        <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\" [disabled]=\"disabled\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </button>\r\n        }\r\n\r\n        <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\"\r\n            [disabled]=\"disabled\">\r\n            <i class=\"fa fa-chevron-down\"></i>\r\n        </button>\r\n    </div>\r\n    <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n        @if(searchable){\r\n        <div class=\"px-2\">\r\n            <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n                (keydown)=\"onKeyDown($event)\">\r\n        </div>\r\n        }\r\n\r\n        @for (option of filterOptions(); track $index) {\r\n        <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n            [class.highlighted]=\"$index === highlightedIndex\">\r\n            @if(itemTemplate){\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n            </ng-container>\r\n            }\r\n            @else {\r\n            @if(multiple){\r\n            <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n            }\r\n            <!-- <span>{{option[optionLabel]}}</span> -->\r\n            <span>{{option.label}}</span>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".ys-dropdown .dropdown-toggle:after{display:none}.ys-dropdown .dropdown-menu{max-height:200px}.ys-dropdown .dropdown-item.highlighted{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-dropdown', imports: [NgTemplateOutlet, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsDropdownComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"dropdown ys-dropdown\">\r\n    <div class=\"input-group w-100\">\r\n        <input #inputRef type=\"text\" class=\"form-control\" [value]=\"selectedLabels\" [placeholder]=\"placeholder\" readonly\r\n            (focus)=\"isOpen = true\" (keydown)=\"onKeyDown($event)\" [disabled]=\"disabled\" />\r\n\r\n        @if(showClear && (multiple ? selected?.length > 0 : selected)){\r\n        <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"clearSelection()\" [disabled]=\"disabled\">\r\n            <i class=\"fa fa-times\"></i>\r\n        </button>\r\n        }\r\n\r\n        <button class=\"btn btn-outline-secondary dropdown-toggle\" type=\"button\" (click)=\"toggleDropdown()\"\r\n            [disabled]=\"disabled\">\r\n            <i class=\"fa fa-chevron-down\"></i>\r\n        </button>\r\n    </div>\r\n    <div class=\"dropdown-menu w-100 overflow-auto\" [class.show]=\"isOpen\">\r\n\r\n        @if(searchable){\r\n        <div class=\"px-2\">\r\n            <input type=\"text\" class=\"form-control mb-2\" [placeholder]=\"searchPlaceholder\" [(ngModel)]=\"searchTerm\"\r\n                (keydown)=\"onKeyDown($event)\">\r\n        </div>\r\n        }\r\n\r\n        @for (option of filterOptions(); track $index) {\r\n        <div class=\"dropdown-item\" (click)=\"selectOption(option)\" [class.active]=\"isSelected(option)\"\r\n            [class.highlighted]=\"$index === highlightedIndex\">\r\n            @if(itemTemplate){\r\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ option: option }\">\r\n            </ng-container>\r\n            }\r\n            @else {\r\n            @if(multiple){\r\n            <i class=\"fa fa-check text-success me-1\" [class.invisible]=\"!isSelected(option)\"></i>\r\n            }\r\n            <!-- <span>{{option[optionLabel]}}</span> -->\r\n            <span>{{option.label}}</span>\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>", styles: [".ys-dropdown .dropdown-toggle:after{display:none}.ys-dropdown .dropdown-menu{max-height:200px}.ys-dropdown .dropdown-item.highlighted{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], selectedMaxLength: [{
+                type: Input
+            }], selectedMaxLengthTemplate: [{
+                type: Input
+            }], selectionSeparator: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of ys-dropdown
+ */
+
+class YsFileUploadComponent {
+    fileList;
+    files = [];
+    selectedFile = null;
+    styleClass;
+    /**
+     * Allowing upload multiple files
+     * Default is false
+     */
+    multiple = false;
+    /**
+     * Acceptable type of files
+     * Default is all file type
+     */
+    accept = '*/*';
+    /**
+     * Upload button label
+     * Default is Choose File
+     */
+    uploadLabel = 'Choose File';
+    /**Style class of upload button */
+    uploadStyleClass = 'btn-primary';
+    /**Icon class of upload button */
+    uploadIconClass = 'fa fa-paperclip';
+    /**Display choosed file remove button */
+    isRemove = true;
+    /**Icon of remove item button */
+    removeIconClass = 'fa fa-times';
+    /**
+     * Files list display direction
+     * Default is vertical (false)
+     */
+    isHorizontal = false;
+    /**Message displayed before choosing file */
+    noFileMessage = "No file chosen";
+    progressStyleClass;
+    /**Value of progress element */
+    progressValue;
+    /**Max value of progress element */
+    progressValueMax = 100;
+    /**Display cancel upload button */
+    isCancel = false;
+    /**Event to get choosed files */
+    choosed = new EventEmitter();
+    /**Event of selected file in the list of choosed file*/
+    select = new EventEmitter();
+    /**Event of removed file in the list of choosed file*/
+    removed = new EventEmitter();
+    /**Event of cancel upload button */
+    cancel = new EventEmitter();
+    /**Disable elements */
+    disabled = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() { }
+    writeValue(obj) {
+        if (!obj) {
+            this.files = [];
+            return;
+        }
+        if (!Array.isArray(obj)) {
+            this.files = [obj];
+            return;
+        }
+        this.files = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onChangeFiles(event) {
+        this.fileList = event.target.files;
+        if (this.fileList?.length) {
+            if (!this.multiple) {
+                this.files = [];
+            }
+            for (let i = 0; i < this.fileList.length; i++) {
+                const file = this.fileList.item(i);
+                this.files.push(file);
+            }
+            this.files.sort((a, b) => a.name > b.name ? -1 : 1);
+        }
+        else {
+            this.files = [];
+        }
+        this.onChange(this.files);
+        this.onTouched(this.files);
+        this.choosed.emit(this.files);
+        event.target.value = null;
+    }
+    removeFile(file) {
+        const index = this.files.indexOf(file);
+        this.files.splice(index, 1);
+        // this.onChange(this.multiple ? this.files : this.files[0]);
+        this.onChange(this.files);
+        this.onTouched(this.files);
+        // this.choosed.emit(this.files);
+        if (this.selectedFile == file) {
+            this.selectedFile = null;
+            // this.select.emit(null);
+        }
+        this.removed.emit(file);
+    }
+    onSelectFile(file) {
+        this.selectedFile = file;
+        this.select.emit(this.selectedFile);
+    }
+    cancelUpload() {
+        this.cancel.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsFileUploadComponent, isStandalone: true, selector: "ys-file-upload", inputs: { styleClass: "styleClass", multiple: "multiple", accept: "accept", uploadLabel: "uploadLabel", uploadStyleClass: "uploadStyleClass", uploadIconClass: "uploadIconClass", isRemove: "isRemove", removeIconClass: "removeIconClass", isHorizontal: "isHorizontal", noFileMessage: "noFileMessage", progressStyleClass: "progressStyleClass", progressValue: "progressValue", progressValueMax: "progressValueMax", isCancel: "isCancel", disabled: "disabled" }, outputs: { choosed: "choosed", select: "select", removed: "removed", cancel: "cancel" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsFileUploadComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n  [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChangeFiles($event)\">\r\n\r\n  <div class=\"file-upload\" [ngClass]=\"styleClass\">\r\n    <div class=\"row\">\r\n      <div class=\"col\">\r\n        <button class=\"btn btn-upload\" [ngClass]=\"uploadStyleClass\" (click)=\"ysFileUpload.click()\"\r\n          [disabled]=\"disabled\">\r\n          <i [ngClass]=\"uploadIconClass\"></i>\r\n          @if (uploadLabel) {\r\n            <span class=\"ms-2\">{{uploadLabel}}</span>\r\n          }\r\n        </button>\r\n\r\n        @if (noFileMessage) {\r\n          <span class=\"ms-2\">{{files.length ? '' : noFileMessage}}</span>\r\n        }\r\n\r\n        @if (files.length) {\r\n          <ul class=\"file-upload-list list-group mt-2\"\r\n            [ngClass]=\"{'list-group-horizontal overflow-auto': isHorizontal}\">\r\n            @for (file of files; track file) {\r\n              <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                (click)=\"onSelectFile(file)\"\r\n                [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                <span class=\"me-2\">{{file.name}}</span>\r\n                @if (isRemove) {\r\n                  <button class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                    id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                    [disabled]=\"disabled\">\r\n                    <i [ngClass]=\"removeIconClass\"></i>\r\n                  </button>\r\n                }\r\n              </a>\r\n            }\r\n          </ul>\r\n        }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (progressValue) {\r\n    <div class=\"progress mt-2\" [ngClass]=\"progressStyleClass\">\r\n      <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n      aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n      @if (isCancel && progressValue < progressValueMax) {\r\n        <button class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n          (click)=\"cancelUpload()\">\r\n          <i class=\"fa fa-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  }", styles: [".progress{height:20px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-file-upload', imports: [NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsFileUploadComponent),
+                            multi: true
+                        }
+                    ], template: "<input class=\"form-control d-none file-upload\" type=\"file\" id=\"ysFileUpload\" #ysFileUpload [multiple]=\"multiple\"\r\n  [accept]=\"accept\" [disabled]=\"disabled\" (change)=\"onChangeFiles($event)\">\r\n\r\n  <div class=\"file-upload\" [ngClass]=\"styleClass\">\r\n    <div class=\"row\">\r\n      <div class=\"col\">\r\n        <button class=\"btn btn-upload\" [ngClass]=\"uploadStyleClass\" (click)=\"ysFileUpload.click()\"\r\n          [disabled]=\"disabled\">\r\n          <i [ngClass]=\"uploadIconClass\"></i>\r\n          @if (uploadLabel) {\r\n            <span class=\"ms-2\">{{uploadLabel}}</span>\r\n          }\r\n        </button>\r\n\r\n        @if (noFileMessage) {\r\n          <span class=\"ms-2\">{{files.length ? '' : noFileMessage}}</span>\r\n        }\r\n\r\n        @if (files.length) {\r\n          <ul class=\"file-upload-list list-group mt-2\"\r\n            [ngClass]=\"{'list-group-horizontal overflow-auto': isHorizontal}\">\r\n            @for (file of files; track file) {\r\n              <a class=\"file-upload-item list-group-item d-flex align-items-center\" role=\"button\"\r\n                (click)=\"onSelectFile(file)\"\r\n                [ngClass]=\"{'active': file == selectedFile, 'disabled': disabled}\">\r\n                <span class=\"me-2\">{{file.name}}</span>\r\n                @if (isRemove) {\r\n                  <button class=\"btn btn-outline-danger btn-sm ms-auto\" type=\"button\"\r\n                    id=\"removeFileButton\" (click)=\"removeFile(file); $event.stopPropagation();\"\r\n                    [disabled]=\"disabled\">\r\n                    <i [ngClass]=\"removeIconClass\"></i>\r\n                  </button>\r\n                }\r\n              </a>\r\n            }\r\n          </ul>\r\n        }\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  @if (progressValue) {\r\n    <div class=\"progress mt-2\" [ngClass]=\"progressStyleClass\">\r\n      <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progressValue\" [attr.aria-valuenow]=\"progressValue\"\r\n      aria-valuemin=\"0\" [attr.aria-valuemax]=\"progressValueMax\"></div>\r\n      @if (isCancel && progressValue < progressValueMax) {\r\n        <button class=\"btn btn-danger btn-sm btn-upload-cancel d-flex\"\r\n          (click)=\"cancelUpload()\">\r\n          <i class=\"fa fa-times\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  }", styles: [".progress{height:20px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { styleClass: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], uploadLabel: [{
+                type: Input
+            }], uploadStyleClass: [{
+                type: Input
+            }], uploadIconClass: [{
+                type: Input
+            }], isRemove: [{
+                type: Input
+            }], removeIconClass: [{
+                type: Input
+            }], isHorizontal: [{
+                type: Input
+            }], noFileMessage: [{
+                type: Input
+            }], progressStyleClass: [{
+                type: Input
+            }], progressValue: [{
+                type: Input
+            }], progressValueMax: [{
+                type: Input
+            }], isCancel: [{
+                type: Input
+            }], choosed: [{
+                type: Output
+            }], select: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-file-upload
+ */
+
+class YsFooterComponent {
+    styleClass = null;
+    brand = null;
+    copyright = null;
+    socialNetworks = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsFooterComponent, isStandalone: true, selector: "ys-footer", inputs: { styleClass: "styleClass", brand: "brand", copyright: "copyright", socialNetworks: "socialNetworks" }, ngImport: i0, template: "<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [ngClass]=\"styleClass\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand || copyright) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand) {\r\n          <a href=\"{{brand.href}}\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img src=\"{{brand.src}}\" alt=\"{{brand.alt}}\" class=\"brand-logo d-inline-block align-text-top\">\r\n          </a>\r\n          }\r\n          @if (copyright) {\r\n          <span class=\"text-muted\">{{copyright}}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks.length) {\r\n        <ul class=\"nav\">\r\n          @for (item of socialNetworks; track item) {\r\n          <li class=\"px-2\">\r\n            <a class=\"text-muted social-icon\" href=\"{{item.href}}\" [ngbTooltip]=\"item.tooltip\">\r\n              <em class=\"{{item.iconClass}}\"></em>\r\n            </a>\r\n          </li>\r\n          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</footer>", styles: [".social-icon:hover{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1))!important}.brand-logo{width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-footer', imports: [NgClass, NgbTooltip], template: "<!-- https://colorlib.com/wp/template/bootstrap-footer-19/ -->\r\n<footer [ngClass]=\"styleClass\">\r\n  <!-- <div class=\"row\">\r\n    <div class=\"col-md-6 col-lg-3 mb-md-0 mb-4\">\r\n      <h2 class=\"footer-heading d-flex\">\r\n        <span class=\"icon d-flex align-items-center justify-content-center\"><i class=\"ion-logo-ionic\"></i></span>\r\n        About\r\n      </h2>\r\n      <div class=\"block-23 mb-3\">\r\n        <ul>\r\n          <li><span class=\"icon ion-ios-pin\"></span><span class=\"text\">203 Fake St. Mountain View, San\r\n              Francisco, California, USA</span></li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-call\"></span><span class=\"text\">+2 392 3929 210</span></a>\r\n          </li>\r\n          <li><a href=\"#\"><span class=\"icon ion-ios-send\"></span><span\r\n                class=\"text\">support&#64;yourdomain.com</span></a></li>\r\n        </ul>\r\n      </div>\r\n\r\n      <form action=\"#\" class=\"subscribe-form\">\r\n        <div class=\"input-group d-flex\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Enter email address\">\r\n          <button type=\"submit\" class=\"btn btn-info\">\r\n            <span class=\"sr-only\">Submit</span>\r\n            <i class=\"fa fa-paper-plane\"></i></button>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n  </div> -->\r\n  <div class=\"row\">\r\n    <div class=\"col\">\r\n      <div class=\"d-flex justify-content-between align-items-center py-3 my-4 border-top\">\r\n        @if (brand || copyright) {\r\n        <div class=\"d-flex align-items-center\">\r\n          @if (brand) {\r\n          <a href=\"{{brand.href}}\" class=\"px-2 text-muted text-decoration-none\">\r\n            <img src=\"{{brand.src}}\" alt=\"{{brand.alt}}\" class=\"brand-logo d-inline-block align-text-top\">\r\n          </a>\r\n          }\r\n          @if (copyright) {\r\n          <span class=\"text-muted\">{{copyright}}</span>\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (socialNetworks.length) {\r\n        <ul class=\"nav\">\r\n          @for (item of socialNetworks; track item) {\r\n          <li class=\"px-2\">\r\n            <a class=\"text-muted social-icon\" href=\"{{item.href}}\" [ngbTooltip]=\"item.tooltip\">\r\n              <em class=\"{{item.iconClass}}\"></em>\r\n            </a>\r\n          </li>\r\n          }\r\n        </ul>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</footer>", styles: [".social-icon:hover{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity, 1))!important}.brand-logo{width:30px;height:30px}\n"] }]
+        }], propDecorators: { styleClass: [{
+                type: Input
+            }], brand: [{
+                type: Input
+            }], copyright: [{
+                type: Input
+            }], socialNetworks: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-footer
+ */
+
+class YsLoadingMaskComponent {
+    loading = false;
+    message = 'Loading ...';
+    backgroundStyleclass = null;
+    spinnerStyleclass = null;
+    messageStyleclass = null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsLoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsLoadingMaskComponent, isStandalone: true, selector: "ys-loading-mask", inputs: { loading: "loading", message: "message", backgroundStyleclass: "backgroundStyleclass", spinnerStyleclass: "spinnerStyleclass", messageStyleclass: "messageStyleclass" }, ngImport: i0, template: "@if (loading) {\r\n  <div\r\n    class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n    <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n    </div>\r\n    <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n      <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n      @if (message) {\r\n        <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n          {{message}}\r\n        </strong>\r\n      }\r\n    </div>\r\n  </div>\r\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsLoadingMaskComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-loading-mask', imports: [NgClass], template: "@if (loading) {\r\n  <div\r\n    class=\"loading-wrapper d-flex flex-column align-items-center justify-content-center h-100 w-100 position-absolute\">\r\n    <div class=\"loading-mask bg-secondary position-absolute h-100 w-100\" [ngClass]=\"backgroundStyleclass\">\r\n    </div>\r\n    <div class=\"loading-content d-flex flex-column align-items-center justify-content-center\">\r\n      <div class=\"loading-spinner spinner-border text-primary\" [ngClass]=\"spinnerStyleclass\" role=\"status\"></div>\r\n      @if (message) {\r\n        <strong class=\"badge bg-primary mt-4 p-3\" [ngClass]=\"messageStyleclass\">\r\n          {{message}}\r\n        </strong>\r\n      }\r\n    </div>\r\n  </div>\r\n}", styles: [".loading-wrapper{top:0;left:0;z-index:1001}.loading-wrapper .loading-mask{opacity:.3}.loading-wrapper .loading-content{z-index:1}.loading-wrapper .loading-content .loading-spinner{width:3rem;height:3rem}\n"] }]
+        }], propDecorators: { loading: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], backgroundStyleclass: [{
+                type: Input
+            }], spinnerStyleclass: [{
+                type: Input
+            }], messageStyleclass: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-loading-mask
+ */
+
+class YsNavbarComponent {
+    formBuilder;
+    searchForm;
+    id = 'mainNavbar';
+    theme = 'dark';
+    styleClass;
+    brand = null;
+    items = [];
+    endItems = [];
+    isSearch = false;
+    searchLabel = 'Search';
+    searchIconClass;
+    searchPlaceholder = 'Search';
+    isSidebarToggler = false;
+    isSidebarToggled = true;
+    sidebarTogglerIconClass = "fa-solid fa-angle-right";
+    toggleSidebar = new EventEmitter();
+    search = new EventEmitter();
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.searchForm = this.formBuilder.group({
+            searchValue: ['']
+        });
+    }
+    ngOnInit() {
+        // this.toggleSidebar.emit(this.isSidebarToggled);
+    }
+    onToggleSidebar() {
+        this.isSidebarToggled = !this.isSidebarToggled;
+        this.toggleSidebar.emit(this.isSidebarToggled);
+    }
+    submitSearch() {
+        this.search.emit(this.searchForm.get('searchValue')?.value);
+    }
+    isDropdown(item) {
+        return item.items?.length;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsNavbarComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsNavbarComponent, isStandalone: true, selector: "ys-navbar", inputs: { id: "id", theme: "theme", styleClass: "styleClass", brand: "brand", items: "items", endItems: "endItems", isSearch: "isSearch", searchLabel: "searchLabel", searchIconClass: "searchIconClass", searchPlaceholder: "searchPlaceholder", isSidebarToggler: "isSidebarToggler", isSidebarToggled: "isSidebarToggled", sidebarTogglerIconClass: "sidebarTogglerIconClass" }, outputs: { toggleSidebar: "toggleSidebar", search: "search" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n\r\n    @if (isSidebarToggler) {\r\n      <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n        aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n        <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n      </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n      @if (brand?.src) {\r\n        <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n          height=\"{{brand?.height}}\">\r\n      }\r\n      {{brand?.label}}\r\n    </a>\r\n\r\n    @if (items.length || endItems.length || search) {\r\n      <button class=\"navbar-toggler ms-auto\" type=\"button\"\r\n        data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n        aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      @if (items.length) {\r\n        <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n          @for (navItem of items; track navItem) {\r\n            @if (!isDropdown(navItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                  [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  {{navItem.label}}\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(navItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (navItem.label) {\r\n                    <span>{{navItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <ul class=\"dropdown-menu px-2\">\r\n                  @for (navSubItem of navItem.items; track navSubItem) {\r\n                    <li>\r\n                      @if (!navSubItem.isDivider) {\r\n                        <a class=\"dropdown-item rounded\"\r\n                          (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                          [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                          [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                          [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                          @if (navSubItem.iconClass) {\r\n                            <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                          }\r\n                          @if (navSubItem.label) {\r\n                            <span>{{navSubItem.label}}</span>\r\n                          }\r\n                        </a>\r\n                      }\r\n                      @if (navSubItem.isDivider) {\r\n                        <hr class=\"dropdown-divider\">\r\n                      }\r\n                    </li>\r\n                  }\r\n                </ul>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (endItems.length > 0) {\r\n        <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n          @for (endItem of endItems; track endItem) {\r\n            @if (!isDropdown(endItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(endItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                  aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                  @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n                    @if (!endItemSubItem.isDivider) {\r\n                      <a class=\"dropdown-item text-center rounded\"\r\n                        [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                        (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                        ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                        @if (endItemSubItem.iconClass) {\r\n                          <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                        }\r\n                        @if (endItemSubItem.label) {\r\n                          <span>{{endItemSubItem.label}}</span>\r\n                        }\r\n                      </a>\r\n                    }\r\n                    @if (endItemSubItem.isDivider) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (isSearch) {\r\n        <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n          [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n          <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n            placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n            <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n              @if (searchIconClass) {\r\n                <i class=\"{{searchIconClass}}\"></i>\r\n              }\r\n              @if (searchLabel) {\r\n                <span>{{searchLabel}}</span>\r\n              }\r\n            </button>\r\n          </form>\r\n        }\r\n\r\n        <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n          <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n            <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n            <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n          </button>\r\n        </form> -->\r\n      </div>\r\n    </div>\r\n  </nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media(prefers-reduced-motion:reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}::ng-deep html[dir=rtl] .sidebar-toggler{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(1);transform:scaleX(1)}::ng-deep html[dir=rtl] .nav-end .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:0!important}::ng-deep html[dir=rtl] .nav-end.nav-end-me-0{margin-left:0!important}@media(max-width:576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media(min-width:768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media(min-width:992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media(min-width:1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media(min-width:1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i2$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsNavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-navbar', imports: [
+                        NgClass,
+                        RouterLink,
+                        RouterLinkActive,
+                        ReactiveFormsModule,
+                        NgbTooltipModule
+                    ], template: "<nav class=\"navbar navbar-expand-lg bg-primary\" [ngClass]=\"styleClass\" [attr.data-bs-theme]=\"theme\">\r\n  <div class=\"container-fluid\">\r\n\r\n    @if (isSidebarToggler) {\r\n      <button class=\"sidebar-toggler me-2\" type=\"button\" (click)=\"onToggleSidebar()\"\r\n        aria-expanded=\"false\" aria-label=\"Toggle sidebar\" [ngClass]=\"{'toggled': isSidebarToggled}\">\r\n        <i class=\"{{sidebarTogglerIconClass}} sidebar-toggler-icon p-1\"></i>\r\n      </button>\r\n    }\r\n\r\n    <a class=\"navbar-brand\" [ngClass]=\"{'me-auto': !items.length}\" href=\"{{brand?.href}}\">\r\n      @if (brand?.src) {\r\n        <img src=\"{{brand?.src}}\" alt=\"{{brand?.alt}}\" width=\"{{brand?.width}}\"\r\n          height=\"{{brand?.height}}\">\r\n      }\r\n      {{brand?.label}}\r\n    </a>\r\n\r\n    @if (items.length || endItems.length || search) {\r\n      <button class=\"navbar-toggler ms-auto\" type=\"button\"\r\n        data-bs-toggle=\"collapse\" [attr.data-bs-target]=\"'#' + id\" [attr.aria-controls]=\"id\" aria-expanded=\"false\"\r\n        aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    }\r\n\r\n    <div class=\"collapse navbar-collapse\" [id]=\"id\">\r\n\r\n      @if (items.length) {\r\n        <ul class=\"navbar-nav me-auto\" [ngClass]=\"{'mb-2': isSearch}\">\r\n          @for (navItem of items; track navItem) {\r\n            @if (!isDropdown(navItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  (click)=\"navItem.onClick && navItem.onClick($event)\" [attr.aria-disabled]=\"navItem.disabled\"\r\n                  [routerLink]=\"navItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  ngbTooltip=\"{{navItem.tooltipLabel}}\" aria-current=\"page\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  {{navItem.label}}\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(navItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" [ngClass]=\"{'disabled': navItem.disabled}\"\r\n                  [attr.aria-disabled]=\"navItem.disabled\" ngbTooltip=\"{{navItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (navItem.iconClass) {\r\n                    <i class=\"pe-2 {{navItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (navItem.label) {\r\n                    <span>{{navItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <ul class=\"dropdown-menu px-2\">\r\n                  @for (navSubItem of navItem.items; track navSubItem) {\r\n                    <li>\r\n                      @if (!navSubItem.isDivider) {\r\n                        <a class=\"dropdown-item rounded\"\r\n                          (click)=\"navSubItem.onClick && navSubItem.onClick($event)\"\r\n                          [ngClass]=\"{'disabled': navSubItem.disabled}\"\r\n                          [attr.aria-disabled]=\"navItem.disabled\" [routerLink]=\"navSubItem.routerLink\"\r\n                          [routerLinkActive]=\"['active']\" ngbTooltip=\"{{navSubItem.tooltipLabel}}\">\r\n                          @if (navSubItem.iconClass) {\r\n                            <i class=\"me-2 {{navSubItem.iconClass}}\"></i>\r\n                          }\r\n                          @if (navSubItem.label) {\r\n                            <span>{{navSubItem.label}}</span>\r\n                          }\r\n                        </a>\r\n                      }\r\n                      @if (navSubItem.isDivider) {\r\n                        <hr class=\"dropdown-divider\">\r\n                      }\r\n                    </li>\r\n                  }\r\n                </ul>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (endItems.length > 0) {\r\n        <ul class=\"navbar-nav flex-row ms-auto nav-end me-2\" [ngClass]=\"{'nav-end-me-0': search}\">\r\n          @for (endItem of endItems; track endItem) {\r\n            @if (!isDropdown(endItem)) {\r\n              <li class=\"nav-item\">\r\n                <a class=\"nav-link\" [routerLink]=\"endItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                  (click)=\"endItem.onClick && endItem.onClick($event)\" role=\"button\"\r\n                  ngbTooltip=\"{{endItem.tooltipLabel}}\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n              </li>\r\n            }\r\n            @if (isDropdown(endItem)) {\r\n              <li class=\"nav-item dropdown\">\r\n                <a class=\"nav-link dropdown-toggle\" ngbTooltip=\"{{endItem.tooltipLabel}}\"\r\n                  data-bs-toggle=\"dropdown\" data-bs-display=\"static\" aria-expanded=\"false\" role=\"button\"\r\n                  aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                  @if (endItem.iconClass) {\r\n                    <i class=\"pe-2 {{endItem.iconClass}}\"></i>\r\n                  }\r\n                  @if (endItem.label) {\r\n                    <span>{{endItem.label}}</span>\r\n                  }\r\n                </a>\r\n                <div class=\"dropdown-menu px-2 dropdown-menu-end\">\r\n                  @for (endItemSubItem of endItem.items; track endItemSubItem) {\r\n                    @if (!endItemSubItem.isDivider) {\r\n                      <a class=\"dropdown-item text-center rounded\"\r\n                        [routerLink]=\"endItemSubItem.routerLink\" [routerLinkActive]=\"['active']\"\r\n                        (click)=\"endItemSubItem.onClick && endItemSubItem.onClick($event)\" role=\"button\"\r\n                        ngbTooltip=\"{{endItemSubItem.tooltipLabel}}\">\r\n                        @if (endItemSubItem.iconClass) {\r\n                          <i class=\"me-2 {{endItemSubItem.iconClass}}\"></i>\r\n                        }\r\n                        @if (endItemSubItem.label) {\r\n                          <span>{{endItemSubItem.label}}</span>\r\n                        }\r\n                      </a>\r\n                    }\r\n                    @if (endItemSubItem.isDivider) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                    }\r\n                  }\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n        </ul>\r\n      }\r\n\r\n      @if (isSearch) {\r\n        <form class=\"search-form d-flex\" role=\"search\" [ngClass]=\"{'ms-auto': !endItems.length}\"\r\n          [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n          <input name=\"searchValue\" id=\"searchValue\" formControlName=\"searchValue\" class=\"form-control me-2\" type=\"search\"\r\n            placeholder=\"{{searchPlaceholder}}\" aria-label=\"Search\">\r\n            <button name=\"submitBtn\" class=\"btn btn-outline-success\" type=\"submit\">\r\n              @if (searchIconClass) {\r\n                <i class=\"{{searchIconClass}}\"></i>\r\n              }\r\n              @if (searchLabel) {\r\n                <span>{{searchLabel}}</span>\r\n              }\r\n            </button>\r\n          </form>\r\n        }\r\n\r\n        <!-- <form *ngIf=\"search\" class=\"d-flex mt-2 mt-md-0\" [ngClass]=\"{'ms-auto': endItems.length <= 0}\"\r\n        [formGroup]=\"searchForm\" (submit)=\"submitSearch()\">\r\n        <input class=\"form-control me-sm-2\" type=\"search\" placeholder=\"{{searchPlaceholder}}\"\r\n          formControlName=\"searchValue\">\r\n          <button class=\"btn btn-secondary my-2 my-sm-0\" type=\"submit\">\r\n            <i *ngIf=\"searchIconClass\" class=\"{{searchIconClass}}\"></i>\r\n            <span *ngIf=\"searchLabel\">{{searchLabel}}</span>\r\n          </button>\r\n        </form> -->\r\n      </div>\r\n    </div>\r\n  </nav>", styles: [".sidebar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}.sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@media(prefers-reduced-motion:reduce){.sidebar-toggler{transition:none}}.sidebar-toggler:hover{text-decoration:none}.sidebar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 var(--bs-navbar-toggler-focus-width)}.sidebar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}::ng-deep html[dir=rtl] .sidebar-toggler{-webkit-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep html[dir=rtl] .sidebar-toggler.toggled .sidebar-toggler-icon{-webkit-transform:scaleX(1);transform:scaleX(1)}::ng-deep html[dir=rtl] .nav-end .nav-link{padding-left:var(--bs-navbar-nav-link-padding-x);padding-right:0!important}::ng-deep html[dir=rtl] .nav-end.nav-end-me-0{margin-left:0!important}@media(max-width:576px){.navbar-expand-sm .search-form{margin-top:.5rem!important}.navbar-expand-sm .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-sm .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:768px){.navbar-expand-md .search-form{margin-top:.5rem!important}.navbar-expand-md .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-md .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:992px){.navbar-expand-lg .search-form{margin-top:.5rem!important}.navbar-expand-lg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-lg .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:1200px){.navbar-expand-xlg .search-form{margin-top:.5rem!important}.navbar-expand-xlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(max-width:1400px){.navbar-expand-xxlg .search-form{margin-top:.5rem!important}.navbar-expand-xxlg .nav-end .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x)}.navbar-expand-xxlg .nav-end.nav-end-me-0{margin-right:0!important}}@media(min-width:576px){.navbar-expand-sm .navbar-nav{margin-bottom:0!important}}@media(min-width:768px){.navbar-expand-md .navbar-nav{margin-bottom:0!important}}@media(min-width:992px){.navbar-expand-lg .navbar-nav{margin-bottom:0!important}}@media(min-width:1200px){.navbar-expand-xlg .navbar-nav{margin-bottom:0!important}}@media(min-width:1400px){.navbar-expand-xxlg .navbar-nav{margin-bottom:0!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { id: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], brand: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], endItems: [{
+                type: Input
+            }], isSearch: [{
+                type: Input
+            }], searchLabel: [{
+                type: Input
+            }], searchIconClass: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], isSidebarToggler: [{
+                type: Input
+            }], isSidebarToggled: [{
+                type: Input
+            }], sidebarTogglerIconClass: [{
+                type: Input
+            }], toggleSidebar: [{
+                type: Output
+            }], search: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ys-navbar
+ */
+
+class YsOverlayComponent {
+    show = false;
+    onClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: YsOverlayComponent, isStandalone: true, selector: "ys-overlay", inputs: { show: "show" }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-overlay', imports: [NgClass], template: "<div class=\"overlay bg-dark\" (click)=\"onClick.emit($event)\" [ngClass]=\"{'show': show}\"></div>", styles: ["@-webkit-keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}@keyframes fadeIn-overlay{0%{opacity:0}to{opacity:.5}}.overlay{position:fixed;inset:0;z-index:100;opacity:.5;display:none;-webkit-animation:fadeIn-overlay .5s;animation:fadeIn-overlay .5s}.overlay.show{display:block}\n"] }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ys-overlay
+ */
+
+class YsPaginationComponent {
+    rowsPerPage = [10, 25, 50];
+    pageReport = true;
+    pageReportTemplate = 'Showing {first} to {last} of {totalRecords} items';
+    ellipses = false;
+    boundaryLinks = true;
+    maxSize = 5;
+    rotate = true;
+    page = 1;
+    pageSizeSelection = true;
+    pageSize = this.rowsPerPage[0] || 10;
+    collectionSize = 0;
+    pageChange = new EventEmitter();
+    get firstIndex() { return (this.page - 1) * this.pageSize; }
+    get lastIndex() { return Math.min(this.firstIndex + this.pageSize, this.collectionSize); }
+    get totalPages() {
+        return Math.ceil(this.collectionSize / this.pageSize) || 1;
+    }
+    changePage(page) {
+        if (page >= 1 && page <= this.totalPages) {
+            this.page = page;
+            this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+        }
+    }
+    changePageSize(size) {
+        this.pageSize = +size;
+        this.page = 1;
+        this.pageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsPaginationComponent, isStandalone: true, selector: "ys-pagination", inputs: { rowsPerPage: "rowsPerPage", pageReport: "pageReport", pageReportTemplate: "pageReportTemplate", ellipses: "ellipses", boundaryLinks: "boundaryLinks", maxSize: "maxSize", rotate: "rotate", page: "page", pageSizeSelection: "pageSizeSelection", pageSize: "pageSize", collectionSize: "collectionSize" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\r\n\r\n    <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\r\n    <ngb-pagination [collectionSize]=\"collectionSize\" [(page)]=\"page\" [pageSize]=\"pageSize\" [maxSize]=\"maxSize\"\r\n        [rotate]=\"rotate\" [ellipses]=\"ellipses\" [boundaryLinks]=\"boundaryLinks\" (pageChange)=\"changePage($event)\" />\r\n\r\n    <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\r\n    @if(pageSizeSelection){\r\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [(ngModel)]=\"pageSize\"\r\n        (change)=\"changePageSize(pageSize)\" id=\"pagination\">\r\n        @for (opt of rowsPerPage; track opt) {\r\n        <option [value]=\"opt\">{{ opt }}</option>\r\n        }\r\n    </select>\r\n    }\r\n\r\n    <!-- \u06AF\u0632\u0627\u0631\u0634 -->\r\n    @if(pageReport){\r\n    <small class=\"pagination-report text-muted ms-auto\">\r\n        {{ pageReportTemplate\r\n        .replace('{first}', firstIndex + 1 + '')\r\n        .replace('{last}', lastIndex + '')\r\n        .replace('{totalRecords}', collectionSize + '') }}\r\n    </small>\r\n    }\r\n\r\n</div>", styles: [":host::ng-deep .ys-pagination .pagination{margin-bottom:0!important}:host::ng-deep .ys-pagination .pagination-select{height:-webkit-fill-available;height:stretch}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-pagination', imports: [FormsModule, NgbPagination], template: "<div class=\"ys-pagination d-flex flex-wrap justify-content-center justify-content-sm-between align-items-center gap-2\">\r\n\r\n    <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\r\n    <ngb-pagination [collectionSize]=\"collectionSize\" [(page)]=\"page\" [pageSize]=\"pageSize\" [maxSize]=\"maxSize\"\r\n        [rotate]=\"rotate\" [ellipses]=\"ellipses\" [boundaryLinks]=\"boundaryLinks\" (pageChange)=\"changePage($event)\" />\r\n\r\n    <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\r\n    @if(pageSizeSelection){\r\n    <select class=\"pagination-select form-select form-select-sm w-auto me-auto\" [(ngModel)]=\"pageSize\"\r\n        (change)=\"changePageSize(pageSize)\" id=\"pagination\">\r\n        @for (opt of rowsPerPage; track opt) {\r\n        <option [value]=\"opt\">{{ opt }}</option>\r\n        }\r\n    </select>\r\n    }\r\n\r\n    <!-- \u06AF\u0632\u0627\u0631\u0634 -->\r\n    @if(pageReport){\r\n    <small class=\"pagination-report text-muted ms-auto\">\r\n        {{ pageReportTemplate\r\n        .replace('{first}', firstIndex + 1 + '')\r\n        .replace('{last}', lastIndex + '')\r\n        .replace('{totalRecords}', collectionSize + '') }}\r\n    </small>\r\n    }\r\n\r\n</div>", styles: [":host::ng-deep .ys-pagination .pagination{margin-bottom:0!important}:host::ng-deep .ys-pagination .pagination-select{height:-webkit-fill-available;height:stretch}\n"] }]
+        }], propDecorators: { rowsPerPage: [{
+                type: Input
+            }], pageReport: [{
+                type: Input
+            }], pageReportTemplate: [{
+                type: Input
+            }], ellipses: [{
+                type: Input
+            }], boundaryLinks: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], rotate: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageSizeSelection: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], collectionSize: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ys-pagination
+ */
+
+const StrongPasswordRegx = /^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\D*\d)(?=.*[!@#$%^&*]).{8,}$/;
+const UppercaseRegx = /^.*[A-Z]/;
+const LowercaseRegx = /^.*[a-z]/;
+const DigitRegx = /^.*[0-9].*/;
+const NonAlphanumericRegx = /^.*[!@#$%^&*]/;
+// export const MinLength8Regx: RegExp = /^.{8,}/;
+
+class StrengthValidationFeedback {
+    required;
+    uppercase;
+    lowercase;
+    digit;
+    nonAlphanumeric;
+    minLength;
+    constructor(options) {
+        this.required = options?.required == undefined ? 'Please enter a valid password.' : options?.required;
+        this.uppercase = options?.uppercase == undefined ? 'At least one uppercase letter.' : options?.uppercase;
+        this.lowercase = options?.lowercase == undefined ? 'At least one lowercase letter.' : options?.lowercase;
+        this.digit = options?.digit == undefined ? 'At least one digit.' : options?.digit;
+        this.nonAlphanumeric = options?.nonAlphanumeric == undefined ? 'At least one special character (e.g., !, @, #, $).' : options?.nonAlphanumeric;
+        this.minLength = options?.minLength == undefined ? 'At least 8 characters long.' : options?.minLength;
+    }
+}
+
+class StrengthValidationOption {
+    requireUppercase;
+    requireLowercase;
+    requireDigit;
+    requireNonAlphanumeric;
+    requiredMinLength;
+    constructor(options) {
+        this.requireUppercase = options?.requireUppercase == undefined ? true : options?.requireUppercase;
+        this.requireLowercase = options?.requireLowercase == undefined ? true : options?.requireLowercase;
+        this.requireDigit = options?.requireDigit == undefined ? true : options?.requireDigit;
+        this.requireNonAlphanumeric = options?.requireNonAlphanumeric == undefined ? true : options?.requireNonAlphanumeric;
+        this.requiredMinLength = options?.requiredMinLength == undefined ? 8 : options?.requiredMinLength;
+    }
+}
+
+class YsPasswordStrengthComponent {
+    passwordHelp = null;
+    displayFeedback = true;
+    feedback = new StrengthValidationFeedback();
+    minLengthRegx = new RegExp('');
+    _control;
+    get control() { return this._control; }
+    set control(value) {
+        this._control = value;
+        if (!this._control) {
+            return;
+        }
+        if (!this._control.options) {
+            this._control.options = new StrengthValidationOption();
+        }
+        const strongPasswordRegx = new RegExp(`${this._control.options.requireUppercase ? '^(?=[^A-Z]*[A-Z])' : ''}${this._control.options.requireLowercase ? '(?=[^a-z]*[a-z])' : ''}${this._control.options.requireDigit ? '(?=\\D*\\d)' : ''}${this._control.options.requireNonAlphanumeric ? '(?=.*[!@#$%^&*])' : ''}.{${this._control.options.requiredMinLength},}$`);
+        this.minLengthRegx = new RegExp(`.{${this._control.options.requiredMinLength},}$`);
+        this._control.formControl?.addValidators([Validators.required, Validators.pattern(strongPasswordRegx)]);
+        this._control.formControl?.updateValueAndValidity();
+    }
+    get requiredOptionsLength() { return Object.values(this.control?.options).filter(x => x).length; }
+    get hasUppercase() { return this.control?.formControl?.value && UppercaseRegx.test(this.control?.formControl?.value); }
+    get hasLowercase() { return this.control?.formControl?.value && LowercaseRegx.test(this.control?.formControl?.value); }
+    get hasDigit() { return this.control?.formControl?.value && DigitRegx.test(this.control?.formControl?.value); }
+    get hasNonAlphanumeric() { return this.control?.formControl?.value && NonAlphanumericRegx.test(this.control?.formControl?.value); }
+    get hasMinLength() { return this.control?.formControl?.value && this.minLengthRegx.test(this.control?.formControl?.value); }
+    get strengthMeter() {
+        let strength = -1;
+        if (this.control?.options?.requireUppercase && this.hasUppercase)
+            strength += 1;
+        if (this.control?.options?.requireLowercase && this.hasLowercase)
+            strength += 1;
+        if (this.control?.options?.requireDigit && this.hasDigit)
+            strength += 1;
+        if (this.control?.options?.requireNonAlphanumeric && this.hasNonAlphanumeric)
+            strength += 1;
+        if (this.control?.options?.requiredMinLength && this.hasMinLength)
+            strength += 1;
+        return strength + (5 - this.requiredOptionsLength);
+    }
+    get strengthStyleClass() {
+        return this.strengthMeter == 4 ? "green" :
+            this.strengthMeter == 3 ? "yellow" :
+                this.strengthMeter == 2 ? "orange" :
+                    this.strengthMeter == 1 ? "red" :
+                        this.strengthMeter == 0 ? "pink" :
+                            '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsPasswordStrengthComponent, isStandalone: true, selector: "ys-password-strength", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", control: "control" }, ngImport: i0, template: "@if (control) {\r\n  <div class=\"password-strength\">\r\n    <div class=\"d-flex flex-row mt-1\">\r\n      @if (this.requiredOptionsLength > 4) {\r\n        <hr class=\"rounded-start rounded-end me-1\"\r\n          [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n          [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        }\r\n        @if (this.requiredOptionsLength > 3) {\r\n          <hr class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n          }\r\n          @if (this.requiredOptionsLength > 2) {\r\n            <hr class=\"rounded-start rounded-end me-1\"\r\n              [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n              [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n            }\r\n            @if (this.requiredOptionsLength > 1) {\r\n              <hr class=\"rounded-start rounded-end me-1\"\r\n                [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n                [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n              }\r\n              @if (this.requiredOptionsLength > 0) {\r\n                <hr class=\"rounded-start rounded-end\"\r\n                  [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n                  [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n                }\r\n              </div>\r\n              @if (passwordHelp) {\r\n                <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n              }\r\n              @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  @if (control.options?.requireUppercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireLowercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireDigit) {\r\n                    <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n                  }\r\n                  @if (control.options?.requireNonAlphanumeric) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n                  }\r\n                  @if (control.options?.requiredMinLength) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n                  }\r\n                </div>\r\n              }\r\n              @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  {{feedback?.required}}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (!control) {\r\n            <div>\r\n              Password strength control is undefined.\r\n            </div>\r\n          }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPasswordStrengthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-password-strength', imports: [NgClass], template: "@if (control) {\r\n  <div class=\"password-strength\">\r\n    <div class=\"d-flex flex-row mt-1\">\r\n      @if (this.requiredOptionsLength > 4) {\r\n        <hr class=\"rounded-start rounded-end me-1\"\r\n          [ngClass]=\" (strengthMeter >= 0) ? strengthStyleClass : 'gray'\"\r\n          [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n        }\r\n        @if (this.requiredOptionsLength > 3) {\r\n          <hr class=\"rounded-start rounded-end me-1\"\r\n            [ngClass]=\"(strengthMeter >= 1) ? strengthStyleClass : 'gray'\"\r\n            [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n          }\r\n          @if (this.requiredOptionsLength > 2) {\r\n            <hr class=\"rounded-start rounded-end me-1\"\r\n              [ngClass]=\"(strengthMeter >= 2) ? strengthStyleClass : 'gray'\"\r\n              [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n            }\r\n            @if (this.requiredOptionsLength > 1) {\r\n              <hr class=\"rounded-start rounded-end me-1\"\r\n                [ngClass]=\"(strengthMeter >= 3) ? strengthStyleClass : 'gray'\"\r\n                [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n              }\r\n              @if (this.requiredOptionsLength > 0) {\r\n                <hr class=\"rounded-start rounded-end\"\r\n                  [ngClass]=\"(strengthMeter >= 4) ? strengthStyleClass : 'gray'\"\r\n                  [style.width.%]=\"[100 / requiredOptionsLength]\">\r\n                }\r\n              </div>\r\n              @if (passwordHelp) {\r\n                <small id=\"passwordHelp\" class=\"form-text text-muted\">{{passwordHelp}}</small>\r\n              }\r\n              @if (displayFeedback && control.formControl?.errors?.['pattern'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  @if (control.options?.requireUppercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasUppercase}\">{{feedback?.uppercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireLowercase) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasLowercase}\">{{feedback?.lowercase}}</span>\r\n                  }\r\n                  @if (control.options?.requireDigit) {\r\n                    <span [ngClass]=\"{'text-success': hasDigit}\">{{feedback?.digit}}</span>\r\n                  }\r\n                  @if (control.options?.requireNonAlphanumeric) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasNonAlphanumeric}\">{{feedback?.nonAlphanumeric}}</span>\r\n                  }\r\n                  @if (control.options?.requiredMinLength) {\r\n                    <span\r\n                    [ngClass]=\"{'text-success': hasMinLength}\">{{feedback?.minLength}}</span>\r\n                  }\r\n                </div>\r\n              }\r\n              @if (control.formControl?.errors?.['required'] && (control.formControl?.touched || control.formControl?.dirty)) {\r\n                <div\r\n                  class=\"invalid-feedback d-grid \">\r\n                  {{feedback?.required}}\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @if (!control) {\r\n            <div>\r\n              Password strength control is undefined.\r\n            </div>\r\n          }", styles: [".is-invalid ys-password-strength~.invalid-feedback{display:block}.password-strength hr{border-top:3px solid;margin:0;opacity:.75!important}.password-strength .gray{color:var(--bs-gray-300)}.password-strength .pink{color:var(--bs-pink)}.password-strength .red{color:var(--bs-red)}.password-strength .orange{color:var(--bs-orange)}.password-strength .yellow{color:var(--bs-yellow)}.password-strength .green{color:var(--bs-green)}\n"] }]
+        }], propDecorators: { passwordHelp: [{
+                type: Input
+            }], displayFeedback: [{
+                type: Input
+            }], feedback: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
+
+class YsPasswordStrengthDirective {
+    el;
+    viewContainerRef;
+    injector;
+    control;
+    passwordHelp = null;
+    displayFeedback = true;
+    feedback = new StrengthValidationFeedback();
+    options;
+    constructor(el, viewContainerRef, injector, control) {
+        this.el = el;
+        this.viewContainerRef = viewContainerRef;
+        this.injector = injector;
+        this.control = control;
+    }
+    ngOnInit() {
+        const element = this.el.nativeElement;
+        const elementParent = element.parentElement;
+        const formControl = this.control.control;
+        const passwordStrengthComponent = this.viewContainerRef.createComponent(YsPasswordStrengthComponent, { injector: this.injector });
+        elementParent.insertBefore(passwordStrengthComponent.location.nativeElement, element.nextSibling);
+        const passwordStrength = passwordStrengthComponent.instance;
+        passwordStrength.passwordHelp = this.passwordHelp;
+        passwordStrength.displayFeedback = this.displayFeedback;
+        passwordStrength.feedback = this.feedback;
+        passwordStrength.control = { formControl: formControl, options: this.options };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPasswordStrengthDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: YsPasswordStrengthDirective, isStandalone: true, selector: "[ysPasswordStrength]", inputs: { passwordHelp: "passwordHelp", displayFeedback: "displayFeedback", feedback: "feedback", options: "options" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsPasswordStrengthDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ysPasswordStrength]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i1.NgControl }], propDecorators: { passwordHelp: [{
+                type: Input
+            }], displayFeedback: [{
+                type: Input
+            }], feedback: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-password-strength
+ */
+
+class ProgressService {
+    _loading$ = new BehaviorSubject(false);
+    get loading$() { return this._loading$.asObservable(); }
+    setLoading(loading) {
+        this._loading$.next(loading);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProgressService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProgressService, decorators: [{
+            type: Injectable
+        }] });
+
+class YsProgressComponent {
+    progressService;
+    loading$;
+    /**
+     * Set reverse animation direction.
+     */
+    reverse = false;
+    styleClass = null;
+    height = 3;
+    label = null;
+    constructor(progressService) {
+        this.progressService = progressService;
+        this.loading$ = progressService.loading$;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsProgressComponent, deps: [{ token: ProgressService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: YsProgressComponent, isStandalone: true, selector: "ys-progress", inputs: { reverse: "reverse", styleClass: "styleClass", height: "height", label: "label" }, ngImport: i0, template: "<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>", styles: ["@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate-rtl{0%{left:-100%;width:25%}to{left:25%;width:25%}}.progress .progress-bar.indeterminate{position:relative}.progress .direction-reverse{animation-direction:reverse!important}::ng-deep html[dir=rtl] .progress .progress-bar.indeterminate{animation:progress-indeterminate-rtl 3s linear infinite}::ng-deep html[dir=ltr] .progress .progress-bar.indeterminate,::ng-deep html :not(dir) .progress .progress-bar.indeterminate{animation:progress-indeterminate 3s linear infinite}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-progress', imports: [NgClass, AsyncPipe], template: "<div class=\"progress\" role=\"progressbar\" [style]=\"'height: '+ height +'px'\">\r\n    <div class=\"progress-bar {{styleClass}}\"\r\n        [ngClass]=\"{'indeterminate': (loading$ | async), 'direction-reverse': reverse}\">\r\n        {{(loading$ | async) && label ? label : ''}}\r\n    </div>\r\n</div>", styles: ["@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate-rtl{0%{left:-100%;width:25%}to{left:25%;width:25%}}.progress .progress-bar.indeterminate{position:relative}.progress .direction-reverse{animation-direction:reverse!important}::ng-deep html[dir=rtl] .progress .progress-bar.indeterminate{animation:progress-indeterminate-rtl 3s linear infinite}::ng-deep html[dir=ltr] .progress .progress-bar.indeterminate,::ng-deep html :not(dir) .progress .progress-bar.indeterminate{animation:progress-indeterminate 3s linear infinite}\n"] }]
+        }], ctorParameters: () => [{ type: ProgressService }], propDecorators: { reverse: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-progress
+ */
+
+class YsSelectComponent {
+    /**ُSelect element id */
+    id = 'ys-select';
+    options = [];
+    /**Name of field to display in option title */
+    optionLabel = 'label';
+    placeholder;
+    styleClass;
+    invalid = false;
+    invalidFeedback;
+    valid = false;
+    validFeedback;
+    /**Support multiple attribute */
+    multiple = false;
+    /**Size of multiple attribute */
+    size;
+    /**Display clear button */
+    showClear = false;
+    disabled = false;
+    selected = new EventEmitter();
+    onChange = () => { };
+    onTouched = () => { };
+    value;
+    writeValue(obj) {
+        if (!this.multiple && this.placeholder && !obj) {
+            this.value = null;
+            this.onChange(this.value);
+            return;
+        }
+        if (this.multiple && !obj) {
+            this.multiple ? this.value = [] : this.value = null;
+            this.onChange(this.value);
+            return;
+        }
+        if (!this.multiple && obj && Array.isArray(obj)) {
+            if (obj.length) {
+                this.value = obj[0];
+            }
+            else {
+                this.value = null;
+            }
+            this.onChange(this.value);
+            return;
+        }
+        this.value = obj;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onModelChange(option) {
+        this.onChange(option);
+        this.onTouched(option);
+        this.selected.emit(option);
+    }
+    clearValue() {
+        this.multiple ? this.value = [] : this.value = null;
+        this.onModelChange(this.value);
+    }
+    isObject(item) {
+        return typeof item == 'object';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsSelectComponent, isStandalone: true, selector: "ys-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", placeholder: "placeholder", styleClass: "styleClass", invalid: "invalid", invalidFeedback: "invalidFeedback", valid: "valid", validFeedback: "validFeedback", multiple: "multiple", size: "size", showClear: "showClear", disabled: "disabled" }, outputs: { selected: "selected" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => YsSelectComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n  @if (!multiple) {\r\n  <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n    aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n    @if (placeholder) {\r\n    <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n    </option>\r\n    }\r\n    @for (item of options; track $index; let i = $index) {\r\n    <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n      {{isObject(item) ? item[optionLabel] : item}}\r\n    </option>\r\n    }\r\n  </select>\r\n  }\r\n\r\n  @if (multiple) {\r\n  <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n    aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n    [multiple]=\"multiple\" [size]=\"size\">\r\n    @if (placeholder) {\r\n    <option selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n    </option>\r\n    }\r\n    @for (item of options; track $index; let i = $index) {\r\n    <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n      {{isObject(item) ? item[optionLabel] : item}}\r\n    </option>\r\n    }\r\n  </select>\r\n  }\r\n\r\n  @if (showClear) {\r\n  <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\r\n    [disabled]=\"disabled\">\r\n    <span class=\"fa fa-times\"></span>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n@if(valid && validFeedback){\r\n<div class=\"valid-feedback\">{{validFeedback}}</div>\r\n}\r\n@if(invalid && invalidFeedback){\r\n<div class=\"invalid-feedback\">{{invalidFeedback}}</div>\r\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-select', imports: [FormsModule, NgClass], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => YsSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"ys-select\" [ngClass]=\"{'input-group': showClear, 'is-valid': valid, 'is-invalid': invalid}\">\r\n\r\n  @if (!multiple) {\r\n  <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n    aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\">\r\n    @if (placeholder) {\r\n    <option selected disabled [ngValue]=\"null\" class=\"d-none\"> {{placeholder}}\r\n    </option>\r\n    }\r\n    @for (item of options; track $index; let i = $index) {\r\n    <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n      {{isObject(item) ? item[optionLabel] : item}}\r\n    </option>\r\n    }\r\n  </select>\r\n  }\r\n\r\n  @if (multiple) {\r\n  <select [id]=\"id\" class=\"form-select {{styleClass}}\" [ngClass]=\"{'is-valid': valid, 'is-invalid': invalid}\"\r\n    aria-label=\"Select option\" [(ngModel)]=\"value\" (ngModelChange)=\"onModelChange($event)\" [disabled]=\"disabled\"\r\n    [multiple]=\"multiple\" [size]=\"size\">\r\n    @if (placeholder) {\r\n    <option selected disabled [ngValue]=\"null\"> {{placeholder}}\r\n    </option>\r\n    }\r\n    @for (item of options; track $index; let i = $index) {\r\n    <option [selected]=\" i === 0 && !placeholder \" [ngValue]=\"item\">\r\n      {{isObject(item) ? item[optionLabel] : item}}\r\n    </option>\r\n    }\r\n  </select>\r\n  }\r\n\r\n  @if (showClear) {\r\n  <button class=\"btn btn-outline-secondary btn-clear\" type=\"button\" id=\"btn-clear\" (click)=\"clearValue()\"\r\n    [disabled]=\"disabled\">\r\n    <span class=\"fa fa-times\"></span>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n@if(valid && validFeedback){\r\n<div class=\"valid-feedback\">{{validFeedback}}</div>\r\n}\r\n@if(invalid && invalidFeedback){\r\n<div class=\"invalid-feedback\">{{invalidFeedback}}</div>\r\n}" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], invalidFeedback: [{
+                type: Input
+            }], valid: [{
+                type: Input
+            }], validFeedback: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ys-select
+ */
+
+class SidebarService {
+    constructor() { }
+    _isSidebarToggled$ = new BehaviorSubject(true);
+    _isSidebar$ = new BehaviorSubject(false);
+    /**
+     * Sidebar toggled state. Default value is true.
+     */
+    get isSidebarToggled$() { return this._isSidebarToggled$.asObservable(); }
+    /**
+     * Sidebar display state. Default value is false.
+     */
+    get isSidebar$() { return this._isSidebar$.asObservable(); }
+    /**
+     * Change sidebar toggle state.
+     */
+    toggleSidebar() {
+        this._isSidebarToggled$.next(!this._isSidebarToggled$.value);
+    }
+    /**
+     * Set sidebar toggle state.
+     * @param isToggled
+     */
+    setIsSidebarToggled(isToggled) {
+        this._isSidebarToggled$.next(isToggled);
+    }
+    /**
+     * Set sidebar toggle state.
+     * @param isSidebar
+     */
+    setIsSidebar(isSidebar) {
+        this._isSidebar$.next(isSidebar);
+    }
+    /**
+     * Return sidebar toggle state.
+     */
+    get sidebarState() {
+        return this._isSidebarToggled$.getValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SidebarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class YsSidebarComponent {
+    router;
+    subscription;
+    currentItem;
+    currentItemState = [];
+    _items = [];
+    get items() { return this._items; }
+    ;
+    set items(value) { this._items = value; }
+    profile = null;
+    styleClass;
+    itemsStyleClass;
+    constructor(router) {
+        this.router = router;
+        this.subscription = router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                this.currentItem = undefined;
+                this.currentItemState = [];
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    get fullName() { return `${this.profile?.firstName} ${this.profile?.lastName}`; }
+    openItem(item) {
+        if (item.isOpen) {
+            item.isOpen = !item.isOpen;
+            return;
+        }
+        this.items.forEach(x => x.isOpen = false);
+        item.isOpen = !item.isOpen;
+    }
+    isDropdown(item) {
+        return (item.items?.length ?? 0) > 0;
+    }
+    onRouterLinkActive(isActive, item) {
+        this.currentItemState.push(isActive);
+        if (!isActive && this.currentItem == item) {
+            if (this.currentItemState.length == 2 && this.currentItemState[0] && !this.currentItemState[1]) {
+                return;
+            }
+        }
+        this.currentItem = item;
+        item.isActive = isActive;
+        // if (isActive) {
+        //   this.items.forEach(x => x.isOpen = false);
+        //   item.isOpen = true;
+        // }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsSidebarComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsSidebarComponent, isStandalone: true, selector: "ys-sidebar", inputs: { items: "items", profile: "profile", styleClass: "styleClass", itemsStyleClass: "itemsStyleClass" }, ngImport: i0, template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n  @if (profile) {\r\n  <div>\r\n    @if (profile.image || fullName || profile.role) {\r\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n      @if (profile.image) {\r\n      <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n        <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n          <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (fullName || profile.role) {\r\n      <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n        @if (fullName) {\r\n        <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n        }\r\n        @if (profile.role) {\r\n        <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <hr />\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n      @for (item of items; track item) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider\" />\r\n      }\r\n      @if (!item.isDivider) {\r\n      @if (!isDropdown(item)) {\r\n      <li class=\"nav-item d-block\">\r\n        <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n          [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      @if (isDropdown(item)) {\r\n      <li class=\"nav-item d-block dropend\">\r\n        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n          [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n          data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n          [ngClass]=\"{'show': item.isOpen}\">\r\n          @for (subItem of item.items; track subItem) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          }\r\n          @if (!subItem.isDivider) {\r\n          <li class=\"nav-item d-block\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n              [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n              (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n              (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n              @if (subItem.iconClass) {\r\n              <i [ngClass]=\"subItem.iconClass\"></i>\r\n              }\r\n              <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-sidebar', imports: [NgClass, RouterLink, RouterLinkActive], template: "<aside class=\"sidebar card overflow-auto shadow-sm transition-ease\" [ngClass]=\"styleClass\">\r\n  @if (profile) {\r\n  <div>\r\n    @if (profile.image || fullName || profile.role) {\r\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center pt-3\">\r\n      @if (profile.image) {\r\n      <div class=\"image-wrapper\" [ngClass]=\"{'mb-3': fullName || profile.role}\">\r\n        <div class=\"user-image rounded-circle m-auto transition-ease\">\r\n          <img src=\"{{profile.image.src}}\" class=\"img-fluid\" alt=\"{{profile.image.alt}}\">\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (fullName || profile.role) {\r\n      <div class=\"profile-details d-flex flex-column text-center transition-ease\">\r\n        @if (fullName) {\r\n        <strong class=\"text-uppercase name\">{{fullName || ''}}</strong>\r\n        }\r\n        @if (profile.role) {\r\n        <small class=\"text-uppercase role\">{{profile.role}}</small>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <hr />\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu\" [ngClass]=\"{'pt-2': !profile}\">\r\n    <ul class=\"sidebar-items nav nav-pills flex-column mx-2\" [ngClass]=\"itemsStyleClass\">\r\n      @for (item of items; track item) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider\" />\r\n      }\r\n      @if (!item.isDivider) {\r\n      @if (!isDropdown(item)) {\r\n      <li class=\"nav-item d-block\">\r\n        <a class=\"nav-link d-flex align-items-center\" [ngClass]=\"{'disabled': item.disabled}\"\r\n          [routerLink]=\"item.routerLink\" [routerLinkActive]=\"['active']\" role=\"button\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      @if (isDropdown(item)) {\r\n      <li class=\"nav-item d-block dropend\">\r\n        <a class=\"nav-link d-flex align-items-center dropdown-toggle\"\r\n          [ngClass]=\"{'active': item.isActive , 'toggled': item.isOpen, 'disabled': item.disabled}\"\r\n          data-bs-toggle=\"dropend\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n          (click)=\"openItem(item); item.onClick && item.onClick($event)\">\r\n          @if (item.iconClass) {\r\n          <i [ngClass]=\"item.iconClass\"></i>\r\n          }\r\n          <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [ngClass]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\r\n          }\r\n        </a>\r\n        <ul class=\"nav-sub-items nav nav-pills flex-column rounded shadow-sm mb-2 mx-2\"\r\n          [ngClass]=\"{'show': item.isOpen}\">\r\n          @for (subItem of item.items; track subItem) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          }\r\n          @if (!subItem.isDivider) {\r\n          <li class=\"nav-item d-block\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.routerLink\" role=\"button\"\r\n              [ngClass]=\"{'disabled': subItem.disabled}\" [routerLinkActive]=\"['active']\"\r\n              (isActiveChange)=\"this.onRouterLinkActive($event, item)\"\r\n              (click)=\"subItem.onClick && subItem.onClick($event)\">\r\n              @if (subItem.iconClass) {\r\n              <i [ngClass]=\"subItem.iconClass\"></i>\r\n              }\r\n              <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [ngClass]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>", styles: ["@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.transition-ease{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar{height:100%;width:300px;position:absolute;top:0;left:0;z-index:1000}.sidebar .sidebar-profile .user-image{width:75px;height:75px;overflow:hidden}.sidebar .sidebar-profile .profile-details{-webkit-animation:fadeIn 1.5s;animation:fadeIn 1.5s}.sidebar .sidebar-profile .profile-details .role{font-size:.7rem;letter-spacing:1px}.sidebar .sidebar-menu .dropdown-toggle:after{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.sidebar .sidebar-menu .dropdown-toggle.toggled:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sidebar .sidebar-menu .nav-sub-items{display:none;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}.sidebar .sidebar-menu .nav-sub-items .nav-link{height:3em;line-height:3em;font-size:11px}.show{display:block!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { items: [{
+                type: Input
+            }], profile: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], itemsStyleClass: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-sidebar
+ */
+
+class YsTiffViewerComponent {
+    canvasRef;
+    canvas;
+    context;
+    /**image file directories */
+    IFDs = [];
+    currentIFDIndex = 0;
+    isDecoding = false;
+    _buffer;
+    /**Uint8Array source */
+    /**ArrayBuffer containing TIFF or EXIF data */
+    get buffer() { return this._buffer; }
+    set buffer(value) { this._buffer = value; this.convertSource(this._buffer); }
+    _currentPageReportTemplate = "Page {current} of {total}";
+    /**Current page report template */
+    get currentPageReportTemplate() {
+        return this._currentPageReportTemplate?.
+            replace('{current}', `<strong>${this.currentIFDIndex + 1}</strong>`).
+            replace('{total}', `<strong>${this.IFDs.length}</strong>`);
+    }
+    set currentPageReportTemplate(value) { this._currentPageReportTemplate = value; }
+    /**Canvas container style class */
+    styleClass;
+    /**Message displayed before filling the input buffer */
+    noFileMessage = "No image file";
+    noFileStyleClass;
+    /**First button icon class */
+    firstIconClass = 'fa fa-fast-backward';
+    /**Previous button icon class */
+    previousIconClass = 'fa fa-step-backward';
+    /**Next button icon class */
+    nextIconClass = 'fa fa-step-forward';
+    /**Last button icon class */
+    lastIconClass = 'fa fa-fast-forward';
+    get isIFDs() { return this.IFDs.length > 0; }
+    get isFirstImage() { return !this.isIFDs || (this.currentIFDIndex == 0); }
+    get isLastImage() { return !this.isIFDs || (this.currentIFDIndex == this.IFDs.length - 1); }
+    /**
+     * Convert buffer to an array of "IFDs" (image file directories)
+     * @param buffer ArrayBuffer containing TIFF or EXIF data
+     * @returns
+     */
+    async convertSource(buffer) {
+        this.canvas = this.canvasRef.nativeElement;
+        this.context = this.canvas.getContext("2d");
+        this.IFDs = [];
+        this.currentIFDIndex = 0;
+        if (!buffer) {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            return;
+        }
+        if (buffer instanceof File || buffer instanceof Blob) {
+            // buffer = await this.getAsByteArray(buffer);
+            buffer = await buffer.arrayBuffer();
+        }
+        this.isDecoding = true;
+        this.IFDs = UTIF.decode(buffer);
+        this.IFDs.forEach((ifd) => UTIF.decodeImage(buffer, ifd));
+        this.putImage(this.currentIFDIndex);
+        this.isDecoding = false;
+    }
+    putImage(index) {
+        if (!this.IFDs.length) {
+            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            return;
+        }
+        const tiffImage = this.IFDs[index];
+        const rgbaImage = UTIF.toRGBA8(tiffImage); // Uint8Array with RGBA pixels
+        const data = new Uint8ClampedArray(rgbaImage);
+        const imageData = new ImageData(data, tiffImage.width, tiffImage.height);
+        this.context.canvas.width = tiffImage.width;
+        this.context.canvas.height = tiffImage.height;
+        // Draw image data to the canvas
+        this.context.putImageData(imageData, 0, 0);
+    }
+    first() {
+        this.currentIFDIndex = 0;
+        this.putImage(this.currentIFDIndex);
+    }
+    previous() {
+        this.currentIFDIndex -= 1;
+        if (this.currentIFDIndex < 0) {
+            this.currentIFDIndex = 0;
+            return;
+        }
+        this.putImage(this.currentIFDIndex);
+    }
+    next() {
+        this.currentIFDIndex += 1;
+        if (this.currentIFDIndex > (this.IFDs.length - 1)) {
+            this.currentIFDIndex = this.IFDs.length - 1;
+            return;
+        }
+        this.putImage(this.currentIFDIndex);
+    }
+    last() {
+        this.currentIFDIndex = this.IFDs.length - 1;
+        this.putImage(this.currentIFDIndex);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsTiffViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsTiffViewerComponent, isStandalone: true, selector: "ys-tiff-viewer", inputs: { buffer: "buffer", currentPageReportTemplate: "currentPageReportTemplate", styleClass: "styleClass", noFileMessage: "noFileMessage", noFileStyleClass: "noFileStyleClass", firstIconClass: "firstIconClass", previousIconClass: "previousIconClass", nextIconClass: "nextIconClass", lastIconClass: "lastIconClass" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["tiffCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col d-flex justify-content-between align-items-center\">\r\n    <div>\r\n      <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\" (click)=\"first()\"\r\n        [disabled]=\"isFirstImage\">\r\n        <i [ngClass]=\"firstIconClass\"></i>\r\n      </button>\r\n      <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n        <i [ngClass]=\"previousIconClass\"></i>\r\n      </button>\r\n    </div>\r\n\r\n    @if (isIFDs) {\r\n    <span [innerHtml]=\"currentPageReportTemplate\">\r\n    </span>\r\n    }\r\n\r\n    <div>\r\n      <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n        <i [ngClass]=\"nextIconClass\"></i>\r\n      </button>\r\n      <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n        [disabled]=\"isLastImage\">\r\n        <i [ngClass]=\"lastIconClass\"></i>\r\n      </button>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col\">\r\n    <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n      @if (!isIFDs && noFileMessage) {\r\n      <span class=\"my-4\" [ngClass]=\"noFileStyleClass\">{{noFileMessage}}</span>\r\n      }\r\n      <canvas #tiffCanvas class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n      <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n        [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n      </div>\r\n      <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n        [ngClass]=\"{'d-none': !isDecoding}\">\r\n        <span class=\"visually-hidden\">Loading...</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsTiffViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-tiff-viewer', imports: [NgClass], template: "<div class=\"row\">\r\n  <div class=\"col d-flex justify-content-between align-items-center\">\r\n    <div>\r\n      <button class=\"btn btn-outline-primary mb-0 me-2\" [ngClass]=\"{'ml-auto': isIFDs}\" type=\"button\" (click)=\"first()\"\r\n        [disabled]=\"isFirstImage\">\r\n        <i [ngClass]=\"firstIconClass\"></i>\r\n      </button>\r\n      <button class=\"btn btn-outline-primary mb-0\" type=\"button\" (click)=\"previous()\" [disabled]=\"isFirstImage\">\r\n        <i [ngClass]=\"previousIconClass\"></i>\r\n      </button>\r\n    </div>\r\n\r\n    @if (isIFDs) {\r\n    <span [innerHtml]=\"currentPageReportTemplate\">\r\n    </span>\r\n    }\r\n\r\n    <div>\r\n      <button class=\"btn btn-outline-primary mb-0 me-2\" type=\"button\" (click)=\"next()\" [disabled]=\"isLastImage\">\r\n        <i [ngClass]=\"nextIconClass\"></i>\r\n      </button>\r\n      <button class=\"btn btn-outline-primary mb-0\" [ngClass]=\"{'mr-auto': isIFDs}\" type=\"button\" (click)=\"last()\"\r\n        [disabled]=\"isLastImage\">\r\n        <i [ngClass]=\"lastIconClass\"></i>\r\n      </button>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col\">\r\n    <div class=\"canvas-container card d-flex justify-content-center align-items-center mt-1 {{styleClass}}\">\r\n      @if (!isIFDs && noFileMessage) {\r\n      <span class=\"my-4\" [ngClass]=\"noFileStyleClass\">{{noFileMessage}}</span>\r\n      }\r\n      <canvas #tiffCanvas class=\"canvas-image img-fluid\" [ngClass]=\"{'d-none': !isIFDs}\"></canvas>\r\n      <div class=\"backdrop position-absolute w-100 h-100 d-flex justify-content-center align-items-center\"\r\n        [ngClass]=\"{'d-none': !isDecoding}\">\r\n\r\n      </div>\r\n      <div class=\"spinner-border text-info position-absolute\" style=\"width: 3rem; height: 3rem;\" role=\"status\"\r\n        [ngClass]=\"{'d-none': !isDecoding}\">\r\n        <span class=\"visually-hidden\">Loading...</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".backdrop{background-color:rgba(var(--bs-dark-rgb),.3)}\n"] }]
+        }], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['tiffCanvas', { static: true }]
+            }], buffer: [{
+                type: Input
+            }], currentPageReportTemplate: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], noFileMessage: [{
+                type: Input
+            }], noFileStyleClass: [{
+                type: Input
+            }], firstIconClass: [{
+                type: Input
+            }], previousIconClass: [{
+                type: Input
+            }], nextIconClass: [{
+                type: Input
+            }], lastIconClass: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-sidebar
+ */
+
+var ToastType;
+(function (ToastType) {
+    ToastType[ToastType["info"] = 0] = "info";
+    ToastType[ToastType["success"] = 1] = "success";
+    ToastType[ToastType["warning"] = 2] = "warning";
+    ToastType[ToastType["danger"] = 3] = "danger";
+})(ToastType || (ToastType = {}));
+
+class ToastService {
+    toasts = [];
+    // showItem = false;
+    show(textOrTpl, options = {}) {
+        // this.showItem = true;
+        this.toasts.push({ textOrTpl, ...options });
+    }
+    remove(toast) {
+        // this.showItem = false;
+        this.toasts = this.toasts.filter(t => t !== toast);
+    }
+    clear() {
+        this.toasts.splice(0, this.toasts.length);
+    }
+    showStandard(textOrTpl, header) {
+        this.show(textOrTpl, { header: header });
+    }
+    showInfo(textOrTpl, header) {
+        this.show(textOrTpl, { header: header, classname: 'bg-info text-light', type: ToastType.info, delay: 10000, autohide: true });
+    }
+    showSuccess(textOrTpl, header) {
+        this.show(textOrTpl, { header: header, classname: 'bg-success text-light', type: ToastType.success, delay: 10000, autohide: true });
+    }
+    showWarning(textOrTpl, header) {
+        this.show(textOrTpl, { header: header, classname: 'bg-warning text-light', type: ToastType.warning, delay: 10000, autohide: true });
+    }
+    showDanger(textOrTpl, header) {
+        this.show(textOrTpl, { header: header, classname: 'bg-danger text-light', type: ToastType.danger, delay: 15000, autohide: true });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class YsToastComponent {
+    toastService;
+    _elementRef;
+    autohide = true;
+    _placement = [];
+    /**
+     * Set toasts placement with style classes.
+     * Default place is top end.
+     */
+    get placement() { return this._placement; }
+    set placement(placement) {
+        this._placement = placement;
+        this.setPlacement(this._placement);
+    }
+    constructor(toastService, _elementRef) {
+        this.toastService = toastService;
+        this._elementRef = _elementRef;
+    }
+    ngOnInit() {
+        this.setPlacement(this._placement);
+    }
+    get toastTypes() { return ToastType; }
+    get hostElement() { return this._elementRef.nativeElement; }
+    setPlacement(placement) {
+        if (placement?.length <= 0) {
+            this.hostElement?.classList?.add(...["top-0", "end-0"]);
+            return;
+        }
+        this.hostElement?.classList?.add(...this._placement);
+    }
+    isTemplate(toast) { return toast.textOrTpl instanceof TemplateRef; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsToastComponent, deps: [{ token: ToastService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: YsToastComponent, isStandalone: true, selector: "ys-toast", inputs: { autohide: "autohide", placement: "placement" }, host: { styleAttribute: "z-index: 1200", classAttribute: "toast-container position-fixed p-3" }, ngImport: i0, template: "@for (toast of toastService.toasts; track toast) {\r\n  <ngb-toast [class]=\"toast.classname\" [autohide]=\"autohide\" [header]=\"toast.header\" [delay]=\"toast.delay || 5000\"\r\n    (hidden)=\"toastService.remove(toast);\">\r\n    <!-- *ngIf=\"toastService.showItem\" -->\r\n    @if (isTemplate(toast)) {\r\n      <ng-template [ngTemplateOutlet]=\"toast.textOrTpl\"></ng-template>\r\n    } @else {\r\n      @if (toast.type==toastTypes.danger) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n          focusable=\"false\" data-prefix=\"fas\" data-icon=\"bug\" class=\"svg-inline--fa fa-bug fa-w-16\" role=\"img\"\r\n          width=\"24\" height=\"24\" viewBox=\"0 0 512 512\">\r\n          <path fill=\"currentColor\"\r\n            d=\"M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z\" />\r\n          </svg>\r\n        }\r\n        <!-- <svg *ngIf=\"toast.type=='danger'\" xmlns=\"http://www.w3.org/2000/svg\" class=\"ml-2\" fill=\"#fff\" width=\"24\"\r\n        height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          d=\"M10.872 6.831l1.695 3.904 3.654-1.561-1.79 3.426 3.333.954-3.417 1.338 2.231 4.196-4.773-2.582-2.869 2.287.413-3.004-3.792-.726 2.93-1.74-1.885-2.512 3.427.646.843-4.626zm-.786-6.831l-1.665 9.119-6.512-1.228 3.639 4.851-5.548 3.294 7.108 1.361-.834 6.076 5.742-4.577 9.438 5.104-4.288-8.064 6.834-2.677-6.661-1.907 3.25-6.22-6.98 2.982-3.523-8.114z\" />\r\n        </svg> -->\r\n        @if (toast.type==toastTypes.warning) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n            focusable=\"false\" data-prefix=\"fas\" data-icon=\"exclamation-triangle\"\r\n            class=\"svg-inline--fa fa-exclamation-triangle fa-w-18 ml-2\" role=\"img\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 576 512\">\r\n            <path fill=\"currentColor\"\r\n              d=\"M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\" />\r\n            </svg>\r\n          }\r\n          @if (toast.type==toastTypes.info) {\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n              focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\"\r\n              class=\"svg-inline--fa fa-info-circle fa-w-16 ml-2\" role=\"img\" width=\"24\" height=\"24\"\r\n              viewBox=\"0 0 512 512\">\r\n              <path fill=\"currentColor\"\r\n                d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\" />\r\n              </svg>\r\n            }\r\n            @if (toast.type==toastTypes.success) {\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n                focusable=\"false\" data-prefix=\"fas\" data-icon=\"check-circle\"\r\n                class=\"svg-inline--fa fa-check-circle fa-w-16 ml-2\" role=\"img\" width=\"24\" height=\"24\"\r\n                viewBox=\"0 0 512 512\">\r\n                <path fill=\"currentColor\"\r\n                  d=\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\" />\r\n                </svg>\r\n              }\r\n              <span class=\"ms-2\">{{ toast.textOrTpl }}</span>\r\n            }\r\n          </ngb-toast>\r\n        }", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbToastModule }, { kind: "component", type: i2$1.NgbToast, selector: "ngb-toast", inputs: ["animation", "delay", "autohide", "header"], outputs: ["shown", "hidden"], exportAs: ["ngbToast"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: YsToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ys-toast', imports: [NgTemplateOutlet, NgbToastModule], host: { class: 'toast-container position-fixed p-3', style: 'z-index: 1200' }, template: "@for (toast of toastService.toasts; track toast) {\r\n  <ngb-toast [class]=\"toast.classname\" [autohide]=\"autohide\" [header]=\"toast.header\" [delay]=\"toast.delay || 5000\"\r\n    (hidden)=\"toastService.remove(toast);\">\r\n    <!-- *ngIf=\"toastService.showItem\" -->\r\n    @if (isTemplate(toast)) {\r\n      <ng-template [ngTemplateOutlet]=\"toast.textOrTpl\"></ng-template>\r\n    } @else {\r\n      @if (toast.type==toastTypes.danger) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n          focusable=\"false\" data-prefix=\"fas\" data-icon=\"bug\" class=\"svg-inline--fa fa-bug fa-w-16\" role=\"img\"\r\n          width=\"24\" height=\"24\" viewBox=\"0 0 512 512\">\r\n          <path fill=\"currentColor\"\r\n            d=\"M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z\" />\r\n          </svg>\r\n        }\r\n        <!-- <svg *ngIf=\"toast.type=='danger'\" xmlns=\"http://www.w3.org/2000/svg\" class=\"ml-2\" fill=\"#fff\" width=\"24\"\r\n        height=\"24\" viewBox=\"0 0 24 24\">\r\n        <path\r\n          d=\"M10.872 6.831l1.695 3.904 3.654-1.561-1.79 3.426 3.333.954-3.417 1.338 2.231 4.196-4.773-2.582-2.869 2.287.413-3.004-3.792-.726 2.93-1.74-1.885-2.512 3.427.646.843-4.626zm-.786-6.831l-1.665 9.119-6.512-1.228 3.639 4.851-5.548 3.294 7.108 1.361-.834 6.076 5.742-4.577 9.438 5.104-4.288-8.064 6.834-2.677-6.661-1.907 3.25-6.22-6.98 2.982-3.523-8.114z\" />\r\n        </svg> -->\r\n        @if (toast.type==toastTypes.warning) {\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n            focusable=\"false\" data-prefix=\"fas\" data-icon=\"exclamation-triangle\"\r\n            class=\"svg-inline--fa fa-exclamation-triangle fa-w-18 ml-2\" role=\"img\" width=\"24\" height=\"24\"\r\n            viewBox=\"0 0 576 512\">\r\n            <path fill=\"currentColor\"\r\n              d=\"M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\" />\r\n            </svg>\r\n          }\r\n          @if (toast.type==toastTypes.info) {\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n              focusable=\"false\" data-prefix=\"fas\" data-icon=\"info-circle\"\r\n              class=\"svg-inline--fa fa-info-circle fa-w-16 ml-2\" role=\"img\" width=\"24\" height=\"24\"\r\n              viewBox=\"0 0 512 512\">\r\n              <path fill=\"currentColor\"\r\n                d=\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\" />\r\n              </svg>\r\n            }\r\n            @if (toast.type==toastTypes.success) {\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"\r\n                focusable=\"false\" data-prefix=\"fas\" data-icon=\"check-circle\"\r\n                class=\"svg-inline--fa fa-check-circle fa-w-16 ml-2\" role=\"img\" width=\"24\" height=\"24\"\r\n                viewBox=\"0 0 512 512\">\r\n                <path fill=\"currentColor\"\r\n                  d=\"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z\" />\r\n                </svg>\r\n              }\r\n              <span class=\"ms-2\">{{ toast.textOrTpl }}</span>\r\n            }\r\n          </ngb-toast>\r\n        }" }]
+        }], ctorParameters: () => [{ type: ToastService }, { type: i0.ElementRef }], propDecorators: { autohide: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ys-toast
+ */
+
 /*
  * Public API Surface of yoozsoft-ng
  */
-const YOOZSOFT_YOOZSOFT_NG = "@yoozsoft/yoozsoft-ng";
+// export const YOOZSOFT_YOOZSOFT_NG = "@yoozsoft/yoozsoft-ng";
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { YOOZSOFT_YOOZSOFT_NG };
+export { DateTimeFormat, DigitRegx, I18n, JalaliDate, LanguageType, LowercaseRegx, NonAlphanumericRegx, ProgressService, SidebarService, StrengthValidationFeedback, StrengthValidationOption, StrongPasswordRegx, ToastService, ToastType, UppercaseRegx, YsAutocompleteComponent, YsDateParserFormatterService, YsDatepickerComponent, YsDatepickerI18nService, YsDatepickerPersianComponent, YsDatepickerPopupComponent, YsDatepickerPopupPersianComponent, YsDatepickerRangePopupComponent, YsDatepickerRangePopupPersianComponent, YsDropdownComponent, YsFileUploadComponent, YsFooterComponent, YsLoadingMaskComponent, YsNavbarComponent, YsOverlayComponent, YsPaginationComponent, YsPasswordMatchDirective, YsPasswordStrengthComponent, YsPasswordStrengthDirective, YsProgressComponent, YsSelectComponent, YsSidebarComponent, YsTiffViewerComponent, YsToastComponent, passwordMatchValidator };
 //# sourceMappingURL=yoozsoft-yoozsoft-ng.mjs.map