primekit 0.0.76 → 0.0.78
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.
- package/esm2022/lib/lib/atomix-daterange-calendar/atomix-daterange-calendar.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-input-switch/atomix-input-switch.component.mjs +85 -0
- package/esm2022/lib/primekit.module.mjs +14 -5
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/primekit.mjs +96 -7
- package/fesm2022/primekit.mjs.map +1 -1
- package/lib/lib/atomix-input-switch/atomix-input-switch.component.d.ts +30 -0
- package/lib/primekit.module.d.ts +31 -29
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
package/fesm2022/primekit.mjs
CHANGED
|
@@ -54,6 +54,8 @@ import * as i13 from 'primeng/progressbar';
|
|
|
54
54
|
import { ProgressBarModule } from 'primeng/progressbar';
|
|
55
55
|
import * as i1$7 from 'primeng/divider';
|
|
56
56
|
import { DividerModule } from 'primeng/divider';
|
|
57
|
+
import * as i2$6 from 'primeng/inputswitch';
|
|
58
|
+
import { InputSwitchModule } from 'primeng/inputswitch';
|
|
57
59
|
import * as i1$2 from 'primeng/dynamicdialog';
|
|
58
60
|
import { Subject, debounceTime, distinctUntilChanged, Subscription } from 'rxjs';
|
|
59
61
|
import * as i1$3 from 'primeng/api';
|
|
@@ -936,11 +938,11 @@ class AtomixDaterangeCalendarComponent {
|
|
|
936
938
|
return Array.from(new Set(calEls));
|
|
937
939
|
}
|
|
938
940
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixDaterangeCalendarComponent, deps: [{ token: i1$1.DatePipe }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
939
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixDaterangeCalendarComponent, selector: "atomix-daterange-calendar", inputs: { placeholder: "placeholder", styleClass: "styleClass", selectionMode: "selectionMode", inputStyleClass: "inputStyleClass", inline: "inline", disabled: "disabled", selectedDate: "selectedDate", maxDate: "maxDate", minDate: "minDate", defaultPreset: "defaultPreset" }, outputs: { dateRangeChange: "dateRangeChange" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["overlayPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n <ng-container *ngIf=\"!inline; else inlineBlock\">\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (click)=\"overlayPanel?.toggle($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\" (click)=\"overlayPanel?.toggle($event)\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n\n </div>\n\n <p-overlayPanel #overlayPanel [dismissable]=\"true\" appendTo=\"body\" styleClass=\"atomix-date-range-overlay\" (onShow)=\"onOverlayShow()\" (onHide)=\"onOverlayHide()\">\n <div class=\"overlay-inner\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </p-overlayPanel>\n </ng-container>\n\n <ng-template #inlineBlock>\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n </div>\n <div class=\"overlay-inner inline-calendar flex\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: ["::ng-deep .p-calendar button{background-color:transparent!important}::ng-deep .p-overlaypanel .p-overlaypanel-content{margin-top:0!important}::ng-deep .p-datepicker{border:none!important;border-radius:8px}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:#fff;background:#63c984;padding:1rem!important}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:#fff;background:#63b77e;padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:1rem!important}::ng-deep .p-datepicker table th{border-bottom:1px solid rgba(0,0,0,.12);color:#000000de;font-weight:400;font-size:.875rem}::ng-deep .p-datepicker table td>span.p-highlight{color:#fff;background:#63c984}::ng-deep .p-datepicker table td{padding:.2rem 0}::ng-deep .p-datepicker table td>span{width:2.8rem;height:2.8rem;border-radius:0%;transition:none}::ng-deep .p-datepicker table td.p-datepicker-today>span{box-shadow:inset 0 0 0 2px #00000061}::ng-deep .p-datepicker table td>span.p-highlight.start-range{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.end-range{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.between-range{background:#00c37dad!important}::ng-deep .p-monthpicker-month{width:50%!important}::ng-deep .p-yearpicker-year{width:50%!important}::ng-deep .inline-calendar .p-datepicker table td>span{width:2.4rem;height:2.4rem}::ng-deep .inline-calendar{border-bottom:1px solid #e5e5e5}::ng-deep .atomix-date-range-overlay{border-radius:8px}.overlay-inner{display:flex;gap:1rem;align-items:flex-start;flex-wrap:nowrap}.overlay-left{padding:.75rem .75rem 1.5rem;text-align:center;border-right:1px solid #e5e5e5}.inline-calendar .overlay-left{padding-bottom:2rem}.input-wrapper{display:flex;align-items:center;gap:.5rem;position:relative}.input-wrapper input[readonly]{cursor:pointer;padding-right:40px!important;border-radius:30px}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:#0000008a;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:#0000008a;position:absolute;right:27px}.preset-list{display:flex;flex-direction:column;gap:0}.preset-btn{justify-content:flex-start;text-align:left;padding-left:8px}.inline-calendar .preset-btn{padding:.3rem .8rem!important}.inline-calendar{gap:0}.preset-btn .p-button-label{display:inline-block}.preset-btn:not(.p-button-outlined){background-color:transparent;color:#111827}.preset-btn:hover{background-color:#f3f6f9}.preset-btn.active,.preset-btn.p-button.active,.preset-btn.custom-active,.preset-btn.p-button.custom-active{background-color:#63b77e!important;color:#fff!important;font-weight:700;line-height:17px;border-radius:12px}.reset-link{text-align:left;cursor:pointer;margin-top:25px;padding:.3rem 1.4rem!important;color:#63b77e;font-weight:600}.atomix-date-range-overlay .overlay-left .reset-link{display:inline-block;margin-top:1rem;color:#2196f3;cursor:pointer}.overlay-right{flex:1;width:230px;max-width:230px}.overlay-inner.inline{flex-direction:row}:host ::ng-deep .p-column-filter-menu .overlay-inner.inline{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important}:host ::ng-deep .p-overlaypanel .overlay-inner.inline{display:flex!important;flex-direction:row!important}.overlay-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}.atomix-overlay-calendar ::ng-deep .p-datepicker{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i5.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
941
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixDaterangeCalendarComponent, selector: "atomix-daterange-calendar", inputs: { placeholder: "placeholder", styleClass: "styleClass", selectionMode: "selectionMode", inputStyleClass: "inputStyleClass", inline: "inline", disabled: "disabled", selectedDate: "selectedDate", maxDate: "maxDate", minDate: "minDate", defaultPreset: "defaultPreset" }, outputs: { dateRangeChange: "dateRangeChange" }, viewQueries: [{ propertyName: "overlayPanel", first: true, predicate: ["overlayPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n <ng-container *ngIf=\"!inline; else inlineBlock\">\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (click)=\"overlayPanel?.toggle($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\" (click)=\"overlayPanel?.toggle($event)\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n\n </div>\n\n <p-overlayPanel #overlayPanel [dismissable]=\"true\" appendTo=\"body\" styleClass=\"atomix-date-range-overlay\" (onShow)=\"onOverlayShow()\" (onHide)=\"onOverlayHide()\">\n <div class=\"overlay-inner\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </p-overlayPanel>\n </ng-container>\n\n <ng-template #inlineBlock>\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n </div>\n <div class=\"overlay-inner inline-calendar flex\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: ["::ng-deep .p-calendar button{background-color:transparent!important}::ng-deep .p-overlaypanel .p-overlaypanel-content{margin-top:0!important}::ng-deep .p-datepicker{border:none!important;border-radius:8px}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:#fff;background:#63c984;padding:1rem!important}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:#fff;background:#63b77e;padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:1rem!important}::ng-deep .p-datepicker table th{border-bottom:1px solid rgba(0,0,0,.12);color:#000000de;font-weight:400;font-size:.875rem}::ng-deep .p-datepicker table td>span.p-highlight{color:#fff;background:#63c984}::ng-deep .p-datepicker table td{padding:.2rem 0}::ng-deep .p-datepicker table td>span{width:2.8rem;height:2.8rem;border-radius:0%;transition:none}::ng-deep .p-datepicker table td.p-datepicker-today>span{box-shadow:inset 0 0 0 2px #00000061}::ng-deep .p-datepicker table td>span.p-highlight.start-range{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.end-range{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.between-range{background:#00c37dad!important}::ng-deep .p-monthpicker-month{width:50%!important}::ng-deep .p-yearpicker-year{width:50%!important}::ng-deep .inline-calendar .p-datepicker table td>span{width:2.4rem;height:2.4rem}::ng-deep .inline-calendar{border-bottom:1px solid #e5e5e5}::ng-deep .atomix-date-range-overlay{border-radius:8px}.overlay-inner{display:flex;gap:1rem;align-items:flex-start;flex-wrap:nowrap}.overlay-left{padding:.75rem .75rem 2rem;text-align:center;border-right:1px solid #e5e5e5}.inline-calendar .overlay-left{padding-bottom:2rem}.input-wrapper{display:flex;align-items:center;gap:.5rem;position:relative}.input-wrapper input[readonly]{cursor:pointer;padding-right:40px!important;border-radius:30px}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:#0000008a;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:#0000008a;position:absolute;right:27px}.preset-list{display:flex;flex-direction:column;gap:0}.preset-btn{justify-content:flex-start;text-align:left;padding-left:8px}.inline-calendar .preset-btn{padding:.3rem .8rem!important}.inline-calendar{gap:0}.preset-btn .p-button-label{display:inline-block}.preset-btn:not(.p-button-outlined){background-color:transparent;color:#111827}.preset-btn:hover{background-color:#f3f6f9}.preset-btn.active,.preset-btn.p-button.active,.preset-btn.custom-active,.preset-btn.p-button.custom-active{background-color:#63b77e!important;color:#fff!important;font-weight:700;line-height:17px;border-radius:12px}.reset-link{text-align:left;cursor:pointer;margin-top:25px;padding:.3rem 1.4rem!important;color:#63b77e;font-weight:600}.atomix-date-range-overlay .overlay-left .reset-link{display:inline-block;margin-top:1rem;color:#2196f3;cursor:pointer}.overlay-right{flex:1;width:230px;max-width:230px}.overlay-inner.inline{flex-direction:row}:host ::ng-deep .p-column-filter-menu .overlay-inner.inline{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important}:host ::ng-deep .p-overlaypanel .overlay-inner.inline{display:flex!important;flex-direction:row!important}.overlay-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}.atomix-overlay-calendar ::ng-deep .p-datepicker{width:100%}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "component", type: i4.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i5.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
940
942
|
}
|
|
941
943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixDaterangeCalendarComponent, decorators: [{
|
|
942
944
|
type: Component,
|
|
943
|
-
args: [{ selector: 'atomix-daterange-calendar', template: "<div>\n <ng-container *ngIf=\"!inline; else inlineBlock\">\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (click)=\"overlayPanel?.toggle($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\" (click)=\"overlayPanel?.toggle($event)\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n\n </div>\n\n <p-overlayPanel #overlayPanel [dismissable]=\"true\" appendTo=\"body\" styleClass=\"atomix-date-range-overlay\" (onShow)=\"onOverlayShow()\" (onHide)=\"onOverlayHide()\">\n <div class=\"overlay-inner\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </p-overlayPanel>\n </ng-container>\n\n <ng-template #inlineBlock>\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n </div>\n <div class=\"overlay-inner inline-calendar flex\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: ["::ng-deep .p-calendar button{background-color:transparent!important}::ng-deep .p-overlaypanel .p-overlaypanel-content{margin-top:0!important}::ng-deep .p-datepicker{border:none!important;border-radius:8px}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:#fff;background:#63c984;padding:1rem!important}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:#fff;background:#63b77e;padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:1rem!important}::ng-deep .p-datepicker table th{border-bottom:1px solid rgba(0,0,0,.12);color:#000000de;font-weight:400;font-size:.875rem}::ng-deep .p-datepicker table td>span.p-highlight{color:#fff;background:#63c984}::ng-deep .p-datepicker table td{padding:.2rem 0}::ng-deep .p-datepicker table td>span{width:2.8rem;height:2.8rem;border-radius:0%;transition:none}::ng-deep .p-datepicker table td.p-datepicker-today>span{box-shadow:inset 0 0 0 2px #00000061}::ng-deep .p-datepicker table td>span.p-highlight.start-range{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.end-range{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.between-range{background:#00c37dad!important}::ng-deep .p-monthpicker-month{width:50%!important}::ng-deep .p-yearpicker-year{width:50%!important}::ng-deep .inline-calendar .p-datepicker table td>span{width:2.4rem;height:2.4rem}::ng-deep .inline-calendar{border-bottom:1px solid #e5e5e5}::ng-deep .atomix-date-range-overlay{border-radius:8px}.overlay-inner{display:flex;gap:1rem;align-items:flex-start;flex-wrap:nowrap}.overlay-left{padding:.75rem .75rem
|
|
945
|
+
args: [{ selector: 'atomix-daterange-calendar', template: "<div>\n <ng-container *ngIf=\"!inline; else inlineBlock\">\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (click)=\"overlayPanel?.toggle($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\" (click)=\"overlayPanel?.toggle($event)\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n\n </div>\n\n <p-overlayPanel #overlayPanel [dismissable]=\"true\" appendTo=\"body\" styleClass=\"atomix-date-range-overlay\" (onShow)=\"onOverlayShow()\" (onHide)=\"onOverlayHide()\">\n <div class=\"overlay-inner\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </p-overlayPanel>\n </ng-container>\n\n <ng-template #inlineBlock>\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n </div>\n <div class=\"overlay-inner inline-calendar flex\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: ["::ng-deep .p-calendar button{background-color:transparent!important}::ng-deep .p-overlaypanel .p-overlaypanel-content{margin-top:0!important}::ng-deep .p-datepicker{border:none!important;border-radius:8px}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:#fff;background:#63c984;padding:1rem!important}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:#fff;background:#63b77e;padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:1rem!important}::ng-deep .p-datepicker table th{border-bottom:1px solid rgba(0,0,0,.12);color:#000000de;font-weight:400;font-size:.875rem}::ng-deep .p-datepicker table td>span.p-highlight{color:#fff;background:#63c984}::ng-deep .p-datepicker table td{padding:.2rem 0}::ng-deep .p-datepicker table td>span{width:2.8rem;height:2.8rem;border-radius:0%;transition:none}::ng-deep .p-datepicker table td.p-datepicker-today>span{box-shadow:inset 0 0 0 2px #00000061}::ng-deep .p-datepicker table td>span.p-highlight.start-range{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.end-range{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.between-range{background:#00c37dad!important}::ng-deep .p-monthpicker-month{width:50%!important}::ng-deep .p-yearpicker-year{width:50%!important}::ng-deep .inline-calendar .p-datepicker table td>span{width:2.4rem;height:2.4rem}::ng-deep .inline-calendar{border-bottom:1px solid #e5e5e5}::ng-deep .atomix-date-range-overlay{border-radius:8px}.overlay-inner{display:flex;gap:1rem;align-items:flex-start;flex-wrap:nowrap}.overlay-left{padding:.75rem .75rem 2rem;text-align:center;border-right:1px solid #e5e5e5}.inline-calendar .overlay-left{padding-bottom:2rem}.input-wrapper{display:flex;align-items:center;gap:.5rem;position:relative}.input-wrapper input[readonly]{cursor:pointer;padding-right:40px!important;border-radius:30px}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:#0000008a;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:#0000008a;position:absolute;right:27px}.preset-list{display:flex;flex-direction:column;gap:0}.preset-btn{justify-content:flex-start;text-align:left;padding-left:8px}.inline-calendar .preset-btn{padding:.3rem .8rem!important}.inline-calendar{gap:0}.preset-btn .p-button-label{display:inline-block}.preset-btn:not(.p-button-outlined){background-color:transparent;color:#111827}.preset-btn:hover{background-color:#f3f6f9}.preset-btn.active,.preset-btn.p-button.active,.preset-btn.custom-active,.preset-btn.p-button.custom-active{background-color:#63b77e!important;color:#fff!important;font-weight:700;line-height:17px;border-radius:12px}.reset-link{text-align:left;cursor:pointer;margin-top:25px;padding:.3rem 1.4rem!important;color:#63b77e;font-weight:600}.atomix-date-range-overlay .overlay-left .reset-link{display:inline-block;margin-top:1rem;color:#2196f3;cursor:pointer}.overlay-right{flex:1;width:230px;max-width:230px}.overlay-inner.inline{flex-direction:row}:host ::ng-deep .p-column-filter-menu .overlay-inner.inline{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important}:host ::ng-deep .p-overlaypanel .overlay-inner.inline{display:flex!important;flex-direction:row!important}.overlay-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}.atomix-overlay-calendar ::ng-deep .p-datepicker{width:100%}\n"] }]
|
|
944
946
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
|
|
945
947
|
type: Input
|
|
946
948
|
}], styleClass: [{
|
|
@@ -2530,6 +2532,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2530
2532
|
type: Input
|
|
2531
2533
|
}] } });
|
|
2532
2534
|
|
|
2535
|
+
class AtomixInputSwitchComponent {
|
|
2536
|
+
style;
|
|
2537
|
+
styleClass;
|
|
2538
|
+
tabindex;
|
|
2539
|
+
inputId;
|
|
2540
|
+
name;
|
|
2541
|
+
disabled = false;
|
|
2542
|
+
readonly = false;
|
|
2543
|
+
trueValue = true;
|
|
2544
|
+
falseValue = false;
|
|
2545
|
+
ariaLabel;
|
|
2546
|
+
ariaLabelledBy;
|
|
2547
|
+
autofocus = false;
|
|
2548
|
+
formControl;
|
|
2549
|
+
value = false;
|
|
2550
|
+
onChange = (_) => { };
|
|
2551
|
+
onTouched = () => { };
|
|
2552
|
+
writeValue(value) {
|
|
2553
|
+
this.value = value ?? this.falseValue;
|
|
2554
|
+
}
|
|
2555
|
+
registerOnChange(fn) {
|
|
2556
|
+
this.onChange = fn;
|
|
2557
|
+
}
|
|
2558
|
+
registerOnTouched(fn) {
|
|
2559
|
+
this.onTouched = fn;
|
|
2560
|
+
}
|
|
2561
|
+
setDisabledState(disabled) {
|
|
2562
|
+
this.disabled = disabled;
|
|
2563
|
+
}
|
|
2564
|
+
handleChange(event) {
|
|
2565
|
+
this.value = event.checked ? this.trueValue : this.falseValue;
|
|
2566
|
+
this.onChange(this.value);
|
|
2567
|
+
this.onTouched();
|
|
2568
|
+
}
|
|
2569
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixInputSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2570
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixInputSwitchComponent, selector: "atomix-inputSwitch", inputs: { style: "style", styleClass: "styleClass", tabindex: "tabindex", inputId: "inputId", name: "name", disabled: "disabled", readonly: "readonly", trueValue: "trueValue", falseValue: "falseValue", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autofocus: "autofocus", formControl: "formControl" }, providers: [
|
|
2571
|
+
{
|
|
2572
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2573
|
+
useExisting: forwardRef(() => AtomixInputSwitchComponent),
|
|
2574
|
+
multi: true
|
|
2575
|
+
}
|
|
2576
|
+
], ngImport: i0, template: "<p-inputSwitch\n [(ngModel)]=\"value\"\n [trueValue]=\"trueValue\"\n [falseValue]=\"falseValue\"\n [style]=\"style\"\n [styleClass]=\"styleClass\"\n [tabindex]=\"tabindex\"\n [inputId]=\"inputId\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n [autofocus]=\"autofocus\"\n (onChange)=\"handleChange($event)\"\n (onBlur)=\"onTouched()\"\n></p-inputSwitch>\n", styles: [".input-switch-wrapper{display:flex;align-items:center;gap:.5rem}.atomix-switch-button{height:30px;padding:0 12px;font-size:14px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$6.InputSwitch, selector: "p-inputSwitch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] });
|
|
2577
|
+
}
|
|
2578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixInputSwitchComponent, decorators: [{
|
|
2579
|
+
type: Component,
|
|
2580
|
+
args: [{ selector: 'atomix-inputSwitch', providers: [
|
|
2581
|
+
{
|
|
2582
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2583
|
+
useExisting: forwardRef(() => AtomixInputSwitchComponent),
|
|
2584
|
+
multi: true
|
|
2585
|
+
}
|
|
2586
|
+
], template: "<p-inputSwitch\n [(ngModel)]=\"value\"\n [trueValue]=\"trueValue\"\n [falseValue]=\"falseValue\"\n [style]=\"style\"\n [styleClass]=\"styleClass\"\n [tabindex]=\"tabindex\"\n [inputId]=\"inputId\"\n [attr.name]=\"name\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [ariaLabel]=\"ariaLabel\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n [autofocus]=\"autofocus\"\n (onChange)=\"handleChange($event)\"\n (onBlur)=\"onTouched()\"\n></p-inputSwitch>\n", styles: [".input-switch-wrapper{display:flex;align-items:center;gap:.5rem}.atomix-switch-button{height:30px;padding:0 12px;font-size:14px;cursor:pointer}\n"] }]
|
|
2587
|
+
}], propDecorators: { style: [{
|
|
2588
|
+
type: Input
|
|
2589
|
+
}], styleClass: [{
|
|
2590
|
+
type: Input
|
|
2591
|
+
}], tabindex: [{
|
|
2592
|
+
type: Input
|
|
2593
|
+
}], inputId: [{
|
|
2594
|
+
type: Input
|
|
2595
|
+
}], name: [{
|
|
2596
|
+
type: Input
|
|
2597
|
+
}], disabled: [{
|
|
2598
|
+
type: Input
|
|
2599
|
+
}], readonly: [{
|
|
2600
|
+
type: Input
|
|
2601
|
+
}], trueValue: [{
|
|
2602
|
+
type: Input
|
|
2603
|
+
}], falseValue: [{
|
|
2604
|
+
type: Input
|
|
2605
|
+
}], ariaLabel: [{
|
|
2606
|
+
type: Input
|
|
2607
|
+
}], ariaLabelledBy: [{
|
|
2608
|
+
type: Input
|
|
2609
|
+
}], autofocus: [{
|
|
2610
|
+
type: Input
|
|
2611
|
+
}], formControl: [{
|
|
2612
|
+
type: Input
|
|
2613
|
+
}] } });
|
|
2614
|
+
|
|
2533
2615
|
class PrimekitModule {
|
|
2534
2616
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrimekitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2535
2617
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PrimekitModule, declarations: [AtomixButtonComponent,
|
|
@@ -2561,7 +2643,8 @@ class PrimekitModule {
|
|
|
2561
2643
|
AtomixTagComponent,
|
|
2562
2644
|
AtomixSearchDropdownComponent,
|
|
2563
2645
|
AtomixAutocompleteComponent,
|
|
2564
|
-
AtomixDividerComponent
|
|
2646
|
+
AtomixDividerComponent,
|
|
2647
|
+
AtomixInputSwitchComponent], imports: [CommonModule,
|
|
2565
2648
|
ButtonModule,
|
|
2566
2649
|
CardModule,
|
|
2567
2650
|
DialogModule,
|
|
@@ -2589,7 +2672,8 @@ class PrimekitModule {
|
|
|
2589
2672
|
TagModule,
|
|
2590
2673
|
ChipModule,
|
|
2591
2674
|
ProgressBarModule,
|
|
2592
|
-
DividerModule
|
|
2675
|
+
DividerModule,
|
|
2676
|
+
InputSwitchModule], exports: [AtomixButtonComponent,
|
|
2593
2677
|
AtomixCardComponent,
|
|
2594
2678
|
AtomixConfirmationDialogComponent,
|
|
2595
2679
|
AtomixInputComponent,
|
|
@@ -2619,7 +2703,8 @@ class PrimekitModule {
|
|
|
2619
2703
|
AtomixTagComponent,
|
|
2620
2704
|
AtomixSearchDropdownComponent,
|
|
2621
2705
|
AtomixAutocompleteComponent,
|
|
2622
|
-
AtomixDividerComponent
|
|
2706
|
+
AtomixDividerComponent,
|
|
2707
|
+
AtomixInputSwitchComponent] });
|
|
2623
2708
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrimekitModule, providers: [DatePipe], imports: [CommonModule,
|
|
2624
2709
|
ButtonModule,
|
|
2625
2710
|
CardModule,
|
|
@@ -2648,7 +2733,8 @@ class PrimekitModule {
|
|
|
2648
2733
|
TagModule,
|
|
2649
2734
|
ChipModule,
|
|
2650
2735
|
ProgressBarModule,
|
|
2651
|
-
DividerModule,
|
|
2736
|
+
DividerModule,
|
|
2737
|
+
InputSwitchModule, ReactiveFormsModule] });
|
|
2652
2738
|
}
|
|
2653
2739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrimekitModule, decorators: [{
|
|
2654
2740
|
type: NgModule,
|
|
@@ -2684,6 +2770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2684
2770
|
AtomixSearchDropdownComponent,
|
|
2685
2771
|
AtomixAutocompleteComponent,
|
|
2686
2772
|
AtomixDividerComponent,
|
|
2773
|
+
AtomixInputSwitchComponent,
|
|
2687
2774
|
],
|
|
2688
2775
|
imports: [
|
|
2689
2776
|
CommonModule,
|
|
@@ -2715,6 +2802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2715
2802
|
ChipModule,
|
|
2716
2803
|
ProgressBarModule,
|
|
2717
2804
|
DividerModule,
|
|
2805
|
+
InputSwitchModule,
|
|
2718
2806
|
], // Import the PrimeNG Module here
|
|
2719
2807
|
providers: [DatePipe],
|
|
2720
2808
|
exports: [
|
|
@@ -2749,6 +2837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2749
2837
|
AtomixSearchDropdownComponent,
|
|
2750
2838
|
AtomixAutocompleteComponent,
|
|
2751
2839
|
AtomixDividerComponent,
|
|
2840
|
+
AtomixInputSwitchComponent,
|
|
2752
2841
|
], // Export your component
|
|
2753
2842
|
}]
|
|
2754
2843
|
}] });
|
|
@@ -2771,5 +2860,5 @@ function getPowerOffIcon() {
|
|
|
2771
2860
|
* Generated bundle index. Do not edit.
|
|
2772
2861
|
*/
|
|
2773
2862
|
|
|
2774
|
-
export { AtomixAutocompleteComponent, AtomixButtonComponent, AtomixCalendarComponent, AtomixCardComponent, AtomixConfirmationDialogComponent, AtomixDaterangeCalendarComponent, AtomixDividerComponent, AtomixDropdownComponent, AtomixDynamicDialogComponent, AtomixFormAutocompleteComponent, AtomixFormCalendarComponent, AtomixFormCheckboxComponent, AtomixFormChipsComponent, AtomixFormDropdownComponent, AtomixFormInputComponent, AtomixFormInputmaskComponent, AtomixFormPasswordComponent, AtomixFormRadioButtonComponent, AtomixFormTextareaComponent, AtomixInputComponent, AtomixMessagesComponent, AtomixPaginationComponent, AtomixRadioButtonComponent, AtomixSearchDropdownComponent, AtomixSelectButtonComponent, AtomixSnackbarComponent, AtomixSpinnerComponent, AtomixTableComponent, AtomixTagComponent, AtomixToastComponent, PrimekitComponent, PrimekitModule, PrimekitService, getEditIcon, getPowerOffIcon, getTrashIcon };
|
|
2863
|
+
export { AtomixAutocompleteComponent, AtomixButtonComponent, AtomixCalendarComponent, AtomixCardComponent, AtomixConfirmationDialogComponent, AtomixDaterangeCalendarComponent, AtomixDividerComponent, AtomixDropdownComponent, AtomixDynamicDialogComponent, AtomixFormAutocompleteComponent, AtomixFormCalendarComponent, AtomixFormCheckboxComponent, AtomixFormChipsComponent, AtomixFormDropdownComponent, AtomixFormInputComponent, AtomixFormInputmaskComponent, AtomixFormPasswordComponent, AtomixFormRadioButtonComponent, AtomixFormTextareaComponent, AtomixInputComponent, AtomixInputSwitchComponent, AtomixMessagesComponent, AtomixPaginationComponent, AtomixRadioButtonComponent, AtomixSearchDropdownComponent, AtomixSelectButtonComponent, AtomixSnackbarComponent, AtomixSpinnerComponent, AtomixTableComponent, AtomixTagComponent, AtomixToastComponent, PrimekitComponent, PrimekitModule, PrimekitService, getEditIcon, getPowerOffIcon, getTrashIcon };
|
|
2775
2864
|
//# sourceMappingURL=primekit.mjs.map
|