@sapphire-ion/framework 1.2.23 → 1.2.26
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/fesm2022/sapphire-ion-framework.mjs +146 -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/package.json +3 -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
|
@@ -27,8 +27,14 @@ import * as i3 from '@maskito/angular';
|
|
|
27
27
|
import { MaskitoDirective } from '@maskito/angular';
|
|
28
28
|
import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoTimeOptionsGenerator } from '@maskito/kit';
|
|
29
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';
|
|
30
32
|
import { Clipboard } from '@capacitor/clipboard';
|
|
31
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';
|
|
32
38
|
import * as i7 from '@ngx-translate/core';
|
|
33
39
|
import { TranslateModule } from '@ngx-translate/core';
|
|
34
40
|
import { isPossiblePhoneNumber } from 'libphonenumber-js';
|
|
@@ -3064,19 +3070,39 @@ const ROTATIONS = {
|
|
|
3064
3070
|
};
|
|
3065
3071
|
|
|
3066
3072
|
class InputDateComponent extends CustomInput {
|
|
3073
|
+
static { this.FormatISO = 'YYYY-MM-DDThh:mm:ss'; }
|
|
3067
3074
|
setFocus(event) {
|
|
3068
3075
|
if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
|
|
3069
3076
|
this.input.nativeElement.focus();
|
|
3070
3077
|
}
|
|
3071
3078
|
}
|
|
3079
|
+
onResize(event) { this.windowSize.set(window.innerWidth); }
|
|
3072
3080
|
constructor(elementRef) {
|
|
3073
3081
|
super();
|
|
3074
3082
|
this.elementRef = elementRef;
|
|
3075
3083
|
this.configuration = input(new InputDateConfiguration());
|
|
3076
|
-
|
|
3077
|
-
this.
|
|
3078
|
-
|
|
3079
|
-
|
|
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) {
|
|
3080
3106
|
this.momentFormat = 'DD/MM/YYYY HH:mm';
|
|
3081
3107
|
this.options = maskitoDateTimeOptionsGenerator({
|
|
3082
3108
|
dateMode: 'dd/mm/yyyy',
|
|
@@ -3086,11 +3112,11 @@ class InputDateComponent extends CustomInput {
|
|
|
3086
3112
|
timeStep: 1,
|
|
3087
3113
|
});
|
|
3088
3114
|
}
|
|
3089
|
-
else if (this.presentation ==
|
|
3115
|
+
else if (this.presentation == DatePresentation.Date) {
|
|
3090
3116
|
this.momentFormat = 'DD/MM/YYYY';
|
|
3091
3117
|
this.options = maskitoDateOptionsGenerator({ mode: 'dd/mm/yyyy', separator: '/' });
|
|
3092
3118
|
}
|
|
3093
|
-
else if (this.presentation ==
|
|
3119
|
+
else if (this.presentation == DatePresentation.Time) {
|
|
3094
3120
|
this.momentFormat = 'HH:mm';
|
|
3095
3121
|
this.options = maskitoTimeOptionsGenerator({
|
|
3096
3122
|
mode: 'HH:MM',
|
|
@@ -3098,72 +3124,121 @@ class InputDateComponent extends CustomInput {
|
|
|
3098
3124
|
});
|
|
3099
3125
|
}
|
|
3100
3126
|
}
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
|
|
3109
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
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);
|
|
3122
3148
|
}
|
|
3123
|
-
else
|
|
3124
|
-
this.
|
|
3125
|
-
this.runValidation();
|
|
3126
|
-
this.propagateChange(this.value());
|
|
3149
|
+
else {
|
|
3150
|
+
this.propagateChange(null);
|
|
3127
3151
|
}
|
|
3128
3152
|
}
|
|
3129
3153
|
writeValue(obj) {
|
|
3130
3154
|
this.value.set(obj);
|
|
3131
|
-
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');
|
|
3132
3159
|
this.runValidation();
|
|
3133
3160
|
}
|
|
3134
|
-
async Present(
|
|
3135
|
-
if (
|
|
3136
|
-
return popover.present(event);
|
|
3161
|
+
async Present(event) {
|
|
3162
|
+
if (this.interface() == DateInterfaces.Popover) {
|
|
3163
|
+
return this.popover.present(event);
|
|
3137
3164
|
}
|
|
3138
3165
|
else {
|
|
3139
|
-
return modal.present();
|
|
3166
|
+
return this.modal.present();
|
|
3140
3167
|
}
|
|
3141
3168
|
}
|
|
3142
|
-
|
|
3143
|
-
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);
|
|
3144
3194
|
}
|
|
3145
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 }); }
|
|
3146
|
-
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: [
|
|
3147
3197
|
...InputProviderFactory.GetProviders(InputDateComponent),
|
|
3148
3198
|
{ provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
|
|
3149
|
-
], 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"] }] }); }
|
|
3150
3200
|
}
|
|
3151
3201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
3152
3202
|
type: Component,
|
|
3153
3203
|
args: [{ selector: 'input-date, input-date-time, input-time', providers: [
|
|
3154
3204
|
...InputProviderFactory.GetProviders(InputDateComponent),
|
|
3155
3205
|
{ provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
|
|
3156
|
-
], 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"] }]
|
|
3157
3207
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
|
|
3158
3208
|
type: ViewChild,
|
|
3159
3209
|
args: ['input']
|
|
3160
3210
|
}], inputContainer: [{
|
|
3161
3211
|
type: ViewChild,
|
|
3162
3212
|
args: ['inputContainer']
|
|
3213
|
+
}], onResize: [{
|
|
3214
|
+
type: HostListener,
|
|
3215
|
+
args: ['window:resize', ['$event']]
|
|
3216
|
+
}], calendar: [{
|
|
3217
|
+
type: ViewChild,
|
|
3218
|
+
args: ['calendar']
|
|
3163
3219
|
}], datetime: [{
|
|
3164
3220
|
type: ViewChild,
|
|
3165
3221
|
args: [IonDatetime]
|
|
3222
|
+
}], popover: [{
|
|
3223
|
+
type: ViewChild,
|
|
3224
|
+
args: [SIonPopoverComponent]
|
|
3225
|
+
}], modal: [{
|
|
3226
|
+
type: ViewChild,
|
|
3227
|
+
args: [IonModal]
|
|
3166
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'));
|
|
3167
3242
|
|
|
3168
3243
|
class InputDecimalComponent extends CustomInput {
|
|
3169
3244
|
setFocus(event) {
|
|
@@ -3977,17 +4052,24 @@ class ThFilterComponent {
|
|
|
3977
4052
|
this.changeEmitter.emit();
|
|
3978
4053
|
return;
|
|
3979
4054
|
}
|
|
4055
|
+
WillDismiss() {
|
|
4056
|
+
console.log(this.lstInputDate.toArray());
|
|
4057
|
+
this.lstInputDate.forEach(i => i.Dismiss());
|
|
4058
|
+
}
|
|
3980
4059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3981
|
-
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"] }] }); }
|
|
3982
4061
|
}
|
|
3983
4062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThFilterComponent, decorators: [{
|
|
3984
4063
|
type: Component,
|
|
3985
|
-
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"] }]
|
|
3986
4065
|
}], ctorParameters: () => [], propDecorators: { field: [{
|
|
3987
4066
|
type: Input
|
|
3988
4067
|
}], changeEmitter: [{
|
|
3989
4068
|
type: Output,
|
|
3990
4069
|
args: ['change']
|
|
4070
|
+
}], lstInputDate: [{
|
|
4071
|
+
type: ViewChildren,
|
|
4072
|
+
args: [InputDateComponent]
|
|
3991
4073
|
}] } });
|
|
3992
4074
|
|
|
3993
4075
|
class DefaultTableComponent {
|
|
@@ -10453,7 +10535,9 @@ class InputsModule {
|
|
|
10453
10535
|
SIonPopoverModule,
|
|
10454
10536
|
LoadingComponent,
|
|
10455
10537
|
NgVarDirective,
|
|
10456
|
-
OverlayModule
|
|
10538
|
+
OverlayModule,
|
|
10539
|
+
MatDatepickerModule,
|
|
10540
|
+
MatCardModule], exports: [InputBoolComponent,
|
|
10457
10541
|
InputCepComponent,
|
|
10458
10542
|
InputColorComponent,
|
|
10459
10543
|
InputCpfCnpjComponent,
|
|
@@ -10469,14 +10553,19 @@ class InputsModule {
|
|
|
10469
10553
|
InputTelefoneComponent,
|
|
10470
10554
|
InputTextareaComponent,
|
|
10471
10555
|
DownloadButtonComponent] }); }
|
|
10472
|
-
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,
|
|
10473
10560
|
CommonModule,
|
|
10474
10561
|
ReactiveFormsModule,
|
|
10475
10562
|
FormsModule,
|
|
10476
10563
|
ImageComponent,
|
|
10477
10564
|
SIonPopoverModule,
|
|
10478
10565
|
LoadingComponent,
|
|
10479
|
-
OverlayModule
|
|
10566
|
+
OverlayModule,
|
|
10567
|
+
MatDatepickerModule,
|
|
10568
|
+
MatCardModule] }); }
|
|
10480
10569
|
}
|
|
10481
10570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputsModule, decorators: [{
|
|
10482
10571
|
type: NgModule,
|
|
@@ -10493,7 +10582,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10493
10582
|
SIonPopoverModule,
|
|
10494
10583
|
LoadingComponent,
|
|
10495
10584
|
NgVarDirective,
|
|
10496
|
-
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 },
|
|
10497
10592
|
]
|
|
10498
10593
|
}]
|
|
10499
10594
|
}] });
|
|
@@ -10535,7 +10630,8 @@ class DefaultModule {
|
|
|
10535
10630
|
LoadingComponent,
|
|
10536
10631
|
NgVarDirective,
|
|
10537
10632
|
SIonPopoverModule,
|
|
10538
|
-
ContentBlockComponent
|
|
10633
|
+
ContentBlockComponent,
|
|
10634
|
+
CdkDragPlaceholder], exports: [HeaderListComponent,
|
|
10539
10635
|
DefaultListComponent,
|
|
10540
10636
|
DefaultViewComponent,
|
|
10541
10637
|
HeaderViewComponent,
|
|
@@ -10570,7 +10666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10570
10666
|
LoadingComponent,
|
|
10571
10667
|
NgVarDirective,
|
|
10572
10668
|
SIonPopoverModule,
|
|
10573
|
-
ContentBlockComponent
|
|
10669
|
+
ContentBlockComponent,
|
|
10670
|
+
CdkDragPlaceholder
|
|
10574
10671
|
]
|
|
10575
10672
|
}]
|
|
10576
10673
|
}] });
|