@sapphire-ion/framework 1.2.22 → 1.2.25
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/components/default/default-table/th-filter/th-filter.component.mjs +12 -5
- package/esm2022/lib/components/default/default.module.mjs +6 -3
- package/esm2022/lib/components/inputs/input-date/input-date.component.mjs +116 -44
- package/esm2022/lib/components/inputs/inputs.module.mjs +22 -5
- package/esm2022/lib/services/utils.service.mjs +21 -1
- package/fesm2022/sapphire-ion-framework.mjs +166 -49
- package/fesm2022/sapphire-ion-framework.mjs.map +1 -1
- package/lib/components/default/default-table/th-filter/th-filter.component.d.ts +4 -1
- package/lib/components/default/default.module.d.ts +2 -1
- package/lib/components/inputs/input-date/input-date.component.d.ts +39 -7
- package/lib/components/inputs/inputs.module.d.ts +3 -1
- package/lib/components/stepper/step/step.component.d.ts +1 -1
- package/lib/services/utils.service.d.ts +7 -0
- package/package.json +2 -2
- package/themes/compiled-styles.scss +0 -4
- package/themes/components/inputs/input-date/input-date.component.scss +3 -32
- package/themes/styles/core.styles.scss +45 -9
|
@@ -7,6 +7,7 @@ import { Injectable, InjectionToken, NgModule, Inject, inject, signal, model, Co
|
|
|
7
7
|
import moment from 'moment';
|
|
8
8
|
import { Buffer } from 'buffer';
|
|
9
9
|
import mime from 'mime';
|
|
10
|
+
import { Capacitor } from '@capacitor/core';
|
|
10
11
|
import { BehaviorSubject, firstValueFrom, from, switchMap, Subject, takeUntil, distinctUntilChanged, debounceTime, lastValueFrom, Observable, tap, finalize, share, catchError } from 'rxjs';
|
|
11
12
|
import * as i1$1 from '@angular/common/http';
|
|
12
13
|
import { HttpClient, HttpEventType, HttpHeaders } from '@angular/common/http';
|
|
@@ -26,8 +27,14 @@ import * as i3 from '@maskito/angular';
|
|
|
26
27
|
import { MaskitoDirective } from '@maskito/angular';
|
|
27
28
|
import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
|
|
28
29
|
import { autoUpdate, computePosition, offset, flip, shift, limitShift, arrow } from '@floating-ui/dom';
|
|
30
|
+
import * as i6 from '@angular/material/datepicker';
|
|
31
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
29
32
|
import { Clipboard } from '@capacitor/clipboard';
|
|
30
33
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
34
|
+
import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
|
|
35
|
+
import { MomentDateAdapter, MAT_MOMENT_DATE_FORMATS } from '@angular/material-moment-adapter';
|
|
36
|
+
import { MatCardModule } from '@angular/material/card';
|
|
37
|
+
import { CdkDragPlaceholder } from '@angular/cdk/drag-drop';
|
|
31
38
|
import * as i7 from '@ngx-translate/core';
|
|
32
39
|
import { TranslateModule } from '@ngx-translate/core';
|
|
33
40
|
import { isPossiblePhoneNumber } from 'libphonenumber-js';
|
|
@@ -450,6 +457,25 @@ class Utils {
|
|
|
450
457
|
const blob = await file.blob();
|
|
451
458
|
return { blob, fileName: ph.path.split('/').at(-1) };
|
|
452
459
|
}
|
|
460
|
+
static async PickFile(options) {
|
|
461
|
+
const Pick = await FilePicker.pickFiles(options);
|
|
462
|
+
let lstBlob = Pick.files.map(async (vFile) => {
|
|
463
|
+
let blob = null;
|
|
464
|
+
if (Capacitor.isNativePlatform()) {
|
|
465
|
+
blob = new Blob([await (await fetch(Capacitor.convertFileSrc(vFile.path))).blob()], { type: vFile.mimeType });
|
|
466
|
+
}
|
|
467
|
+
else {
|
|
468
|
+
blob = vFile.blob;
|
|
469
|
+
}
|
|
470
|
+
return {
|
|
471
|
+
blob,
|
|
472
|
+
mimeType: vFile.mimeType,
|
|
473
|
+
name: vFile.name,
|
|
474
|
+
size: vFile.size,
|
|
475
|
+
};
|
|
476
|
+
});
|
|
477
|
+
return Promise.all(lstBlob);
|
|
478
|
+
}
|
|
453
479
|
static FindMimeFromNameOrExtension(pathOrExtension) {
|
|
454
480
|
return mime.getType(pathOrExtension) || 'application/octet-stream';
|
|
455
481
|
}
|
|
@@ -3044,19 +3070,39 @@ const ROTATIONS = {
|
|
|
3044
3070
|
};
|
|
3045
3071
|
|
|
3046
3072
|
class InputDateComponent extends CustomInput {
|
|
3073
|
+
static { this.FormatISO = 'YYYY-MM-DDThh:mm:ss'; }
|
|
3047
3074
|
setFocus(event) {
|
|
3048
3075
|
if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
|
|
3049
3076
|
this.input.nativeElement.focus();
|
|
3050
3077
|
}
|
|
3051
3078
|
}
|
|
3079
|
+
onResize(event) { this.windowSize.set(window.innerWidth); }
|
|
3052
3080
|
constructor(elementRef) {
|
|
3053
3081
|
super();
|
|
3054
3082
|
this.elementRef = elementRef;
|
|
3055
3083
|
this.configuration = input(new InputDateConfiguration());
|
|
3056
|
-
|
|
3057
|
-
this.
|
|
3058
|
-
|
|
3059
|
-
|
|
3084
|
+
// Formato do input html (string)
|
|
3085
|
+
this.momentFormat = 'DD/MM/YYYY HH:mm';
|
|
3086
|
+
//Handle input interface
|
|
3087
|
+
this.windowSize = signal(window.innerWidth);
|
|
3088
|
+
this.interface = computed(() => {
|
|
3089
|
+
return this.windowSize() > window.innerHeight ? DateInterfaces.Popover : DateInterfaces.Modal;
|
|
3090
|
+
});
|
|
3091
|
+
this.DateInterfaces = DateInterfaces;
|
|
3092
|
+
this.presentation = DatePresentation.DateTime;
|
|
3093
|
+
this.readableValue = '';
|
|
3094
|
+
this.DatePresentation = DatePresentation;
|
|
3095
|
+
this.lstHours = lstHours;
|
|
3096
|
+
this.lstMinutes = lstMinutes;
|
|
3097
|
+
this.hour = '00';
|
|
3098
|
+
this.minute = '00';
|
|
3099
|
+
const presentation = this.elementRef.nativeElement.tagName.toLowerCase().replace('input-', '');
|
|
3100
|
+
this.presentation = {
|
|
3101
|
+
'date-time': DatePresentation.DateTime,
|
|
3102
|
+
'input-date': DatePresentation.Date,
|
|
3103
|
+
'input-time': DatePresentation.Time,
|
|
3104
|
+
}[presentation] ?? DatePresentation.DateTime;
|
|
3105
|
+
if (this.presentation == DatePresentation.DateTime) {
|
|
3060
3106
|
this.momentFormat = 'DD/MM/YYYY HH:mm';
|
|
3061
3107
|
this.options = maskitoDateTimeOptionsGenerator({
|
|
3062
3108
|
dateMode: 'dd/mm/yyyy',
|
|
@@ -3066,11 +3112,11 @@ class InputDateComponent extends CustomInput {
|
|
|
3066
3112
|
timeStep: 1,
|
|
3067
3113
|
});
|
|
3068
3114
|
}
|
|
3069
|
-
else if (this.presentation ==
|
|
3115
|
+
else if (this.presentation == DatePresentation.Date) {
|
|
3070
3116
|
this.momentFormat = 'DD/MM/YYYY';
|
|
3071
3117
|
this.options = maskitoDateOptionsGenerator({ mode: 'dd/mm/yyyy', separator: '/' });
|
|
3072
3118
|
}
|
|
3073
|
-
else if (this.presentation ==
|
|
3119
|
+
else if (this.presentation == DatePresentation.Time) {
|
|
3074
3120
|
this.momentFormat = 'HH:mm';
|
|
3075
3121
|
this.options = maskitoTimeOptionsGenerator({
|
|
3076
3122
|
mode: 'HH:MM',
|
|
@@ -3078,72 +3124,121 @@ class InputDateComponent extends CustomInput {
|
|
|
3078
3124
|
});
|
|
3079
3125
|
}
|
|
3080
3126
|
}
|
|
3081
|
-
|
|
3082
|
-
|
|
3083
|
-
|
|
3084
|
-
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
|
|
3092
|
-
|
|
3093
|
-
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3127
|
+
SetValueFromReadable(value) {
|
|
3128
|
+
const m = moment(value, this.momentFormat, true).format(InputDateComponent.FormatISO);
|
|
3129
|
+
this.SetValue(m);
|
|
3130
|
+
}
|
|
3131
|
+
SetValueFromMoment(value) {
|
|
3132
|
+
this.SetValue(value.format(InputDateComponent.FormatISO));
|
|
3133
|
+
}
|
|
3134
|
+
/**
|
|
3135
|
+
* @param obj String in ISO format (YYYY-MM-DDThh:mm:ss)
|
|
3136
|
+
*/
|
|
3137
|
+
SetValue(obj) {
|
|
3138
|
+
this.value.set(obj);
|
|
3139
|
+
this.momentValue = moment(this.value(), InputDateComponent.FormatISO, true);
|
|
3140
|
+
this.readableValue = this.momentValue.format(this.momentFormat.toString());
|
|
3141
|
+
this.calendar.activeDate = this.momentValue; // set the active date to the selected date
|
|
3142
|
+
this.calendar.updateTodaysDate(); // update calendar state
|
|
3143
|
+
this.hour = this.momentValue.get('hour').toString().padStart(2, '0');
|
|
3144
|
+
this.minute = this.momentValue.get('minute').toString().padStart(2, '0');
|
|
3145
|
+
this.runValidation();
|
|
3146
|
+
if (this.momentValue.isValid()) {
|
|
3147
|
+
this.propagateChange(obj);
|
|
3102
3148
|
}
|
|
3103
|
-
else
|
|
3104
|
-
this.
|
|
3105
|
-
this.runValidation();
|
|
3106
|
-
this.propagateChange(this.value());
|
|
3149
|
+
else {
|
|
3150
|
+
this.propagateChange(null);
|
|
3107
3151
|
}
|
|
3108
3152
|
}
|
|
3109
3153
|
writeValue(obj) {
|
|
3110
3154
|
this.value.set(obj);
|
|
3111
|
-
this.
|
|
3155
|
+
this.momentValue = moment(this.value(), InputDateComponent.FormatISO, true);
|
|
3156
|
+
this.readableValue = this.momentValue.format(this.momentFormat.toString());
|
|
3157
|
+
this.hour = this.momentValue.get('hour').toString().padStart(2, '0');
|
|
3158
|
+
this.minute = this.momentValue.get('minute').toString().padStart(2, '0');
|
|
3112
3159
|
this.runValidation();
|
|
3113
3160
|
}
|
|
3114
|
-
async Present(
|
|
3115
|
-
if (
|
|
3116
|
-
return popover.present(event);
|
|
3161
|
+
async Present(event) {
|
|
3162
|
+
if (this.interface() == DateInterfaces.Popover) {
|
|
3163
|
+
return this.popover.present(event);
|
|
3117
3164
|
}
|
|
3118
3165
|
else {
|
|
3119
|
-
return modal.present();
|
|
3166
|
+
return this.modal.present();
|
|
3120
3167
|
}
|
|
3121
3168
|
}
|
|
3122
|
-
|
|
3123
|
-
this.
|
|
3169
|
+
async Dismiss() {
|
|
3170
|
+
if (this.popover) {
|
|
3171
|
+
this.popover.dismiss();
|
|
3172
|
+
}
|
|
3173
|
+
if (this.modal) {
|
|
3174
|
+
this.modal.dismiss();
|
|
3175
|
+
}
|
|
3176
|
+
}
|
|
3177
|
+
OnChangeHour(event) {
|
|
3178
|
+
if (event == this.hour) {
|
|
3179
|
+
return;
|
|
3180
|
+
}
|
|
3181
|
+
this.hour = event;
|
|
3182
|
+
this.momentValue.set('hour', Number(event));
|
|
3183
|
+
console.log(this.momentValue);
|
|
3184
|
+
this.SetValueFromMoment(this.momentValue);
|
|
3185
|
+
}
|
|
3186
|
+
OnChangeMinute(event) {
|
|
3187
|
+
if (event == this.minute) {
|
|
3188
|
+
return;
|
|
3189
|
+
}
|
|
3190
|
+
this.minute = event;
|
|
3191
|
+
this.momentValue.set('minute', Number(event));
|
|
3192
|
+
console.log(this.momentValue);
|
|
3193
|
+
this.SetValueFromMoment(this.momentValue);
|
|
3124
3194
|
}
|
|
3125
3195
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDateComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputDateComponent, selector: "input-date, input-date-time, input-time", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
3196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputDateComponent, selector: "input-date, input-date-time, input-time", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
|
|
3127
3197
|
...InputProviderFactory.GetProviders(InputDateComponent),
|
|
3128
3198
|
{ provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
|
|
3129
|
-
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "datetime", first: true, predicate: IonDatetime, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event)\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"disabled() || loading()\"\r\n [class.loading]=\"loading()\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <input #input\r\n [ngModel]=\"dtValue\" \r\n (ngModelChange)=\"SetValue($event)\"\r\n [maskito]=\"options\"\r\n [disabled]=\"disabled() || loading()\"\r\n (blur)=\"blur.emit($event)\"\r\n />\r\n \r\n <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present(modal, popover, $event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon [name]=\"presentation == 'time' ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n</div>\r\n\r\n<sion-popover\r\n [anchor]=\"inputContainer\"\r\n #popover \r\n [class.time]=\"presentation == 'time'\" \r\n [class.date]=\"presentation == 'date'\" \r\n [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: popover }\"></ng-container>\r\n</sion-popover>\r\n\r\n<ion-modal \r\n #modal\r\n [class.time]=\"presentation == 'time'\" \r\n [class.date]=\"presentation == 'date'\" \r\n [class.datetime]=\"presentation == 'date-time'\"\r\n>\r\n <ng-template>\r\n <ng-container *ngTemplateOutlet=\"datetimeTemplate; context: { $implicit: modal }\"></ng-container>\r\n </ng-template>\r\n</ion-modal>\r\n\r\n\r\n<ng-template #datetimeTemplate let-parent>\r\n <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n @if(presentation.includes('date')) {\r\n <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"date\" [showAdjacentDays]=\"true\" presentation=\"date\" (ionChange)=\"ChangeDate($event.target.value);\"></ion-datetime>\r\n }\r\n @if(presentation == 'date-time') {\r\n <div class=\"flex flex-col items-center justify-center py-12 h-[21rem]\">\r\n <div class=\"h-full border-r-2 border-primary mask-y/30\"></div>\r\n </div>\r\n }\r\n @if(presentation.includes('time')) {\r\n <div class=\"h-[21rem] flex flex-col items-center justify-center gap-2\">\r\n <ion-icon class=\"text-2xl\" name=\"alarm\"></ion-icon>\r\n <ion-datetime tabindex=\"-1\" [ngModel]=\"value()\" class=\"time\" presentation=\"time\" hourCycle=\"h24\" (ionChange)=\"ChangeDate($event.target.value)\"></ion-datetime>\r\n </div>\r\n }\r\n </div>\r\n</ng-template>", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-popover{--height: auto}ion-popover.time{--width: 8rem}ion-popover.date{--width: 21.5rem}ion-popover.datetime{--width: 29rem}ion-modal{--height: auto}ion-modal.time{--width: 8rem}ion-modal.date{--width: 21.5rem}ion-modal.datetime{--width: 29rem}ion-datetime{--wheel-highlight-background: var(--ion-color-primary) !important}ion-datetime.date{width:21.5rem}ion-datetime.time{width:8rem}\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showAdjacentDays", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss"] }] }); }
|
|
3199
|
+
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "datetime", first: true, predicate: IonDatetime, descendants: true }, { propertyName: "popover", first: true, predicate: SIonPopoverComponent, descendants: true }, { propertyName: "modal", first: true, predicate: IonModal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event)\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"disabled() || loading()\"\r\n [class.loading]=\"loading()\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <input #input\r\n [ngModel]=\"readableValue\" \r\n (ngModelChange)=\"SetValueFromReadable($event);\"\r\n [maskito]=\"options\"\r\n [disabled]=\"disabled() || loading()\"\r\n (blur)=\"blur.emit($event)\"\r\n />\r\n \r\n <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon [name]=\"presentation == DatePresentation.Time ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n</div>\r\n\r\n@if (interface() == DateInterfaces.Popover) {\r\n <sion-popover\r\n #popover \r\n [anchor]=\"inputContainer\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"datetimeTemplate;\"></ng-container>\r\n </sion-popover>\r\n}\r\n@else {\r\n <ion-modal \r\n #modal\r\n [class.time]=\"presentation == DatePresentation.Time\" \r\n [class.date]=\"presentation == DatePresentation.Date\" \r\n [class.datetime]=\"presentation == DatePresentation.DateTime\"\r\n >\r\n <ng-template>\r\n <ng-container *ngTemplateOutlet=\"datetimeTemplate;\"></ng-container>\r\n </ng-template>\r\n </ion-modal>\r\n}\r\n\r\n\r\n<ng-template #datetimeTemplate>\r\n <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n \r\n @if ([DatePresentation.DateTime, DatePresentation.Date].includes(presentation)) {\r\n <mat-calendar #calendar class=\"w-72 text-dark\" \r\n [(selected)]=\"momentValue\" \r\n (selectedChange)=\"SetValueFromMoment($event)\"\r\n ></mat-calendar>\r\n }\r\n @if ([DatePresentation.DateTime, DatePresentation.Time].includes(presentation)) {\r\n <div class=\"flex h-full mask-y/30 items-center justify-center\">\r\n <ion-picker>\r\n <ion-picker-column (ionChange)=\"OnChangeHour($event.target.value.toString())\" [value]=\"hour\">\r\n @for (item of lstHours; track $index) {\r\n <ion-picker-column-option [value]=\"item\">{{item}}</ion-picker-column-option>\r\n }\r\n </ion-picker-column>\r\n <ion-picker-column (ionChange)=\"OnChangeMinute($event.target.value.toString())\" [value]=\"minute\">\r\n @for (item of lstMinutes; track $index) {\r\n <ion-picker-column-option [value]=\"item\">{{item}}</ion-picker-column-option>\r\n }\r\n </ion-picker-column>\r\n </ion-picker>\r\n </div>\r\n }\r\n\r\n </div>\r\n</ng-template>\r\n", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-picker{height:100%;--fade-background-rgb: transparent }\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"], dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPicker, selector: "ion-picker", inputs: ["mode"] }, { kind: "component", type: i1.IonPickerColumn, selector: "ion-picker-column", inputs: ["color", "disabled", "mode", "value"] }, { kind: "component", type: i1.IonPickerColumnOption, selector: "ion-picker-column-option", inputs: ["color", "disabled", "value"] }, { kind: "component", type: i1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: SIonPopoverComponent, selector: "sion-popover", inputs: ["fill", "arrow", "flip", "placement", "height", "width", "anchor"], outputs: ["onWillPresent", "onDidPresent", "onWillDismiss", "onDidDismiss"] }, { kind: "component", type: i6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }] }); }
|
|
3130
3200
|
}
|
|
3131
3201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
3132
3202
|
type: Component,
|
|
3133
3203
|
args: [{ selector: 'input-date, input-date-time, input-time', providers: [
|
|
3134
3204
|
...InputProviderFactory.GetProviders(InputDateComponent),
|
|
3135
3205
|
{ provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
|
|
3136
|
-
], template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event)\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"disabled() || loading()\"\r\n [class.loading]=\"loading()\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <input #input\r\n [ngModel]=\"
|
|
3206
|
+
], template: "<div \r\n #inputContainer\r\n class=\"input-container\" \r\n (click)=\"setFocus($event)\"\r\n [class.required]=\"required()\" \r\n [class.submitted]=\"submitted()\" \r\n [class.invalid]=\"invalid\" \r\n [class.disabled]=\"disabled() || loading()\"\r\n [class.loading]=\"loading()\"\r\n>\r\n <div class=\"input-label\"> \r\n <span class=\"truncate\">\r\n {{label()}} \r\n </span>\r\n </div>\r\n \r\n <input #input\r\n [ngModel]=\"readableValue\" \r\n (ngModelChange)=\"SetValueFromReadable($event);\"\r\n [maskito]=\"options\"\r\n [disabled]=\"disabled() || loading()\"\r\n (blur)=\"blur.emit($event)\"\r\n />\r\n \r\n <ion-button tabindex=\"-1\" class=\"absolute right-1 bottom-1\" (click)=\"Present($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\">\r\n <ion-icon [name]=\"presentation == DatePresentation.Time ? 'time' : 'calendar'\" slot=\"icon-only\"></ion-icon>\r\n </ion-button>\r\n\r\n <div class=\"loading-container\" [class.loading]=\"loading()\">\r\n <ion-spinner></ion-spinner>\r\n </div>\r\n</div>\r\n\r\n@if (interface() == DateInterfaces.Popover) {\r\n <sion-popover\r\n #popover \r\n [anchor]=\"inputContainer\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"datetimeTemplate;\"></ng-container>\r\n </sion-popover>\r\n}\r\n@else {\r\n <ion-modal \r\n #modal\r\n [class.time]=\"presentation == DatePresentation.Time\" \r\n [class.date]=\"presentation == DatePresentation.Date\" \r\n [class.datetime]=\"presentation == DatePresentation.DateTime\"\r\n >\r\n <ng-template>\r\n <ng-container *ngTemplateOutlet=\"datetimeTemplate;\"></ng-container>\r\n </ng-template>\r\n </ion-modal>\r\n}\r\n\r\n\r\n<ng-template #datetimeTemplate>\r\n <div class=\"flex items-center justify-center bg-[--ion-color-light] rounded-xl\" tabindex=\"-1\">\r\n \r\n @if ([DatePresentation.DateTime, DatePresentation.Date].includes(presentation)) {\r\n <mat-calendar #calendar class=\"w-72 text-dark\" \r\n [(selected)]=\"momentValue\" \r\n (selectedChange)=\"SetValueFromMoment($event)\"\r\n ></mat-calendar>\r\n }\r\n @if ([DatePresentation.DateTime, DatePresentation.Time].includes(presentation)) {\r\n <div class=\"flex h-full mask-y/30 items-center justify-center\">\r\n <ion-picker>\r\n <ion-picker-column (ionChange)=\"OnChangeHour($event.target.value.toString())\" [value]=\"hour\">\r\n @for (item of lstHours; track $index) {\r\n <ion-picker-column-option [value]=\"item\">{{item}}</ion-picker-column-option>\r\n }\r\n </ion-picker-column>\r\n <ion-picker-column (ionChange)=\"OnChangeMinute($event.target.value.toString())\" [value]=\"minute\">\r\n @for (item of lstMinutes; track $index) {\r\n <ion-picker-column-option [value]=\"item\">{{item}}</ion-picker-column-option>\r\n }\r\n </ion-picker-column>\r\n </ion-picker>\r\n </div>\r\n }\r\n\r\n </div>\r\n</ng-template>\r\n", styles: [".input-container{position:relative!important}.input-container input{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}ion-picker{height:100%;--fade-background-rgb: transparent }\n", "@property --input-color{syntax: \"<color>\"; initial-value: transparent; inherits: false;}.input-container{position:relative;--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:text;border-radius:.75rem;padding:.25rem .75rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition:--input-color .2s ease-in-out,box-shadow .2s ease-in-out,opacity .2s ease-in-out,filter .2s ease-in-out;--color: var(--ion-color-dark);--input-color: var(--input-background, var(--ion-color-step-250));--shadow: 0 3px 4px -1px rgb(0 0 0 / .1);--inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;--focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);box-shadow:var(--inset-shadow),var(--shadow);will-change:box-shadow,filter opacity;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:radial-gradient(ellipse at 0px top,hsl(from var(--input-color) h s l/.5),hsl(from var(--input-color) h s l/.4)),hsl(from var(--ion-color-light) h s l/.8)}.input-container:hover{--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container:focus-within,.input-container:focus,.input-container.manual-focus{box-shadow:var(--inset-shadow),var(--shadow),var(--focused-shadow);--tw-brightness: brightness(.9);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container .input-label{pointer-events:none;display:flex;height:1rem;width:100%;min-width:0px;max-width:100%;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:1rem;color:var(--color)}.input-container input,.input-container textarea{height:1.5rem;width:100%;border-radius:.375rem;background-color:transparent;font-size:.875rem;line-height:1.25rem;color:var(--ion-color-dark);outline:2px solid transparent;outline-offset:2px}.input-container.loading{cursor:wait!important}.input-container.required .input-label:after{content:\"*\";color:var(--ion-color-danger);vertical-align:bottom}.input-container.submitted.invalid{--input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent)}.input-container.disabled{cursor:not-allowed;opacity:.5;--tw-brightness: brightness(1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.input-container.disabled *{pointer-events:none}.loading-container{position:absolute;pointer-events:none;width:100%;height:100%;top:0;left:0;display:flex;justify-content:end;align-items:center;padding-right:.5rem;will-change:opacity;transition:opacity .2s ease-in-out;overflow:hidden;opacity:0;z-index:10}.loading-container ion-spinner{will-change:auto;transition:transform .2s ease-in-out;transform:translateY(-100%)}.loading-container.loading{opacity:1}.loading-container.loading ion-spinner{transform:translateY(0)}ion-modal::part(content){border-radius:.75rem;border:1px solid var(--ion-color-step-250)}\n"] }]
|
|
3137
3207
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
|
|
3138
3208
|
type: ViewChild,
|
|
3139
3209
|
args: ['input']
|
|
3140
3210
|
}], inputContainer: [{
|
|
3141
3211
|
type: ViewChild,
|
|
3142
3212
|
args: ['inputContainer']
|
|
3213
|
+
}], onResize: [{
|
|
3214
|
+
type: HostListener,
|
|
3215
|
+
args: ['window:resize', ['$event']]
|
|
3216
|
+
}], calendar: [{
|
|
3217
|
+
type: ViewChild,
|
|
3218
|
+
args: ['calendar']
|
|
3143
3219
|
}], datetime: [{
|
|
3144
3220
|
type: ViewChild,
|
|
3145
3221
|
args: [IonDatetime]
|
|
3222
|
+
}], popover: [{
|
|
3223
|
+
type: ViewChild,
|
|
3224
|
+
args: [SIonPopoverComponent]
|
|
3225
|
+
}], modal: [{
|
|
3226
|
+
type: ViewChild,
|
|
3227
|
+
args: [IonModal]
|
|
3146
3228
|
}] } });
|
|
3229
|
+
var DatePresentation;
|
|
3230
|
+
(function (DatePresentation) {
|
|
3231
|
+
DatePresentation[DatePresentation["DateTime"] = 1] = "DateTime";
|
|
3232
|
+
DatePresentation[DatePresentation["Date"] = 2] = "Date";
|
|
3233
|
+
DatePresentation[DatePresentation["Time"] = 3] = "Time";
|
|
3234
|
+
})(DatePresentation || (DatePresentation = {}));
|
|
3235
|
+
var DateInterfaces;
|
|
3236
|
+
(function (DateInterfaces) {
|
|
3237
|
+
DateInterfaces[DateInterfaces["Popover"] = 1] = "Popover";
|
|
3238
|
+
DateInterfaces[DateInterfaces["Modal"] = 2] = "Modal";
|
|
3239
|
+
})(DateInterfaces || (DateInterfaces = {}));
|
|
3240
|
+
const lstHours = Array.from(Array(24).keys()).map(i => i.toString().padStart(2, '0'));
|
|
3241
|
+
const lstMinutes = Array.from(Array(60).keys()).map(i => i.toString().padStart(2, '0'));
|
|
3147
3242
|
|
|
3148
3243
|
class InputDecimalComponent extends CustomInput {
|
|
3149
3244
|
setFocus(event) {
|
|
@@ -3957,17 +4052,24 @@ class ThFilterComponent {
|
|
|
3957
4052
|
this.changeEmitter.emit();
|
|
3958
4053
|
return;
|
|
3959
4054
|
}
|
|
4055
|
+
WillDismiss() {
|
|
4056
|
+
console.log(this.lstInputDate.toArray());
|
|
4057
|
+
this.lstInputDate.forEach(i => i.Dismiss());
|
|
4058
|
+
}
|
|
3960
4059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ThFilterComponent, selector: "th-filter", inputs: { field: "field" }, outputs: { changeEmitter: "change" }, ngImport: i0, template: "<div #anchor class=\"h-5 aspect-square flex items-center justify-center cursor-pointer\">\r\n <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<
|
|
4060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ThFilterComponent, selector: "th-filter", inputs: { field: "field" }, outputs: { changeEmitter: "change" }, viewQueries: [{ propertyName: "lstInputDate", predicate: InputDateComponent, descendants: true }], ngImport: i0, template: "<div #anchor class=\"h-5 aspect-square flex items-center justify-center cursor-pointer\">\r\n <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<ion-popover class=\"th-filter\" fill=\"solid\" #popover triggerAction=\"click\" (onWillDismiss)=\"WillDismiss()\">\r\n <ng-template>\r\n <div class=\"w-72 flex flex-col gap-2 p-2\" >\r\n @if(!['Select', 'Bool', 'String', 'TextArea'].includes(field.type)){\r\n <ion-label class=\"w-full flex items-center justify-center\"> Filtro - {{field.header}} </ion-label>\r\n }\r\n @switch (field.type) {\r\n @case ('String') {\r\n <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n }\r\n @case ('Number') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n </div>\r\n }\r\n @case ('Decimal') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n </div>\r\n }\r\n @case ('Currency') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n </div>\r\n }\r\n @case ('Select') {\r\n <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n }\r\n @case ('TextArea') {\r\n <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n }\r\n @case ('Bool') {\r\n <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n }\r\n @case ('Date') {\r\n <div class=\"size-full grid grid-cols-1 gap-2\">\r\n <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n </div>\r\n }\r\n @case ('DateTime') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n</ion-popover>\r\n", styles: [".th-select{border-radius:0!important}.th-select ion-card{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card ion-item{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card div.w-12 ion-button{--border-width: 1px !important;--border-radius: 0rem 0rem 1rem 0rem !important}\n"], dependencies: [{ kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "component", type: InputDateComponent, selector: "input-date, input-date-time, input-time", inputs: ["configuration"] }, { kind: "component", type: InputDecimalComponent, selector: "input-decimal, input-number, input-currency, input-percentage", inputs: ["configuration"], outputs: ["configurationChange"] }, { kind: "component", type: InputSelectComponent, selector: "input-select", inputs: ["items", "configuration"], outputs: ["itemsChange"] }, { kind: "component", type: InputStringComponent, selector: "input-string", inputs: ["configuration"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
3962
4061
|
}
|
|
3963
4062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, decorators: [{
|
|
3964
4063
|
type: Component,
|
|
3965
|
-
args: [{ selector: 'th-filter', template: "<div #anchor class=\"h-5 aspect-square flex items-center justify-center cursor-pointer\">\r\n <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<
|
|
4064
|
+
args: [{ selector: 'th-filter', template: "<div #anchor class=\"h-5 aspect-square flex items-center justify-center cursor-pointer\">\r\n <ion-icon name=\"filter-circle\" (click)=\"popover.present($event)\" class=\"text-xl align-sub size-full\" [color]=\"isFilterActive ? 'secondary' : 'medium' \"></ion-icon>\r\n</div>\r\n\r\n<ion-popover class=\"th-filter\" fill=\"solid\" #popover triggerAction=\"click\" (onWillDismiss)=\"WillDismiss()\">\r\n <ng-template>\r\n <div class=\"w-72 flex flex-col gap-2 p-2\" >\r\n @if(!['Select', 'Bool', 'String', 'TextArea'].includes(field.type)){\r\n <ion-label class=\"w-full flex items-center justify-center\"> Filtro - {{field.header}} </ion-label>\r\n }\r\n @switch (field.type) {\r\n @case ('String') {\r\n <input-string [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" (blur)=\"Change()\"></input-string>\r\n }\r\n @case ('Number') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-number (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-number>\r\n <input-number (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-number>\r\n </div>\r\n }\r\n @case ('Decimal') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-decimal>\r\n <input-decimal (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-decimal>\r\n </div>\r\n }\r\n @case ('Currency') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Valor M\u00EDnimo\" [configuration]=\"field.configuration\"></input-currency>\r\n <input-currency (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Valor Maximo\" [configuration]=\"field.configuration\"></input-currency>\r\n </div>\r\n }\r\n @case ('Select') {\r\n <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" [configuration]=\"configuration\"></input-select>\r\n }\r\n @case ('TextArea') {\r\n <input-string (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\"></input-string>\r\n }\r\n @case ('Bool') {\r\n <input-select (change)=\"Change()\" [(ngModel)]=\"model\" class=\"th-select\" label=\"Filtro - {{field.header}}\" placeholder=\"\" [configuration]=\"configuration\"></input-select>\r\n }\r\n @case ('Date') {\r\n <div class=\"size-full grid grid-cols-1 gap-2\">\r\n <input-date (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date>\r\n <input-date (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date>\r\n </div>\r\n }\r\n @case ('DateTime') {\r\n <div class=\"grid grid-cols-1 gap-2\">\r\n <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMinimum\" label=\"Data M\u00EDnima\" [configuration]=\"configuration\"></input-date-time>\r\n <input-date-time (change)=\"Change()\" [(ngModel)]=\"modelMaximum\" label=\"Data Maxima\" [configuration]=\"configuration\"></input-date-time>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n</ion-popover>\r\n", styles: [".th-select{border-radius:0!important}.th-select ion-card{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card ion-item{--border-radius: 0 !important;--border-width: 0 !important;border-radius:0!important;border-width:0!important}.th-select ion-card div.w-12 ion-button{--border-width: 1px !important;--border-radius: 0rem 0rem 1rem 0rem !important}\n"] }]
|
|
3966
4065
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
3967
4066
|
type: Input
|
|
3968
4067
|
}], changeEmitter: [{
|
|
3969
4068
|
type: Output,
|
|
3970
4069
|
args: ['change']
|
|
4070
|
+
}], lstInputDate: [{
|
|
4071
|
+
type: ViewChildren,
|
|
4072
|
+
args: [InputDateComponent]
|
|
3971
4073
|
}] } });
|
|
3972
4074
|
|
|
3973
4075
|
class DefaultTableComponent {
|
|
@@ -10433,7 +10535,9 @@ class InputsModule {
|
|
|
10433
10535
|
SIonPopoverModule,
|
|
10434
10536
|
LoadingComponent,
|
|
10435
10537
|
NgVarDirective,
|
|
10436
|
-
OverlayModule
|
|
10538
|
+
OverlayModule,
|
|
10539
|
+
MatDatepickerModule,
|
|
10540
|
+
MatCardModule], exports: [InputBoolComponent,
|
|
10437
10541
|
InputCepComponent,
|
|
10438
10542
|
InputColorComponent,
|
|
10439
10543
|
InputCpfCnpjComponent,
|
|
@@ -10449,14 +10553,19 @@ class InputsModule {
|
|
|
10449
10553
|
InputTelefoneComponent,
|
|
10450
10554
|
InputTextareaComponent,
|
|
10451
10555
|
DownloadButtonComponent] }); }
|
|
10452
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputsModule,
|
|
10556
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputsModule, providers: [
|
|
10557
|
+
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
|
|
10558
|
+
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
|
|
10559
|
+
], imports: [IonicModule,
|
|
10453
10560
|
CommonModule,
|
|
10454
10561
|
ReactiveFormsModule,
|
|
10455
10562
|
FormsModule,
|
|
10456
10563
|
ImageComponent,
|
|
10457
10564
|
SIonPopoverModule,
|
|
10458
10565
|
LoadingComponent,
|
|
10459
|
-
OverlayModule
|
|
10566
|
+
OverlayModule,
|
|
10567
|
+
MatDatepickerModule,
|
|
10568
|
+
MatCardModule] }); }
|
|
10460
10569
|
}
|
|
10461
10570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputsModule, decorators: [{
|
|
10462
10571
|
type: NgModule,
|
|
@@ -10473,7 +10582,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10473
10582
|
SIonPopoverModule,
|
|
10474
10583
|
LoadingComponent,
|
|
10475
10584
|
NgVarDirective,
|
|
10476
|
-
OverlayModule
|
|
10585
|
+
OverlayModule,
|
|
10586
|
+
MatDatepickerModule,
|
|
10587
|
+
MatCardModule
|
|
10588
|
+
],
|
|
10589
|
+
providers: [
|
|
10590
|
+
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
|
|
10591
|
+
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
|
|
10477
10592
|
]
|
|
10478
10593
|
}]
|
|
10479
10594
|
}] });
|
|
@@ -10515,7 +10630,8 @@ class DefaultModule {
|
|
|
10515
10630
|
LoadingComponent,
|
|
10516
10631
|
NgVarDirective,
|
|
10517
10632
|
SIonPopoverModule,
|
|
10518
|
-
ContentBlockComponent
|
|
10633
|
+
ContentBlockComponent,
|
|
10634
|
+
CdkDragPlaceholder], exports: [HeaderListComponent,
|
|
10519
10635
|
DefaultListComponent,
|
|
10520
10636
|
DefaultViewComponent,
|
|
10521
10637
|
HeaderViewComponent,
|
|
@@ -10550,7 +10666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10550
10666
|
LoadingComponent,
|
|
10551
10667
|
NgVarDirective,
|
|
10552
10668
|
SIonPopoverModule,
|
|
10553
|
-
ContentBlockComponent
|
|
10669
|
+
ContentBlockComponent,
|
|
10670
|
+
CdkDragPlaceholder
|
|
10554
10671
|
]
|
|
10555
10672
|
}]
|
|
10556
10673
|
}] });
|