@softpak/components 0.1.3-beta.9 → 0.1.4-beta.2

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';
@@ -13,7 +13,9 @@ 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 { faXmark } from '@fortawesome/free-solid-svg-icons';
+import * as i1$1 from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
 
 class SpxInputBoxComponent {
     handleFocusIn(ev) {
@@ -1171,53 +1173,56 @@ var SpxInputTypeEnum;
 })(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
 
 class SpxInputTimeModalComponent {
-    constructor() {
+    constructor(modalController) {
+        this.modalController = modalController;
         this.change = new EventEmitter();
+        this.faXmark = faXmark;
         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());
+        this.minuteOptions.push(this.minuteOptions.shift());
     }
     closeDialog() {
         this.modalController.dismiss();
     }
     onChange(value) {
         this.change.emit(value);
+        console.log(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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeModalComponent, deps: [{ token: i1$1.ModalController }], 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-title>Select {{view}}</ion-title>
     <ion-buttons slot="end">
-      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">Close</spx-button>
+      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
+        <fa-icon [icon]="faXmark"></fa-icon>
+      </spx-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding">
+<ion-content class="ion-padding bg-white">
   <!-- Uren -->
-  <div class="grid grid-cols-1 gap-3">
+  <div class="custom-bg 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)">
+      <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
+        <div  *ngFor="let hour of hourOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full 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)">
+      <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
+        <div *ngFor="let minute of minuteOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful 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"] }] }); }
+    `, 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: "ngmodule", type: IonicModule }, { kind: "component", type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeModalComponent, decorators: [{
             type: Component,
@@ -1227,38 +1232,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                     imports: [
                         NgIf,
                         NgFor,
-                        IonButtons,
-                        IonContent,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
+                        IonicModule,
                         SpxButtonComponent,
                         SpxDropdownComponent,
+                        FontAwesomeModule,
                     ],
                     template: `<ion-header>
   <ion-toolbar>
-    <ion-title>Inline Modal</ion-title>
+    <ion-title>Select {{view}}</ion-title>
     <ion-buttons slot="end">
-      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">Close</spx-button>
+      <spx-button [spxSeverity]="typeError" (spxClick)="closeDialog()">
+        <fa-icon [icon]="faXmark"></fa-icon>
+      </spx-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding">
+<ion-content class="ion-padding bg-white">
   <!-- Uren -->
-  <div class="grid grid-cols-1 gap-3">
+  <div class="custom-bg 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)">
+      <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
+        <div  *ngFor="let hour of hourOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-full 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)">
+      <div class="grid grid-cols-4 md:grid-cols-5 gap-3">
+        <div *ngFor="let minute of minuteOptions" class="text-center font-bold custom-square rounded text-gray-900 text-lg p-3 w-ful 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>
@@ -1267,7 +1269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
 </ion-content>
     `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { view: [{
+        }], ctorParameters: () => [{ type: i1$1.ModalController }], propDecorators: { view: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1276,7 +1278,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
             }] } });
 
 class SpxInputTimeComponent {
-    constructor() {
+    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; }
+    constructor(modalController) {
+        this.modalController = modalController;
         this.spxAutofocus = false;
         this.spxSuggestions = [];
         this.spxReadonly = false;
@@ -1286,21 +1297,12 @@ class SpxInputTimeComponent {
         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.minuteOptions = Array.from({ length: 12 }, (_, i) => i * 5).unshift(); // 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();
     }
@@ -1342,21 +1344,22 @@ class SpxInputTimeComponent {
                 view,
             },
         });
-        modal.onDidDismiss().then(() => {
+        modal.onDidDismiss().then((data) => {
             // this.appStore.dispatch(infArticleActions.reset({}));
-        });
-        const { data } = await modal.onDidDismiss();
-        if (data) {
             if (view === 'hours') {
-                this.selectedHour = data; // Update selectedHour with the emitted value
-                console.log('dit is de uur weg');
+                // console.log('hours');
+                // console.log(data);
+                this.selectedHour = data.data;
+                this.openDialog('minutes');
+                this.updateValue();
             }
             else if (view === 'minutes') {
-                this.selectedMinute = data; // Update selectedMinute with the emitted value
-                console.log('dit is de minuut weg');
+                // console.log('minutes');
+                // console.log(data);
+                this.selectedMinute = data.data;
+                this.updateValue();
             }
-            this.updateValue(); // Call updateValue to format and emit the new time
-        }
+        });
         await modal.present();
     }
     updateValue() {
@@ -1371,16 +1374,14 @@ class SpxInputTimeComponent {
             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">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeComponent, deps: [{ token: i1$1.ModalController }], 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" }, 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="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ formattedHour ?? '--' }}</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 class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('minutes')">{{ formattedMinute ?? '--' }}</div>
     </div>
-</div>`, isInline: true, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}\n"] }); }
+</div>`, isInline: true, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpxInputTimeComponent, decorators: [{
             type: Component,
@@ -1389,16 +1390,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                         NgFor,
                         SpxButtonComponent,
                         SpxDropdownComponent,
-                    ], providers: [
-                        ModalController,
+                        IonicModule,
                     ], 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="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('hours')">{{ formattedHour ?? '--' }}</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 class="grow rounded bg-gray-100 p-3 text-xl text-center font-bold" (click)="openDialog('minutes')">{{ formattedMinute ?? '--' }}</div>
     </div>
-</div>`, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}\n"] }]
-        }], propDecorators: { spxName: [{
+</div>`, styles: [".custom-square.selected{background-color:#007bff;color:#fff;border-color:#007bff}.custom-bg{--background: #FFFFFF}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ModalController }], propDecorators: { spxName: [{
                 type: Input
             }], spxAutofocus: [{
                 type: Input