@corp-products/ui-components 4.2.3 → 4.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, input, signal, computed, ViewChild, Injectable, Renderer2, ChangeDetectorRef, effect, HostListener, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } from '@angular/core';
|
|
2
|
+
import { ViewEncapsulation, Component, Input, ChangeDetectionStrategy, model, inject, Pipe, EventEmitter, Output, input, signal, computed, ViewChild, Injectable, Renderer2, ChangeDetectorRef, ElementRef, effect, HostListener, InjectionToken, Injector, createComponent, ViewContainerRef, ApplicationRef, EnvironmentInjector, DestroyRef } from '@angular/core';
|
|
3
3
|
import * as i1 from 'primeng/button';
|
|
4
4
|
import { Button, ButtonModule, ButtonStyle } from 'primeng/button';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -49,7 +49,7 @@ import * as i1$5 from 'primeng/toggleswitch';
|
|
|
49
49
|
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
50
50
|
import * as i1$6 from '@ng-bootstrap/ng-bootstrap';
|
|
51
51
|
import { NgbDatepickerI18n, NgbCalendarIslamicUmalqura, NgbDatepickerModule, NgbCalendar, NgbCalendarGregorian, NgbDate } from '@ng-bootstrap/ng-bootstrap';
|
|
52
|
-
import { trigger, state,
|
|
52
|
+
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
53
53
|
import '@angular/localize/init';
|
|
54
54
|
import * as i2$4 from 'primeng/accordion';
|
|
55
55
|
import { AccordionModule } from 'primeng/accordion';
|
|
@@ -1176,7 +1176,7 @@ class DatePickerComponent extends BaseInputComponent {
|
|
|
1176
1176
|
this.control.setValue(formattedDate, { emitEvent: true });
|
|
1177
1177
|
}
|
|
1178
1178
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1179
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", appendTo: "appendTo", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\"
|
|
1179
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DatePickerComponent, isStandalone: true, selector: "stc-date-picker", inputs: { showIcon: "showIcon", showClear: "showClear", basicInput: "basicInput", isTimeOnly: "isTimeOnly", minDate: "minDate", maxDate: "maxDate", hourFormat: "hourFormat", appendTo: "appendTo", selectionMode: "selectionMode", variant: "variant", withoutTime: "withoutTime" }, outputs: { onAfterClearDate: "onAfterClearDate" }, usesInheritance: true, ngImport: i0, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder ? placeholder : undefined\"\r\n [showIcon]=\"showIcon\" [class]=\"'w-full'\" [appendTo]=\"appendTo\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\" [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i3$1.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "pipe", type: ValidationErrorsPipe, name: "validationErrors" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1180
1180
|
}
|
|
1181
1181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1182
1182
|
type: Component,
|
|
@@ -1188,7 +1188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1188
1188
|
DatePickerModule,
|
|
1189
1189
|
ValidationErrorsPipe,
|
|
1190
1190
|
FloatLabelModule,
|
|
1191
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder\"
|
|
1191
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"field flex flex-col gap-2 my-3 relative\">\r\n <p-floatlabel [variant]=\"variant\">\r\n <p-datepicker [selectionMode]=\"selectionMode\" [disabled]=\"disabled\" [formControl]=\"innerControl\"\r\n (onSelect)=\"onDateChange($event)\" [iconDisplay]=\"'input'\" [showClear]=\"showClear\" (onClear)=\"afterClearDate()\"\r\n [inputId]=\"inputId\" [inputStyleClass]=\"'reset-default-styles ' + (basicInput ? 'basic-style' : '')\"\r\n [ngClass]=\"{ 'p-invalid ng-dirty ng-invalid': isInvalid }\" [placeholder]=\"placeholder ? placeholder : undefined\"\r\n [showIcon]=\"showIcon\" [class]=\"'w-full'\" [appendTo]=\"appendTo\" [timeOnly]=\"isTimeOnly\" [hourFormat]=\"hourFormat\"\r\n [minDate]=\"minDate\" [maxDate]=\"maxDate\">\r\n @if (isTimeOnly) {\r\n <ng-template #inputicon let-clickCallBack=\"clickCallBack\">\r\n <i class=\"text-[18px] font-icon-time-clock\" (click)=\"clickCallBack($event)\"></i>\r\n </ng-template>\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"p-datepicker-buttonbar\">\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"selectCurrentTime($event)\">\u0627\u0644\u0627\u0646\r\n </button>\r\n <button pButton type=\"button\" class=\"p-button-text\" (click)=\"clearButtonClick($event)\"> \u0627\u0644\u063A\u0627\u0621</button>\r\n </div>\r\n </ng-template>\r\n }\r\n </p-datepicker>\r\n\r\n <label [for]=\"inputId\">\r\n {{ label }}\r\n @if (required) {\r\n <span [class.text-required]=\"required\">*</span>\r\n }\r\n </label>\r\n </p-floatlabel>\r\n @if (hint) {\r\n <small class=\"p-mt-1\">{{ hint }}</small>\r\n }\r\n @if (isInvalid && (control.dirty || control.touched)) {\r\n <small class=\"p-error\">\r\n @for (error of control.errors | validationErrors; track error) {\r\n {{ error }}<br>\r\n }\r\n </small>\r\n }\r\n</div>", styles: [".p-datepicker{@apply relative;}.p-datepicker-clear-icon{@apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;}.text-required{color:red}.p-error{color:#dc2626}stc-date-picker.w-full,stc-date-picker.w-full .field,stc-date-picker.w-full .p-floatlabel,stc-date-picker.w-full .p-datepicker,stc-date-picker.w-full .p-inputtext{@apply w-full;}stc-date-picker input{width:100%}stc-date-picker.w-full .p-datepicker{@apply block;}\n"] }]
|
|
1192
1192
|
}], ctorParameters: () => [], propDecorators: { showIcon: [{
|
|
1193
1193
|
type: Input
|
|
1194
1194
|
}], showClear: [{
|
|
@@ -1928,6 +1928,7 @@ class DualCalendarComponent {
|
|
|
1928
1928
|
calendarContainer;
|
|
1929
1929
|
hijriCal = new NgbCalendarIslamicUmalqura();
|
|
1930
1930
|
renderer = inject(Renderer2);
|
|
1931
|
+
hostEl = inject(ElementRef);
|
|
1931
1932
|
constructor() {
|
|
1932
1933
|
effect(() => {
|
|
1933
1934
|
this.currentLang(); // 👈 track signal
|
|
@@ -1937,6 +1938,7 @@ class DualCalendarComponent {
|
|
|
1937
1938
|
ngOnChanges(changes) {
|
|
1938
1939
|
if (changes['isShown']?.currentValue) {
|
|
1939
1940
|
this.wrapperVisible();
|
|
1941
|
+
setTimeout(() => this.positionCalendar());
|
|
1940
1942
|
}
|
|
1941
1943
|
else {
|
|
1942
1944
|
this.wrapperHidden();
|
|
@@ -1975,6 +1977,31 @@ class DualCalendarComponent {
|
|
|
1975
1977
|
return;
|
|
1976
1978
|
this.renderer.setStyle(this.calendarWrapper.nativeElement, 'visibility', 'hidden');
|
|
1977
1979
|
}
|
|
1980
|
+
positionCalendar() {
|
|
1981
|
+
if (!this.calendarWrapper)
|
|
1982
|
+
return;
|
|
1983
|
+
const anchor = this.hostEl.nativeElement.previousElementSibling || this.hostEl.nativeElement;
|
|
1984
|
+
const triggerRect = anchor.getBoundingClientRect();
|
|
1985
|
+
const el = this.calendarWrapper.nativeElement;
|
|
1986
|
+
const calendarHeight = el.scrollHeight || 370;
|
|
1987
|
+
const calendarWidth = el.scrollWidth || 375;
|
|
1988
|
+
const spaceBelow = window.innerHeight - triggerRect.bottom;
|
|
1989
|
+
const spaceAbove = triggerRect.top;
|
|
1990
|
+
if (spaceBelow >= calendarHeight || spaceBelow >= spaceAbove) {
|
|
1991
|
+
el.style.top = `${triggerRect.bottom}px`;
|
|
1992
|
+
el.style.bottom = 'auto';
|
|
1993
|
+
}
|
|
1994
|
+
else {
|
|
1995
|
+
el.style.bottom = `${window.innerHeight - triggerRect.top}px`;
|
|
1996
|
+
el.style.top = 'auto';
|
|
1997
|
+
}
|
|
1998
|
+
let left = triggerRect.right - calendarWidth;
|
|
1999
|
+
if (left < 8)
|
|
2000
|
+
left = 8;
|
|
2001
|
+
if (left + calendarWidth > window.innerWidth - 8)
|
|
2002
|
+
left = window.innerWidth - calendarWidth - 8;
|
|
2003
|
+
el.style.left = `${left}px`;
|
|
2004
|
+
}
|
|
1978
2005
|
setDate(value) {
|
|
1979
2006
|
if (!value)
|
|
1980
2007
|
return;
|
|
@@ -1991,7 +2018,7 @@ class DualCalendarComponent {
|
|
|
1991
2018
|
}
|
|
1992
2019
|
onDocumentClick(event) {
|
|
1993
2020
|
event.stopPropagation();
|
|
1994
|
-
if (!this.calendarContainer)
|
|
2021
|
+
if (!this.calendarContainer || !this.isShown)
|
|
1995
2022
|
return;
|
|
1996
2023
|
const clickedInside = this.calendarContainer.nativeElement.contains(event.target);
|
|
1997
2024
|
this.onClose.emit(!clickedInside);
|
|
@@ -2043,6 +2070,7 @@ class DualCalendarComponent {
|
|
|
2043
2070
|
this.isShown = isOpen;
|
|
2044
2071
|
if (isOpen) {
|
|
2045
2072
|
this.wrapperVisible();
|
|
2073
|
+
setTimeout(() => this.positionCalendar());
|
|
2046
2074
|
}
|
|
2047
2075
|
else {
|
|
2048
2076
|
this.wrapperHidden();
|
|
@@ -2066,17 +2094,19 @@ class DualCalendarComponent {
|
|
|
2066
2094
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DualCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2067
2095
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DualCalendarComponent, isStandalone: true, selector: "app-dual-calendar", inputs: { control: "control", label: "label", name: "name", withTime: "withTime", isDatePickerShow: "isDatePickerShow", currentLang: "currentLang", isShown: "isShown", appedToBody: "appedToBody" }, outputs: { gregorianUTC: "gregorianUTC", onClose: "onClose" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
2068
2096
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
2069
|
-
], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }, { propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calender-content\" #calendarContainer>\r\n @if(isDatePickerShow) {\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n }\r\n\r\n <!-- calender.html -->\r\n <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\" #calendarWrapper>\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.
|
|
2097
|
+
], viewQueries: [{ propertyName: "calendarWrapper", first: true, predicate: ["calendarWrapper"], descendants: true }, { propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calender-content\" #calendarContainer>\r\n @if(isDatePickerShow) {\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n }\r\n\r\n <!-- calender.html -->\r\n <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\" #calendarWrapper>\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:32px!important;height:32px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: NgbDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: HijriCalendarComponent, selector: "app-hijri-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "component", type: DatePickerSwitcherComponent, selector: "stc-date-picker-switcher", inputs: ["type", "contentType", "size", "prefix", "rows", "cols", "autoResize", "basicInput", "noStyle", "hideOptionalLabel", "inputDirection", "variant", "defaultColor", "formattedDate"], outputs: ["openCalender"] }, { kind: "component", type: GregorianCalendarComponent, selector: "app-gregorian-calendar", inputs: ["model", "language"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
|
|
2070
2098
|
trigger('slideDown', [
|
|
2071
2099
|
state('closed', style({
|
|
2072
2100
|
height: '0px',
|
|
2073
2101
|
opacity: 0,
|
|
2074
|
-
overflow: 'hidden'
|
|
2102
|
+
overflow: 'hidden',
|
|
2103
|
+
pointerEvents: 'none',
|
|
2075
2104
|
})),
|
|
2076
2105
|
state('open', style({
|
|
2077
2106
|
height: '*',
|
|
2078
2107
|
opacity: 1,
|
|
2079
|
-
overflow: 'hidden'
|
|
2108
|
+
overflow: 'hidden',
|
|
2109
|
+
pointerEvents: 'auto',
|
|
2080
2110
|
})),
|
|
2081
2111
|
transition('closed <=> open', [
|
|
2082
2112
|
animate('300ms ease')
|
|
@@ -2091,12 +2121,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2091
2121
|
state('closed', style({
|
|
2092
2122
|
height: '0px',
|
|
2093
2123
|
opacity: 0,
|
|
2094
|
-
overflow: 'hidden'
|
|
2124
|
+
overflow: 'hidden',
|
|
2125
|
+
pointerEvents: 'none',
|
|
2095
2126
|
})),
|
|
2096
2127
|
state('open', style({
|
|
2097
2128
|
height: '*',
|
|
2098
2129
|
opacity: 1,
|
|
2099
|
-
overflow: 'hidden'
|
|
2130
|
+
overflow: 'hidden',
|
|
2131
|
+
pointerEvents: 'auto',
|
|
2100
2132
|
})),
|
|
2101
2133
|
transition('closed <=> open', [
|
|
2102
2134
|
animate('300ms ease')
|
|
@@ -2105,7 +2137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2105
2137
|
], imports: [
|
|
2106
2138
|
NgbDatepickerModule,
|
|
2107
2139
|
FormsModule,
|
|
2108
|
-
FormsModule,
|
|
2109
2140
|
ReactiveFormsModule,
|
|
2110
2141
|
DatePickerModule,
|
|
2111
2142
|
FloatLabelModule,
|
|
@@ -2115,7 +2146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2115
2146
|
GregorianCalendarComponent
|
|
2116
2147
|
], providers: [
|
|
2117
2148
|
{ provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura }
|
|
2118
|
-
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content\" #calendarContainer>\r\n @if(isDatePickerShow) {\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n }\r\n\r\n <!-- calender.html -->\r\n <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\" #calendarWrapper>\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.
|
|
2149
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"calender-content\" #calendarContainer>\r\n @if(isDatePickerShow) {\r\n <stc-date-picker-switcher [variant]=\"'in'\" [label]=\"label\" id=\"dateId\" (openCalender)=\"showCalender($event)\"\r\n [control]=\"control\" [formattedDate]='selectedDate' >\r\n </stc-date-picker-switcher>\r\n }\r\n\r\n <!-- calender.html -->\r\n <div (click)=\"$event.stopPropagation()\" [dir]=\"currentLang() === 'ar' ? 'rtl' : 'ltr'\" class=\"p-2 calendar-wrapper \" [@slideDown]=\"isShown ? 'open' : 'closed'\" #calendarWrapper>\r\n <div class=\"header-tabs\">\r\n <div class=\"header-label\">{{'calender.calender_type' | translate}}</div>\r\n <div class=\"tabs\">\r\n <button class=\"tab-button\" [class.active]=\"mode === 'gregorian'\" type=\"button\" (click)=\" mode='gregorian'\">\r\n {{'calender.gregorian' | translate}}\r\n </button>\r\n <button class=\"tab-button\" [class.active]=\"mode === 'hijri'\" type=\"button\" (click)=\" mode='hijri'\">\r\n {{'calender.hijri' | translate}}\r\n </button>\r\n </div>\r\n </div>\r\n @if(mode === 'gregorian') {\r\n <app-gregorian-calendar [model]=\"gregorianModel\" [language]=\"currentLang()\"\r\n (dateSelected)=\"onSelectGregorian($event)\">\r\n </app-gregorian-calendar>\r\n }\r\n\r\n @if(mode === 'hijri') {\r\n <app-hijri-calendar [model]=\"hijriModel\" [language]=\"currentLang()\" (dateSelected)=\"onSelectHijri($event)\">\r\n </app-hijri-calendar>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".calendar-wrapper{max-width:375px;padding:15px;position:fixed;z-index:9999;box-shadow:0 2px 8px #00000026;background-color:#fff;border-radius:4px;overflow:hidden}.calendar-wrapper .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-6px;transform:rotate(180deg);margin:0 10px;max-width:20px}.calendar-wrapper .rtl .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:22px;transform:rotate(180deg)}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:-4px}.calendar-wrapper .ltr .ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:11px}.header-tabs{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tabs{background:#f0f0f5;padding:3px;border-radius:2px}.tab-button{flex:1;padding:6px 10px;font-size:14px;background:#f0f0f5;border:none;border-radius:6px;cursor:pointer;transition:.3s}.tab-button.active{background:#dcd6f8;color:#4a3fb4;font-weight:600}.custom-datepicker{width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:8px;padding:12px}.custom-datepicker .ngb-dp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;max-width:375px}.custom-datepicker .ngb-dp-arrow-btn{background:none;border:none;cursor:pointer;padding:4px}.custom-datepicker .ngb-dp-weekdays{margin-bottom:6px}.custom-datepicker .ngb-dp-weekday{color:#9b9b9b;font-weight:600;text-align:center}.custom-day.today{border:1px solid #6a41d8;width:100%;height:100%;border-radius:4px;margin:0}.custom-day.outside{opacity:.3}.custom-day.disabled{opacity:.2;pointer-events:none}.calender-content{position:relative}.ngb-datepicker{width:100%}.custom-day{display:inline-flex;justify-content:center;align-items:center;margin:2px;border-radius:50%;cursor:pointer;font-weight:500}.custom-day.today{color:#4f008d}.ngb-dp-day:has(.selected){background-color:#ede6f4!important;border:0!important;color:#4f008d!important;border-radius:2px}.custom-day.outside{color:#ccc!important}.custom-day.disabled{color:#aaa!important;pointer-events:none!important}.ngb-dp-day,.ngb-dp-weekday,.ngb-dp-week-number{width:32px!important;height:32px!important;display:flex;margin:5px;justify-content:center;align-items:center}.ngb-dp-month:first-child .ngb-dp-week{padding:0!important}.ngb-dp-month:last-child .ngb-dp-week{padding:0!important}.ngb-dp-arrow-btn{margin-inline-end:0!important;outline:0!important;padding:0!important;margin:0!important}.ngb-dp-header{position:relative}.ngb-dp-header .ngb-dp-arrow{position:absolute}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-prev{inset-inline-end:0}.ngb-dp-header .ngb-dp-arrow.ngb-dp-arrow-next{inset-inline-end:15px}.ngb-dp-header .ngb-dp-arrow:focus-visible,.ngb-dp-header .ngb-dp-arrow .btn:focus-visible{outline:0!important}.ngb-dp-header .visually-hidden{display:none}.ngb-dp-navigation-select{max-width:140px}.ngb-dp-navigation-select select{border:0}.ngb-dp-navigation-select select:focus-visible{outline:0}.ngb-datepicker-navigation-select>.form-select{font-size:14px;font-weight:700}.ngb-dp-navigation-select,.form-select:first-child{appearance:none!important;-webkit-appearance:none;-moz-appearance:none}.ngb-dp-navigation-chevron{font-size:18px;border-width:.1em .1em 0 0!important;border-color:#000}\n"] }]
|
|
2119
2150
|
}], ctorParameters: () => [], propDecorators: { calendarWrapper: [{
|
|
2120
2151
|
type: ViewChild,
|
|
2121
2152
|
args: ['calendarWrapper']
|