@softpak/components 0.1.3-beta.8 → 0.1.3

package/fesm2022/softpak-components-spx-inputs.mjs

@@ -1,6 +1,6 @@
 import { NgIf, NgFor } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChild, inject } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChild } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -12,8 +12,7 @@ import { fromEvent } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { DateTime } from 'luxon';
-import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
-import { ModalController, IonButtons, IonContent, IonHeader, IonToolbar, IonTitle } from '@ionic/angular/standalone';
+import { valuePairToValue } from '@softpak/components/spx-helpers';
 
 class SpxInputBoxComponent {
     handleFocusIn(ev) {
@@ -1167,260 +1166,8 @@ var SpxInputTypeEnum;
     SpxInputTypeEnum["password"] = "password";
     SpxInputTypeEnum["text"] = "text";
     SpxInputTypeEnum["textNumericKeyboard"] = "textNumericKeyboard";
-    SpxInputTypeEnum["time"] = "time";
 })(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
 
-class SpxInputTimeModalComponent {
-    constructor() {
-        this.change = new EventEmitter();
-        this.hourOptions = Array.from({ length: 24 }, (_, i) => i); // 0 to 23
-        this.minuteOptions = Array.from({ length: 12 }, (_, i) => i * 5); // Minutes in incrementen van 5
-        this.modalController = inject(ModalController);
-        this.typeError = SpxSeverityEnum.error;
-        this.hourOptions.push(this.hourOptions.shift());
-    }
-    closeDialog() {
-        this.modalController.dismiss();
-    }
-    onChange(value) {
-        this.change.emit(value);
-        this.modalController.dismiss(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SpxInputTimeModalComponent, isStandalone: true, selector: "spx-input-time-modal", inputs: { view: "view", value: "value" }, outputs: { change: "change" }, ngImport: i0, template: `<ion-header>
-  <ion-toolbar>
-    <ion-title>Inline Modal</ion-title>
-    <ion-buttons slot="end">
-      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">Close</spx-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <!-- Uren -->
-  <div class="grid grid-cols-1 gap-3">
-    <div *ngIf="view === 'hours'" class="flex-wrap gap-2">
-      <p> Select Hour </p>
-      <div class="grid grid-cols-4 gap-3">
-        <div  *ngFor="let hour of hourOptions" class="custom-square rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === hour" (click)="onChange(hour)">
-          {{ hour }}
-        </div>
-      </div>
-    </div>
-    <!-- Minuten -->
-    <div *ngIf="view === 'minutes'" class="grid grid-cols-1 gap-3">
-      <p>Select Minute</p>
-      <div class="grid grid-cols-5 gap-3">
-        <div *ngFor="let minute of minuteOptions" class="custom-square rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === minute" (click)="onChange(minute)">
-          {{ minute }}
-        </div>
-      </div>
-    </div>
-  </div>
-</ion-content>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'spx-input-time-modal',
-                    standalone: true,
-                    imports: [
-                        NgIf,
-                        NgFor,
-                        IonButtons,
-                        IonContent,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
-                        SpxButtonComponent,
-                        SpxDropdownComponent,
-                    ],
-                    template: `<ion-header>
-  <ion-toolbar>
-    <ion-title>Inline Modal</ion-title>
-    <ion-buttons slot="end">
-      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">Close</spx-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content class="ion-padding">
-  <!-- Uren -->
-  <div class="grid grid-cols-1 gap-3">
-    <div *ngIf="view === 'hours'" class="flex-wrap gap-2">
-      <p> Select Hour </p>
-      <div class="grid grid-cols-4 gap-3">
-        <div  *ngFor="let hour of hourOptions" class="custom-square rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === hour" (click)="onChange(hour)">
-          {{ hour }}
-        </div>
-      </div>
-    </div>
-    <!-- Minuten -->
-    <div *ngIf="view === 'minutes'" class="grid grid-cols-1 gap-3">
-      <p>Select Minute</p>
-      <div class="grid grid-cols-5 gap-3">
-        <div *ngFor="let minute of minuteOptions" class="custom-square rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none bg-sky-100 focus:ring-sky-300 hover:bg-sky-300 active:bg-sky-300" [class.selected]="value === minute" (click)="onChange(minute)">
-          {{ minute }}
-        </div>
-      </div>
-    </div>
-  </div>
-</ion-content>
-    `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { view: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
-class SpxInputTimeComponent {
-    constructor() {
-        this.spxAutofocus = false;
-        this.spxSuggestions = [];
-        this.spxReadonly = false;
-        this.spxCapitalize = false;
-        this.spxFocused = true;
-        this.spxBlurFromChild = new EventEmitter();
-        this.spxChange = new EventEmitter();
-        this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
-        this.modalController = inject(ModalController);
-        this.severitySuccess = SpxSeverityEnum.success;
-        this.hourOptions = Array.from({ length: 24 }, (_, i) => i).unshift(); // 0 to 23
-        this.minuteOptions = Array.from({ length: 12 }, (_, i) => i * 5); // Minutes in incrementen van 5
-        this.selectedHour = null;
-        this.selectedMinute = null;
-    }
-    get formattedHour() {
-        return this.selectedHour !== null && this.selectedHour < 10 ? `0${this.selectedHour}` : this.selectedHour;
-    }
-    get formattedMinute() {
-        return this.selectedMinute !== null && this.selectedMinute < 10 ? `0${this.selectedMinute}` : this.selectedMinute;
-    }
-    get hour() { return this.value?.value ? DateTime.fromISO(this.value.value).hour : null; }
-    get minute() { return this.value?.value ? DateTime.fromISO(this.value.value).minute : null; }
-    spxSetFocus() {
-        this.inputRef?.nativeElement?.focus();
-    }
-    componentDidLoad() {
-        if (this.spxAutofocus) {
-            this.spxFocus.emit();
-            this.spxSetFocus();
-        }
-    }
-    handleBlur() {
-        this.spxBlurFromChild.emit();
-    }
-    handleFocus() {
-        this.spxFocus.emit();
-    }
-    handleDescriptionInput(event) {
-        this.value = {
-            description: event.target ? event.target.value : null,
-            value: event.target ? event.target.value : null,
-        };
-        this.spxChange.emit(this.value);
-    }
-    handleSuggestionClick(value) {
-        if (!this.spxReadonly) {
-            this.value = value;
-            this.spxChange.emit(this.value);
-            this.spxFocused = false;
-        }
-    }
-    handleKeyUp() {
-        this.spxFocused = true;
-    }
-    async openDialog(view) {
-        const modal = await this.modalController.create({
-            component: SpxInputTimeModalComponent,
-            componentProps: {
-                value: this.value?.value ?
-                    (view === 'hours' ? DateTime.fromISO(this.value.value).hour : DateTime.fromISO(this.value.value).minute) : undefined,
-                view,
-            },
-        });
-        modal.onDidDismiss().then(() => {
-            // this.appStore.dispatch(infArticleActions.reset({}));
-        });
-        await modal.present();
-    }
-    updateValue() {
-        if (this.selectedHour !== null && this.selectedMinute !== null) {
-            const formattedHour = this.selectedHour < 10 ? `0${this.selectedHour}` : this.selectedHour;
-            const formattedMinute = this.selectedMinute < 10 ? `0${this.selectedMinute}` : this.selectedMinute;
-            const newValue = `${formattedHour}:${formattedMinute}`;
-            this.value = {
-                description: newValue,
-                value: newValue,
-            };
-            this.spxChange.emit(this.value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SpxInputTimeComponent, isStandalone: true, selector: "spx-input-time", inputs: { spxName: "spxName", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxSuggestions: "spxSuggestions", spxReadonly: "spxReadonly", spxValidators: "spxValidators", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused", spxType: "spxType", value: "value", spxWasInternalUpdate: "spxWasInternalUpdate" }, outputs: { spxBlurFromChild: "spxBlurFromChild", spxChange: "spxChange", spxFocus: "spxFocus" }, providers: [
-            ModalController,
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<div class="relative text-black">
-    <div class="flex items-center justify-around gap-3">
-      <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ hour }}</div>
-      <div class="text-gray text-xl">:</div>
-      <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('minutes')">{{ minute }}</div>
-    </div>
-</div>`, isInline: true, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spx-input-time', standalone: true, imports: [
-                        NgIf,
-                        NgFor,
-                        SpxButtonComponent,
-                        SpxDropdownComponent,
-                    ], providers: [
-                        ModalController,
-                    ], template: `<div class="relative text-black">
-    <div class="flex items-center justify-around gap-3">
-      <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ hour }}</div>
-      <div class="text-gray text-xl">:</div>
-      <div class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('minutes')">{{ minute }}</div>
-    </div>
-</div>`, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}\n"] }]
-        }], propDecorators: { spxName: [{
-                type: Input
-            }], spxAutofocus: [{
-                type: Input
-            }], spxInputMode: [{
-                type: Input
-            }], spxPattern: [{
-                type: Input
-            }], spxSuggestions: [{
-                type: Input
-            }], spxReadonly: [{
-                type: Input
-            }], spxValidators: [{
-                type: Input
-            }], spxCapitalize: [{
-                type: Input
-            }], spxFocused: [{
-                type: Input
-            }], spxType: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], spxBlurFromChild: [{
-                type: Output
-            }], spxChange: [{
-                type: Output
-            }], spxFocus: [{
-                type: Output
-            }], spxWasInternalUpdate: [{
-                type: Input
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }] } });
-
 class SpxInputComponent {
     constructor() {
         this.spxLabel = 'label';
@@ -1505,9 +1252,6 @@ class SpxInputComponent {
             case SpxInputTypeEnum.radio:
                 this.radioInput?.spxFocusIn();
                 break;
-            case SpxInputTypeEnum.time:
-                this.timeInput?.spxSetFocus();
-                break;
         }
     }
     writeValue(value) {
@@ -1535,7 +1279,7 @@ class SpxInputComponent {
                 useExisting: SpxInputComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: SpxInputFloatComponent, descendants: true }, { propertyName: "numberInput", first: true, predicate: SpxInputNumberComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: SpxInputTextComponent, descendants: true }, { propertyName: "timeInput", first: true, predicate: SpxInputTimeComponent, descendants: true }, { propertyName: "radioInput", first: true, predicate: SpxInputRadioComponent, descendants: true }], ngImport: i0, template: `<spx-input-box
+        ], viewQueries: [{ propertyName: "floatInput", first: true, predicate: SpxInputFloatComponent, descendants: true }, { propertyName: "numberInput", first: true, predicate: SpxInputNumberComponent, descendants: true }, { propertyName: "textInput", first: true, predicate: SpxInputTextComponent, descendants: true }, { propertyName: "radioInput", first: true, predicate: SpxInputRadioComponent, descendants: true }], ngImport: i0, template: `<spx-input-box
   [spxFocused]="this.spxFocused"
   [spxLabel]="this.spxLabel"
   [spxReadonly]="this.spxReadonly"
@@ -1624,22 +1368,11 @@ class SpxInputComponent {
       [spxValidators]="this.spxValidators"
       [value]="this.value"
     ></spx-input-radio>
-    <spx-input-time
-      #timeInput
-      *ngIf="this.spxType === 'time'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-time>
   </div>
   <div validation-messages>
     <ng-content></ng-content>
   </div>
-</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTimeComponent, selector: "spx-input-time", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
+</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxCompact", "spxFocused", "spxLabel", "spxReadonly", "spxRequired", "spxShowClear", "spxShowEdit", "spxShowHelp", "spxShowLabel", "spxShowSearch", "spxShowValidationMessages", "spxValue"], outputs: ["spxClear", "spxSearch", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxShowLabel", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1657,7 +1390,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                         SpxInputNumberComponent,
                         SpxInputRadioComponent,
                         SpxInputTextComponent,
-                        SpxInputTimeComponent,
                     ],
                     providers: [
                         {
@@ -1755,17 +1487,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
       [spxValidators]="this.spxValidators"
       [value]="this.value"
     ></spx-input-radio>
-    <spx-input-time
-      #timeInput
-      *ngIf="this.spxType === 'time'"
-      (spxChange)="this.handleChange($event)"
-      (spxFocus)="this.handleFocus()"
-      [spxFocused]="this.spxFocused"
-      [spxName]="this.spxName"
-      [spxReadonly]="this.spxReadonly"
-      [spxValidators]="this.spxValidators"
-      [value]="this.value"
-    ></spx-input-time>
   </div>
   <div validation-messages>
     <ng-content></ng-content>
@@ -1843,9 +1564,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
             }], textInput: [{
                 type: ViewChild,
                 args: [SpxInputTextComponent]
-            }], timeInput: [{
-                type: ViewChild,
-                args: [SpxInputTimeComponent]
             }], radioInput: [{
                 type: ViewChild,
                 args: [SpxInputRadioComponent]