@sapphire-ion/framework 1.3.8 → 1.3.11

package/fesm2022/sapphire-ion-framework.mjs

@@ -2493,6 +2493,36 @@ class StorageService {
         }
     }
     ;
+    static SanitizeName(original) {
+        if (!original)
+            return 'arquivo';
+        // desfaz encoding se vier
+        let name = original.replace(/\+/g, ' ');
+        try {
+            name = decodeURIComponent(name);
+        }
+        catch { }
+        // remove acentos
+        name = name.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        // remove qualquer path acidental
+        name = name.split('/').pop() ?? name;
+        name = name.split('\\').pop() ?? name;
+        const lastDot = name.lastIndexOf('.');
+        const base = lastDot > 0 ? name.slice(0, lastDot) : name;
+        const ext = lastDot > 0 ? name.slice(lastDot + 1) : '';
+        let safeBase = base
+            .replace(/[#%?&+=]/g, '')
+            .replace(/[<>:"/\\|*]/g, '')
+            .replace(/[\u0000-\u001F]/g, '')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .replace(/ /g, '_')
+            .replace(/_+/g, '_');
+        if (!safeBase)
+            safeBase = 'arquivo';
+        const safeExt = ext.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+        return safeExt ? `${safeBase}.${safeExt}` : safeBase;
+    }
     GetFile(fileUrl, params, post = false) {
         var url;
         if (fileUrl[0] == '/') {
@@ -3168,6 +3198,13 @@ const ROTATIONS = {
 class InputDateComponent extends CustomInput {
     static { this.FormatISO = 'YYYY-MM-DDTHH:mm:ss'; }
     setFocus(event) {
+        if (this.presentation == DatePresentation.Time) {
+            // em vez de focar, já abre o picker/modal
+            if (!event)
+                return;
+            this.Present(event);
+            return;
+        }
         if (this.input && (event == null || event.target == this.inputContainer.nativeElement)) {
             this.input.nativeElement.focus();
         }
@@ -3363,14 +3400,14 @@ class InputDateComponent extends CustomInput {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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)", "keydown": "onKeyDown($event)" } }, providers: [
             ...InputProviderFactory.GetProviders(InputDateComponent),
             { provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
-        ], 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    (keydown)=\"onKeyDown($event)\"\r\n  />\r\n  <ion-button  *ngIf=\"configuration().clearable && readableValue\" tabindex=\"-1\" class=\"absolute right-8 bottom-1\" \r\n                (click)=\"ClearValue($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\"\r\n  >\r\n    <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-2 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}ion-modal{--width: fit-content;--height: fit-content}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+        ], 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    [readOnly]=\"presentation == DatePresentation.Time\"\r\n    [maskito]=\"options\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    (blur)=\"blur.emit($event)\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  />\r\n  <ion-button  *ngIf=\"configuration().clearable && readableValue\" tabindex=\"-1\" class=\"absolute right-8 bottom-1\" \r\n                (click)=\"ClearValue($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\"\r\n  >\r\n    <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-2 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}ion-modal{--width: fit-content;--height: fit-content}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'input-date, input-date-time, input-time', providers: [
                         ...InputProviderFactory.GetProviders(InputDateComponent),
                         { provide: CustomInput, useExisting: forwardRef(() => InputDateComponent) },
-                    ], 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    (keydown)=\"onKeyDown($event)\"\r\n  />\r\n  <ion-button  *ngIf=\"configuration().clearable && readableValue\" tabindex=\"-1\" class=\"absolute right-8 bottom-1\" \r\n                (click)=\"ClearValue($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\"\r\n  >\r\n    <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-2 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}ion-modal{--width: fit-content;--height: fit-content}\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"] }]
+                    ], 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    [readOnly]=\"presentation == DatePresentation.Time\"\r\n    [maskito]=\"options\"\r\n    [disabled]=\"disabled() || loading()\"\r\n    (blur)=\"blur.emit($event)\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n  />\r\n  <ion-button  *ngIf=\"configuration().clearable && readableValue\" tabindex=\"-1\" class=\"absolute right-8 bottom-1\" \r\n                (click)=\"ClearValue($event)\" color=\"medium\" size=\"small\" fill=\"clear\" style=\"--border-radius: .5rem\"\r\n  >\r\n    <ion-icon name=\"close\" slot=\"icon-only\"></ion-icon>\r\n  </ion-button>\r\n  \r\n  <ion-button tabindex=\"-1\" class=\"absolute right-2 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}ion-modal{--width: fit-content;--height: fit-content}\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -5511,6 +5548,13 @@ class InputFileComponent extends CustomInput {
         this.runValidation();
     }
     SetValue(value) {
+        if (value instanceof File) {
+            const safeName = StorageService.SanitizeName(value.name);
+            // Se já estiver ok, evita recriar
+            if (safeName !== value.name) {
+                value = new File([value], safeName, { type: value.type, lastModified: value.lastModified });
+            }
+        }
         this.value.set(value);
         this.SetValueString();
         this.runValidation();