@softpak/components 0.0.0-beta.2 → 0.0.0-beta.200

package/esm2022/spx-inputs/spx-input-radio.component.mjs

@@ -1,54 +1,120 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { NgFor } from '@angular/common';
 import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
+import { fromEvent } from 'rxjs';
+import { valuePairToValue } from '@softpak/components/spx-helpers';
 import * as i0 from "@angular/core";
 export class SpxInputRadioComponent {
     constructor() {
-        this.spxFocused = true;
+        this.focusPosition = 0;
+        this.spxFocused = false;
+        this.spxShowLabel = true;
         this.spxReadonly = false;
         this.spxSuggestions = [];
         this.spxChange = new EventEmitter();
         this.spxFocus = new EventEmitter();
-        this.spxWasInternalUpdate = false;
     }
-    async spxSetFocus() {
-        // this.elYear.focus();
+    spxFocusIn() {
+        this.listenToKeys();
+        this.determineFocusPosition();
     }
-    handleSuggestionClick(value) {
-        this.value = value;
-        this.spxChange.emit(this.value);
+    spxFocusOut() {
+        this.subscriptionKeyDown?.unsubscribe();
+        this.subscriptionKeyUp?.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if ((changes['spxSuggestions'] && changes['spxSuggestions'].previousValue !== changes['spxSuggestions'].currentValue) ||
+            (changes['value'] && changes['value'].previousValue !== changes['value'].currentValue)) {
+            this.determineFocusPosition();
+        }
+    }
+    handleSuggestionClick(valuePair) {
+        if (this.spxReadonly) {
+            console.log('spxInputRadio: clicked, but readonly');
+        }
+        else {
+            console.log('spxInputRadio: clicked');
+            this.select(valuePair);
+        }
+    }
+    determineFocusPosition() {
+        if (this.value && this.spxSuggestions?.length) {
+            const index = this.spxSuggestions.findIndex(valuePair => valuePairToValue(valuePair) === valuePairToValue(this.value));
+            this.focusPosition = index >= 0 ? index : 0;
+        }
+        else {
+            this.focusPosition = 0;
+        }
+    }
+    select(valuePair) {
+        this.focusPosition = 0;
+        this.value = valuePair;
+        this.spxChange.emit(valuePair);
+    }
+    listenToKeys() {
+        this.subscriptionKeyUp = fromEvent(window, 'keyup').subscribe((event) => {
+            if ((event.key === 'ArrowUp' || event.key === 'ArrowLeft') && this.focusPosition > 0) {
+                this.focusPosition = this.focusPosition - 1;
+                this.select(this.spxSuggestions.at(this.focusPosition));
+                event.preventDefault();
+            }
+            if ((event.key === 'ArrowDown' || event.key === 'ArrowRight') && this.focusPosition < this.spxSuggestions.length - 1) {
+                this.focusPosition = this.focusPosition + 1;
+                this.select(this.spxSuggestions.at(this.focusPosition));
+                event.preventDefault();
+            }
+        });
+        this.subscriptionKeyDown = fromEvent(window, 'keydown').subscribe((event) => {
+            if (event.key === 'ArrowDown' ||
+                event.key === 'ArrowLeft' ||
+                event.key === 'ArrowRight' ||
+                event.key === 'ArrowUp') {
+                event.preventDefault();
+            }
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, ngImport: i0, template: `<div class="spx-input-radio__suggestions">
-    <spx-suggestion
-      *ngFor="let valuePair of this.spxSuggestions"
-      [spxDisabled]="this.spxReadonly"
-      [spxSelected]="this.value?.value === this.valuePair?.value"
-      (click)="this.spxReadonly ? undefined : this.handleSuggestionClick(valuePair)">
-      {{this.valuePair?.description}}
-    </spx-suggestion>
-</div>`, isInline: true, styles: [":host{display:block}.spx-input-radio__suggestions{display:grid;grid-gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}.spx-input-radio--readonly{background-color:transparent;border:0;box-sizing:border-box;font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputRadioComponent, isStandalone: true, selector: "spx-input-radio", inputs: { spxName: "spxName", spxValidators: "spxValidators", spxFocused: "spxFocused", spxShowLabel: "spxShowLabel", spxReadonly: "spxReadonly", spxSuggestions: "spxSuggestions", value: "value" }, outputs: { spxChange: "spxChange", spxFocus: "spxFocus" }, usesOnChanges: true, ngImport: i0, template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
+      <spx-suggestion
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        [spxDisabled]="this.spxReadonly"
+        [spxFocused]="this.spxFocused && i === this.focusPosition"
+        [spxSelected]="this.value?.value === this.valuePair?.value"
+        [spxTabbable]="this.focusPosition === i"
+        (pointerdown)="this.handleSuggestionClick(valuePair)">
+        {{this.valuePair?.description}}
+      </spx-suggestion>
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SpxSuggestionComponent, selector: "spx-suggestion", inputs: ["spxDisabled", "spxFocused", "spxSelected", "spxTabbable"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-input-radio', standalone: true, imports: [
+            args: [{
+                    selector: 'spx-input-radio',
+                    standalone: true,
+                    imports: [
                         NgFor,
                         SpxSuggestionComponent,
-                    ], template: `<div class="spx-input-radio__suggestions">
-    <spx-suggestion
-      *ngFor="let valuePair of this.spxSuggestions"
-      [spxDisabled]="this.spxReadonly"
-      [spxSelected]="this.value?.value === this.valuePair?.value"
-      (click)="this.spxReadonly ? undefined : this.handleSuggestionClick(valuePair)">
-      {{this.valuePair?.description}}
-    </spx-suggestion>
-</div>`, styles: [":host{display:block}.spx-input-radio__suggestions{display:grid;grid-gap:8px;grid-template-columns:repeat(2,1fr);margin-top:8px}.spx-input-radio--readonly{background-color:transparent;border:0;box-sizing:border-box;font-size:20px;font-weight:700;margin-right:10px;padding:0;width:100%}\n"] }]
+                    ],
+                    template: `<div class="grid grid-cols-2 gap-2" [class.mt-3]="this.spxShowLabel">
+      <spx-suggestion
+        *ngFor="let valuePair of this.spxSuggestions; let i = index"
+        [spxDisabled]="this.spxReadonly"
+        [spxFocused]="this.spxFocused && i === this.focusPosition"
+        [spxSelected]="this.value?.value === this.valuePair?.value"
+        [spxTabbable]="this.focusPosition === i"
+        (pointerdown)="this.handleSuggestionClick(valuePair)">
+        {{this.valuePair?.description}}
+      </spx-suggestion>
+    </div>`,
+                }]
         }], propDecorators: { spxName: [{
                 type: Input
             }], spxValidators: [{
                 type: Input
             }], spxFocused: [{
                 type: Input
+            }], spxShowLabel: [{
+                type: Input
             }], spxReadonly: [{
                 type: Input
             }], spxSuggestions: [{
@@ -60,4 +126,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
             }], spxFocus: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWlucHV0LXJhZGlvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NvZnRwYWsvY29tcG9uZW50cy9zcHgtaW5wdXRzL3NweC1pbnB1dC1yYWRpby5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2RSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7O0FBMkM1RSxNQUFNLE9BQU8sc0JBQXNCO0lBekNuQztRQTZDVyxlQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLG1CQUFjLEdBQXdCLEVBQUUsQ0FBQztRQUV4QyxjQUFTLEdBQW9DLElBQUksWUFBWSxFQUFxQixDQUFDO1FBQ25GLGFBQVEsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNsRSx5QkFBb0IsR0FBRyxLQUFLLENBQUM7S0FTOUI7SUFSQyxLQUFLLENBQUMsV0FBVztRQUNmLHVCQUF1QjtJQUN6QixDQUFDO0lBRUQscUJBQXFCLENBQUMsS0FBd0I7UUFDNUMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xDLENBQUM7OEdBbEJVLHNCQUFzQjtrR0FBdEIsc0JBQXNCLDhTQWxDdkI7Ozs7Ozs7O09BUUwsd1dBWEgsS0FBSyxtSEFDTCxzQkFBc0I7OzJGQW9DYixzQkFBc0I7a0JBekNsQyxTQUFTOytCQUNFLGlCQUFpQixjQUNmLElBQUksV0FDUDt3QkFDUCxLQUFLO3dCQUNMLHNCQUFzQjtxQkFDdkIsWUFDUzs7Ozs7Ozs7T0FRTDs4QkE0QkksT0FBTztzQkFBZixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNJLFNBQVM7c0JBQWxCLE1BQU07Z0JBQ0csUUFBUTtzQkFBakIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTcHhWYWx1ZVBhaXIgfSBmcm9tICcuL3NweC12YWx1ZS1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgTmdGb3IgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgU3B4U3VnZ2VzdGlvbkNvbXBvbmVudCB9IGZyb20gJ0Bzb2Z0cGFrL2NvbXBvbmVudHMvc3B4LXN1Z2dlc3Rpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcHgtaW5wdXQtcmFkaW8nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdGb3IsXG4gICAgU3B4U3VnZ2VzdGlvbkNvbXBvbmVudCxcbiAgXSxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwic3B4LWlucHV0LXJhZGlvX19zdWdnZXN0aW9uc1wiPlxuICAgIDxzcHgtc3VnZ2VzdGlvblxuICAgICAgKm5nRm9yPVwibGV0IHZhbHVlUGFpciBvZiB0aGlzLnNweFN1Z2dlc3Rpb25zXCJcbiAgICAgIFtzcHhEaXNhYmxlZF09XCJ0aGlzLnNweFJlYWRvbmx5XCJcbiAgICAgIFtzcHhTZWxlY3RlZF09XCJ0aGlzLnZhbHVlPy52YWx1ZSA9PT0gdGhpcy52YWx1ZVBhaXI/LnZhbHVlXCJcbiAgICAgIChjbGljayk9XCJ0aGlzLnNweFJlYWRvbmx5ID8gdW5kZWZpbmVkIDogdGhpcy5oYW5kbGVTdWdnZXN0aW9uQ2xpY2sodmFsdWVQYWlyKVwiPlxuICAgICAge3t0aGlzLnZhbHVlUGFpcj8uZGVzY3JpcHRpb259fVxuICAgIDwvc3B4LXN1Z2dlc3Rpb24+XG48L2Rpdj5gLFxuICBzdHlsZXM6IGBcbiAgOmhvc3Qge1xuICBkaXNwbGF5OiBibG9jaztcbn1cblxuLnNweC1pbnB1dC1yYWRpb19fc3VnZ2VzdGlvbnMge1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLWdhcDogOHB4O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCAxZnIpO1xuICBtYXJnaW4tdG9wOiA4cHg7XG59XG5cbi5zcHgtaW5wdXQtcmFkaW8tLXJlYWRvbmx5IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGJvcmRlcjogMDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZm9udC1zaXplOiAyMHB4O1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgbWFyZ2luLXJpZ2h0OiAxMHB4O1xuICBwYWRkaW5nOiAwO1xuICB3aWR0aDogMTAwJTtcbn1cblxuICBgLFxufSlcbmV4cG9ydCBjbGFzcyBTcHhJbnB1dFJhZGlvQ29tcG9uZW50IHtcbiAgLy8gQEVsZW1lbnQoKSBlbCE6IEhUTUxFbGVtZW50O1xuICBASW5wdXQoKSBzcHhOYW1lPzogc3RyaW5nO1xuICBASW5wdXQoKSBzcHhWYWxpZGF0b3JzITogYW55W107XG4gIEBJbnB1dCgpIHNweEZvY3VzZWQgPSB0cnVlO1xuICBASW5wdXQoKSBzcHhSZWFkb25seSA9IGZhbHNlO1xuICBASW5wdXQoKSBzcHhTdWdnZXN0aW9uczogU3B4VmFsdWVQYWlyPGFueT5bXSA9IFtdO1xuICBASW5wdXQoKSB2YWx1ZT86IFNweFZhbHVlUGFpcjxhbnk+O1xuICBAT3V0cHV0KCkgc3B4Q2hhbmdlOiBFdmVudEVtaXR0ZXI8U3B4VmFsdWVQYWlyPGFueT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxTcHhWYWx1ZVBhaXI8YW55Pj4oKTtcbiAgQE91dHB1dCgpIHNweEZvY3VzOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIHNweFdhc0ludGVybmFsVXBkYXRlID0gZmFsc2U7XG4gIGFzeW5jIHNweFNldEZvY3VzKCkge1xuICAgIC8vIHRoaXMuZWxZZWFyLmZvY3VzKCk7XG4gIH1cblxuICBoYW5kbGVTdWdnZXN0aW9uQ2xpY2sodmFsdWU6IFNweFZhbHVlUGFpcjxhbnk+KSB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICAgIHRoaXMuc3B4Q2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XG4gIH1cbn0iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWlucHV0LXJhZGlvLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NvZnRwYWsvY29tcG9uZW50cy9zcHgtaW5wdXRzL3NweC1pbnB1dC1yYWRpby5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFFdEYsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQzVFLE9BQU8sRUFBZ0IsU0FBUyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9DLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOztBQXFCbkUsTUFBTSxPQUFPLHNCQUFzQjtJQW5CbkM7UUFvQlksa0JBQWEsR0FBRyxDQUFDLENBQUM7UUFJbkIsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUNuQixpQkFBWSxHQUFHLElBQUksQ0FBQztRQUNwQixnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixtQkFBYyxHQUF3QixFQUFFLENBQUM7UUFFeEMsY0FBUyxHQUFvQyxJQUFJLFlBQVksRUFBcUIsQ0FBQztRQUNuRixhQUFRLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7S0FvRW5FO0lBakVDLFVBQVU7UUFDUixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLHNCQUFzQixFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsbUJBQW1CLEVBQUUsV0FBVyxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxDQUFDO0lBQ3hDLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMs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LENBQUM7UUFDSCxJQUFJLENBQUMsbUJBQW1CLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUMxRSxJQUFLLEtBQXVCLENBQUMsR0FBRyxLQUFLLFdBQVc7Z0JBQzdDLEtBQXVCLENBQUMsR0FBRyxLQUFLLFdBQVc7Z0JBQzNDLEtBQXVCLENBQUMsR0FBRyxLQUFLLFlBQVk7Z0JBQzVDLEtBQXVCLENBQUMsR0FBRyxLQUFLLFNBQVMsRUFBRSxDQUFDO2dCQUM3QyxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDekIsQ0FBQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0E5RVUsc0JBQXNCO2tHQUF0QixzQkFBc0IsaVdBWnZCOzs7Ozs7Ozs7O1dBVUQsNERBYlAsS0FBSyxtSEFDTCxzQkFBc0I7OzJGQWNiLHNCQUFzQjtrQkFuQmxDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLE9BQU8sRUFBRTt3QkFDUCxLQUFLO3dCQUNMLHNCQUFzQjtxQkFDdkI7b0JBQ0QsUUFBUSxFQUFFOzs7Ozs7Ozs7O1dBVUQ7aUJBQ1Y7OEJBSVUsT0FBTztzQkFBZixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTTtnQkFDRyxRQUFRO3NCQUFqQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFNpbXBsZUNoYW5nZXMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNweFZhbHVlUGFpciB9IGZyb20gJy4vc3B4LXZhbHVlLWludGVyZmFjZSc7XG5pbXBvcnQgeyBOZ0ZvciB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBTcHhTdWdnZXN0aW9uQ29tcG9uZW50IH0gZnJvbSAnQHNvZnRwYWsvY29tcG9uZW50cy9zcHgtc3VnZ2VzdGlvbic7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24sIGZyb21FdmVudCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdmFsdWVQYWlyVG9WYWx1ZSB9IGZyb20gJ0Bzb2Z0cGFrL2NvbXBvbmVudHMvc3B4LWhlbHBlcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzcHgtaW5wdXQtcmFkaW8nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdGb3IsXG4gICAgU3B4U3VnZ2VzdGlvbkNvbXBvbmVudCxcbiAgXSxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMiBnYXAtMlwiIFtjbGFzcy5tdC0zXT1cInRoaXMuc3B4U2hvd0xhYmVsXCI+XG4gICAgICA8c3B4LXN1Z2dlc3Rpb25cbiAgICAgICAgKm5nRm9yPVwibGV0IHZhbHVlUGFpciBvZiB0aGlzLnNweFN1Z2dlc3Rpb25zOyBsZXQgaSA9IGluZGV4XCJcbiAgICAgICAgW3NweERpc2FibGVkXT1cInRoaXMuc3B4UmVhZG9ubHlcIlxuICAgICAgICBbc3B4Rm9jdXNlZF09XCJ0aGlzLnNweEZvY3VzZWQgJiYgaSA9PT0gdGhpcy5mb2N1c1Bvc2l0aW9uXCJcbiAgICAgICAgW3NweFNlbGVjdGVkXT1cInRoaXMudmFsdWU/LnZhbHVlID09PSB0aGlzLnZhbHVlUGFpcj8udmFsdWVcIlxuICAgICAgICBbc3B4VGFiYmFibGVdPVwidGhpcy5mb2N1c1Bvc2l0aW9uID09PSBpXCJcbiAgICAgICAgKHBvaW50ZXJkb3duKT1cInRoaXMuaGFuZGxlU3VnZ2VzdGlvbkNsaWNrKHZhbHVlUGFpcilcIj5cbiAgICAgICAge3t0aGlzLnZhbHVlUGFpcj8uZGVzY3JpcHRpb259fVxuICAgICAgPC9zcHgtc3VnZ2VzdGlvbj5cbiAgICA8L2Rpdj5gLFxufSlcbmV4cG9ydCBjbGFzcyBTcHhJbnB1dFJhZGlvQ29tcG9uZW50IHtcbiAgcHJvdGVjdGVkIGZvY3VzUG9zaXRpb24gPSAwO1xuICAvLyBARWxlbWVudCgpIGVsITogSFRNTEVsZW1lbnQ7XG4gIEBJbnB1dCgpIHNweE5hbWU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNweFZhbGlkYXRvcnMhOiBhbnlbXTtcbiAgQElucHV0KCkgc3B4Rm9jdXNlZCA9IGZhbHNlO1xuICBASW5wdXQoKSBzcHhTaG93TGFiZWwgPSB0cnVlO1xuICBASW5wdXQoKSBzcHhSZWFkb25seSA9IGZhbHNlO1xuICBASW5wdXQoKSBzcHhTdWdnZXN0aW9uczogU3B4VmFsdWVQYWlyPGFueT5bXSA9IFtdO1xuICBASW5wdXQoKSB2YWx1ZT86IFNweFZhbHVlUGFpcjxhbnk+O1xuICBAT3V0cHV0KCkgc3B4Q2hhbmdlOiBFdmVudEVtaXR0ZXI8U3B4VmFsdWVQYWlyPGFueT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxTcHhWYWx1ZVBhaXI8YW55Pj4oKTtcbiAgQE91dHB1dCgpIHNweEZvY3VzOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uS2V5VXA/OiBTdWJzY3JpcHRpb247XG4gIHByaXZhdGUgc3Vic2NyaXB0aW9uS2V5RG93bj86IFN1YnNjcmlwdGlvbjtcbiAgc3B4Rm9jdXNJbigpIHtcbiAgICB0aGlzLmxpc3RlblRvS2V5cygpO1xuICAgIHRoaXMuZGV0ZXJtaW5lRm9jdXNQb3NpdGlvbigpO1xuICB9XG5cbiAgc3B4Rm9jdXNPdXQoKSB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25LZXlEb3duPy51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uS2V5VXA/LnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKFxuICAgICAgKGNoYW5nZXNbJ3NweFN1Z2dlc3Rpb25zJ10gJiYgY2hhbmdlc1snc3B4U3VnZ2VzdGlvbnMnXS5wcmV2aW91c1ZhbHVlICE9PSBjaGFuZ2VzWydzcHhTdWdnZXN0aW9ucyddLmN1cnJlbnRWYWx1ZSkgfHxcbiAgICAgIChjaGFuZ2VzWyd2YWx1ZSddICYmIGNoYW5nZXNbJ3ZhbHVlJ10ucHJldmlvdXNWYWx1ZSAhPT0gY2hhbmdlc1sndmFsdWUnXS5jdXJyZW50VmFsdWUpXG4gICAgKSB7XG4gICAgICB0aGlzLmRldGVybWluZUZvY3VzUG9zaXRpb24oKTtcbiAgICB9XG4gIH1cblxuICBoYW5kbGVTdWdnZXN0aW9uQ2xpY2sodmFsdWVQYWlyOiBTcHhWYWx1ZVBhaXI8YW55Pikge1xuICAgIGlmICh0aGlzLnNweFJlYWRvbmx5KSB7XG4gICAgICBjb25zb2xlLmxvZygnc3B4SW5wdXRSYWRpbzogY2xpY2tlZCwgYnV0IHJlYWRvbmx5Jyk7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUubG9nKCdzcHhJbnB1dFJhZGlvOiBjbGlja2VkJyk7XG4gICAgICB0aGlzLnNlbGVjdCh2YWx1ZVBhaXIpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZGV0ZXJtaW5lRm9jdXNQb3NpdGlvbigpIHtcbiAgICBpZiAodGhpcy52YWx1ZSAmJiB0aGlzLnNweFN1Z2dlc3Rpb25zPy5sZW5ndGgpIHtcbiAgICAgIGNvbnN0IGluZGV4ID0gdGhpcy5zcHhTdWdnZXN0aW9ucy5maW5kSW5kZXgodmFsdWVQYWlyID0+IHZhbHVlUGFpclRvVmFsdWUodmFsdWVQYWlyKSA9PT0gdmFsdWVQYWlyVG9WYWx1ZSh0aGlzLnZhbHVlKSk7XG4gICAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSBpbmRleCA+PSAwID8gaW5kZXggOiAwO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSAwO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgc2VsZWN0KHZhbHVlUGFpcjogU3B4VmFsdWVQYWlyPHN0cmluZyB8IG51bWJlciB8IGJvb2xlYW4+KTogdm9pZCB7XG4gICAgdGhpcy5mb2N1c1Bvc2l0aW9uID0gMDtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWVQYWlyO1xuICAgIHRoaXMuc3B4Q2hhbmdlLmVtaXQodmFsdWVQYWlyKTtcbiAgfVxuXG4gIHByaXZhdGUgbGlzdGVuVG9LZXlzKCk6IHZvaWQge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uS2V5VXAgPSBmcm9tRXZlbnQod2luZG93LCAna2V5dXAnKS5zdWJzY3JpYmUoKGV2ZW50KSA9PiB7XG4gICAgICBpZiAoKChldmVudCBhcyBLZXlib2FyZEV2ZW50KS5rZXkgPT09ICdBcnJvd1VwJyB8fCAoZXZlbnQgYXMgS2V5Ym9hcmRFdmVudCkua2V5ID09PSAnQXJyb3dMZWZ0JykgJiYgdGhpcy5mb2N1c1Bvc2l0aW9uID4gMCkge1xuICAgICAgICB0aGlzLmZvY3VzUG9zaXRpb24gPSB0aGlzLmZvY3VzUG9zaXRpb24gLSAxO1xuICAgICAgICB0aGlzLnNlbGVjdCh0aGlzLnNweFN1Z2dlc3Rpb25zLmF0KHRoaXMuZm9jdXNQb3NpdGlvbikhKTtcbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIH1cbiAgICAgIGlmICgoKGV2ZW50IGFzIEtleWJvYXJkRXZlbnQpLmtleSA9PT0gJ0Fycm93RG93bicgfHwgKGV2ZW50IGFzIEtleWJvYXJkRXZlbnQpLmtleSA9PT0gJ0Fycm93UmlnaHQnKSAmJiB0aGlzLmZvY3VzUG9zaXRpb24gPCB0aGlzLnNweFN1Z2dlc3Rpb25zLmxlbmd0aCAtIDEpIHtcbiAgICAgICAgdGhpcy5mb2N1c1Bvc2l0aW9uID0gdGhpcy5mb2N1c1Bvc2l0aW9uICsgMTtcbiAgICAgICAgdGhpcy5zZWxlY3QodGhpcy5zcHhTdWdnZXN0aW9ucy5hdCh0aGlzLmZvY3VzUG9zaXRpb24pISk7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB9XG4gICAgfSk7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25LZXlEb3duID0gZnJvbUV2ZW50KHdpbmRvdywgJ2tleWRvd24nKS5zdWJzY3JpYmUoKGV2ZW50KSA9PiB7XG4gICAgICBpZiAoKGV2ZW50IGFzIEtleWJvYXJkRXZlbnQpLmtleSA9PT0gJ0Fycm93RG93bicgfHxcbiAgICAgICAgKGV2ZW50IGFzIEtleWJvYXJkRXZlbnQpLmtleSA9PT0gJ0Fycm93TGVmdCcgfHxcbiAgICAgICAgKGV2ZW50IGFzIEtleWJvYXJkRXZlbnQpLmtleSA9PT0gJ0Fycm93UmlnaHQnIHx8XG4gICAgICAgIChldmVudCBhcyBLZXlib2FyZEV2ZW50KS5rZXkgPT09ICdBcnJvd1VwJykge1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG59Il19

package/esm2022/spx-inputs/spx-input-text.component.mjs

@@ -1,6 +1,7 @@
 import { NgFor, NgIf } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { SpxButtonComponent } from '@softpak/components/spx-button';
+import { SpxDropdownComponent } from './spx-dropdown.component';
 import * as i0 from "@angular/core";
 export class SpxInputTextComponent {
     constructor() {
@@ -15,8 +16,8 @@ export class SpxInputTextComponent {
         this.spxFocus = new EventEmitter();
         this.spxWasInternalUpdate = false;
     }
-    async spxSetFocus() {
-        // this.elInput.focus();
+    spxSetFocus() {
+        this.inputRef?.nativeElement?.focus();
     }
     componentDidLoad() {
         if (this.spxAutofocus) {
@@ -48,9 +49,15 @@ export class SpxInputTextComponent {
         this.spxFocused = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", 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" }, ngImport: i0, template: `<div class="relative">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", 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">
   <input
+    #input
     class="font-bold text-lg w-full outline-none"
+    autocomplete="off"
+    spellcheck="false"
+    [class.bg-white]="!this.spxReadonly"
+    [class.bg-gray-300]="this.spxReadonly"
+    [class.cursor-not-allowed]="this.spxReadonly"
     [class.uppercase]="this.spxCapitalize"
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -58,27 +65,18 @@ export class SpxInputTextComponent {
     [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
     [attr.name]="this.spxName"
     [attr.type]="this.spxType"
-    [attr.value]="this.value?.description ? this.value?.description : this.value?.value"
+    [value]="this.value?.description ? this.value?.description : this.value?.value"
     (blur)="this.handleBlur()"
     (keyUp)="this.handleKeyUp()"
     (focus)="this.handleFocus()"
     (input)="this.handleDescriptionInput($event)"
   />
   <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
-  <div
+  <spx-dropdown
     *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
-    class="absolute bg-gray-100 left-0 right-0 z-20">
-      <div
-        *ngFor="let valuePair of this.spxSuggestions"
-        class="text-black block w-full p-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 flex items-center"
-        (click)="this.handleSuggestionClick($event)"
-        [attr.tabindex]="0"
-      >
-      <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
-        <spx-button spxType="button">Select</spx-button>
-      </div>
-  </div>
-</div>`, 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: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }] }); }
+    [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
+  </spx-dropdown>
+</div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputTextComponent, decorators: [{
             type: Component,
@@ -89,10 +87,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         NgIf,
                         NgFor,
                         SpxButtonComponent,
+                        SpxDropdownComponent,
                     ],
-                    template: `<div class="relative">
+                    template: `<div class="relative text-black">
   <input
+    #input
     class="font-bold text-lg w-full outline-none"
+    autocomplete="off"
+    spellcheck="false"
+    [class.bg-white]="!this.spxReadonly"
+    [class.bg-gray-300]="this.spxReadonly"
+    [class.cursor-not-allowed]="this.spxReadonly"
     [class.uppercase]="this.spxCapitalize"
     [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
     [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -100,26 +105,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
     [attr.pattern]="this.spxPattern ? this.spxPattern : undefined"
     [attr.name]="this.spxName"
     [attr.type]="this.spxType"
-    [attr.value]="this.value?.description ? this.value?.description : this.value?.value"
+    [value]="this.value?.description ? this.value?.description : this.value?.value"
     (blur)="this.handleBlur()"
     (keyUp)="this.handleKeyUp()"
     (focus)="this.handleFocus()"
     (input)="this.handleDescriptionInput($event)"
   />
   <span *ngIf="this.value?.description && this.value?.value && this.value?.description?.valueOf() !== this.value?.value?.valueOf()">{{this.value?.value}}</span>
-  <div
+  <spx-dropdown
     *ngIf="this.spxFocused && (this.spxType === 'overlay' || this.spxType === 'overlaynumber')"
-    class="absolute bg-gray-100 left-0 right-0 z-20">
-      <div
-        *ngFor="let valuePair of this.spxSuggestions"
-        class="text-black block w-full p-2 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 flex items-center"
-        (click)="this.handleSuggestionClick($event)"
-        [attr.tabindex]="0"
-      >
-      <div class="flex-1 p-1 font-bold text-lg">{{valuePair?.description}}</div>
-        <spx-button spxType="button">Select</spx-button>
-      </div>
-  </div>
+    [spxSuggestions]="this.spxSuggestions" (spxSelect)="this.handleSuggestionClick($event)">
+  </spx-dropdown>
 </div>`,
                 }]
         }], propDecorators: { spxName: [{
@@ -152,5 +148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }], spxWasInternalUpdate: [{
                 type: Input
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWlucHV0LXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc29mdHBhay9jb21wb25lbnRzL3NweC1pbnB1dHMvc3B4LWlucHV0LXRleHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDOUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV2RSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQzs7QUEwQ3BFLE1BQU0sT0FBTyxxQkFBcUI7SUF4Q2xDO1FBNENXLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBR3JCLG1CQUFjLEdBQThDLEVBQUUsQ0FBQztRQUMvRCxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUVwQixrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUN0QixlQUFVLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLFlBQU8sR0FBdUUsTUFBTSxDQUFDO1FBRXBGLHFCQUFnQixHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ2hFLGNBQVMsR0FBb0MsSUFBSSxZQUFZLEVBQXFCLENBQUM7UUFDbkYsYUFBUSxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBQ3pELHlCQUFvQixHQUFHLEtBQUssQ0FBQztLQXlDdkM7SUF0Q0MsS0FBSyxDQUFDLFdBQVc7UUFDZix3QkFBd0I7SUFDMUIsQ0FBQztJQUVELGdCQUFnQjtRQUNkLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDckIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3JCLENBQUM7SUFDSCxDQUFDO0lBRUQsVUFBVTtRQUNSLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMvQixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVELHNCQUFzQixDQUFDLEtBQVU7UUFDL0IsSUFBSSxDQUFDLEtBQUssR0FBRztZQUNYLFdBQVcsRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSTtZQUNyRCxLQUFLLEVBQUUsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUk7U0FDaEQsQ0FBQztRQUNGLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRUQscUJBQXFCLENBQUMsS0FBVTtRQUM5QixJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1lBQ25CLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNoQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztRQUMxQixDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQztJQUN6QixDQUFDOzhHQXpEVSxxQkFBcUI7a0dBQXJCLHFCQUFxQiwyZ0JBaEN0Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BOEJMLDREQWxDSCxJQUFJLDZGQUNKLEtBQUssbUhBQ0wsa0JBQWtCOzsyRkFrQ1QscUJBQXFCO2tCQXhDakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsT0FBTyxFQUFFO3dCQUNQLElBQUk7d0JBQ0osS0FBSzt3QkFDTCxrQkFBa0I7cUJBQ25CO29CQUNELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O09BOEJMO2lCQUNOOzhCQUlVLE9BQU87c0JBQWYsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxnQkFBZ0I7c0JBQXpCLE1BQU07Z0JBQ0csU0FBUztzQkFBbEIsTUFBTTtnQkFDRyxRQUFRO3NCQUFqQixNQUFNO2dCQUNFLG9CQUFvQjtzQkFBNUIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nRm9yLCBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTcHhWYWx1ZVBhaXIgfSBmcm9tICcuL3NweC12YWx1ZS1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU3B4QnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQHNvZnRwYWsvY29tcG9uZW50cy9zcHgtYnV0dG9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3B4LWlucHV0LXRleHQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdJZixcbiAgICBOZ0ZvcixcbiAgICBTcHhCdXR0b25Db21wb25lbnQsXG4gIF0sXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cInJlbGF0aXZlXCI+XG4gIDxpbnB1dFxuICAgIGNsYXNzPVwiZm9udC1ib2xkIHRleHQtbGcgdy1mdWxsIG91dGxpbmUtbm9uZVwiXG4gICAgW2NsYXNzLnVwcGVyY2FzZV09XCJ0aGlzLnNweENhcGl0YWxpemVcIlxuICAgIFthdHRyLmF1dG9mb2N1c109XCJ0aGlzLnNweEF1dG9mb2N1cyA/IHRoaXMuc3B4QXV0b2ZvY3VzIDogdW5kZWZpbmVkXCJcbiAgICBbYXR0ci5kaXNhYmxlZF09XCJ0aGlzLnNweFJlYWRvbmx5ID8gdGhpcy5zcHhSZWFkb25seSA6IHVuZGVmaW5lZFwiXG4gICAgW2F0dHIuaW5wdXRNb2RlXT1cInRoaXMuc3B4SW5wdXRNb2RlID8gdGhpcy5zcHhJbnB1dE1vZGUgOiB1bmRlZmluZWRcIlxuICAgIFthdHRyLnBhdHRlcm5dPVwidGhpcy5zcHhQYXR0ZXJuID8gdGhpcy5zcHhQYXR0ZXJuIDogdW5kZWZpbmVkXCJcbiAgICBbYXR0ci5uYW1lXT1cInRoaXMuc3B4TmFtZVwiXG4gICAgW2F0dHIudHlwZV09XCJ0aGlzLnNweFR5cGVcIlxuICAgIFthdHRyLnZhbHVlXT1cInRoaXMudmFsdWU/LmRlc2NyaXB0aW9uID8gdGhpcy52YWx1ZT8uZGVzY3JpcHRpb24gOiB0aGlzLnZhbHVlPy52YWx1ZVwiXG4gICAgKGJsdXIpPVwidGhpcy5oYW5kbGVCbHVyKClcIlxuICAgIChrZXlVcCk9XCJ0aGlzLmhhbmRsZUtleVVwKClcIlxuICAgIChmb2N1cyk9XCJ0aGlzLmhhbmRsZUZvY3VzKClcIlxuICAgIChpbnB1dCk9XCJ0aGlzLmhhbmRsZURlc2NyaXB0aW9uSW5wdXQoJGV2ZW50KVwiXG4gIC8+XG4gIDxzcGFuICpuZ0lmPVwidGhpcy52YWx1ZT8uZGVzY3JpcHRpb24gJiYgdGhpcy52YWx1ZT8udmFsdWUgJiYgdGhpcy52YWx1ZT8uZGVzY3JpcHRpb24/LnZhbHVlT2YoKSAhPT0gdGhpcy52YWx1ZT8udmFsdWU/LnZhbHVlT2YoKVwiPnt7dGhpcy52YWx1ZT8udmFsdWV9fTwvc3Bhbj5cbiAgPGRpdlxuICAgICpuZ0lmPVwidGhpcy5zcHhGb2N1c2VkICYmICh0aGlzLnNweFR5cGUgPT09ICdvdmVybGF5JyB8fCB0aGlzLnNweFR5cGUgPT09ICdvdmVybGF5bnVtYmVyJylcIlxuICAgIGNsYXNzPVwiYWJzb2x1dGUgYmctZ3JheS0xMDAgbGVmdC0wIHJpZ2h0LTAgei0yMFwiPlxuICAgICAgPGRpdlxuICAgICAgICAqbmdGb3I9XCJsZXQgdmFsdWVQYWlyIG9mIHRoaXMuc3B4U3VnZ2VzdGlvbnNcIlxuICAgICAgICBjbGFzcz1cInRleHQtYmxhY2sgYmxvY2sgdy1mdWxsIHAtMiBiZy13aGl0ZSBib3JkZXIgYm9yZGVyLWdyYXktMjAwIHJvdW5kZWQtbGcgc2hhZG93IGhvdmVyOmJnLWdyYXktMTAwIGZsZXggaXRlbXMtY2VudGVyXCJcbiAgICAgICAgKGNsaWNrKT1cInRoaXMuaGFuZGxlU3VnZ2VzdGlvbkNsaWNrKCRldmVudClcIlxuICAgICAgICBbYXR0ci50YWJpbmRleF09XCIwXCJcbiAgICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4LTEgcC0xIGZvbnQtYm9sZCB0ZXh0LWxnXCI+e3t2YWx1ZVBhaXI/LmRlc2NyaXB0aW9ufX08L2Rpdj5cbiAgICAgICAgPHNweC1idXR0b24gc3B4VHlwZT1cImJ1dHRvblwiPlNlbGVjdDwvc3B4LWJ1dHRvbj5cbiAgICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PmAsXG59KVxuZXhwb3J0IGNsYXNzIFNweElucHV0VGV4dENvbXBvbmVudCB7XG4gIC8vIHByaXZhdGUgZWxJbnB1dD86IEhUTUxFbGVtZW50O1xuICAvLyBARWxlbWVudCgpIGVsITogSFRNTEVsZW1lbnQ7XG4gIEBJbnB1dCgpIHNweE5hbWU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNweEF1dG9mb2N1cyA9IGZhbHNlO1xuICBASW5wdXQoKSBzcHhJbnB1dE1vZGU/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNweFBhdHRlcm4/OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHNweFN1Z2dlc3Rpb25zOiBTcHhWYWx1ZVBhaXI8Ym9vbGVhbiB8IG51bWJlciB8IHN0cmluZz5bXSA9IFtdO1xuICBASW5wdXQoKSBzcHhSZWFkb25seSA9IGZhbHNlO1xuICBASW5wdXQoKSBzcHhWYWxpZGF0b3JzPzogYW55W107XG4gIEBJbnB1dCgpIHNweENhcGl0YWxpemUgPSBmYWxzZTtcbiAgQElucHV0KCkgc3B4Rm9jdXNlZCA9IHRydWU7XG4gIEBJbnB1dCgpIHNweFR5cGU6ICdhdXRvY29tcGxldGUnIHwgJ292ZXJsYXknIHwgJ292ZXJsYXludW1iZXInIHwgJ3RleHQnIHwgJ3Bhc3N3b3JkJyA9ICd0ZXh0JztcbiAgQElucHV0KCkgdmFsdWU/OiBTcHhWYWx1ZVBhaXI8YW55PjtcbiAgQE91dHB1dCgpIHNweEJsdXJGcm9tQ2hpbGQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgQE91dHB1dCgpIHNweENoYW5nZTogRXZlbnRFbWl0dGVyPFNweFZhbHVlUGFpcjxhbnk+PiA9IG5ldyBFdmVudEVtaXR0ZXI8U3B4VmFsdWVQYWlyPGFueT4+KCk7XG4gIEBPdXRwdXQoKSBzcHhGb2N1czogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICBASW5wdXQoKSBzcHhXYXNJbnRlcm5hbFVwZGF0ZSA9IGZhbHNlO1xuICBcbiAgXG4gIGFzeW5jIHNweFNldEZvY3VzKCkge1xuICAgIC8vIHRoaXMuZWxJbnB1dC5mb2N1cygpO1xuICB9XG5cbiAgY29tcG9uZW50RGlkTG9hZCgpIHtcbiAgICBpZiAodGhpcy5zcHhBdXRvZm9jdXMpIHtcbiAgICAgIHRoaXMuc3B4Rm9jdXMuZW1pdCgpO1xuICAgICAgdGhpcy5zcHhTZXRGb2N1cygpO1xuICAgIH1cbiAgfVxuXG4gIGhhbmRsZUJsdXIoKSB7XG4gICAgdGhpcy5zcHhCbHVyRnJvbUNoaWxkLmVtaXQoKTtcbiAgfVxuXG4gIGhhbmRsZUZvY3VzKCkge1xuICAgIHRoaXMuc3B4Rm9jdXMuZW1pdCgpO1xuICB9XG5cbiAgaGFuZGxlRGVzY3JpcHRpb25JbnB1dChldmVudDogYW55KSB7XG4gICAgdGhpcy52YWx1ZSA9IHtcbiAgICAgIGRlc2NyaXB0aW9uOiBldmVudC50YXJnZXQgPyBldmVudC50YXJnZXQudmFsdWUgOiBudWxsLFxuICAgICAgdmFsdWU6IGV2ZW50LnRhcmdldCA/IGV2ZW50LnRhcmdldC52YWx1ZSA6IG51bGwsXG4gICAgfTtcbiAgICB0aGlzLnNweENoYW5nZS5lbWl0KHRoaXMudmFsdWUpO1xuICB9XG5cbiAgaGFuZGxlU3VnZ2VzdGlvbkNsaWNrKHZhbHVlOiBhbnkpIHtcbiAgICBpZiAoIXRoaXMuc3B4UmVhZG9ubHkpIHtcbiAgICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgICAgIHRoaXMuc3B4Q2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XG4gICAgICB0aGlzLnNweEZvY3VzZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBoYW5kbGVLZXlVcCgpIHtcbiAgICB0aGlzLnNweEZvY3VzZWQgPSB0cnVlO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWlucHV0LXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc29mdHBhay9jb21wb25lbnRzL3NweC1pbnB1dHMvc3B4LWlucHV0LXRleHQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDOUMsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFOUYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDcEUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBd0NoRSxNQUFNLE9BQU8scUJBQXFCO0lBdENsQztRQTBDVyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUdyQixtQkFBYyxHQUE4QyxFQUFFLENBQUM7UUFDL0QsZ0JBQVcsR0FBRyxLQUFLLENBQUM7UUFFcEIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFDdEIsZUFBVSxHQUFHLElBQUksQ0FBQztRQUNsQixZQUFPLEdBQXVFLE1BQU0sQ0FBQztRQUVwRixxQkFBZ0IsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNoRSxjQUFTLEdBQW9DLElBQUksWUFBWSxFQUFxQixDQUFDO1FBQ25GLGFBQVEsR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUN6RCx5QkFBb0IsR0FBRyxLQUFLLENBQUM7S0EwQ3ZDO0lBdENDLFdBQVc7UUFDVCxJQUFJLENBQUMsUUFBUSxFQUFFLGFBQWEsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUN4QyxDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztZQUNyQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDckIsQ0FBQztJQUNILENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsc0JBQXNCLENBQUMsS0FBVTtRQUMvQixJQUFJLENBQUMsS0FBSyxHQUFHO1lBQ1gsV0FBVyxFQUFFLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxJQUFJO1lBQ3JELEtBQUssRUFBRSxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSTtTQUNoRCxDQUFDO1FBQ0YsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxxQkFBcUIsQ0FBQyxLQUFVO1FBQzlCLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7WUFDbkIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ2hDLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQzFCLENBQUM7SUFDSCxDQUFDO0lBRUQsV0FBVztRQUNULElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO0lBQ3pCLENBQUM7OEdBMURVLHFCQUFxQjtrR0FBckIscUJBQXFCLDRuQkE3QnRCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0EyQkwsNERBaENILElBQUksNkZBR0osb0JBQW9COzsyRkErQlgscUJBQXFCO2tCQXRDakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsT0FBTyxFQUFFO3dCQUNQLElBQUk7d0JBQ0osS0FBSzt3QkFDTCxrQkFBa0I7d0JBQ2xCLG9CQUFvQjtxQkFDckI7b0JBQ0QsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7T0EyQkw7aUJBQ047OEJBSVUsT0FBTztzQkFBZixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNJLGdCQUFnQjtzQkFBekIsTUFBTTtnQkFDRyxTQUFTO3NCQUFsQixNQUFNO2dCQUNHLFFBQVE7c0JBQWpCLE1BQU07Z0JBQ0Usb0JBQW9CO3NCQUE1QixLQUFLO2dCQUNnQyxRQUFRO3NCQUE3QyxTQUFTO3VCQUFDLE9BQU8sRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0ZvciwgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTcHhWYWx1ZVBhaXIgfSBmcm9tICcuL3NweC12YWx1ZS1pbnRlcmZhY2UnO1xuaW1wb3J0IHsgU3B4QnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQHNvZnRwYWsvY29tcG9uZW50cy9zcHgtYnV0dG9uJztcbmltcG9ydCB7IFNweERyb3Bkb3duQ29tcG9uZW50IH0gZnJvbSAnLi9zcHgtZHJvcGRvd24uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3B4LWlucHV0LXRleHQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgTmdJZixcbiAgICBOZ0ZvcixcbiAgICBTcHhCdXR0b25Db21wb25lbnQsXG4gICAgU3B4RHJvcGRvd25Db21wb25lbnQsXG4gIF0sXG4gIHRlbXBsYXRlOiBgPGRpdiBjbGFzcz1cInJlbGF0aXZlIHRleHQtYmxhY2tcIj5cbiAgPGlucHV0XG4gICAgI2lucHV0XG4gICAgY2xhc3M9XCJmb250LWJvbGQgdGV4dC1sZyB3LWZ1bGwgb3V0bGluZS1ub25lXCJcbiAgICBhdXRvY29tcGxldGU9XCJvZmZcIlxuICAgIHNwZWxsY2hlY2s9XCJmYWxzZVwiXG4gICAgW2NsYXNzLmJnLXdoaXRlXT1cIiF0aGlzLnNweFJlYWRvbmx5XCJcbiAgICBbY2xhc3MuYmctZ3JheS0zMDBdPVwidGhpcy5zcHhSZWFkb25seVwiXG4gICAgW2NsYXNzLmN1cnNvci1ub3QtYWxsb3dlZF09XCJ0aGlzLnNweFJlYWRvbmx5XCJcbiAgICBbY2xhc3MudXBwZXJjYXNlXT1cInRoaXMuc3B4Q2FwaXRhbGl6ZVwiXG4gICAgW2F0dHIuYXV0b2ZvY3VzXT1cInRoaXMuc3B4QXV0b2ZvY3VzID8gdGhpcy5zcHhBdXRvZm9jdXMgOiB1bmRlZmluZWRcIlxuICAgIFthdHRyLmRpc2FibGVkXT1cInRoaXMuc3B4UmVhZG9ubHkgPyB0aGlzLnNweFJlYWRvbmx5IDogdW5kZWZpbmVkXCJcbiAgICBbYXR0ci5pbnB1dE1vZGVdPVwidGhpcy5zcHhJbnB1dE1vZGUgPyB0aGlzLnNweElucHV0TW9kZSA6IHVuZGVmaW5lZFwiXG4gICAgW2F0dHIucGF0dGVybl09XCJ0aGlzLnNweFBhdHRlcm4gPyB0aGlzLnNweFBhdHRlcm4gOiB1bmRlZmluZWRcIlxuICAgIFthdHRyLm5hbWVdPVwidGhpcy5zcHhOYW1lXCJcbiAgICBbYXR0ci50eXBlXT1cInRoaXMuc3B4VHlwZVwiXG4gICAgW3ZhbHVlXT1cInRoaXMudmFsdWU/LmRlc2NyaXB0aW9uID8gdGhpcy52YWx1ZT8uZGVzY3JpcHRpb24gOiB0aGlzLnZhbHVlPy52YWx1ZVwiXG4gICAgKGJsdXIpPVwidGhpcy5oYW5kbGVCbHVyKClcIlxuICAgIChrZXlVcCk9XCJ0aGlzLmhhbmRsZUtleVVwKClcIlxuICAgIChmb2N1cyk9XCJ0aGlzLmhhbmRsZUZvY3VzKClcIlxuICAgIChpbnB1dCk9XCJ0aGlzLmhhbmRsZURlc2NyaXB0aW9uSW5wdXQoJGV2ZW50KVwiXG4gIC8+XG4gIDxzcGFuICpuZ0lmPVwidGhpcy52YWx1ZT8uZGVzY3JpcHRpb24gJiYgdGhpcy52YWx1ZT8udmFsdWUgJiYgdGhpcy52YWx1ZT8uZGVzY3JpcHRpb24/LnZhbHVlT2YoKSAhPT0gdGhpcy52YWx1ZT8udmFsdWU/LnZhbHVlT2YoKVwiPnt7dGhpcy52YWx1ZT8udmFsdWV9fTwvc3Bhbj5cbiAgPHNweC1kcm9wZG93blxuICAgICpuZ0lmPVwidGhpcy5zcHhGb2N1c2VkICYmICh0aGlzLnNweFR5cGUgPT09ICdvdmVybGF5JyB8fCB0aGlzLnNweFR5cGUgPT09ICdvdmVybGF5bnVtYmVyJylcIlxuICAgIFtzcHhTdWdnZXN0aW9uc109XCJ0aGlzLnNweFN1Z2dlc3Rpb25zXCIgKHNweFNlbGVjdCk9XCJ0aGlzLmhhbmRsZVN1Z2dlc3Rpb25DbGljaygkZXZlbnQpXCI+XG4gIDwvc3B4LWRyb3Bkb3duPlxuPC9kaXY+YCxcbn0pXG5leHBvcnQgY2xhc3MgU3B4SW5wdXRUZXh0Q29tcG9uZW50IHtcbiAgLy8gcHJpdmF0ZSBlbElucHV0PzogSFRNTEVsZW1lbnQ7XG4gIC8vIEBFbGVtZW50KCkgZWwhOiBIVE1MRWxlbWVudDtcbiAgQElucHV0KCkgc3B4TmFtZT86IHN0cmluZztcbiAgQElucHV0KCkgc3B4QXV0b2ZvY3VzID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNweElucHV0TW9kZT86IHN0cmluZztcbiAgQElucHV0KCkgc3B4UGF0dGVybj86IHN0cmluZztcbiAgQElucHV0KCkgc3B4U3VnZ2VzdGlvbnM6IFNweFZhbHVlUGFpcjxib29sZWFuIHwgbnVtYmVyIHwgc3RyaW5nPltdID0gW107XG4gIEBJbnB1dCgpIHNweFJlYWRvbmx5ID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNweFZhbGlkYXRvcnM/OiBhbnlbXTtcbiAgQElucHV0KCkgc3B4Q2FwaXRhbGl6ZSA9IGZhbHNlO1xuICBASW5wdXQoKSBzcHhGb2N1c2VkID0gdHJ1ZTtcbiAgQElucHV0KCkgc3B4VHlwZTogJ2F1dG9jb21wbGV0ZScgfCAnb3ZlcmxheScgfCAnb3ZlcmxheW51bWJlcicgfCAndGV4dCcgfCAncGFzc3dvcmQnID0gJ3RleHQnO1xuICBASW5wdXQoKSB2YWx1ZT86IFNweFZhbHVlUGFpcjxhbnk+O1xuICBAT3V0cHV0KCkgc3B4Qmx1ckZyb21DaGlsZDogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICBAT3V0cHV0KCkgc3B4Q2hhbmdlOiBFdmVudEVtaXR0ZXI8U3B4VmFsdWVQYWlyPGFueT4+ID0gbmV3IEV2ZW50RW1pdHRlcjxTcHhWYWx1ZVBhaXI8YW55Pj4oKTtcbiAgQE91dHB1dCgpIHNweEZvY3VzOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBJbnB1dCgpIHNweFdhc0ludGVybmFsVXBkYXRlID0gZmFsc2U7XG4gIEBWaWV3Q2hpbGQoJ2lucHV0JywgeyBzdGF0aWM6IHRydWUgfSkgaW5wdXRSZWY/OiBFbGVtZW50UmVmPEhUTUxJbnB1dEVsZW1lbnQ+O1xuICBcbiAgXG4gIHNweFNldEZvY3VzKCkge1xuICAgIHRoaXMuaW5wdXRSZWY/Lm5hdGl2ZUVsZW1lbnQ/LmZvY3VzKCk7XG4gIH1cblxuICBjb21wb25lbnREaWRMb2FkKCkge1xuICAgIGlmICh0aGlzLnNweEF1dG9mb2N1cykge1xuICAgICAgdGhpcy5zcHhGb2N1cy5lbWl0KCk7XG4gICAgICB0aGlzLnNweFNldEZvY3VzKCk7XG4gICAgfVxuICB9XG5cbiAgaGFuZGxlQmx1cigpIHtcbiAgICB0aGlzLnNweEJsdXJGcm9tQ2hpbGQuZW1pdCgpO1xuICB9XG5cbiAgaGFuZGxlRm9jdXMoKSB7XG4gICAgdGhpcy5zcHhGb2N1cy5lbWl0KCk7XG4gIH1cblxuICBoYW5kbGVEZXNjcmlwdGlvbklucHV0KGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLnZhbHVlID0ge1xuICAgICAgZGVzY3JpcHRpb246IGV2ZW50LnRhcmdldCA/IGV2ZW50LnRhcmdldC52YWx1ZSA6IG51bGwsXG4gICAgICB2YWx1ZTogZXZlbnQudGFyZ2V0ID8gZXZlbnQudGFyZ2V0LnZhbHVlIDogbnVsbCxcbiAgICB9O1xuICAgIHRoaXMuc3B4Q2hhbmdlLmVtaXQodGhpcy52YWx1ZSk7XG4gIH1cblxuICBoYW5kbGVTdWdnZXN0aW9uQ2xpY2sodmFsdWU6IGFueSkge1xuICAgIGlmICghdGhpcy5zcHhSZWFkb25seSkge1xuICAgICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICAgICAgdGhpcy5zcHhDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICAgIHRoaXMuc3B4Rm9jdXNlZCA9IGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIGhhbmRsZUtleVVwKCkge1xuICAgIHRoaXMuc3B4Rm9jdXNlZCA9IHRydWU7XG4gIH1cbn1cbiJdfQ==

package/esm2022/spx-inputs/spx-input-type.enum.mjs

@@ -0,0 +1,16 @@
+export var SpxInputTypeEnum;
+(function (SpxInputTypeEnum) {
+    SpxInputTypeEnum["autocomplete"] = "autocomplete";
+    SpxInputTypeEnum["button"] = "button";
+    SpxInputTypeEnum["date"] = "date";
+    SpxInputTypeEnum["float"] = "float";
+    SpxInputTypeEnum["hidden"] = "hidden";
+    SpxInputTypeEnum["overlay"] = "overlay";
+    SpxInputTypeEnum["overlayNumber"] = "overlaynumber";
+    SpxInputTypeEnum["radio"] = "radio";
+    SpxInputTypeEnum["number"] = "number";
+    SpxInputTypeEnum["password"] = "password";
+    SpxInputTypeEnum["text"] = "text";
+    SpxInputTypeEnum["textNumericKeyboard"] = "textNumericKeyboard";
+})(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3B4LWlucHV0LXR5cGUuZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NvZnRwYWsvY29tcG9uZW50cy9zcHgtaW5wdXRzL3NweC1pbnB1dC10eXBlLmVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFOLElBQVksZ0JBYVg7QUFiRCxXQUFZLGdCQUFnQjtJQUN4QixpREFBNkIsQ0FBQTtJQUM3QixxQ0FBaUIsQ0FBQTtJQUNqQixpQ0FBYSxDQUFBO0lBQ2IsbUNBQWUsQ0FBQTtJQUNmLHFDQUFpQixDQUFBO0lBQ2pCLHVDQUFtQixDQUFBO0lBQ25CLG1EQUFnQyxDQUFBO0lBQ2hDLG1DQUFlLENBQUE7SUFDZixxQ0FBaUIsQ0FBQTtJQUNqQix5Q0FBcUIsQ0FBQTtJQUNyQixpQ0FBYSxDQUFBO0lBQ2IsK0RBQTJDLENBQUE7QUFDL0MsQ0FBQyxFQWJXLGdCQUFnQixLQUFoQixnQkFBZ0IsUUFhM0IiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZW51bSBTcHhJbnB1dFR5cGVFbnVtIHtcbiAgICBhdXRvY29tcGxldGUgPSAnYXV0b2NvbXBsZXRlJyxcbiAgICBidXR0b24gPSAnYnV0dG9uJyxcbiAgICBkYXRlID0gJ2RhdGUnLFxuICAgIGZsb2F0ID0gJ2Zsb2F0JyxcbiAgICBoaWRkZW4gPSAnaGlkZGVuJyxcbiAgICBvdmVybGF5ID0gJ292ZXJsYXknLFxuICAgIG92ZXJsYXlOdW1iZXIgPSAgJ292ZXJsYXludW1iZXInLFxuICAgIHJhZGlvID0gJ3JhZGlvJyxcbiAgICBudW1iZXIgPSAnbnVtYmVyJyxcbiAgICBwYXNzd29yZCA9ICdwYXNzd29yZCcsXG4gICAgdGV4dCA9ICd0ZXh0JyxcbiAgICB0ZXh0TnVtZXJpY0tleWJvYXJkID0gJ3RleHROdW1lcmljS2V5Ym9hcmQnLFxufSJdfQ==