@softpak/components 0.1.3-beta.1 → 0.1.3-beta.11

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 } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChild, inject } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
 import * as i1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -12,7 +12,8 @@ import { fromEvent } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
 import { DateTime } from 'luxon';
-import { valuePairToValue } from '@softpak/components/spx-helpers';
+import { valuePairToValue, SpxSeverityEnum } from '@softpak/components/spx-helpers';
+import { ModalController, IonButtons, IonContent, IonHeader, IonToolbar, IonTitle } from '@ionic/angular/standalone';
 
 class SpxInputBoxComponent {
     handleFocusIn(ev) {
@@ -1166,8 +1167,278 @@ 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({}));
+            if (view === 'hours') {
+                console.log('hours');
+            }
+            else {
+                console.log('minutes');
+            }
+        });
+        // const { data } = await modal.onDidDismiss();
+        // console.log(data);
+        // if (data) {
+        //   if (view === 'hours') {
+        //     this.selectedHour = data; // Update selectedHour with the emitted value
+        //     console.log('dit is de uur weg');
+        //   } else if (view === 'minutes') {
+        //     this.selectedMinute = data; // Update selectedMinute with the emitted value
+        //     console.log('dit is de minuut weg');
+        //   }
+        //   this.updateValue(); // Call updateValue to format and emit the new time
+        // }
+        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';
@@ -1252,6 +1523,9 @@ class SpxInputComponent {
             case SpxInputTypeEnum.radio:
                 this.radioInput?.spxFocusIn();
                 break;
+            case SpxInputTypeEnum.time:
+                this.timeInput?.spxSetFocus();
+                break;
         }
     }
     writeValue(value) {
@@ -1279,7 +1553,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: "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: "timeInput", first: true, predicate: SpxInputTimeComponent, 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"
@@ -1368,11 +1642,22 @@ 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"] }] }); }
+</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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputComponent, decorators: [{
             type: Component,
@@ -1390,6 +1675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                         SpxInputNumberComponent,
                         SpxInputRadioComponent,
                         SpxInputTextComponent,
+                        SpxInputTimeComponent,
                     ],
                     providers: [
                         {
@@ -1487,6 +1773,17 @@ 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>
@@ -1564,6 +1861,9 @@ 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]