@entake/particle 19.0.1 → 19.1.1
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/app/shared/components/paginator/paginator.component.d.ts +9 -1
- package/app/shared/components/radio-buttons/radio-buttons.component.d.ts +36 -0
- package/fesm2022/entake-particle.mjs +100 -13
- package/fesm2022/entake-particle.mjs.map +1 -1
- package/package.json +1 -1
- package/particle.css +1 -1
- package/public_api.d.ts +1 -0
|
@@ -24,6 +24,7 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
|
|
|
24
24
|
readonly showFirstLast: import("@angular/core").InputSignal<boolean>;
|
|
25
25
|
readonly showButtonLabels: import("@angular/core").InputSignal<boolean>;
|
|
26
26
|
readonly showResultsPanel: import("@angular/core").InputSignal<boolean>;
|
|
27
|
+
readonly startingPage: import("@angular/core").InputSignalWithTransform<any, number>;
|
|
27
28
|
readonly text: import("@angular/core").InputSignal<PaginatorText>;
|
|
28
29
|
/**
|
|
29
30
|
* Event Emitter for pagination or page size change.
|
|
@@ -62,6 +63,7 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
|
|
|
62
63
|
* Calculates the number of pages
|
|
63
64
|
*/
|
|
64
65
|
getNumberOfPages(): number;
|
|
66
|
+
private _goToPage;
|
|
65
67
|
/**
|
|
66
68
|
* Goes to a given page and emits a pagination event
|
|
67
69
|
*
|
|
@@ -69,6 +71,12 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
|
|
|
69
71
|
* @param inputFocus
|
|
70
72
|
*/
|
|
71
73
|
goToPage(pageNumber: number, inputFocus?: boolean): void;
|
|
74
|
+
/**
|
|
75
|
+
* Goes to a given page, but does not emit a pagination event
|
|
76
|
+
* @param pageNumber
|
|
77
|
+
* @param inputFocus
|
|
78
|
+
*/
|
|
79
|
+
setActivePage(pageNumber: number, inputFocus?: boolean): void;
|
|
72
80
|
/**
|
|
73
81
|
* Emits a pagination event with the current paginator data
|
|
74
82
|
*/
|
|
@@ -100,5 +108,5 @@ export declare class PaginatorComponent implements OnChanges, AfterViewInit {
|
|
|
100
108
|
*/
|
|
101
109
|
jumpPage(): void;
|
|
102
110
|
static ɵfac: i0.ɵɵFactoryDeclaration<PaginatorComponent, never>;
|
|
103
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<PaginatorComponent, "particle-paginator", never, { "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalLength": { "alias": "totalLength"; "required": false; "isSignal": true; }; "showPages": { "alias": "showPages"; "required": false; "isSignal": true; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; "isSignal": true; }; "showButtonLabels": { "alias": "showButtonLabels"; "required": false; "isSignal": true; }; "showResultsPanel": { "alias": "showResultsPanel"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "paginate": "paginate"; }, never, never, true, never>;
|
|
111
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PaginatorComponent, "particle-paginator", never, { "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; }; "totalLength": { "alias": "totalLength"; "required": false; "isSignal": true; }; "showPages": { "alias": "showPages"; "required": false; "isSignal": true; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; "isSignal": true; }; "showButtonLabels": { "alias": "showButtonLabels"; "required": false; "isSignal": true; }; "showResultsPanel": { "alias": "showResultsPanel"; "required": false; "isSignal": true; }; "startingPage": { "alias": "startingPage"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "paginate": "paginate"; }, never, never, true, never>;
|
|
104
112
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
2
|
+
import { DropdownOption } from '../../models/dropdown-option.model';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class RadioButtonsComponent implements ControlValueAccessor {
|
|
5
|
+
private changeDetectorRef;
|
|
6
|
+
readonly disabled: import("@angular/core").WritableSignal<boolean>;
|
|
7
|
+
readonly value: import("@angular/core").WritableSignal<string>;
|
|
8
|
+
readonly options: import("@angular/core").InputSignal<DropdownOption[]>;
|
|
9
|
+
readonly colorClass: import("@angular/core").InputSignal<string>;
|
|
10
|
+
readonly isDisplayColumn: import("@angular/core").InputSignal<boolean>;
|
|
11
|
+
onChange: (value: any) => void;
|
|
12
|
+
onTouched: () => any;
|
|
13
|
+
/**
|
|
14
|
+
* Set internal value when external value changes
|
|
15
|
+
* @param value the external value
|
|
16
|
+
*/
|
|
17
|
+
writeValue(value: string): void;
|
|
18
|
+
/**
|
|
19
|
+
* Register onChange function
|
|
20
|
+
* @param fn the function to register
|
|
21
|
+
*/
|
|
22
|
+
registerOnChange(fn: any): void;
|
|
23
|
+
/**
|
|
24
|
+
* Register onTouched function
|
|
25
|
+
* @param fn the function to register
|
|
26
|
+
*/
|
|
27
|
+
registerOnTouched(fn: any): void;
|
|
28
|
+
/**
|
|
29
|
+
* Set the disabled state of the component
|
|
30
|
+
* @param isDisabled disabled or not
|
|
31
|
+
*/
|
|
32
|
+
setDisabledState?(isDisabled: boolean): void;
|
|
33
|
+
handleInput(value: string | number): void;
|
|
34
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RadioButtonsComponent, never>;
|
|
35
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonsComponent, "particle-radio-buttons", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "colorClass": { "alias": "colorClass"; "required": false; "isSignal": true; }; "isDisplayColumn": { "alias": "isDisplayColumn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
36
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, inject, ElementRef, Renderer2, input, Directive, Input, HostListener, TemplateRef, ContentChild, Injectable, output, Component, ViewChild, ChangeDetectorRef, forwardRef, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ChangeDetectionStrategy, ContentChildren } from '@angular/core';
|
|
2
|
+
import { NgModule, inject, ElementRef, Renderer2, input, Directive, Input, HostListener, TemplateRef, ContentChild, Injectable, output, Component, ViewChild, ChangeDetectorRef, forwardRef, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ChangeDetectionStrategy, ContentChildren, signal } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, shareReplay, withLatestFrom as withLatestFrom$1, catchError, of, throwError, mergeMap } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
@@ -3512,6 +3512,11 @@ class PaginatorComponent {
|
|
|
3512
3512
|
showFirstLast = input(false);
|
|
3513
3513
|
showButtonLabels = input(true);
|
|
3514
3514
|
showResultsPanel = input(true);
|
|
3515
|
+
startingPage = input(0, {
|
|
3516
|
+
transform: (page) => {
|
|
3517
|
+
setTimeout(() => this.setActivePage(page, false), 0);
|
|
3518
|
+
}
|
|
3519
|
+
});
|
|
3515
3520
|
text = input({
|
|
3516
3521
|
itemsPerPage: 'Items Per Page',
|
|
3517
3522
|
choosePageSize: 'Choose Page Size',
|
|
@@ -3577,13 +3582,7 @@ class PaginatorComponent {
|
|
|
3577
3582
|
getNumberOfPages() {
|
|
3578
3583
|
return Math.ceil(this.totalLength() / this.pageSize);
|
|
3579
3584
|
}
|
|
3580
|
-
|
|
3581
|
-
* Goes to a given page and emits a pagination event
|
|
3582
|
-
*
|
|
3583
|
-
* @param pageNumber
|
|
3584
|
-
* @param inputFocus
|
|
3585
|
-
*/
|
|
3586
|
-
goToPage(pageNumber, inputFocus) {
|
|
3585
|
+
_goToPage(pageNumber, emit, inputFocus) {
|
|
3587
3586
|
this.activePage = pageNumber;
|
|
3588
3587
|
this.pageStartingValue = this.getStartingValueForPage(this.activePage);
|
|
3589
3588
|
this.pageEndingValue = this.getEndingValueForPage(this.activePage);
|
|
@@ -3593,7 +3592,26 @@ class PaginatorComponent {
|
|
|
3593
3592
|
element.focus();
|
|
3594
3593
|
}
|
|
3595
3594
|
}
|
|
3596
|
-
|
|
3595
|
+
if (emit) {
|
|
3596
|
+
this.emitEvent();
|
|
3597
|
+
}
|
|
3598
|
+
}
|
|
3599
|
+
/**
|
|
3600
|
+
* Goes to a given page and emits a pagination event
|
|
3601
|
+
*
|
|
3602
|
+
* @param pageNumber
|
|
3603
|
+
* @param inputFocus
|
|
3604
|
+
*/
|
|
3605
|
+
goToPage(pageNumber, inputFocus) {
|
|
3606
|
+
this._goToPage(pageNumber, true, inputFocus);
|
|
3607
|
+
}
|
|
3608
|
+
/**
|
|
3609
|
+
* Goes to a given page, but does not emit a pagination event
|
|
3610
|
+
* @param pageNumber
|
|
3611
|
+
* @param inputFocus
|
|
3612
|
+
*/
|
|
3613
|
+
setActivePage(pageNumber, inputFocus) {
|
|
3614
|
+
this._goToPage(pageNumber, false, inputFocus);
|
|
3597
3615
|
}
|
|
3598
3616
|
/**
|
|
3599
3617
|
* Emits a pagination event with the current paginator data
|
|
@@ -3665,7 +3683,7 @@ class PaginatorComponent {
|
|
|
3665
3683
|
this.pageJumpInput = '';
|
|
3666
3684
|
}
|
|
3667
3685
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n @if (!showPages() && showResultsPanel()) {\r\n <div class=\"col min_w200\">\r\n <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n @if (totalLength() > 0) {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n </div>\r\n } @else {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n 0 - 0 {{text().of}} 0 {{text().results}}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col center_center pad_lr5\">\r\n <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"config.toggle($event)\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <div class=\"row wrap_reverse center_center\">\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- first -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().firstPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"goToFirst()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- previous -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().previousPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showPages()) {\r\n <div class=\"col pad_5\">\r\n <!-- navigation -->\r\n <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n style=\"flex:1 1 auto;\">\r\n <!-- jump button -->\r\n <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage > 3) {\r\n <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\">...</button>\r\n }\r\n </div>\r\n <!-- nav buttons -->\r\n <div class=\"center_center\" style=\"min-width:180px;\">\r\n <!-- first -->\r\n @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n (click)=\"goToPage(activePage - 2, true)\">\r\n {{activePage - 1}}\r\n </button>\r\n }\r\n <!-- second -->\r\n @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n (click)=\"goToPage(activePage - 1, true)\">\r\n {{activePage}}\r\n </button>\r\n }\r\n <!-- active page -->\r\n <div class=\"row pag_btn active brad_3 content_color\">\r\n <button style=\"cursor:default\"\r\n class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n {{activePage + 1}}\r\n </button>\r\n </div>\r\n <!-- fourth -->\r\n @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n (click)=\"goToPage(activePage + 1, true)\">\r\n {{activePage + 2}}\r\n </button>\r\n }\r\n <!-- fifth -->\r\n @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n (click)=\"goToPage(activePage + 2, true)\">\r\n {{activePage + 3}}\r\n </button>\r\n }\r\n </div>\r\n <!-- jump button -->\r\n <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage < getNumberOfPages() - 4) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\" >...</button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- next -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().nextPage\"\r\n [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- last -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().lastPage\"\r\n [disabled]=\"activePage === numberOfPages - 1\"\r\n (click)=\"goToLast()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n @if (numberOfPages > 0) {\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n </div>\r\n <div class=\"col\">\r\n <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"jumpPage();op.close();config.close();\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #pageSizeTemplate>\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n @for (option of pageSizeOptions(); track option) {\r\n <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n {{option}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3686
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n @if (!showPages() && showResultsPanel()) {\r\n <div class=\"col min_w200\">\r\n <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n @if (totalLength() > 0) {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n </div>\r\n } @else {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n 0 - 0 {{text().of}} 0 {{text().results}}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col center_center pad_lr5\">\r\n <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"config.toggle($event)\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <div class=\"row wrap_reverse center_center\">\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- first -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().firstPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"goToFirst()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- previous -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().previousPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showPages()) {\r\n <div class=\"col pad_5\">\r\n <!-- navigation -->\r\n <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n style=\"flex:1 1 auto;\">\r\n <!-- jump button -->\r\n <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage > 3) {\r\n <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\">...</button>\r\n }\r\n </div>\r\n <!-- nav buttons -->\r\n <div class=\"center_center\" style=\"min-width:180px;\">\r\n <!-- first -->\r\n @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n (click)=\"goToPage(activePage - 2, true)\">\r\n {{activePage - 1}}\r\n </button>\r\n }\r\n <!-- second -->\r\n @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n (click)=\"goToPage(activePage - 1, true)\">\r\n {{activePage}}\r\n </button>\r\n }\r\n <!-- active page -->\r\n <div class=\"row pag_btn active brad_3 content_color\">\r\n <button style=\"cursor:default\"\r\n class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n {{activePage + 1}}\r\n </button>\r\n </div>\r\n <!-- fourth -->\r\n @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n (click)=\"goToPage(activePage + 1, true)\">\r\n {{activePage + 2}}\r\n </button>\r\n }\r\n <!-- fifth -->\r\n @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n (click)=\"goToPage(activePage + 2, true)\">\r\n {{activePage + 3}}\r\n </button>\r\n }\r\n </div>\r\n <!-- jump button -->\r\n <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage < getNumberOfPages() - 4) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\" >...</button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- next -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().nextPage\"\r\n [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- last -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().lastPage\"\r\n [disabled]=\"activePage === numberOfPages - 1\"\r\n (click)=\"goToLast()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n @if (numberOfPages > 0) {\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n </div>\r\n <div class=\"col\">\r\n <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"jumpPage();op.close();config.close();\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #pageSizeTemplate>\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n @for (option of pageSizeOptions(); track option) {\r\n <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n {{option}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3669
3687
|
}
|
|
3670
3688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
3671
3689
|
type: Component,
|
|
@@ -4413,11 +4431,11 @@ class CalendarComponent {
|
|
|
4413
4431
|
this.selectedDate = null;
|
|
4414
4432
|
}
|
|
4415
4433
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n cdkTrapFocus\r\n cdkTrapFocusAutoCapture\r\n class=\"particle_datepicker_options\"\r\n role=\"application\">\r\n <!-- month / year select -->\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAYear\">\r\n @for (year of validYearRange$ | async; track
|
|
4434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n cdkTrapFocus\r\n cdkTrapFocusAutoCapture\r\n class=\"particle_datepicker_options\"\r\n role=\"application\">\r\n <!-- month / year select -->\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAYear\">\r\n @for (year of validYearRange$ | async; track $index) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAMonth\">\r\n <option value=\"0\">{{text.january}}</option>\r\n <option value=\"1\">{{text.february}}</option>\r\n <option value=\"2\">{{text.march}}</option>\r\n <option value=\"3\">{{text.april}}</option>\r\n <option value=\"4\">{{text.may}}</option>\r\n <option value=\"5\">{{text.june}}</option>\r\n <option value=\"6\">{{text.july}}</option>\r\n <option value=\"7\">{{text.august}}</option>\r\n <option value=\"8\">{{text.september}}</option>\r\n <option value=\"9\">{{text.october}}</option>\r\n <option value=\"10\">{{text.november}}</option>\r\n <option value=\"11\">{{text.december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n <div class=\"row wrap space_between\">\r\n @for (dayInMonth of fullMonth$ | async; track $index) {\r\n <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n class=\"particle_datepicker_day\">\r\n @if (dayInMonth.selectable) {\r\n <button #calendarDate\r\n (click)=\"handleDateSelection(dayInMonth)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-date]=\"dayInMonth.date\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n [ngClass]=\"{\r\n 'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n 'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n }\"\r\n class=\"access day_button\">\r\n {{dayInMonth.date}}\r\n </button>\r\n } @else {\r\n <div class=\"day_disabled\">\r\n {{dayInMonth.date}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if (showControls()) {\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (currentDate.selectable) {\r\n @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n } @else {\r\n <button (keyup.escape)=\"closed.emit()\"\r\n (click)=\"selectToday()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n }\r\n }\r\n <button #doneButton\r\n (keyup.escape)=\"closed.emit()\"\r\n (click)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text.saveDate\">\r\n <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OrdinalNumberPipe, name: "ordinalNumber" }] });
|
|
4417
4435
|
}
|
|
4418
4436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
4419
4437
|
type: Component,
|
|
4420
|
-
args: [{ selector: 'particle-calendar', imports: [CdkTrapFocus, FormsModule, NgClass, AsyncPipe, OrdinalNumberPipe], template: "<div #calendarWidgetDiv\r\n cdkTrapFocus\r\n cdkTrapFocusAutoCapture\r\n class=\"particle_datepicker_options\"\r\n role=\"application\">\r\n <!-- month / year select -->\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAYear\">\r\n @for (year of validYearRange$ | async; track
|
|
4438
|
+
args: [{ selector: 'particle-calendar', imports: [CdkTrapFocus, FormsModule, NgClass, AsyncPipe, OrdinalNumberPipe], template: "<div #calendarWidgetDiv\r\n cdkTrapFocus\r\n cdkTrapFocusAutoCapture\r\n class=\"particle_datepicker_options\"\r\n role=\"application\">\r\n <!-- month / year select -->\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAYear\">\r\n @for (year of validYearRange$ | async; track $index) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAMonth\">\r\n <option value=\"0\">{{text.january}}</option>\r\n <option value=\"1\">{{text.february}}</option>\r\n <option value=\"2\">{{text.march}}</option>\r\n <option value=\"3\">{{text.april}}</option>\r\n <option value=\"4\">{{text.may}}</option>\r\n <option value=\"5\">{{text.june}}</option>\r\n <option value=\"6\">{{text.july}}</option>\r\n <option value=\"7\">{{text.august}}</option>\r\n <option value=\"8\">{{text.september}}</option>\r\n <option value=\"9\">{{text.october}}</option>\r\n <option value=\"10\">{{text.november}}</option>\r\n <option value=\"11\">{{text.december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n <div class=\"row wrap space_between\">\r\n @for (dayInMonth of fullMonth$ | async; track $index) {\r\n <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n class=\"particle_datepicker_day\">\r\n @if (dayInMonth.selectable) {\r\n <button #calendarDate\r\n (click)=\"handleDateSelection(dayInMonth)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-date]=\"dayInMonth.date\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n [ngClass]=\"{\r\n 'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n 'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n }\"\r\n class=\"access day_button\">\r\n {{dayInMonth.date}}\r\n </button>\r\n } @else {\r\n <div class=\"day_disabled\">\r\n {{dayInMonth.date}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if (showControls()) {\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (currentDate.selectable) {\r\n @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n } @else {\r\n <button (keyup.escape)=\"closed.emit()\"\r\n (click)=\"selectToday()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n }\r\n }\r\n <button #doneButton\r\n (keyup.escape)=\"closed.emit()\"\r\n (click)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text.saveDate\">\r\n <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"] }]
|
|
4421
4439
|
}], ctorParameters: () => [], propDecorators: { calendarWidgetDiv: [{
|
|
4422
4440
|
type: ViewChild,
|
|
4423
4441
|
args: ['calendarWidgetDiv']
|
|
@@ -8968,6 +8986,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
8968
8986
|
type: Input
|
|
8969
8987
|
}] } });
|
|
8970
8988
|
|
|
8989
|
+
class RadioButtonsComponent {
|
|
8990
|
+
changeDetectorRef = inject(ChangeDetectorRef);
|
|
8991
|
+
disabled = signal(false);
|
|
8992
|
+
value = signal(null);
|
|
8993
|
+
options = input([]);
|
|
8994
|
+
colorClass = input('ok_button_color');
|
|
8995
|
+
isDisplayColumn = input(true);
|
|
8996
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
8997
|
+
onChange = () => {
|
|
8998
|
+
};
|
|
8999
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
9000
|
+
onTouched = () => {
|
|
9001
|
+
};
|
|
9002
|
+
/**
|
|
9003
|
+
* Set internal value when external value changes
|
|
9004
|
+
* @param value the external value
|
|
9005
|
+
*/
|
|
9006
|
+
writeValue(value) {
|
|
9007
|
+
this.value.set(value);
|
|
9008
|
+
this.changeDetectorRef.markForCheck();
|
|
9009
|
+
}
|
|
9010
|
+
/**
|
|
9011
|
+
* Register onChange function
|
|
9012
|
+
* @param fn the function to register
|
|
9013
|
+
*/
|
|
9014
|
+
registerOnChange(fn) {
|
|
9015
|
+
this.onChange = fn;
|
|
9016
|
+
}
|
|
9017
|
+
/**
|
|
9018
|
+
* Register onTouched function
|
|
9019
|
+
* @param fn the function to register
|
|
9020
|
+
*/
|
|
9021
|
+
registerOnTouched(fn) {
|
|
9022
|
+
this.onTouched = fn;
|
|
9023
|
+
}
|
|
9024
|
+
/**
|
|
9025
|
+
* Set the disabled state of the component
|
|
9026
|
+
* @param isDisabled disabled or not
|
|
9027
|
+
*/
|
|
9028
|
+
setDisabledState(isDisabled) {
|
|
9029
|
+
this.disabled.set(isDisabled);
|
|
9030
|
+
this.changeDetectorRef.markForCheck();
|
|
9031
|
+
}
|
|
9032
|
+
handleInput(value) {
|
|
9033
|
+
this.value.set(value);
|
|
9034
|
+
this.onChange(value);
|
|
9035
|
+
}
|
|
9036
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9037
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
9038
|
+
{
|
|
9039
|
+
provide: NG_VALUE_ACCESSOR,
|
|
9040
|
+
useExisting: forwardRef(() => RadioButtonsComponent),
|
|
9041
|
+
multi: true
|
|
9042
|
+
}
|
|
9043
|
+
], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n @for (option of options(); track $index) {\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\"\r\n style=\"cursor:default;\"\r\n (click)=\"handleInput(option.value)\"\r\n [disabled]=\"disabled() || option.disabled\"\r\n [attr.aria-label]=\"option.label\"\r\n >\r\n <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n <div class=\"col\">\r\n <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n <div class=\"circle_20px\"\r\n [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n {{option.label}}\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
9044
|
+
}
|
|
9045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RadioButtonsComponent, decorators: [{
|
|
9046
|
+
type: Component,
|
|
9047
|
+
args: [{ selector: 'particle-radio-buttons', imports: [
|
|
9048
|
+
NgClass
|
|
9049
|
+
], providers: [
|
|
9050
|
+
{
|
|
9051
|
+
provide: NG_VALUE_ACCESSOR,
|
|
9052
|
+
useExisting: forwardRef(() => RadioButtonsComponent),
|
|
9053
|
+
multi: true
|
|
9054
|
+
}
|
|
9055
|
+
], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n @for (option of options(); track $index) {\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\"\r\n style=\"cursor:default;\"\r\n (click)=\"handleInput(option.value)\"\r\n [disabled]=\"disabled() || option.disabled\"\r\n [attr.aria-label]=\"option.label\"\r\n >\r\n <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n <div class=\"col\">\r\n <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n <div class=\"circle_20px\"\r\n [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n {{option.label}}\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n" }]
|
|
9056
|
+
}] });
|
|
9057
|
+
|
|
8971
9058
|
/**
|
|
8972
9059
|
* This interceptor will force the Content-Type header to application/json so that each http call doesn't have to.
|
|
8973
9060
|
*/
|
|
@@ -9767,5 +9854,5 @@ class ObservableContainer {
|
|
|
9767
9854
|
* Generated bundle index. Do not edit.
|
|
9768
9855
|
*/
|
|
9769
9856
|
|
|
9770
|
-
export { AccordionComponent, AccordionContentDirective, AccordionHeaderDirective, AccordionItemDirective, BackgroundCarouselDirective, BaseDataService, CalendarComponent, CheckboxComponent, ColorPickerComponent, DatePickerComponent, DateRangePickerComponent, DialogComponent, DialogService, DropdownComponent, INPUTMASK_VALUE_ACCESSOR, IconSelectComponent, IdleTimeoutComponent, InputMaskComponent, JsonInterceptor, KeyfilterDirective, LayoutFullFramingComponent, LayoutFullwidthSidebarComponent, LoaderComponent, LocalStorageService, MultiSelectComponent, NotificationComponent, NotificationService, ObservableContainer, OrdinalNumberPipe, PaginatorComponent, ParticleIconsModule, PopoverComponent, ProfilePicComponent, ProgressBarComponent, RICH_TEXT_VALUE_ACCESSOR, RichTextComponent, ScrollToTopComponent, SlideoverComponent, SliderComponent, ThemeChangeDetectionService, ThemingService, ToggleSwitchComponent, TooltipDirective, WeekPickerComponent, Z_INDEX_LAYERS };
|
|
9857
|
+
export { AccordionComponent, AccordionContentDirective, AccordionHeaderDirective, AccordionItemDirective, BackgroundCarouselDirective, BaseDataService, CalendarComponent, CheckboxComponent, ColorPickerComponent, DatePickerComponent, DateRangePickerComponent, DialogComponent, DialogService, DropdownComponent, INPUTMASK_VALUE_ACCESSOR, IconSelectComponent, IdleTimeoutComponent, InputMaskComponent, JsonInterceptor, KeyfilterDirective, LayoutFullFramingComponent, LayoutFullwidthSidebarComponent, LoaderComponent, LocalStorageService, MultiSelectComponent, NotificationComponent, NotificationService, ObservableContainer, OrdinalNumberPipe, PaginatorComponent, ParticleIconsModule, PopoverComponent, ProfilePicComponent, ProgressBarComponent, RICH_TEXT_VALUE_ACCESSOR, RadioButtonsComponent, RichTextComponent, ScrollToTopComponent, SlideoverComponent, SliderComponent, ThemeChangeDetectionService, ThemingService, ToggleSwitchComponent, TooltipDirective, WeekPickerComponent, Z_INDEX_LAYERS };
|
|
9771
9858
|
//# sourceMappingURL=entake-particle.mjs.map
|