primekit 1.0.1 → 1.0.3
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-alert/atomix-alert.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-autocomplete/atomix-autocomplete.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-button/atomix-button.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-card/atomix-card.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-daterange-calendar/atomix-daterange-calendar.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-form/atomix-form-calendar/atomix-form-calendar.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-form/atomix-form-dropdown/atomix-form-dropdown.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-input-component/atomix-form-input-component.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-form/atomix-form-textarea/atomix-form-textarea.component.mjs +2 -2
- package/esm2022/lib/lib/atomix-input/atomix-input.component.mjs +2 -2
- package/fesm2022/primekit.mjs +20 -20
- package/fesm2022/primekit.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/primekit.mjs
CHANGED
|
@@ -93,11 +93,11 @@ class AtomixCardComponent {
|
|
|
93
93
|
content;
|
|
94
94
|
class;
|
|
95
95
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixCardComponent, selector: "atomix-card", inputs: { header: "header", footer: "footer", content: "content", class: "class" }, ngImport: i0, template: "<p-card [class]=\"class\">\n <ng-content></ng-content>\n</p-card>\n", styles: ["::ng-deep .p-card{box-shadow:0 2px 4px #0000001a;border-radius:
|
|
96
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixCardComponent, selector: "atomix-card", inputs: { header: "header", footer: "footer", content: "content", class: "class" }, ngImport: i0, template: "<p-card [class]=\"class\">\n <ng-content></ng-content>\n</p-card>\n", styles: ["::ng-deep .p-card{box-shadow:0 2px 4px #0000001a;border-radius:var(--global-border-radius)!important}\n"], dependencies: [{ kind: "component", type: i1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
|
|
97
97
|
}
|
|
98
98
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixCardComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
|
-
args: [{ selector: 'atomix-card', template: "<p-card [class]=\"class\">\n <ng-content></ng-content>\n</p-card>\n", styles: ["::ng-deep .p-card{box-shadow:0 2px 4px #0000001a;border-radius:
|
|
100
|
+
args: [{ selector: 'atomix-card', template: "<p-card [class]=\"class\">\n <ng-content></ng-content>\n</p-card>\n", styles: ["::ng-deep .p-card{box-shadow:0 2px 4px #0000001a;border-radius:var(--global-border-radius)!important}\n"] }]
|
|
101
101
|
}], propDecorators: { header: [{
|
|
102
102
|
type: Input
|
|
103
103
|
}], footer: [{
|
|
@@ -124,11 +124,11 @@ class AtomixButtonComponent {
|
|
|
124
124
|
this.buttonClick.emit(event); // Emit the event when button is clicked
|
|
125
125
|
}
|
|
126
126
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixButtonComponent, selector: "atomix-button", inputs: { label: "label", disabled: "disabled", loading: "loading", size: "size", buttonType: "buttonType", type: "type", class: "class", icon: "icon", iconPos: "iconPos", buttonData: "buttonData" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n pButton\n pRipple\n [label]=\"label\"\n [ngClass]=\"[\n class,\n buttonType === 'primary' ? 'p-button-primary' : '',\n buttonType === 'outlined' ? 'p-button-outlined' : '',\n buttonType === 'text' ? 'p-button-text' : '',\n buttonType === 'refresh' ? 'refresh-button' : ''\n]\" \n [disabled]=\"disabled\"\n [loading]=\"loading\"\n [size]=\"size\"\n [icon]=\"icon\"\n [iconPos]=\"iconPos\"\n (click)=\"onButtonClick($event)\" \n [type]=\"type\"\n></button>\n", styles: ["::ng-deep .p-button-primary{background-color:#63b77e;color:#fff!important;border-radius:
|
|
127
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixButtonComponent, selector: "atomix-button", inputs: { label: "label", disabled: "disabled", loading: "loading", size: "size", buttonType: "buttonType", type: "type", class: "class", icon: "icon", iconPos: "iconPos", buttonData: "buttonData" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n pButton\n pRipple\n [label]=\"label\"\n [ngClass]=\"[\n class,\n buttonType === 'primary' ? 'p-button-primary' : '',\n buttonType === 'outlined' ? 'p-button-outlined' : '',\n buttonType === 'text' ? 'p-button-text' : '',\n buttonType === 'refresh' ? 'refresh-button' : ''\n]\" \n [disabled]=\"disabled\"\n [loading]=\"loading\"\n [size]=\"size\"\n [icon]=\"icon\"\n [iconPos]=\"iconPos\"\n (click)=\"onButtonClick($event)\" \n [type]=\"type\"\n></button>\n", styles: ["::ng-deep .p-button-primary{background-color:#63b77e;color:#fff!important;border-radius:var(--global-border-radius);height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;line-height:17px;outline:none;border:none;cursor:pointer}:is():enabled:hover{background-color:#63b77e}:is():disabled .p-button-label{color:#00000061!important}::ng-deep .p-button-outlined{background-color:var(--button-outlined-bg)!important;color:var(--button-outlined-text)!important;border-radius:var(--global-border-radius);height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;outline:none;line-height:17px;cursor:pointer}::ng-deep .refresh-button{background-color:var(--button-outlined-bg)!important;border-radius:50%;height:40px;width:40px}::ng-deep .p-button-text{color:#424242;background:none;border-radius:1px solid gray}:is():disabled{background:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }] });
|
|
128
128
|
}
|
|
129
129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixButtonComponent, decorators: [{
|
|
130
130
|
type: Component,
|
|
131
|
-
args: [{ selector: 'atomix-button', template: "<button\n pButton\n pRipple\n [label]=\"label\"\n [ngClass]=\"[\n class,\n buttonType === 'primary' ? 'p-button-primary' : '',\n buttonType === 'outlined' ? 'p-button-outlined' : '',\n buttonType === 'text' ? 'p-button-text' : '',\n buttonType === 'refresh' ? 'refresh-button' : ''\n]\" \n [disabled]=\"disabled\"\n [loading]=\"loading\"\n [size]=\"size\"\n [icon]=\"icon\"\n [iconPos]=\"iconPos\"\n (click)=\"onButtonClick($event)\" \n [type]=\"type\"\n></button>\n", styles: ["::ng-deep .p-button-primary{background-color:#63b77e;color:#fff!important;border-radius:
|
|
131
|
+
args: [{ selector: 'atomix-button', template: "<button\n pButton\n pRipple\n [label]=\"label\"\n [ngClass]=\"[\n class,\n buttonType === 'primary' ? 'p-button-primary' : '',\n buttonType === 'outlined' ? 'p-button-outlined' : '',\n buttonType === 'text' ? 'p-button-text' : '',\n buttonType === 'refresh' ? 'refresh-button' : ''\n]\" \n [disabled]=\"disabled\"\n [loading]=\"loading\"\n [size]=\"size\"\n [icon]=\"icon\"\n [iconPos]=\"iconPos\"\n (click)=\"onButtonClick($event)\" \n [type]=\"type\"\n></button>\n", styles: ["::ng-deep .p-button-primary{background-color:#63b77e;color:#fff!important;border-radius:var(--global-border-radius);height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;line-height:17px;outline:none;border:none;cursor:pointer}:is():enabled:hover{background-color:#63b77e}:is():disabled .p-button-label{color:#00000061!important}::ng-deep .p-button-outlined{background-color:var(--button-outlined-bg)!important;color:var(--button-outlined-text)!important;border-radius:var(--global-border-radius);height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;outline:none;line-height:17px;cursor:pointer}::ng-deep .refresh-button{background-color:var(--button-outlined-bg)!important;border-radius:50%;height:40px;width:40px}::ng-deep .p-button-text{color:#424242;background:none;border-radius:1px solid gray}:is():disabled{background:none!important}\n"] }]
|
|
132
132
|
}], propDecorators: { label: [{
|
|
133
133
|
type: Input
|
|
134
134
|
}], disabled: [{
|
|
@@ -225,11 +225,11 @@ class AtomixInputComponent {
|
|
|
225
225
|
this.inputEl?.nativeElement?.focus();
|
|
226
226
|
}
|
|
227
227
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
228
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixInputComponent, selector: "atomix-input", inputs: { value: "value", name: "name", type: "type", placeholder: "placeholder", withSearchIcon: "withSearchIcon", searchIconPosition: "searchIconPosition", iconName: "iconName", containerClass: "containerClass", class: "class", disabled: "disabled", isCrossRequired: "isCrossRequired", label: "label", isLabelRequired: "isLabelRequired", autofocus: "autofocus" }, outputs: { valueChange: "valueChange", changeValueHandler: "changeValueHandler" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<label *ngIf=\"label\" for=\"name\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span></label\n>\n\n<i\n class=\"pi pi-search search-icon\"\n [ngClass]=\"(searchIconPosition === 'left' ? 'search-icon-left' : 'search-icon-right') + (label ? ' with-label' : '')\"\n *ngIf=\"withSearchIcon\"\n (click)=\"onEnter()\"\n></i>\n\n<input\n [id]=\"name\"\n type=\"text\"\n pInputText\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n [ngClass]=\"class + ' lib-input-field' + (withSearchIcon ? ' with-search-icon-' + searchIconPosition : '') + (isCrossRequired ? ' with-cross-icon' : '')\"\n autocomplete=\"new-password\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n #inputEl\n/>\n<i\n class=\"pi pi-times filter-dropdown-icon\"\n [ngClass]=\"(withSearchIcon && searchIconPosition === 'right' ? 'filter-dropdown-icon-left' : '') + (label ? ' with-label' : '')\"\n style=\"cursor: pointer\"\n (click)=\"clearValue()\"\n *ngIf=\"isCrossRequired && value !== ''\"\n\n></i>\n", styles: [".lib-error-asterisk{color:red}.filter-dropdown-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:1;cursor:pointer;color:#6c757d}.filter-dropdown-icon-left{right:40px}.search-icon.with-label,.filter-dropdown-icon.with-label{top:88%}.search-icon{position:absolute;top:50%;transform:translateY(-50%);z-index:1;color:var(--primary-text-color)!important;font-size:1rem}.search-icon-left{left:10px}.search-icon-right{right:0}.with-search-icon-left{padding-left:30px!important;padding-right:30px!important}.with-search-icon-right{padding-right:60px}::ng-deep .lib-input-field{border-radius:
|
|
228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixInputComponent, selector: "atomix-input", inputs: { value: "value", name: "name", type: "type", placeholder: "placeholder", withSearchIcon: "withSearchIcon", searchIconPosition: "searchIconPosition", iconName: "iconName", containerClass: "containerClass", class: "class", disabled: "disabled", isCrossRequired: "isCrossRequired", label: "label", isLabelRequired: "isLabelRequired", autofocus: "autofocus" }, outputs: { valueChange: "valueChange", changeValueHandler: "changeValueHandler" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<label *ngIf=\"label\" for=\"name\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span></label\n>\n\n<i\n class=\"pi pi-search search-icon\"\n [ngClass]=\"(searchIconPosition === 'left' ? 'search-icon-left' : 'search-icon-right') + (label ? ' with-label' : '')\"\n *ngIf=\"withSearchIcon\"\n (click)=\"onEnter()\"\n></i>\n\n<input\n [id]=\"name\"\n type=\"text\"\n pInputText\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n [ngClass]=\"class + ' lib-input-field' + (withSearchIcon ? ' with-search-icon-' + searchIconPosition : '') + (isCrossRequired ? ' with-cross-icon' : '')\"\n autocomplete=\"new-password\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n #inputEl\n/>\n<i\n class=\"pi pi-times filter-dropdown-icon\"\n [ngClass]=\"(withSearchIcon && searchIconPosition === 'right' ? 'filter-dropdown-icon-left' : '') + (label ? ' with-label' : '')\"\n style=\"cursor: pointer\"\n (click)=\"clearValue()\"\n *ngIf=\"isCrossRequired && value !== ''\"\n\n></i>\n", styles: [".lib-error-asterisk{color:red}.filter-dropdown-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:1;cursor:pointer;color:#6c757d}.filter-dropdown-icon-left{right:40px}.search-icon.with-label,.filter-dropdown-icon.with-label{top:88%}.search-icon{position:absolute;top:50%;transform:translateY(-50%);z-index:1;color:var(--primary-text-color)!important;font-size:1rem}.search-icon-left{left:10px}.search-icon-right{right:0}.with-search-icon-left{padding-left:30px!important;padding-right:30px!important}.with-search-icon-right{padding-right:60px}::ng-deep .lib-input-field{border-radius:var(--global-border-radius)}\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$1.InputText, selector: "[pInputText]", inputs: ["variant"] }] });
|
|
229
229
|
}
|
|
230
230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixInputComponent, decorators: [{
|
|
231
231
|
type: Component,
|
|
232
|
-
args: [{ selector: 'atomix-input', template: "<label *ngIf=\"label\" for=\"name\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span></label\n>\n\n<i\n class=\"pi pi-search search-icon\"\n [ngClass]=\"(searchIconPosition === 'left' ? 'search-icon-left' : 'search-icon-right') + (label ? ' with-label' : '')\"\n *ngIf=\"withSearchIcon\"\n (click)=\"onEnter()\"\n></i>\n\n<input\n [id]=\"name\"\n type=\"text\"\n pInputText\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n [ngClass]=\"class + ' lib-input-field' + (withSearchIcon ? ' with-search-icon-' + searchIconPosition : '') + (isCrossRequired ? ' with-cross-icon' : '')\"\n autocomplete=\"new-password\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n #inputEl\n/>\n<i\n class=\"pi pi-times filter-dropdown-icon\"\n [ngClass]=\"(withSearchIcon && searchIconPosition === 'right' ? 'filter-dropdown-icon-left' : '') + (label ? ' with-label' : '')\"\n style=\"cursor: pointer\"\n (click)=\"clearValue()\"\n *ngIf=\"isCrossRequired && value !== ''\"\n\n></i>\n", styles: [".lib-error-asterisk{color:red}.filter-dropdown-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:1;cursor:pointer;color:#6c757d}.filter-dropdown-icon-left{right:40px}.search-icon.with-label,.filter-dropdown-icon.with-label{top:88%}.search-icon{position:absolute;top:50%;transform:translateY(-50%);z-index:1;color:var(--primary-text-color)!important;font-size:1rem}.search-icon-left{left:10px}.search-icon-right{right:0}.with-search-icon-left{padding-left:30px!important;padding-right:30px!important}.with-search-icon-right{padding-right:60px}::ng-deep .lib-input-field{border-radius:
|
|
232
|
+
args: [{ selector: 'atomix-input', template: "<label *ngIf=\"label\" for=\"name\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span></label\n>\n\n<i\n class=\"pi pi-search search-icon\"\n [ngClass]=\"(searchIconPosition === 'left' ? 'search-icon-left' : 'search-icon-right') + (label ? ' with-label' : '')\"\n *ngIf=\"withSearchIcon\"\n (click)=\"onEnter()\"\n></i>\n\n<input\n [id]=\"name\"\n type=\"text\"\n pInputText\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnter()\"\n [ngClass]=\"class + ' lib-input-field' + (withSearchIcon ? ' with-search-icon-' + searchIconPosition : '') + (isCrossRequired ? ' with-cross-icon' : '')\"\n autocomplete=\"new-password\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n #inputEl\n/>\n<i\n class=\"pi pi-times filter-dropdown-icon\"\n [ngClass]=\"(withSearchIcon && searchIconPosition === 'right' ? 'filter-dropdown-icon-left' : '') + (label ? ' with-label' : '')\"\n style=\"cursor: pointer\"\n (click)=\"clearValue()\"\n *ngIf=\"isCrossRequired && value !== ''\"\n\n></i>\n", styles: [".lib-error-asterisk{color:red}.filter-dropdown-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:1;cursor:pointer;color:#6c757d}.filter-dropdown-icon-left{right:40px}.search-icon.with-label,.filter-dropdown-icon.with-label{top:88%}.search-icon{position:absolute;top:50%;transform:translateY(-50%);z-index:1;color:var(--primary-text-color)!important;font-size:1rem}.search-icon-left{left:10px}.search-icon-right{right:0}.with-search-icon-left{padding-left:30px!important;padding-right:30px!important}.with-search-icon-right{padding-right:60px}::ng-deep .lib-input-field{border-radius:var(--global-border-radius)}\n"] }]
|
|
233
233
|
}], propDecorators: { inputEl: [{
|
|
234
234
|
type: ViewChild,
|
|
235
235
|
args: ['inputEl']
|
|
@@ -947,11 +947,11 @@ class AtomixDaterangeCalendarComponent {
|
|
|
947
947
|
return Array.from(new Set(calEls));
|
|
948
948
|
}
|
|
949
949
|
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 });
|
|
950
|
-
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", preservePreset: "preservePreset" }, 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:var(--text-gray-700);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:8px}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:var(--primary-text-color)!important;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:var(--primary-text-color)!important;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:var(--text-gray-700)}.preset-btn:hover{background-color:#63b77e}.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"] }] });
|
|
950
|
+
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", preservePreset: "preservePreset" }, 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:var(--global-border-radius)}::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:var(--text-gray-700);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:var(--global-border-radius)}.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:var(--global-border-radius)}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:var(--primary-text-color)!important;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:var(--primary-text-color)!important;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:var(--text-gray-700)}.preset-btn:hover{background-color:#63b77e}.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"] }] });
|
|
951
951
|
}
|
|
952
952
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixDaterangeCalendarComponent, decorators: [{
|
|
953
953
|
type: Component,
|
|
954
|
-
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:
|
|
954
|
+
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:var(--global-border-radius)}::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:var(--text-gray-700);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:var(--global-border-radius)}.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:var(--global-border-radius)}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:var(--primary-text-color)!important;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:var(--primary-text-color)!important;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:var(--text-gray-700)}.preset-btn:hover{background-color:#63b77e}.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"] }]
|
|
955
955
|
}], ctorParameters: () => [{ type: i1$1.DatePipe }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
|
|
956
956
|
type: Input
|
|
957
957
|
}], styleClass: [{
|
|
@@ -1662,11 +1662,11 @@ class AtomixFormCalendarComponent {
|
|
|
1662
1662
|
return this.form.get(this.controlName);
|
|
1663
1663
|
}
|
|
1664
1664
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1665
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormCalendarComponent, selector: "atomix-form-calendar", inputs: { controlName: "controlName", form: "form", view: "view", dateFormat: "dateFormat", label: "label", isLabelRequired: "isLabelRequired", maxDate: "maxDate", minDate: "minDate", selectionMode: "selectionMode", placeholder: "placeholder", styleClass: "styleClass", inputStyleClass: "inputStyleClass" }, outputs: { dateSelectHandler: "dateSelectHandler", dateChangeHandler: "dateChangeHandler" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-calendar\n [formControl]=\"control\"\n id=\"calendar\"\n tooltipPosition=\"top\"\n [view]=\"view\"\n [dateFormat]=\"dateFormat\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selectionMode]=\"selectionMode\"\n [readonlyInput]=\"true\"\n [placeholder]=\"placeholder\"\n (onClose)=\"dateSelectHandler.emit()\"\n [inputStyleClass]=\"inputStyleClass\"\n [styleClass]=\"styleClass+ ' form-calendar'\"\n appendTo=\"body\"\n (onSelect)=\"dateChangeHandler.emit($event)\"\n/>\n", styles: ["::ng-deep .form-calendar{width:100%}::ng-deep .form-calendar input{border-radius:
|
|
1665
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormCalendarComponent, selector: "atomix-form-calendar", inputs: { controlName: "controlName", form: "form", view: "view", dateFormat: "dateFormat", label: "label", isLabelRequired: "isLabelRequired", maxDate: "maxDate", minDate: "minDate", selectionMode: "selectionMode", placeholder: "placeholder", styleClass: "styleClass", inputStyleClass: "inputStyleClass" }, outputs: { dateSelectHandler: "dateSelectHandler", dateChangeHandler: "dateChangeHandler" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-calendar\n [formControl]=\"control\"\n id=\"calendar\"\n tooltipPosition=\"top\"\n [view]=\"view\"\n [dateFormat]=\"dateFormat\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selectionMode]=\"selectionMode\"\n [readonlyInput]=\"true\"\n [placeholder]=\"placeholder\"\n (onClose)=\"dateSelectHandler.emit()\"\n [inputStyleClass]=\"inputStyleClass\"\n [styleClass]=\"styleClass+ ' form-calendar'\"\n appendTo=\"body\"\n (onSelect)=\"dateChangeHandler.emit($event)\"\n/>\n", styles: ["::ng-deep .form-calendar{width:100%}::ng-deep .form-calendar input{border-radius:var(--global-border-radius)!important;margin-top:.2rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1666
1666
|
}
|
|
1667
1667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormCalendarComponent, decorators: [{
|
|
1668
1668
|
type: Component,
|
|
1669
|
-
args: [{ selector: 'atomix-form-calendar', template: "<label *ngIf=\"label\" [for]=\"controlName\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-calendar\n [formControl]=\"control\"\n id=\"calendar\"\n tooltipPosition=\"top\"\n [view]=\"view\"\n [dateFormat]=\"dateFormat\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selectionMode]=\"selectionMode\"\n [readonlyInput]=\"true\"\n [placeholder]=\"placeholder\"\n (onClose)=\"dateSelectHandler.emit()\"\n [inputStyleClass]=\"inputStyleClass\"\n [styleClass]=\"styleClass+ ' form-calendar'\"\n appendTo=\"body\"\n (onSelect)=\"dateChangeHandler.emit($event)\"\n/>\n", styles: ["::ng-deep .form-calendar{width:100%}::ng-deep .form-calendar input{border-radius:
|
|
1669
|
+
args: [{ selector: 'atomix-form-calendar', template: "<label *ngIf=\"label\" [for]=\"controlName\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-calendar\n [formControl]=\"control\"\n id=\"calendar\"\n tooltipPosition=\"top\"\n [view]=\"view\"\n [dateFormat]=\"dateFormat\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selectionMode]=\"selectionMode\"\n [readonlyInput]=\"true\"\n [placeholder]=\"placeholder\"\n (onClose)=\"dateSelectHandler.emit()\"\n [inputStyleClass]=\"inputStyleClass\"\n [styleClass]=\"styleClass+ ' form-calendar'\"\n appendTo=\"body\"\n (onSelect)=\"dateChangeHandler.emit($event)\"\n/>\n", styles: ["::ng-deep .form-calendar{width:100%}::ng-deep .form-calendar input{border-radius:var(--global-border-radius)!important;margin-top:.2rem}\n"] }]
|
|
1670
1670
|
}], propDecorators: { controlName: [{
|
|
1671
1671
|
type: Input
|
|
1672
1672
|
}], form: [{
|
|
@@ -1812,11 +1812,11 @@ class AtomixFormDropdownComponent {
|
|
|
1812
1812
|
return this.form.get(this.controlName);
|
|
1813
1813
|
}
|
|
1814
1814
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1815
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormDropdownComponent, selector: "atomix-form-dropdown", inputs: { controlName: "controlName", filterResults: "filterResults", form: "form", label: "label", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", placeholder: "placeholder", showClear: "showClear", tooltip: "tooltip", tooltipPosition: "tooltipPosition", isLabelRequired: "isLabelRequired", styleClass: "styleClass", isLabelIconData: "isLabelIconData" }, outputs: { selectionChange: "selectionChange", filterEvent: "filterEvent" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span> <i\n *ngIf=\"isLabelIconData.required\"\n [class]=\"isLabelIconData?.iconClass
|
|
1815
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormDropdownComponent, selector: "atomix-form-dropdown", inputs: { controlName: "controlName", filterResults: "filterResults", form: "form", label: "label", optionLabel: "optionLabel", optionValue: "optionValue", options: "options", placeholder: "placeholder", showClear: "showClear", tooltip: "tooltip", tooltipPosition: "tooltipPosition", isLabelRequired: "isLabelRequired", styleClass: "styleClass", isLabelIconData: "isLabelIconData" }, outputs: { selectionChange: "selectionChange", filterEvent: "filterEvent" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span> <i\n *ngIf=\"isLabelIconData.required\"\n [class]=\"isLabelIconData?.iconClass\"\n [pTooltip]=\"isLabelIconData?.tooltip\"\n></i\n></label\n>\n<p-dropdown\n [filter]=\"filterResults\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [options]=\"options\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [showClear]=\"showClear\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n (onChange)=\"selectionChange.emit($event)\"\n [styleClass]=\"styleClass + ' form-dropdown'\"\n appendTo=\"body\"\n>\n</p-dropdown>\n", styles: ["::ng-deep .form-dropdown{margin-top:.2rem!important;border-radius:30px}::ng-deep .form-dropdown .p-inputtext{padding:1rem!important}.lib-error-asterisk,.error-asterisk{color:red}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1816
1816
|
}
|
|
1817
1817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormDropdownComponent, decorators: [{
|
|
1818
1818
|
type: Component,
|
|
1819
|
-
args: [{ selector: 'atomix-form-dropdown', template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span> <i\n *ngIf=\"isLabelIconData.required\"\n [class]=\"isLabelIconData?.iconClass
|
|
1819
|
+
args: [{ selector: 'atomix-form-dropdown', template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"lib-error-asterisk\">*</span> <i\n *ngIf=\"isLabelIconData.required\"\n [class]=\"isLabelIconData?.iconClass\"\n [pTooltip]=\"isLabelIconData?.tooltip\"\n></i\n></label\n>\n<p-dropdown\n [filter]=\"filterResults\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [options]=\"options\"\n [optionLabel]=\"optionLabel\"\n [optionValue]=\"optionValue\"\n [showClear]=\"showClear\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n (onChange)=\"selectionChange.emit($event)\"\n [styleClass]=\"styleClass + ' form-dropdown'\"\n appendTo=\"body\"\n>\n</p-dropdown>\n", styles: ["::ng-deep .form-dropdown{margin-top:.2rem!important;border-radius:30px}::ng-deep .form-dropdown .p-inputtext{padding:1rem!important}.lib-error-asterisk,.error-asterisk{color:red}\n"] }]
|
|
1820
1820
|
}], propDecorators: { controlName: [{
|
|
1821
1821
|
type: Input
|
|
1822
1822
|
}], filterResults: [{
|
|
@@ -1882,11 +1882,11 @@ class AtomixFormInputComponent {
|
|
|
1882
1882
|
this.changeValueHandler.emit(input.value);
|
|
1883
1883
|
}
|
|
1884
1884
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1885
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormInputComponent, selector: "atomix-form-input", inputs: { controlName: "controlName", form: "form", label: "label", max: "max", min: "min", placeholder: "placeholder", type: "type", tooltip: "tooltip", class: "class", style: "style", isLabelIconData: "isLabelIconData", isLabelIconRequired: "isLabelIconRequired", isLabelRequired: "isLabelRequired", tooltipPosition: "tooltipPosition", buttonText: "buttonText", buttonType: "buttonType" }, outputs: { changeValueHandler: "changeValueHandler", buttonClick: "buttonClick" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }} <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span\n ><i\n *ngIf=\"isLabelIconRequired\"\n [class]=\"isLabelIconData?.iconClass + ' ml-2'\"\n [pTooltip]=\"isLabelIconData?.tooltip\"\n ></i\n></label>\n<div class=\"input-wrapper\">\n <input\n pInputText\n [id]=\"controlName\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"max\"\n [min]=\"min\"\n (input)=\"onInput($event)\"\n [pTooltip]=\"tooltip\"\n [type]=\"type\"\n [tooltipPosition]=\"tooltipPosition\"\n [ngClass]=\"class + ' lib-input-field' + (buttonText ? ' with-button' : '')\"\n autocomplete=\"new-password\"\n [style]=\"style\"\n />\n <button *ngIf=\"buttonText\" (click)=\"buttonClick.emit()\" class=\"inline-button\" [type]=\"buttonType\">{{ buttonText }}</button>\n</div>\n", styles: ["::ng-deep .lib-input-field{border-radius:
|
|
1885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormInputComponent, selector: "atomix-form-input", inputs: { controlName: "controlName", form: "form", label: "label", max: "max", min: "min", placeholder: "placeholder", type: "type", tooltip: "tooltip", class: "class", style: "style", isLabelIconData: "isLabelIconData", isLabelIconRequired: "isLabelIconRequired", isLabelRequired: "isLabelRequired", tooltipPosition: "tooltipPosition", buttonText: "buttonText", buttonType: "buttonType" }, outputs: { changeValueHandler: "changeValueHandler", buttonClick: "buttonClick" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }} <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span\n ><i\n *ngIf=\"isLabelIconRequired\"\n [class]=\"isLabelIconData?.iconClass + ' ml-2'\"\n [pTooltip]=\"isLabelIconData?.tooltip\"\n ></i\n></label>\n<div class=\"input-wrapper\">\n <input\n pInputText\n [id]=\"controlName\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"max\"\n [min]=\"min\"\n (input)=\"onInput($event)\"\n [pTooltip]=\"tooltip\"\n [type]=\"type\"\n [tooltipPosition]=\"tooltipPosition\"\n [ngClass]=\"class + ' lib-input-field' + (buttonText ? ' with-button' : '')\"\n autocomplete=\"new-password\"\n [style]=\"style\"\n />\n <button *ngIf=\"buttonText\" (click)=\"buttonClick.emit()\" class=\"inline-button\" [type]=\"buttonType\">{{ buttonText }}</button>\n</div>\n", styles: ["::ng-deep .lib-input-field{border-radius:var(--global-border-radius);margin-top:.2rem}::ng-deep .lib-input-field.with-button{padding-right:6rem}.error-asterisk{color:red}.input-wrapper{position:relative}.inline-button{position:absolute;right:5px;background-color:transparent;color:#63b77e;font-weight:700;border:none;cursor:pointer;font-size:.875rem;height:95%;margin-top:.2rem;border-left:1px solid grey}.inline-button:focus{outline:none}.inline-button:hover{background-color:transparent}\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$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1886
1886
|
}
|
|
1887
1887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormInputComponent, decorators: [{
|
|
1888
1888
|
type: Component,
|
|
1889
|
-
args: [{ selector: 'atomix-form-input', template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }} <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span\n ><i\n *ngIf=\"isLabelIconRequired\"\n [class]=\"isLabelIconData?.iconClass + ' ml-2'\"\n [pTooltip]=\"isLabelIconData?.tooltip\"\n ></i\n></label>\n<div class=\"input-wrapper\">\n <input\n pInputText\n [id]=\"controlName\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"max\"\n [min]=\"min\"\n (input)=\"onInput($event)\"\n [pTooltip]=\"tooltip\"\n [type]=\"type\"\n [tooltipPosition]=\"tooltipPosition\"\n [ngClass]=\"class + ' lib-input-field' + (buttonText ? ' with-button' : '')\"\n autocomplete=\"new-password\"\n [style]=\"style\"\n />\n <button *ngIf=\"buttonText\" (click)=\"buttonClick.emit()\" class=\"inline-button\" [type]=\"buttonType\">{{ buttonText }}</button>\n</div>\n", styles: ["::ng-deep .lib-input-field{border-radius:
|
|
1889
|
+
args: [{ selector: 'atomix-form-input', template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }} <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span\n ><i\n *ngIf=\"isLabelIconRequired\"\n [class]=\"isLabelIconData?.iconClass + ' ml-2'\"\n [pTooltip]=\"isLabelIconData?.tooltip\"\n ></i\n></label>\n<div class=\"input-wrapper\">\n <input\n pInputText\n [id]=\"controlName\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [maxlength]=\"max\"\n [min]=\"min\"\n (input)=\"onInput($event)\"\n [pTooltip]=\"tooltip\"\n [type]=\"type\"\n [tooltipPosition]=\"tooltipPosition\"\n [ngClass]=\"class + ' lib-input-field' + (buttonText ? ' with-button' : '')\"\n autocomplete=\"new-password\"\n [style]=\"style\"\n />\n <button *ngIf=\"buttonText\" (click)=\"buttonClick.emit()\" class=\"inline-button\" [type]=\"buttonType\">{{ buttonText }}</button>\n</div>\n", styles: ["::ng-deep .lib-input-field{border-radius:var(--global-border-radius);margin-top:.2rem}::ng-deep .lib-input-field.with-button{padding-right:6rem}.error-asterisk{color:red}.input-wrapper{position:relative}.inline-button{position:absolute;right:5px;background-color:transparent;color:#63b77e;font-weight:700;border:none;cursor:pointer;font-size:.875rem;height:95%;margin-top:.2rem;border-left:1px solid grey}.inline-button:focus{outline:none}.inline-button:hover{background-color:transparent}\n"] }]
|
|
1890
1890
|
}], propDecorators: { controlName: [{
|
|
1891
1891
|
type: Input
|
|
1892
1892
|
}], form: [{
|
|
@@ -2024,11 +2024,11 @@ class AtomixFormTextareaComponent {
|
|
|
2024
2024
|
return this.form.get(this.controlName);
|
|
2025
2025
|
}
|
|
2026
2026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2027
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormTextareaComponent, selector: "atomix-form-textarea", inputs: { controlName: "controlName", form: "form", label: "label", rows: "rows", cols: "cols", placeholder: "placeholder", disabled: "disabled", class: "class", isLabelRequired: "isLabelRequired", height: "height" }, ngImport: i0, template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<textarea\n variant=\"filled\"\n pInputTextarea\n [rows]=\"rows\"\n [id]=\"controlName\"\n [cols]=\"cols\"\n [ngClass]=\"class +' atomix-form-textarea'\"\n [disabled]=\"disabled\"\n autocomplete=\"new-password\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [style.height]=\"height\"\n></textarea>\n", styles: ["::ng-deep .atomix-form-textarea{border-radius:
|
|
2027
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixFormTextareaComponent, selector: "atomix-form-textarea", inputs: { controlName: "controlName", form: "form", label: "label", rows: "rows", cols: "cols", placeholder: "placeholder", disabled: "disabled", class: "class", isLabelRequired: "isLabelRequired", height: "height" }, ngImport: i0, template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<textarea\n variant=\"filled\"\n pInputTextarea\n [rows]=\"rows\"\n [id]=\"controlName\"\n [cols]=\"cols\"\n [ngClass]=\"class +' atomix-form-textarea'\"\n [disabled]=\"disabled\"\n autocomplete=\"new-password\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [style.height]=\"height\"\n></textarea>\n", styles: ["::ng-deep .atomix-form-textarea{border-radius:var(--global-border-radius);margin-top:.2rem;font-family:Inter var,sans-serif;padding:.5rem}\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$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2028
2028
|
}
|
|
2029
2029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixFormTextareaComponent, decorators: [{
|
|
2030
2030
|
type: Component,
|
|
2031
|
-
args: [{ selector: 'atomix-form-textarea', template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<textarea\n variant=\"filled\"\n pInputTextarea\n [rows]=\"rows\"\n [id]=\"controlName\"\n [cols]=\"cols\"\n [ngClass]=\"class +' atomix-form-textarea'\"\n [disabled]=\"disabled\"\n autocomplete=\"new-password\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [style.height]=\"height\"\n></textarea>\n", styles: ["::ng-deep .atomix-form-textarea{border-radius:
|
|
2031
|
+
args: [{ selector: 'atomix-form-textarea', template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<textarea\n variant=\"filled\"\n pInputTextarea\n [rows]=\"rows\"\n [id]=\"controlName\"\n [cols]=\"cols\"\n [ngClass]=\"class +' atomix-form-textarea'\"\n [disabled]=\"disabled\"\n autocomplete=\"new-password\"\n [formControl]=\"control\"\n [placeholder]=\"placeholder\"\n [style.height]=\"height\"\n></textarea>\n", styles: ["::ng-deep .atomix-form-textarea{border-radius:var(--global-border-radius);margin-top:.2rem;font-family:Inter var,sans-serif;padding:.5rem}\n"] }]
|
|
2032
2032
|
}], propDecorators: { controlName: [{
|
|
2033
2033
|
type: Input
|
|
2034
2034
|
}], form: [{
|
|
@@ -2143,11 +2143,11 @@ class AtomixToastComponent {
|
|
|
2143
2143
|
});
|
|
2144
2144
|
}
|
|
2145
2145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixToastComponent, deps: [{ token: i1$3.MessageService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
2146
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixToastComponent, selector: "atomix-toast", inputs: { key: "key", position: "position" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "toast", first: true, predicate: ["toast"], descendants: true }], ngImport: i0, template: "<p-toast [key]=\"key || undefined\" [position]=\"position\">\n <ng-template let-message pTemplate=\"message\" *ngIf=\"messageTemplate\">\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: {$implicit: message}\"></ng-container>\n </ng-template>\n</p-toast>", styles: [".custom-download-button{background-color:#4caf50!important;border-color:#4caf50!important;color:#fff!important;padding:8px 16px;border-radius:4px;font-size:14px;font-weight:600}.toast-container{display:flex;flex-direction:column;align-items:flex-start;padding:12px;background-color:#fff;border-radius:
|
|
2146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AtomixToastComponent, selector: "atomix-toast", inputs: { key: "key", position: "position" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "toast", first: true, predicate: ["toast"], descendants: true }], ngImport: i0, template: "<p-toast [key]=\"key || undefined\" [position]=\"position\">\n <ng-template let-message pTemplate=\"message\" *ngIf=\"messageTemplate\">\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: {$implicit: message}\"></ng-container>\n </ng-template>\n</p-toast>", styles: [".custom-download-button{background-color:#4caf50!important;border-color:#4caf50!important;color:#fff!important;padding:8px 16px;border-radius:4px;font-size:14px;font-weight:600}.toast-container{display:flex;flex-direction:column;align-items:flex-start;padding:12px;background-color:#fff;border-radius:var(--global-border-radius);box-shadow:0 2px 4px #0000001a}.toast-header{margin-bottom:8px}.toast-summary{font-size:14px;font-weight:600;margin-bottom:4px}.toast-detail{font-size:12px;margin-bottom:16px}.download-button-container{display:flex;justify-content:flex-end;width:100%}.custom-download-link{color:#4caf50;cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$6.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] });
|
|
2147
2147
|
}
|
|
2148
2148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixToastComponent, decorators: [{
|
|
2149
2149
|
type: Component,
|
|
2150
|
-
args: [{ selector: 'atomix-toast', template: "<p-toast [key]=\"key || undefined\" [position]=\"position\">\n <ng-template let-message pTemplate=\"message\" *ngIf=\"messageTemplate\">\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: {$implicit: message}\"></ng-container>\n </ng-template>\n</p-toast>", styles: [".custom-download-button{background-color:#4caf50!important;border-color:#4caf50!important;color:#fff!important;padding:8px 16px;border-radius:4px;font-size:14px;font-weight:600}.toast-container{display:flex;flex-direction:column;align-items:flex-start;padding:12px;background-color:#fff;border-radius:
|
|
2150
|
+
args: [{ selector: 'atomix-toast', template: "<p-toast [key]=\"key || undefined\" [position]=\"position\">\n <ng-template let-message pTemplate=\"message\" *ngIf=\"messageTemplate\">\n <ng-container *ngTemplateOutlet=\"messageTemplate; context: {$implicit: message}\"></ng-container>\n </ng-template>\n</p-toast>", styles: [".custom-download-button{background-color:#4caf50!important;border-color:#4caf50!important;color:#fff!important;padding:8px 16px;border-radius:4px;font-size:14px;font-weight:600}.toast-container{display:flex;flex-direction:column;align-items:flex-start;padding:12px;background-color:#fff;border-radius:var(--global-border-radius);box-shadow:0 2px 4px #0000001a}.toast-header{margin-bottom:8px}.toast-summary{font-size:14px;font-weight:600;margin-bottom:4px}.toast-detail{font-size:12px;margin-bottom:16px}.download-button-container{display:flex;justify-content:flex-end;width:100%}.custom-download-link{color:#4caf50;cursor:pointer;text-decoration:underline}\n"] }]
|
|
2151
2151
|
}], ctorParameters: () => [{ type: i1$3.MessageService }, { type: i2$4.Router }], propDecorators: { toast: [{
|
|
2152
2152
|
type: ViewChild,
|
|
2153
2153
|
args: ['toast']
|
|
@@ -2522,7 +2522,7 @@ class AtomixAutocompleteComponent {
|
|
|
2522
2522
|
useExisting: forwardRef(() => AtomixAutocompleteComponent),
|
|
2523
2523
|
multi: true,
|
|
2524
2524
|
},
|
|
2525
|
-
], ngImport: i0, template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<div [class]=\"autocompleteContainer + ' atomix-autocomplete-wrapper'\">\n <p-autoComplete\n [(ngModel)]=\"selectedValues\"\n [suggestions]=\"suggestions\"\n [placeholder]=\"placeholder\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [dropdown]=\"dropdown\"\n [name]=\"name\"\n [styleClass]=\"styleClass\"\n (completeMethod)=\"queryHandler.emit([$event, name])\"\n (onSelect)=\"selectOptionHandler.emit([$event, name])\"\n (onClear)=\"selectOptionHandler.emit([$event, name])\"\n [showEmptyMessage]=\"true\"\n appendTo=\"body\"\n\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [delay]=\"delay\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onModelChange($event)\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"autocomplete-item\">\n <div class=\"font-semibold\">{{ item[optionLabel] }}</div>\n <div class=\"text-xs text-gray-500\">\n {{ item[optionDescription] }}\n </div>\n </div>\n </ng-template>\n </p-autoComplete>\n</div>", styles: ["::ng-deep .p-autocomplete-dd .p-autocomplete-dropdown{border-radius:0
|
|
2525
|
+
], ngImport: i0, template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<div [class]=\"autocompleteContainer + ' atomix-autocomplete-wrapper'\">\n <p-autoComplete\n [(ngModel)]=\"selectedValues\"\n [suggestions]=\"suggestions\"\n [placeholder]=\"placeholder\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [dropdown]=\"dropdown\"\n [name]=\"name\"\n [styleClass]=\"styleClass\"\n (completeMethod)=\"queryHandler.emit([$event, name])\"\n (onSelect)=\"selectOptionHandler.emit([$event, name])\"\n (onClear)=\"selectOptionHandler.emit([$event, name])\"\n [showEmptyMessage]=\"true\"\n appendTo=\"body\"\n\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [delay]=\"delay\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onModelChange($event)\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"autocomplete-item\">\n <div class=\"font-semibold\">{{ item[optionLabel] }}</div>\n <div class=\"text-xs text-gray-500\">\n {{ item[optionDescription] }}\n </div>\n </div>\n </ng-template>\n </p-autoComplete>\n</div>", styles: ["::ng-deep .p-autocomplete-dd .p-autocomplete-dropdown{border-radius:0 var(--global-border-radius) var(--global-border-radius) 0!important}::ng-deep .atomix-autocomplete-wrapper{border-radius:var(--global-border-radius);margin-left:.5rem}::ng-deep .atomix-autocomplete-wrapper .p-inputtext{background-color:var(--filter-inventory-bg)!important;padding:0rem 0rem 0rem 1rem!important;min-width:8rem;border-radius:var(--global-border-radius) 0px 0px var(--global-border-radius);padding-right:16px!important}::ng-deep .atomix-autocomplete-wrapper .p-autocomplete-dropdown{color:var(--primary-text-color)!important;border-radius:var(--global-border-radius);border:1px solid var(--border-color);border-left:none}::ng-deep .atomix-autocomplete-wrapper .p-inputtext:enabled:focus{box-shadow:none!important}::ng-deep .atomix-autocomplete-wrapper .p-autocomplete-clear-icon{right:3.3rem}::ng-deep .atomix-autocomplete-wrapper .font-semibold{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: i4$1.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }] });
|
|
2526
2526
|
}
|
|
2527
2527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AtomixAutocompleteComponent, decorators: [{
|
|
2528
2528
|
type: Component,
|
|
@@ -2532,7 +2532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2532
2532
|
useExisting: forwardRef(() => AtomixAutocompleteComponent),
|
|
2533
2533
|
multi: true,
|
|
2534
2534
|
},
|
|
2535
|
-
], template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<div [class]=\"autocompleteContainer + ' atomix-autocomplete-wrapper'\">\n <p-autoComplete\n [(ngModel)]=\"selectedValues\"\n [suggestions]=\"suggestions\"\n [placeholder]=\"placeholder\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [dropdown]=\"dropdown\"\n [name]=\"name\"\n [styleClass]=\"styleClass\"\n (completeMethod)=\"queryHandler.emit([$event, name])\"\n (onSelect)=\"selectOptionHandler.emit([$event, name])\"\n (onClear)=\"selectOptionHandler.emit([$event, name])\"\n [showEmptyMessage]=\"true\"\n appendTo=\"body\"\n\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [delay]=\"delay\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onModelChange($event)\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"autocomplete-item\">\n <div class=\"font-semibold\">{{ item[optionLabel] }}</div>\n <div class=\"text-xs text-gray-500\">\n {{ item[optionDescription] }}\n </div>\n </div>\n </ng-template>\n </p-autoComplete>\n</div>", styles: ["::ng-deep .p-autocomplete-dd .p-autocomplete-dropdown{border-radius:0
|
|
2535
|
+
], template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<div [class]=\"autocompleteContainer + ' atomix-autocomplete-wrapper'\">\n <p-autoComplete\n [(ngModel)]=\"selectedValues\"\n [suggestions]=\"suggestions\"\n [placeholder]=\"placeholder\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [dropdown]=\"dropdown\"\n [name]=\"name\"\n [styleClass]=\"styleClass\"\n (completeMethod)=\"queryHandler.emit([$event, name])\"\n (onSelect)=\"selectOptionHandler.emit([$event, name])\"\n (onClear)=\"selectOptionHandler.emit([$event, name])\"\n [showEmptyMessage]=\"true\"\n appendTo=\"body\"\n\n [virtualScroll]=\"virtualScroll\"\n [virtualScrollItemSize]=\"virtualScrollItemSize\"\n [delay]=\"delay\"\n [disabled]=\"disabled\"\n (ngModelChange)=\"onModelChange($event)\"\n >\n <ng-template let-item pTemplate=\"item\">\n <div class=\"autocomplete-item\">\n <div class=\"font-semibold\">{{ item[optionLabel] }}</div>\n <div class=\"text-xs text-gray-500\">\n {{ item[optionDescription] }}\n </div>\n </div>\n </ng-template>\n </p-autoComplete>\n</div>", styles: ["::ng-deep .p-autocomplete-dd .p-autocomplete-dropdown{border-radius:0 var(--global-border-radius) var(--global-border-radius) 0!important}::ng-deep .atomix-autocomplete-wrapper{border-radius:var(--global-border-radius);margin-left:.5rem}::ng-deep .atomix-autocomplete-wrapper .p-inputtext{background-color:var(--filter-inventory-bg)!important;padding:0rem 0rem 0rem 1rem!important;min-width:8rem;border-radius:var(--global-border-radius) 0px 0px var(--global-border-radius);padding-right:16px!important}::ng-deep .atomix-autocomplete-wrapper .p-autocomplete-dropdown{color:var(--primary-text-color)!important;border-radius:var(--global-border-radius);border:1px solid var(--border-color);border-left:none}::ng-deep .atomix-autocomplete-wrapper .p-inputtext:enabled:focus{box-shadow:none!important}::ng-deep .atomix-autocomplete-wrapper .p-autocomplete-clear-icon{right:3.3rem}::ng-deep .atomix-autocomplete-wrapper .font-semibold{font-weight:600}\n"] }]
|
|
2536
2536
|
}], propDecorators: { suggestions: [{
|
|
2537
2537
|
type: Input
|
|
2538
2538
|
}], placeholder: [{
|