primekit 0.0.85 → 0.0.87
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 +3 -3
- package/esm2022/lib/lib/atomix-autocomplete/atomix-autocomplete.component.mjs +5 -5
- package/esm2022/lib/lib/atomix-button/atomix-button.component.mjs +4 -4
- package/esm2022/lib/lib/atomix-calendar/atomix-calendar.component.mjs +4 -4
- package/esm2022/lib/lib/atomix-card/atomix-card.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-confirmation-dialog/atomix-confirmation-dialog.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-daterange-calendar/atomix-daterange-calendar.component.mjs +4 -4
- package/esm2022/lib/lib/atomix-divider/atomix-divider.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-dropdown/atomix-dropdown.component.mjs +4 -4
- package/esm2022/lib/lib/atomix-dynamic-dialog/atomix-dynamic-dialog.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-autocomplete/atomix-form-autocomplete.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-calendar/atomix-form-calendar.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-checkbox/atomix-form-checkbox.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-chips/atomix-form-chips.component.mjs +3 -3
- 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 +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-inputmask-component/atomix-form-inputmask-component.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-password-component/atomix-form-password-component.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-radio-button/atomix-radio-button.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-form/atomix-form-textarea/atomix-form-textarea.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-input/atomix-input.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-input-switch/atomix-input-switch.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-messages/messages.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-pagination/atomix-pagination.component.mjs +4 -4
- package/esm2022/lib/lib/atomix-radio-button/atomix-radio-button.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-search-dropdown/atomix-search-dropdown.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-select-button/atomix-select-button.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-snackbar/atomix-snackbar.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-spinner/atomix-spinner.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-steps/atomix-steps.component.mjs +41 -0
- package/esm2022/lib/lib/atomix-tabMenu/atomix-tabMenu.component.mjs +3 -3
- package/esm2022/lib/lib/atomix-table/atomix-table.component.mjs +4 -4
- package/esm2022/lib/lib/atomix-tag/atomix-tag.component.mjs +3 -3
- package/esm2022/lib/primekit.component.mjs +3 -3
- package/esm2022/lib/primekit.module.mjs +18 -9
- package/esm2022/lib/primekit.service.mjs +3 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/primekit.mjs +167 -120
- package/fesm2022/primekit.mjs.map +1 -1
- package/lib/lib/atomix-steps/atomix-steps.component.d.ts +19 -0
- package/lib/primekit.module.d.ts +33 -31
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -56,10 +56,10 @@ export class AtomixToastComponent {
|
|
|
56
56
|
key: this.key || undefined,
|
|
57
57
|
});
|
|
58
58
|
}
|
|
59
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
60
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
59
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixToastComponent, deps: [{ token: i1.MessageService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
60
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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:8px;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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] });
|
|
61
61
|
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixToastComponent, decorators: [{
|
|
63
63
|
type: Component,
|
|
64
64
|
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:8px;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"] }]
|
|
65
65
|
}], ctorParameters: () => [{ type: i1.MessageService }, { type: i2.Router }], propDecorators: { toast: [{
|
|
@@ -46,16 +46,16 @@ export class AtomixAutocompleteComponent {
|
|
|
46
46
|
this.onTouched();
|
|
47
47
|
this.selectedValuesChange.emit(value);
|
|
48
48
|
}
|
|
49
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
50
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixAutocompleteComponent, selector: "atomix-autocomplete", inputs: { suggestions: "suggestions", placeholder: "placeholder", optionLabel: "optionLabel", optionValue: "optionValue", optionDescription: "optionDescription", name: "name", disabled: "disabled", showClear: "showClear", dropdown: "dropdown", styleClass: "styleClass", autocompleteContainer: "autocompleteContainer", label: "label", delay: "delay", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", isLabelRequired: "isLabelRequired", selectedValues: "selectedValues" }, outputs: { queryHandler: "queryHandler", selectOptionHandler: "selectOptionHandler", selectedValuesChange: "selectedValuesChange" }, providers: [
|
|
51
51
|
{
|
|
52
52
|
provide: NG_VALUE_ACCESSOR,
|
|
53
53
|
useExisting: forwardRef(() => AtomixAutocompleteComponent),
|
|
54
54
|
multi: true,
|
|
55
55
|
},
|
|
56
|
-
], 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 30px 30px 0!important}::ng-deep .atomix-autocomplete-wrapper{border-radius:30px
|
|
56
|
+
], 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 30px 30px 0!important}::ng-deep .atomix-autocomplete-wrapper{border-radius:30px}::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:30px 0 0 30px;padding-right:16px!important}::ng-deep .atomix-autocomplete-wrapper .p-autocomplete-dropdown{color:var(--primary-text-color)!important;border-radius:30px}::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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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"] }] });
|
|
57
57
|
}
|
|
58
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
58
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixAutocompleteComponent, decorators: [{
|
|
59
59
|
type: Component,
|
|
60
60
|
args: [{ selector: 'atomix-autocomplete', providers: [
|
|
61
61
|
{
|
|
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
63
63
|
useExisting: forwardRef(() => AtomixAutocompleteComponent),
|
|
64
64
|
multi: true,
|
|
65
65
|
},
|
|
66
|
-
], 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 30px 30px 0!important}::ng-deep .atomix-autocomplete-wrapper{border-radius:30px
|
|
66
|
+
], 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 30px 30px 0!important}::ng-deep .atomix-autocomplete-wrapper{border-radius:30px}::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:30px 0 0 30px;padding-right:16px!important}::ng-deep .atomix-autocomplete-wrapper .p-autocomplete-dropdown{color:var(--primary-text-color)!important;border-radius:30px}::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"] }]
|
|
67
67
|
}], propDecorators: { suggestions: [{
|
|
68
68
|
type: Input
|
|
69
69
|
}], placeholder: [{
|
|
@@ -17,12 +17,12 @@ export class AtomixButtonComponent {
|
|
|
17
17
|
onButtonClick(event) {
|
|
18
18
|
this.buttonClick.emit(event); // Emit the event when button is clicked
|
|
19
19
|
}
|
|
20
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
21
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
20
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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:12px;height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;line-height:17px;outline:none;border:none;cursor:pointer;&:enabled:hover{background-color:#63b77e}&:disabled{.p-button-label{color:#00000061!important}}}::ng-deep .p-button-outlined{background-color:#fff!important;color:#63b77e!important;border-radius:12px;height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;outline:none;line-height:17px;cursor:pointer}::ng-deep .p-button-text{color:#424242;background:none;border-radius:1px solid gray;&:disabled{background:none!important}}::ng-deep .refresh-button{background-color:#fff!important;border-radius:50%;height:40px;width:40px}\n"], dependencies: [{ kind: "directive", type: i1.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"] }] });
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixButtonComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
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:12px;height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;line-height:17px;outline:none;border:none;cursor:pointer
|
|
25
|
+
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:12px;height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;line-height:17px;outline:none;border:none;cursor:pointer;&:enabled:hover{background-color:#63b77e}&:disabled{.p-button-label{color:#00000061!important}}}::ng-deep .p-button-outlined{background-color:#fff!important;color:#63b77e!important;border-radius:12px;height:40px;padding:10.5px 17.5px;font-size:14px;font-weight:700;outline:none;line-height:17px;cursor:pointer}::ng-deep .p-button-text{color:#424242;background:none;border-radius:1px solid gray;&:disabled{background:none!important}}::ng-deep .refresh-button{background-color:#fff!important;border-radius:50%;height:40px;width:40px}\n"] }]
|
|
26
26
|
}], propDecorators: { label: [{
|
|
27
27
|
type: Input
|
|
28
28
|
}], disabled: [{
|
|
@@ -62,12 +62,12 @@ export class AtomixCalendarComponent {
|
|
|
62
62
|
onDateRangeChange(dateRange) {
|
|
63
63
|
this.dateRangeChange.emit(dateRange);
|
|
64
64
|
}
|
|
65
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
66
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
65
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
66
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixCalendarComponent, selector: "atomix-calendar", inputs: { placeholder: "placeholder", selectionMode: "selectionMode", styleClass: "styleClass", inputStyleClass: "inputStyleClass", disabled: "disabled", selectedDate: "selectedDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { dateRangeChange: "dateRangeChange" }, ngImport: i0, template: "<p-calendar\n [(ngModel)]=\"selectedDate\"\n [selectionMode]=\"selectionMode\"\n [showButtonBar]=\"true\"\n [dateFormat]=\"'mm/dd/yy'\"\n [showOtherMonths]=\"true\"\n [showOnFocus]=\"true\"\n [locale]=\"enLocale\"\n [showIcon]=\"true\"\n [placeholder]=\"placeholder\"\n [styleClass]=\"styleClass\"\n [inputStyleClass]=\"inputStyleClass\"\n (ngModelChange)=\"onDateRangeChange($event)\"\n appendTo=\"body\"\n [showClear]=\"true\"\n [disabled]=\"disabled\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n>\n</p-calendar>\n", styles: ["::ng-deep .p-calendar{button{background-color:transparent!important}}\n"], dependencies: [{ kind: "component", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
67
67
|
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixCalendarComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
70
|
-
args: [{ selector: 'atomix-calendar', template: "<p-calendar\n [(ngModel)]=\"selectedDate\"\n [selectionMode]=\"selectionMode\"\n [showButtonBar]=\"true\"\n [dateFormat]=\"'mm/dd/yy'\"\n [showOtherMonths]=\"true\"\n [showOnFocus]=\"true\"\n [locale]=\"enLocale\"\n [showIcon]=\"true\"\n [placeholder]=\"placeholder\"\n [styleClass]=\"styleClass\"\n [inputStyleClass]=\"inputStyleClass\"\n (ngModelChange)=\"onDateRangeChange($event)\"\n appendTo=\"body\"\n [showClear]=\"true\"\n [disabled]=\"disabled\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n>\n</p-calendar>\n", styles: ["
|
|
70
|
+
args: [{ selector: 'atomix-calendar', template: "<p-calendar\n [(ngModel)]=\"selectedDate\"\n [selectionMode]=\"selectionMode\"\n [showButtonBar]=\"true\"\n [dateFormat]=\"'mm/dd/yy'\"\n [showOtherMonths]=\"true\"\n [showOnFocus]=\"true\"\n [locale]=\"enLocale\"\n [showIcon]=\"true\"\n [placeholder]=\"placeholder\"\n [styleClass]=\"styleClass\"\n [inputStyleClass]=\"inputStyleClass\"\n (ngModelChange)=\"onDateRangeChange($event)\"\n appendTo=\"body\"\n [showClear]=\"true\"\n [disabled]=\"disabled\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n>\n</p-calendar>\n", styles: ["::ng-deep .p-calendar{button{background-color:transparent!important}}\n"] }]
|
|
71
71
|
}], propDecorators: { placeholder: [{
|
|
72
72
|
type: Input
|
|
73
73
|
}], selectionMode: [{
|
|
@@ -6,10 +6,10 @@ export class AtomixCardComponent {
|
|
|
6
6
|
footer;
|
|
7
7
|
content;
|
|
8
8
|
class;
|
|
9
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
10
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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:12px}\n"], dependencies: [{ kind: "component", type: i1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixCardComponent, decorators: [{
|
|
13
13
|
type: Component,
|
|
14
14
|
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:12px}\n"] }]
|
|
15
15
|
}], propDecorators: { header: [{
|
|
@@ -16,10 +16,10 @@ export class AtomixConfirmationDialogComponent {
|
|
|
16
16
|
onNoClick() {
|
|
17
17
|
this.ref.close(false);
|
|
18
18
|
}
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
20
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixConfirmationDialogComponent, deps: [{ token: i1.DynamicDialogConfig }, { token: i1.DynamicDialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixConfirmationDialogComponent, selector: "atomix-confirmation-dialog", inputs: { message: "message" }, ngImport: i0, template: "<p class=\"global-sub-heading\">\n {{ config?.data?.message }}\n</p>\n\n<div class=\"action-button-container\">\n <atomix-button buttonType=\"outlined\" (buttonClick)=\"onNoClick()\" label=\"No\">\n </atomix-button>\n <atomix-button label=\"Yes\" (buttonClick)=\"onYesClick()\"></atomix-button>\n</div>\n", styles: [".action-button-container{margin-top:1rem;display:flex;justify-content:flex-end;gap:.5rem}@media (max-width: 768px){.dialog-width{width:95%!important}}\n"], dependencies: [{ kind: "component", type: i2.AtomixButtonComponent, selector: "atomix-button", inputs: ["label", "disabled", "loading", "size", "buttonType", "type", "class", "icon", "iconPos", "buttonData"], outputs: ["buttonClick"] }] });
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixConfirmationDialogComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
24
|
args: [{ selector: 'atomix-confirmation-dialog', template: "<p class=\"global-sub-heading\">\n {{ config?.data?.message }}\n</p>\n\n<div class=\"action-button-container\">\n <atomix-button buttonType=\"outlined\" (buttonClick)=\"onNoClick()\" label=\"No\">\n </atomix-button>\n <atomix-button label=\"Yes\" (buttonClick)=\"onYesClick()\"></atomix-button>\n</div>\n", styles: [".action-button-container{margin-top:1rem;display:flex;justify-content:flex-end;gap:.5rem}@media (max-width: 768px){.dialog-width{width:95%!important}}\n"] }]
|
|
25
25
|
}], ctorParameters: () => [{ type: i1.DynamicDialogConfig }, { type: i1.DynamicDialogRef }], propDecorators: { message: [{
|
|
@@ -599,12 +599,12 @@ export class AtomixDaterangeCalendarComponent {
|
|
|
599
599
|
// remove duplicates
|
|
600
600
|
return Array.from(new Set(calEls));
|
|
601
601
|
}
|
|
602
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
603
|
-
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:#000000de;font-weight:400;font-size:.875rem}::ng-deep .p-datepicker table td>span.p-highlight{color:#fff;background:#63c984}::ng-deep .p-datepicker table td{padding:.2rem 0}::ng-deep .p-datepicker table td>span{width:2.8rem;height:2.8rem;border-radius:0%;transition:none}::ng-deep .p-datepicker table td.p-datepicker-today>span{box-shadow:inset 0 0 0 2px #00000061}::ng-deep .p-datepicker table td>span.p-highlight.start-range{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.end-range{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .p-datepicker table td>span.p-highlight.between-range{background:#00c37dad!important}::ng-deep .p-monthpicker-month{width:50%!important}::ng-deep .p-yearpicker-year{width:50%!important}::ng-deep .inline-calendar .p-datepicker table td>span{width:2.4rem;height:2.4rem}::ng-deep .inline-calendar{border-bottom:1px solid #e5e5e5}::ng-deep .atomix-date-range-overlay{border-radius:8px}.overlay-inner{display:flex;gap:1rem;align-items:flex-start;flex-wrap:nowrap}.overlay-left{padding:.75rem .75rem 2rem;text-align:center;border-right:1px solid #e5e5e5}.inline-calendar .overlay-left{padding-bottom:2rem}.input-wrapper{display:flex;align-items:center;gap:.5rem;position:relative}.input-wrapper input[readonly]{cursor:pointer;padding-right:40px!important;border-radius:30px}.input-wrapper input{color:#000000de}.input-wrapper input::placeholder{color:#0009}.input-icon{cursor:pointer;color:#0000008a;position:absolute;right:10px}.input-clear-icon{cursor:pointer;color:#0000008a;position:absolute;right:27px}.preset-list{display:flex;flex-direction:column;gap:0}.preset-btn{justify-content:flex-start;text-align:left;padding-left:8px}.inline-calendar .preset-btn{padding:.3rem .8rem!important}.inline-calendar{gap:0}.preset-btn .p-button-label{display:inline-block}.preset-btn:not(.p-button-outlined){background-color:transparent;color:#111827}.preset-btn:hover{background-color:#f3f6f9}.preset-btn.active,.preset-btn.p-button.active,.preset-btn.custom-active,.preset-btn.p-button.custom-active{background-color:#63b77e!important;color:#fff!important;font-weight:700;line-height:17px;border-radius:12px}.reset-link{text-align:left;cursor:pointer;margin-top:25px;padding:.3rem 1.4rem!important;color:#63b77e;font-weight:600}.atomix-date-range-overlay .overlay-left .reset-link{display:inline-block;margin-top:1rem;color:#2196f3;cursor:pointer}.overlay-right{flex:1;width:230px;max-width:230px}.overlay-inner.inline{flex-direction:row}:host ::ng-deep .p-column-filter-menu .overlay-inner.inline{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important}:host ::ng-deep .p-overlaypanel .overlay-inner.inline{display:flex!important;flex-direction:row!important}.overlay-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}.atomix-overlay-calendar ::ng-deep .p-datepicker{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: i3.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
602
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDaterangeCalendarComponent, deps: [{ token: i1.DatePipe }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
603
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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:30px}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: i3.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
604
604
|
}
|
|
605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDaterangeCalendarComponent, decorators: [{
|
|
606
606
|
type: Component,
|
|
607
|
-
args: [{ selector: 'atomix-daterange-calendar', template: "<div>\n <ng-container *ngIf=\"!inline; else inlineBlock\">\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (click)=\"overlayPanel?.toggle($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\" (click)=\"overlayPanel?.toggle($event)\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n\n </div>\n\n <p-overlayPanel #overlayPanel [dismissable]=\"true\" appendTo=\"body\" styleClass=\"atomix-date-range-overlay\" (onShow)=\"onOverlayShow()\" (onHide)=\"onOverlayHide()\">\n <div class=\"overlay-inner\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </p-overlayPanel>\n </ng-container>\n\n <ng-template #inlineBlock>\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n </div>\n <div class=\"overlay-inner inline-calendar flex\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: ["::ng-deep .p-calendar button{background-color:transparent!important}::ng-deep .p-overlaypanel .p-overlaypanel-content{margin-top:0!important}::ng-deep .p-datepicker{border:none!important;border-radius:8px}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:#fff;background:#63c984;padding:1rem!important}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:#fff;background:#63b77e;padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:1rem!important}::ng-deep .p-datepicker table th{border-bottom:1px solid rgba(0,0,0,.12);color
|
|
607
|
+
args: [{ selector: 'atomix-daterange-calendar', template: "<div>\n <ng-container *ngIf=\"!inline; else inlineBlock\">\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (click)=\"overlayPanel?.toggle($event)\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\" (click)=\"overlayPanel?.toggle($event)\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n\n </div>\n\n <p-overlayPanel #overlayPanel [dismissable]=\"true\" appendTo=\"body\" styleClass=\"atomix-date-range-overlay\" (onShow)=\"onOverlayShow()\" (onHide)=\"onOverlayHide()\">\n <div class=\"overlay-inner\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </p-overlayPanel>\n </ng-container>\n\n <ng-template #inlineBlock>\n <div [ngClass]=\"styleClass\" class=\"input-wrapper\">\n <input\n pInputText\n type=\"text\"\n [ngClass]=\"inputStyleClass\"\n [placeholder]=\"placeholder\"\n [value]=\"getDateRangeLabel()\"\n readonly\n [disabled]=\"disabled\"\n (keydown)=\"onInputKeyDown($event)\"\n />\n <i class=\"pi pi-calendar input-icon\" title=\"Open calendar\"></i>\n <i *ngIf=\"hasSelection\" class=\"pi pi-times input-clear-icon\" title=\"Clear\" tabindex=\"0\" (click)=\"clearAndStop($event)\" (keydown.enter)=\"clearAndStop($event)\" (keydown.space)=\"clearAndStop($event)\"></i>\n </div>\n <div class=\"overlay-inner inline-calendar flex\">\n <div class=\"overlay-left\">\n <div class=\"preset-list\">\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('today')\" [ngClass]=\"{ 'active': selectedPreset === 'today' }\" label=\"Today\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('yesterday')\" [ngClass]=\"{ 'active': selectedPreset === 'yesterday' }\" label=\"Yesterday\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last7days')\" [ngClass]=\"{ 'active': selectedPreset === 'last7days' }\" label=\"Last 7 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last30days')\" [ngClass]=\"{ 'active': selectedPreset === 'last30days' }\" label=\"Last 30 days\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last3months')\" [ngClass]=\"{ 'active': selectedPreset === 'last3months' }\" label=\"Last 3 months\"></button>\n <button pButton pRipple type=\"button\" class=\"preset-btn\" (click)=\"applyPreset('last6months')\" [ngClass]=\"{ 'active': selectedPreset === 'last6months' }\" label=\"Last 6 months\"></button>\n <a class=\"reset-link\" (click)=\"resetAndClose()\">Reset</a>\n </div>\n </div>\n <div class=\"overlay-right\">\n <p-calendar [(ngModel)]=\"modelDate\" [selectionMode]=\"'range'\" [inline]=\"true\" [dateFormat]=\"'mm/dd/yyyy'\" [showOtherMonths]=\"true\" [locale]=\"enLocale\" [showIcon]=\"false\" [styleClass]=\"'atomix-overlay-calendar'\" (ngModelChange)=\"onModelChange($event)\" (onMonthChange)=\"onCalendarViewChanged($event)\" (onYearChange)=\"onCalendarViewChanged($event)\" [disabled]=\"disabled\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"></p-calendar>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: ["::ng-deep .p-calendar button{background-color:transparent!important}::ng-deep .p-overlaypanel .p-overlaypanel-content{margin-top:0!important}::ng-deep .p-datepicker{border:none!important;border-radius:8px}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month{color:#63b77e;transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight{color:#fff;background:#63c984;padding:1rem!important}::ng-deep .p-datepicker .p-monthpicker .p-monthpicker-month{padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight{color:#fff;background:#63b77e;padding:1rem!important}::ng-deep .p-datepicker .p-yearpicker .p-yearpicker-year{padding:1rem!important}::ng-deep .p-datepicker table th{border-bottom:1px solid rgba(0,0,0,.12);color: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:30px}.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"] }]
|
|
608
608
|
}], ctorParameters: () => [{ type: i1.DatePipe }, { type: i0.Renderer2 }], propDecorators: { placeholder: [{
|
|
609
609
|
type: Input
|
|
610
610
|
}], styleClass: [{
|
|
@@ -7,10 +7,10 @@ export class AtomixDividerComponent {
|
|
|
7
7
|
layout = 'horizontal';
|
|
8
8
|
type = 'solid';
|
|
9
9
|
align;
|
|
10
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
11
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixDividerComponent, selector: "atomix-divider", inputs: { style: "style", styleClass: "styleClass", layout: "layout", type: "type", align: "align" }, ngImport: i0, template: "<p-divider\n [layout]=\"layout\"\n [type]=\"type\"\n [align]=\"align\"\n [style]=\"style\"\n [styleClass]=\"styleClass\"\n></p-divider>\n", dependencies: [{ kind: "component", type: i1.Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
|
|
12
12
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDividerComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
15
|
args: [{ selector: 'atomix-divider', template: "<p-divider\n [layout]=\"layout\"\n [type]=\"type\"\n [align]=\"align\"\n [style]=\"style\"\n [styleClass]=\"styleClass\"\n></p-divider>\n" }]
|
|
16
16
|
}], propDecorators: { style: [{
|
|
@@ -61,12 +61,12 @@ export class AtomixDropdownComponent {
|
|
|
61
61
|
onFilter(event) {
|
|
62
62
|
this.filerValue.next(event);
|
|
63
63
|
}
|
|
64
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
65
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
64
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
65
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixDropdownComponent, selector: "atomix-dropdown", inputs: { options: "options", selectedValues: "selectedValues", optionValue: "optionValue", placeholder: "placeholder", optionLabel: "optionLabel", filter: "filter", name: "name", dropDownStyleClass: "dropDownStyleClass", withIcon: "withIcon", disabled: "disabled", showClear: "showClear", iconName: "iconName", containerClass: "containerClass", label: "label", isLabelRequired: "isLabelRequired" }, outputs: { handleDropdownValueChange: "handleDropdownValueChange", handleOnFilter: "handleOnFilter" }, ngImport: i0, template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-dropdown\n [options]=\"options\"\n [(ngModel)]=\"selectedValues\"\n (onChange)=\"onChange($event)\"\n [optionValue]=\"optionValue\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [filter]=\"filter\"\n [filterBy]=\"optionLabel\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [styleClass]=\"dropDownStyleClass + ' dropdown'\"\n (onFilter)=\"onFilter($event)\"\n [placeholder]=\"placeholder\"\n>\n <ng-template let-option pTemplate=\"item\">\n <div class=\"custom-item\">\n <i\n [ngClass]=\"option.dropdownIcon\"\n class=\"dropdown-logo\"\n *ngIf=\"option.dropdownIcon\"\n ></i>\n <img\n [alt]=\"option.dropdownImage\"\n [src]=\"option.dropdownImage\"\n *ngIf=\"option.dropdownImage\"\n class=\"dropdown-image\"\n />\n\n <span>{{ option[optionLabel] }}</span>\n </div>\n </ng-template>\n</p-dropdown>\n", styles: ["::ng-deep .p-dropdown-panel{margin-top:5px!important}.dropdown-image{width:25px;margin-right:.7rem}.dropdown-logo{text-align:center;font-size:25px;margin-right:.7rem}::ng-deep .dropdown{margin-top:.2rem!important;border-radius:30px;.p-inputtext{padding:1rem!important}}.error-asterisk{color:red}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
66
66
|
}
|
|
67
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDropdownComponent, decorators: [{
|
|
68
68
|
type: Component,
|
|
69
|
-
args: [{ selector: 'atomix-dropdown', template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-dropdown\n [options]=\"options\"\n [(ngModel)]=\"selectedValues\"\n (onChange)=\"onChange($event)\"\n [optionValue]=\"optionValue\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [filter]=\"filter\"\n [filterBy]=\"optionLabel\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [styleClass]=\"dropDownStyleClass + ' dropdown'\"\n (onFilter)=\"onFilter($event)\"\n [placeholder]=\"placeholder\"\n>\n <ng-template let-option pTemplate=\"item\">\n <div class=\"custom-item\">\n <i\n [ngClass]=\"option.dropdownIcon\"\n class=\"dropdown-logo\"\n *ngIf=\"option.dropdownIcon\"\n ></i>\n <img\n [alt]=\"option.dropdownImage\"\n [src]=\"option.dropdownImage\"\n *ngIf=\"option.dropdownImage\"\n class=\"dropdown-image\"\n />\n\n <span>{{ option[optionLabel] }}</span>\n </div>\n </ng-template>\n</p-dropdown>\n", styles: ["::ng-deep .p-dropdown-panel{margin-top:5px!important}.dropdown-image{width:25px;margin-right:.7rem}.dropdown-logo{text-align:center;font-size:25px;margin-right:.7rem}::ng-deep .dropdown{margin-top:.2rem!important;border-radius:30px
|
|
69
|
+
args: [{ selector: 'atomix-dropdown', template: "<label *ngIf=\"label\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-dropdown\n [options]=\"options\"\n [(ngModel)]=\"selectedValues\"\n (onChange)=\"onChange($event)\"\n [optionValue]=\"optionValue\"\n [optionLabel]=\"optionLabel\"\n [showClear]=\"showClear\"\n [filter]=\"filter\"\n [filterBy]=\"optionLabel\"\n appendTo=\"body\"\n [disabled]=\"disabled\"\n [styleClass]=\"dropDownStyleClass + ' dropdown'\"\n (onFilter)=\"onFilter($event)\"\n [placeholder]=\"placeholder\"\n>\n <ng-template let-option pTemplate=\"item\">\n <div class=\"custom-item\">\n <i\n [ngClass]=\"option.dropdownIcon\"\n class=\"dropdown-logo\"\n *ngIf=\"option.dropdownIcon\"\n ></i>\n <img\n [alt]=\"option.dropdownImage\"\n [src]=\"option.dropdownImage\"\n *ngIf=\"option.dropdownImage\"\n class=\"dropdown-image\"\n />\n\n <span>{{ option[optionLabel] }}</span>\n </div>\n </ng-template>\n</p-dropdown>\n", styles: ["::ng-deep .p-dropdown-panel{margin-top:5px!important}.dropdown-image{width:25px;margin-right:.7rem}.dropdown-logo{text-align:center;font-size:25px;margin-right:.7rem}::ng-deep .dropdown{margin-top:.2rem!important;border-radius:30px;.p-inputtext{padding:1rem!important}}.error-asterisk{color:red}\n"] }]
|
|
70
70
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { options: [{
|
|
71
71
|
type: Input
|
|
72
72
|
}], selectedValues: [{
|
|
@@ -28,10 +28,10 @@ export class AtomixDynamicDialogComponent {
|
|
|
28
28
|
const dialogRef = this.dialogService.open(component, finalConfig);
|
|
29
29
|
return dialogRef;
|
|
30
30
|
}
|
|
31
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
32
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDynamicDialogComponent, deps: [{ token: i1.DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixDynamicDialogComponent, selector: "atomix-dynamic-dialog", ngImport: i0, template: "", styles: [""] });
|
|
33
33
|
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixDynamicDialogComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
args: [{ selector: 'atomix-dynamic-dialog', template: "" }]
|
|
37
37
|
}], ctorParameters: () => [{ type: i1.DialogService }] });
|
package/esm2022/lib/lib/atomix-form/atomix-form-autocomplete/atomix-form-autocomplete.component.mjs
CHANGED
|
@@ -29,10 +29,10 @@ export class AtomixFormAutocompleteComponent {
|
|
|
29
29
|
get control() {
|
|
30
30
|
return this.form.get(this.controlName);
|
|
31
31
|
}
|
|
32
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
32
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixFormAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixFormAutocompleteComponent, selector: "atomix-form-autocomplete", inputs: { controlName: "controlName", form: "form", label: "label", suggestions: "suggestions", placeholder: "placeholder", type: "type", tooltip: "tooltip", styleClass: "styleClass", isLabelRequired: "isLabelRequired", tooltipPosition: "tooltipPosition", field: "field", dropdown: "dropdown" }, outputs: { queryEvent: "queryEvent", onSelect: "onSelect" }, ngImport: i0, template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-autoComplete\n [appendTo]=\"'body'\"\n [formControl]=\"control\"\n [id]=\"controlName\"\n [suggestions]=\"suggestions\"\n [placeholder]=\"placeholder\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n field=\"name\"\n (completeMethod)=\"onQuery($event)\"\n (onSelect)=\"onOptionSelected($event)\"\n [showClear]=\"true\"\n [dropdown]=\"dropdown\"\n (onClear)=\"this.onSelect.emit($event)\"\n [styleClass]=\"styleClass + ' lib-form-autocomplete'\"\n/>\n", styles: ["::ng-deep .lib-form-autocomplete{margin-top:.2rem!important}::ng-deep .lib-form-autocomplete input{border-top-left-radius:30px;border-bottom-left-radius:30px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: "component", type: i4.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"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixFormAutocompleteComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
args: [{ selector: 'atomix-form-autocomplete', template: "<label *ngIf=\"label\" [for]=\"controlName\" class=\"ml-2\"\n >{{ label }}\n <span *ngIf=\"isLabelRequired\" class=\"error-asterisk\">*</span></label\n>\n<p-autoComplete\n [appendTo]=\"'body'\"\n [formControl]=\"control\"\n [id]=\"controlName\"\n [suggestions]=\"suggestions\"\n [placeholder]=\"placeholder\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n field=\"name\"\n (completeMethod)=\"onQuery($event)\"\n (onSelect)=\"onOptionSelected($event)\"\n [showClear]=\"true\"\n [dropdown]=\"dropdown\"\n (onClear)=\"this.onSelect.emit($event)\"\n [styleClass]=\"styleClass + ' lib-form-autocomplete'\"\n/>\n", styles: ["::ng-deep .lib-form-autocomplete{margin-top:.2rem!important}::ng-deep .lib-form-autocomplete input{border-top-left-radius:30px;border-bottom-left-radius:30px}\n"] }]
|
|
38
38
|
}], propDecorators: { controlName: [{
|
|
@@ -21,10 +21,10 @@ export class AtomixFormCalendarComponent {
|
|
|
21
21
|
get control() {
|
|
22
22
|
return this.form.get(this.controlName);
|
|
23
23
|
}
|
|
24
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
24
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixFormCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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:30px!important;margin-top:.2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixFormCalendarComponent, decorators: [{
|
|
28
28
|
type: Component,
|
|
29
29
|
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:30px!important;margin-top:.2rem}\n"] }]
|
|
30
30
|
}], propDecorators: { controlName: [{
|
|
@@ -20,10 +20,10 @@ export class AtomixFormCheckboxComponent {
|
|
|
20
20
|
onChange(event) {
|
|
21
21
|
this.valueChange.emit(event);
|
|
22
22
|
}
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
24
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixFormCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AtomixFormCheckboxComponent, selector: "atomix-form-checkbox", inputs: { binary: "binary", controlName: "controlName", form: "form", inline: "inline", label: "label", tooltip: "tooltip", tooltipPosition: "tooltipPosition", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"inline ? 'checkbox-item-inline' : 'checkbox-item'\">\n <label [htmlFor]=\"controlName\" *ngIf=\"label\" [htmlFor]=\"controlName\">{{\n label\n }}</label>\n <p-checkbox\n [binary]=\"true\"\n [formControl]=\"control\"\n [inputId]=\"controlName\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n (onChange)=\"onChange($event)\"\n ></p-checkbox>\n</div>\n", styles: [".checkbox-item{min-height:72px!important;display:flex;justify-content:space-evenly;flex-direction:column;gap:.5rem}.checkbox-item-inline{display:flex;justify-content:flex-end;flex-direction:row-reverse;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AtomixFormCheckboxComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
args: [{ selector: 'atomix-form-checkbox', template: "<div [ngClass]=\"inline ? 'checkbox-item-inline' : 'checkbox-item'\">\n <label [htmlFor]=\"controlName\" *ngIf=\"label\" [htmlFor]=\"controlName\">{{\n label\n }}</label>\n <p-checkbox\n [binary]=\"true\"\n [formControl]=\"control\"\n [inputId]=\"controlName\"\n [pTooltip]=\"tooltip\"\n [tooltipPosition]=\"tooltipPosition\"\n (onChange)=\"onChange($event)\"\n ></p-checkbox>\n</div>\n", styles: [".checkbox-item{min-height:72px!important;display:flex;justify-content:space-evenly;flex-direction:column;gap:.5rem}.checkbox-item-inline{display:flex;justify-content:flex-end;flex-direction:row-reverse;gap:.5rem}\n"] }]
|
|
29
29
|
}], propDecorators: { binary: [{
|