@softpak/components 20.12.19 → 20.13.1

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, viewChild, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
 
 class SpxSuggestionComponent {
     constructor() {
@@ -7,14 +8,52 @@ class SpxSuggestionComponent {
         this.spxFocused = input(...(ngDevMode ? [undefined, { debugName: "spxFocused" }] : []));
         this.spxSelected = input(...(ngDevMode ? [undefined, { debugName: "spxSelected" }] : []));
         this.spxTabbable = input(...(ngDevMode ? [undefined, { debugName: "spxTabbable" }] : []));
+        this.isPressing = false;
+        this.suggestionRef = viewChild('suggestionRef', ...(ngDevMode ? [{ debugName: "suggestionRef" }] : []));
+        this.handlePress = async () => {
+            this.isPressing = true;
+            try {
+                await Haptics.impact({ style: ImpactStyle.Light });
+            }
+            catch {
+                // silence if haptics is not available
+            }
+        };
+        this.onDocumentPointerUp = async (event) => {
+            if (!this.isPressing) {
+                return;
+            }
+            this.isPressing = false;
+            const btn = this.suggestionRef()?.nativeElement;
+            if (!btn) {
+                return;
+            }
+            const inside = btn.contains(event.target);
+            try {
+                if (inside) {
+                    // OK haptic
+                    await Haptics.impact({ style: ImpactStyle.Medium });
+                }
+                else {
+                    // Cancel haptic
+                    await Haptics.impact({ style: ImpactStyle.Light });
+                }
+            }
+            catch {
+                // ignore
+            }
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxSuggestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.3", type: SpxSuggestionComponent, isStandalone: true, selector: "spx-suggestion", inputs: { spxDisabled: { classPropertyName: "spxDisabled", publicName: "spxDisabled", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxSelected: { classPropertyName: "spxSelected", publicName: "spxSelected", isSignal: true, isRequired: false, transformFunction: null }, spxTabbable: { classPropertyName: "spxTabbable", publicName: "spxTabbable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.active:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.bg-gray-200]=\"this.spxDisabled() && !this.spxSelected()\"\n    [class.bg-gray-400]=\"this.spxDisabled() && this.spxSelected()\"\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\n    [class.opacity-60]=\"this.spxDisabled()\"\n    [class.bg-gradient-to-r]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.from-teal-400]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.to-teal-600]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.font-bold]=\"this.spxSelected()\"\n    [attr.tabindex]=\"this.spxTabbable() && !this.spxDisabled() ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-offset-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-blue-500]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n  </button>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.2.3", type: SpxSuggestionComponent, isStandalone: true, selector: "spx-suggestion", inputs: { spxDisabled: { classPropertyName: "spxDisabled", publicName: "spxDisabled", isSignal: true, isRequired: false, transformFunction: null }, spxFocused: { classPropertyName: "spxFocused", publicName: "spxFocused", isSignal: true, isRequired: false, transformFunction: null }, spxSelected: { classPropertyName: "spxSelected", publicName: "spxSelected", isSignal: true, isRequired: false, transformFunction: null }, spxTabbable: { classPropertyName: "spxTabbable", publicName: "spxTabbable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerup": "onDocumentPointerUp($event)" } }, viewQueries: [{ propertyName: "suggestionRef", first: true, predicate: ["suggestionRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  #suggestionRef\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.active:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.bg-gray-200]=\"this.spxDisabled() && !this.spxSelected()\"\n    [class.bg-gray-400]=\"this.spxDisabled() && this.spxSelected()\"\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\n    [class.opacity-60]=\"this.spxDisabled()\"\n    [class.bg-gradient-to-r]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.from-teal-400]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.to-teal-600]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.font-bold]=\"this.spxSelected()\"\n    [attr.tabindex]=\"this.spxTabbable() && !this.spxDisabled() ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-offset-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-blue-500]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    (pointerdown)=\"this.handlePress()\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n  </button>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SpxSuggestionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spx-suggestion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.active:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.bg-gray-200]=\"this.spxDisabled() && !this.spxSelected()\"\n    [class.bg-gray-400]=\"this.spxDisabled() && this.spxSelected()\"\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\n    [class.opacity-60]=\"this.spxDisabled()\"\n    [class.bg-gradient-to-r]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.from-teal-400]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.to-teal-600]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.font-bold]=\"this.spxSelected()\"\n    [attr.tabindex]=\"this.spxTabbable() && !this.spxDisabled() ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-offset-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-blue-500]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n  </button>" }]
-        }] });
+            args: [{ selector: 'spx-suggestion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #suggestionRef\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.active:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.bg-gray-200]=\"this.spxDisabled() && !this.spxSelected()\"\n    [class.bg-gray-400]=\"this.spxDisabled() && this.spxSelected()\"\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\n    [class.opacity-60]=\"this.spxDisabled()\"\n    [class.bg-gradient-to-r]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.from-teal-400]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.to-teal-600]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.font-bold]=\"this.spxSelected()\"\n    [attr.tabindex]=\"this.spxTabbable() && !this.spxDisabled() ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-offset-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-blue-500]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    (pointerdown)=\"this.handlePress()\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n  </button>" }]
+        }], propDecorators: { onDocumentPointerUp: [{
+                type: HostListener,
+                args: ['document:pointerup', ['$event']]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/softpak-components-spx-suggestion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"softpak-components-spx-suggestion.mjs","sources":["../../../../projects/softpak/components/spx-suggestion/spx-suggestion.component.ts","../../../../projects/softpak/components/spx-suggestion/spx-suggestion.component.html","../../../../projects/softpak/components/spx-suggestion/softpak-components-spx-suggestion.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'spx-suggestion',\n  standalone: true,\n  templateUrl: './spx-suggestion.component.html',\n  styleUrl: './spx-suggestion.component.css',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SpxSuggestionComponent {\n  spxDisabled = input<boolean>();\n  spxFocused = input<boolean>();\n  spxSelected = input<boolean>();\n  spxTabbable = input<boolean>();\n}\n","<button\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.active:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.bg-gray-200]=\"this.spxDisabled() && !this.spxSelected()\"\n    [class.bg-gray-400]=\"this.spxDisabled() && this.spxSelected()\"\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\n    [class.opacity-60]=\"this.spxDisabled()\"\n    [class.bg-gradient-to-r]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.from-teal-400]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.to-teal-600]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.font-bold]=\"this.spxSelected()\"\n    [attr.tabindex]=\"this.spxTabbable() && !this.spxDisabled() ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-offset-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-blue-500]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n  </button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MASa,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QAQE,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QAC9B,IAAA,CAAA,UAAU,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QAC7B,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QAC9B,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;AAC/B,IAAA;8GALY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,2nBCTnC,04CAoBW,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDXE,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,04CAAA,EAAA;;;AEPjD;;AAEG;;;;"}
+{"version":3,"file":"softpak-components-spx-suggestion.mjs","sources":["../../../../projects/softpak/components/spx-suggestion/spx-suggestion.component.ts","../../../../projects/softpak/components/spx-suggestion/spx-suggestion.component.html","../../../../projects/softpak/components/spx-suggestion/softpak-components-spx-suggestion.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, HostListener, input, viewChild } from '@angular/core';\nimport { Haptics, ImpactStyle } from '@capacitor/haptics';\n\n@Component({\n  selector: 'spx-suggestion',\n  standalone: true,\n  templateUrl: './spx-suggestion.component.html',\n  styleUrl: './spx-suggestion.component.css',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SpxSuggestionComponent {\n  spxDisabled = input<boolean>();\n  spxFocused = input<boolean>();\n  spxSelected = input<boolean>();\n  spxTabbable = input<boolean>();\n  private isPressing = false;\n  suggestionRef = viewChild<ElementRef<HTMLButtonElement>>('suggestionRef');\n\n  handlePress = async () => {\n    this.isPressing = true;\n    try {\n      await Haptics.impact({ style: ImpactStyle.Light });\n    } catch {\n      // silence if haptics is not available\n    }\n  };\n\n  @HostListener('document:pointerup', ['$event'])\n  onDocumentPointerUp = async (event: PointerEvent) => {\n    if (!this.isPressing) {\n      return;\n    }\n    this.isPressing = false;\n\n    const btn = this.suggestionRef()?.nativeElement;\n    if (!btn) {\n      return;\n    }\n\n    const inside = btn.contains(event.target as Node);\n\n    try {\n      if (inside) {\n        // OK haptic\n        await Haptics.impact({ style: ImpactStyle.Medium });\n      } else {\n        // Cancel haptic\n        await Haptics.impact({ style: ImpactStyle.Light });\n      }\n    } catch {\n      // ignore\n    }\n  };\n}\n","<button\n  #suggestionRef\n    type=\"button\"\n    class=\"spx-suggestion block rounded text-gray-900 text-sm p-3 w-full text-left truncate outline-none\"\n    [class.bg-sky-100]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.focus:ring-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.hover:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.active:bg-sky-300]=\"!this.spxSelected() && !this.spxDisabled()\"\n    [class.bg-gray-200]=\"this.spxDisabled() && !this.spxSelected()\"\n    [class.bg-gray-400]=\"this.spxDisabled() && this.spxSelected()\"\n    [class.cursor-not-allowed]=\"this.spxDisabled()\"\n    [class.opacity-60]=\"this.spxDisabled()\"\n    [class.bg-gradient-to-r]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.from-teal-400]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.to-teal-600]=\"this.spxSelected() && !this.spxDisabled()\"\n    [class.font-bold]=\"this.spxSelected()\"\n    [attr.tabindex]=\"this.spxTabbable() && !this.spxDisabled() ? 0 : -1\"\n    [class.ring-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-offset-2]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    [class.ring-blue-500]=\"this.spxFocused() && this.spxTabbable() && !this.spxDisabled()\"\n    (pointerdown)=\"this.handlePress()\">\n    <div class=\"text-ellipsis overflow-hidden whitespace-nowrap\"><ng-content></ng-content></div>\n  </button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAUa,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QAQE,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QAC9B,IAAA,CAAA,UAAU,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QAC7B,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QAC9B,IAAA,CAAA,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;QACtB,IAAA,CAAA,UAAU,GAAG,KAAK;AAC1B,QAAA,IAAA,CAAA,aAAa,GAAG,SAAS,CAAgC,eAAe,yDAAC;QAEzE,IAAA,CAAA,WAAW,GAAG,YAAW;AACvB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,YAAA,IAAI;AACF,gBAAA,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;YACpD;AAAE,YAAA,MAAM;;YAER;AACF,QAAA,CAAC;AAGD,QAAA,IAAA,CAAA,mBAAmB,GAAG,OAAO,KAAmB,KAAI;AAClD,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;gBACpB;YACF;AACA,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;YAEvB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,aAAa;YAC/C,IAAI,CAAC,GAAG,EAAE;gBACR;YACF;YAEA,MAAM,MAAM,GAAG,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;AAEjD,YAAA,IAAI;gBACF,IAAI,MAAM,EAAE;;AAEV,oBAAA,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,CAAC;gBACrD;qBAAO;;AAEL,oBAAA,MAAM,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;gBACpD;YACF;AAAE,YAAA,MAAM;;YAER;AACF,QAAA,CAAC;AACF,IAAA;8GA3CY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,y0BCVnC,s8CAsBW,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDZE,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,s8CAAA,EAAA;8BAoB/C,mBAAmB,EAAA,CAAA;sBADlB,YAAY;uBAAC,oBAAoB,EAAE,CAAC,QAAQ,CAAC;;;AE3BhD;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softpak/components",
-  "version": "20.12.19",
+  "version": "20.13.1",
   "private": false,
   "peerDependencies": {
     "@angular/common": "20.x.x",
@@ -32,6 +32,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/softpak-components.mjs"
     },
+    "./spx-alert": {
+      "types": "./spx-alert/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-alert.mjs"
+    },
     "./spx-404-page": {
       "types": "./spx-404-page/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-404-page.mjs"
@@ -40,26 +44,22 @@
       "types": "./spx-app-configuration/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-app-configuration.mjs"
     },
-    "./spx-button": {
-      "types": "./spx-button/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-button.mjs"
-    },
     "./spx-app-expiry": {
       "types": "./spx-app-expiry/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-app-expiry.mjs"
     },
-    "./spx-capitalize": {
-      "types": "./spx-capitalize/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-capitalize.mjs"
-    },
-    "./spx-alert": {
-      "types": "./spx-alert/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-alert.mjs"
+    "./spx-button": {
+      "types": "./spx-button/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-button.mjs"
     },
     "./spx-card": {
       "types": "./spx-card/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-card.mjs"
     },
+    "./spx-capitalize": {
+      "types": "./spx-capitalize/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-capitalize.mjs"
+    },
     "./spx-change-details": {
       "types": "./spx-change-details/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-change-details.mjs"
@@ -68,41 +68,45 @@
       "types": "./spx-channel-selection/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-channel-selection.mjs"
     },
-    "./spx-confirm": {
-      "types": "./spx-confirm/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-confirm.mjs"
-    },
     "./spx-check-digit": {
       "types": "./spx-check-digit/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-check-digit.mjs"
     },
-    "./spx-form-view": {
-      "types": "./spx-form-view/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-form-view.mjs"
-    },
     "./spx-form-section": {
       "types": "./spx-form-section/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-form-section.mjs"
     },
+    "./spx-confirm": {
+      "types": "./spx-confirm/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-confirm.mjs"
+    },
+    "./spx-form-view": {
+      "types": "./spx-form-view/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-form-view.mjs"
+    },
     "./spx-helpers": {
       "types": "./spx-helpers/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-helpers.mjs"
     },
-    "./spx-inputs": {
-      "types": "./spx-inputs/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-inputs.mjs"
-    },
     "./spx-navigation": {
       "types": "./spx-navigation/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-navigation.mjs"
     },
+    "./spx-number-check": {
+      "types": "./spx-number-check/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-number-check.mjs"
+    },
     "./spx-pagination": {
       "types": "./spx-pagination/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-pagination.mjs"
     },
-    "./spx-number-check": {
-      "types": "./spx-number-check/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-number-check.mjs"
+    "./spx-inputs": {
+      "types": "./spx-inputs/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-inputs.mjs"
+    },
+    "./spx-progress-bar": {
+      "types": "./spx-progress-bar/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-progress-bar.mjs"
     },
     "./spx-patch": {
       "types": "./spx-patch/index.d.ts",
@@ -112,18 +116,14 @@
       "types": "./spx-pipes/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-pipes.mjs"
     },
-    "./spx-spinner": {
-      "types": "./spx-spinner/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-spinner.mjs"
-    },
-    "./spx-progress-bar": {
-      "types": "./spx-progress-bar/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-progress-bar.mjs"
-    },
     "./spx-redux": {
       "types": "./spx-redux/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-redux.mjs"
     },
+    "./spx-spinner": {
+      "types": "./spx-spinner/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-spinner.mjs"
+    },
     "./spx-stock-info": {
       "types": "./spx-stock-info/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-stock-info.mjs"
@@ -140,17 +140,17 @@
       "types": "./spx-tabs/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-tabs.mjs"
     },
-    "./spx-translate": {
-      "types": "./spx-translate/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-translate.mjs"
+    "./spx-toaster": {
+      "types": "./spx-toaster/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-toaster.mjs"
     },
     "./spx-toggle": {
       "types": "./spx-toggle/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-toggle.mjs"
     },
-    "./spx-toaster": {
-      "types": "./spx-toaster/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-toaster.mjs"
+    "./spx-translate": {
+      "types": "./spx-translate/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-translate.mjs"
     },
     "./spx-update": {
       "types": "./spx-update/index.d.ts",
@@ -160,13 +160,13 @@
       "types": "./spx-validation-messages/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-validation-messages.mjs"
     },
-    "./spx-welcome": {
-      "types": "./spx-welcome/index.d.ts",
-      "default": "./fesm2022/softpak-components-spx-welcome.mjs"
-    },
     "./spx-validation": {
       "types": "./spx-validation/index.d.ts",
       "default": "./fesm2022/softpak-components-spx-validation.mjs"
+    },
+    "./spx-welcome": {
+      "types": "./spx-welcome/index.d.ts",
+      "default": "./fesm2022/softpak-components-spx-welcome.mjs"
     }
   }
 }

package/spx-alert/index.d.ts

@@ -1,4 +1,4 @@
-import * as _fortawesome_free_solid_svg_icons from '@fortawesome/free-solid-svg-icons';
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import * as _angular_core from '@angular/core';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
 
@@ -12,10 +12,10 @@ declare class SpxAlertComponent {
     readonly spxMarginTop: _angular_core.InputSignal<boolean>;
     readonly spxSeverity: _angular_core.InputSignal<SpxSeverityEnum | undefined>;
     SpxSeverity: typeof SpxSeverityEnum;
-    faCheck: _fortawesome_free_solid_svg_icons.IconDefinition;
-    faCircleInfo: _fortawesome_free_solid_svg_icons.IconDefinition;
-    faTriangleExclamation: _fortawesome_free_solid_svg_icons.IconDefinition;
-    faTimes: _fortawesome_free_solid_svg_icons.IconDefinition;
+    faCheck: _fortawesome_fontawesome_common_types.IconDefinition;
+    faCircleInfo: _fortawesome_fontawesome_common_types.IconDefinition;
+    faTriangleExclamation: _fortawesome_fontawesome_common_types.IconDefinition;
+    faTimes: _fortawesome_fontawesome_common_types.IconDefinition;
     componentDidLoad(): void;
     private prepareAutoClose;
     private _assignDefaultTitle;

package/spx-button/index.d.ts

@@ -15,11 +15,14 @@ declare class SpxButtonComponent {
     readonly spxType: _angular_core.InputSignal<"button" | "submit">;
     protected mappedName: _angular_core.Signal<string | undefined>;
     readonly spxName: _angular_core.InputSignal<string | undefined>;
+    isPressing: boolean;
     spxClick: _angular_core.OutputEmitterRef<void>;
     buttonRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     SpxSeverity: typeof SpxSeverityEnum;
     hasShadowDom: (el: HTMLElement) => boolean;
     handleClick: () => void;
+    handlePress: () => Promise<void>;
+    onDocumentPointerUp: (event: PointerEvent) => Promise<void>;
     spxSetFocus(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpxButtonComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxButtonComponent, "spx-button", never, { "spxDisabled": { "alias": "spxDisabled"; "required": false; "isSignal": true; }; "spxClass": { "alias": "spxClass"; "required": false; "isSignal": true; }; "spxClassObject": { "alias": "spxClassObject"; "required": false; "isSignal": true; }; "spxForm": { "alias": "spxForm"; "required": false; "isSignal": true; }; "spxFullHeight": { "alias": "spxFullHeight"; "required": false; "isSignal": true; }; "spxFullWidth": { "alias": "spxFullWidth"; "required": false; "isSignal": true; }; "spxSeverity": { "alias": "spxSeverity"; "required": false; "isSignal": true; }; "spxSize": { "alias": "spxSize"; "required": false; "isSignal": true; }; "spxTabIndex": { "alias": "spxTabIndex"; "required": false; "isSignal": true; }; "spxType": { "alias": "spxType"; "required": false; "isSignal": true; }; "spxName": { "alias": "spxName"; "required": false; "isSignal": true; }; }, { "spxClick": "spxClick"; }, never, ["*"], true, never>;

package/spx-confirm/index.d.ts

@@ -1,4 +1,4 @@
-import * as _fortawesome_free_solid_svg_icons from '@fortawesome/free-solid-svg-icons';
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import * as i0 from '@angular/core';
 import { OnInit, OnDestroy } from '@angular/core';
 import { SpxSeverityEnum } from '@softpak/components/spx-helpers';
@@ -11,7 +11,7 @@ declare class SpxConfirmComponent {
     id: i0.InputSignal<string>;
     spxCancel: i0.OutputEmitterRef<string>;
     spxConfirm: i0.OutputEmitterRef<string>;
-    faTimes: _fortawesome_free_solid_svg_icons.IconDefinition;
+    faTimes: _fortawesome_fontawesome_common_types.IconDefinition;
     severityError: SpxSeverityEnum;
     severityInfo: SpxSeverityEnum;
     severitySuccess: SpxSeverityEnum;

package/spx-inputs/index.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef, ChangeDetectorRef, EventEmitter, QueryList, OnInit, SimpleChanges } from '@angular/core';
-import * as _fortawesome_free_solid_svg_icons from '@fortawesome/free-solid-svg-icons';
+import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 import { Observable } from 'rxjs';
 import { SpxSeverityEnum, SpxInputAlertI as SpxInputAlertI$1 } from '@softpak/components/spx-helpers';
 import { ModalController } from '@ionic/angular/standalone';
@@ -28,10 +28,10 @@ interface SpxInputAlertI {
 
 declare class SpxInputBoxComponent {
     selectedInputService: SelectedInputService;
-    faEdit: _fortawesome_free_solid_svg_icons.IconDefinition;
-    faSearch: _fortawesome_free_solid_svg_icons.IconDefinition;
-    faQuestion: _fortawesome_free_solid_svg_icons.IconDefinition;
-    faTimes: _fortawesome_free_solid_svg_icons.IconDefinition;
+    faEdit: _fortawesome_fontawesome_common_types.IconDefinition;
+    faSearch: _fortawesome_fontawesome_common_types.IconDefinition;
+    faQuestion: _fortawesome_fontawesome_common_types.IconDefinition;
+    faTimes: _fortawesome_fontawesome_common_types.IconDefinition;
     SpxSeverity: typeof SpxSeverityEnum;
     clearButtonName: _angular_core.Signal<string | undefined>;
     searchButtonName: _angular_core.Signal<string | undefined>;

package/spx-suggestion/index.d.ts

@@ -1,10 +1,15 @@
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 declare class SpxSuggestionComponent {
     spxDisabled: _angular_core.InputSignal<boolean | undefined>;
     spxFocused: _angular_core.InputSignal<boolean | undefined>;
     spxSelected: _angular_core.InputSignal<boolean | undefined>;
     spxTabbable: _angular_core.InputSignal<boolean | undefined>;
+    private isPressing;
+    suggestionRef: _angular_core.Signal<ElementRef<HTMLButtonElement> | undefined>;
+    handlePress: () => Promise<void>;
+    onDocumentPointerUp: (event: PointerEvent) => Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpxSuggestionComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpxSuggestionComponent, "spx-suggestion", never, { "spxDisabled": { "alias": "spxDisabled"; "required": false; "isSignal": true; }; "spxFocused": { "alias": "spxFocused"; "required": false; "isSignal": true; }; "spxSelected": { "alias": "spxSelected"; "required": false; "isSignal": true; }; "spxTabbable": { "alias": "spxTabbable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }