@softpak/components 19.17.0-beta.1 → 19.17.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/softpak-components-spx-alert.mjs +2 -2
- package/fesm2022/softpak-components-spx-alert.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +15 -6
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-navigation.mjs +2 -2
- package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-spinner.mjs +2 -2
- package/fesm2022/softpak-components-spx-spinner.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-toaster.mjs +16 -24
- package/fesm2022/softpak-components-spx-toaster.mjs.map +1 -1
- package/package.json +25 -25
- package/spx-inputs/spx-input-text/spx-input-text.component.d.ts +4 -1
- package/spx-inputs/spx-input.component.d.ts +1 -0
- package/spx-toaster/src/spx-toaster-message.interface.d.ts +3 -1
- package/spx-toaster/src/spx-toaster.component.d.ts +1 -3
- package/tailwind.css +1 -1
|
@@ -58,14 +58,14 @@ class SpxAlertComponent {
|
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxAlertComponent, isStandalone: true, selector: "spx-alert", inputs: { spxAutoclose: { classPropertyName: "spxAutoclose", publicName: "spxAutoclose", isSignal: true, isRequired: false, transformFunction: null }, spxCloseable: { classPropertyName: "spxCloseable", publicName: "spxCloseable", isSignal: true, isRequired: false, transformFunction: null }, spxHideTitle: { classPropertyName: "spxHideTitle", publicName: "spxHideTitle", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxMarginTop: { classPropertyName: "spxMarginTop", publicName: "spxMarginTop", isSignal: true, isRequired: false, transformFunction: null }, spxSeverity: { classPropertyName: "spxSeverity", publicName: "spxSeverity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClose: "spxClose", spxTitle: "spxTitleChange" }, ngImport: i0, template: "<div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n [class.cursor-pointer]=\"this.spxCloseable()\"\n [class.bg-red-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.border-red-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.text-red-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.bg-cyan-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.border-cyan-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.text-cyan-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.bg-lime-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.border-lime-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.text-lime-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.bg-amber-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.border-amber-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.text-amber-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.focus:ring-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.hover:bg-red-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.over:border-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.focus:ring-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.hover:bg-cyan-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.over:border-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.focus:ring-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.hover:bg-lime-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.over:border-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.focus:ring-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.hover:bg-amber-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.over:border-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n (click)=\"onClose()\">\n @if ((this.spxSeverity() | isSeverity: SpxSeverity.info)) {\n <fa-icon\n [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.error) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.success) {\n <fa-icon\n [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.warning) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n }\n <div class=\"grow\">\n @if (this.spxTitle() && !this.spxHideTitle()) {\n <p class=\"font-bold\">{{this.spxTitle()}}</p>\n }\n <p class=\"text-sm\">\n <ng-content></ng-content>\n </p>\n </div>\n @if (this.spxCloseable()) {\n <fa-icon\n [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n }\n </div>", dependencies: [{ 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"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
61
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxAlertComponent, isStandalone: true, selector: "spx-alert", inputs: { spxAutoclose: { classPropertyName: "spxAutoclose", publicName: "spxAutoclose", isSignal: true, isRequired: false, transformFunction: null }, spxCloseable: { classPropertyName: "spxCloseable", publicName: "spxCloseable", isSignal: true, isRequired: false, transformFunction: null }, spxHideTitle: { classPropertyName: "spxHideTitle", publicName: "spxHideTitle", isSignal: true, isRequired: false, transformFunction: null }, spxTitle: { classPropertyName: "spxTitle", publicName: "spxTitle", isSignal: true, isRequired: false, transformFunction: null }, spxMarginTop: { classPropertyName: "spxMarginTop", publicName: "spxMarginTop", isSignal: true, isRequired: false, transformFunction: null }, spxSeverity: { classPropertyName: "spxSeverity", publicName: "spxSeverity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spxClose: "spxClose", spxTitle: "spxTitleChange" }, ngImport: i0, template: "<div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n [class.cursor-pointer]=\"this.spxCloseable()\"\n [class.bg-red-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.border-red-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.text-red-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.bg-cyan-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.border-cyan-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.text-cyan-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.bg-lime-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.border-lime-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.text-lime-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.bg-amber-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.border-amber-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.text-amber-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.focus:ring-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.hover:bg-red-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.over:border-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.focus:ring-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.hover:bg-cyan-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.over:border-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.focus:ring-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.hover:bg-lime-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.over:border-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.focus:ring-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.hover:bg-amber-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.over:border-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n (click)=\"onClose()\">\n @if ((this.spxSeverity() | isSeverity: SpxSeverity.info)) {\n <fa-icon\n [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.error) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.success) {\n <fa-icon\n [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.warning) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n }\n <div class=\"grow\">\n @if (this.spxTitle() && !this.spxHideTitle()) {\n <p class=\"font-bold\">{{this.spxTitle()}}</p>\n }\n <p class=\"text-sm\">\n <ng-content></ng-content>\n </p>\n </div>\n @if (this.spxCloseable()) {\n <fa-icon\n [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n }\n </div>", styles: [":host{display:block}\n"], dependencies: [{ 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"] }, { kind: "pipe", type: IsSeverityPipe, name: "isSeverity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
62
62
|
}
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxAlertComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
65
|
args: [{ selector: 'spx-alert', imports: [
|
|
66
66
|
FontAwesomeModule,
|
|
67
67
|
IsSeverityPipe
|
|
68
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n [class.cursor-pointer]=\"this.spxCloseable()\"\n [class.bg-red-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.border-red-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.text-red-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.bg-cyan-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.border-cyan-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.text-cyan-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.bg-lime-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.border-lime-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.text-lime-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.bg-amber-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.border-amber-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.text-amber-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.focus:ring-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.hover:bg-red-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.over:border-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.focus:ring-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.hover:bg-cyan-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.over:border-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.focus:ring-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.hover:bg-lime-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.over:border-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.focus:ring-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.hover:bg-amber-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.over:border-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n (click)=\"onClose()\">\n @if ((this.spxSeverity() | isSeverity: SpxSeverity.info)) {\n <fa-icon\n [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.error) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.success) {\n <fa-icon\n [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.warning) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n }\n <div class=\"grow\">\n @if (this.spxTitle() && !this.spxHideTitle()) {\n <p class=\"font-bold\">{{this.spxTitle()}}</p>\n }\n <p class=\"text-sm\">\n <ng-content></ng-content>\n </p>\n </div>\n @if (this.spxCloseable()) {\n <fa-icon\n [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n }\n </div>" }]
|
|
68
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n [class.cursor-pointer]=\"this.spxCloseable()\"\n [class.bg-red-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.border-red-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.text-red-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.bg-cyan-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.border-cyan-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.text-cyan-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.bg-lime-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.border-lime-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.text-lime-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.bg-amber-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.border-amber-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.text-amber-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.focus:ring-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.hover:bg-red-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.over:border-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.focus:ring-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.hover:bg-cyan-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.over:border-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.focus:ring-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.hover:bg-lime-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.over:border-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.focus:ring-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.hover:bg-amber-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.over:border-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n (click)=\"onClose()\">\n @if ((this.spxSeverity() | isSeverity: SpxSeverity.info)) {\n <fa-icon\n [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.error) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.success) {\n <fa-icon\n [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.warning) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n }\n <div class=\"grow\">\n @if (this.spxTitle() && !this.spxHideTitle()) {\n <p class=\"font-bold\">{{this.spxTitle()}}</p>\n }\n <p class=\"text-sm\">\n <ng-content></ng-content>\n </p>\n </div>\n @if (this.spxCloseable()) {\n <fa-icon\n [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n }\n </div>", styles: [":host{display:block}\n"] }]
|
|
69
69
|
}] });
|
|
70
70
|
|
|
71
71
|
class SpxAlertI {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"softpak-components-spx-alert.mjs","sources":["../../../../projects/softpak/components/spx-alert/spx-alert.component.ts","../../../../projects/softpak/components/spx-alert/spx-alert.component.html","../../../../projects/softpak/components/spx-alert/spx-alert.interface.ts","../../../../projects/softpak/components/spx-alert/softpak-components-spx-alert.ts"],"sourcesContent":["\nimport { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faCheck, faCircleInfo, faTimes, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\nimport { IsSeverityPipe } from \"@softpak/components/spx-pipes\";\n\n@Component({\n selector: 'spx-alert',\n imports: [\n FontAwesomeModule,\n IsSeverityPipe\n],\n templateUrl: './spx-alert.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n})\nexport class SpxAlertComponent {\n _autoCloseTimeout = signal<NodeJS.Timeout | null>(null);\n spxClose = output();\n readonly spxAutoclose = input<number>();\n readonly spxCloseable = input<boolean | undefined>(false);\n readonly spxHideTitle = input(false);\n readonly spxTitle = model<string>();\n readonly spxMarginTop = input(false);\n readonly spxSeverity = input<SpxSeverityEnum>();\n SpxSeverity = SpxSeverityEnum;\n faCheck = faCheck;\n faCircleInfo = faCircleInfo;\n faTriangleExclamation = faTriangleExclamation;\n faTimes = faTimes;\n\n componentDidLoad() {\n if (this.spxAutoclose()) {\n this.prepareAutoClose();\n }\n if (!this.spxTitle()) {\n this._assignDefaultTitle();\n }\n }\n\n private prepareAutoClose(): void {\n this._autoCloseTimeout.set(setTimeout(() => {\n this.onClose();\n this._autoCloseTimeout.set(null);\n }, this.spxAutoclose()));\n }\n\n private _assignDefaultTitle(): void {\n switch (this.spxSeverity()) {\n case SpxSeverityEnum.error:\n this.spxTitle.set('Error');\n break;\n case SpxSeverityEnum.info:\n this.spxTitle.set('Info');\n break;\n case SpxSeverityEnum.success:\n this.spxTitle.set('Notification');\n break;\n case SpxSeverityEnum.warning:\n this.spxTitle.set('Warning');\n break;\n }\n }\n\n onClose() {\n if (this.spxCloseable()) {\n this.spxClose.emit();\n }\n }\n}\n","<div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n [class.cursor-pointer]=\"this.spxCloseable()\"\n [class.bg-red-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.border-red-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.text-red-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.bg-cyan-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.border-cyan-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.text-cyan-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.bg-lime-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.border-lime-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.text-lime-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.bg-amber-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.border-amber-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.text-amber-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.focus:ring-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.hover:bg-red-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.over:border-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.focus:ring-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.hover:bg-cyan-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.over:border-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.focus:ring-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.hover:bg-lime-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.over:border-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.focus:ring-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.hover:bg-amber-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.over:border-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n (click)=\"onClose()\">\n @if ((this.spxSeverity() | isSeverity: SpxSeverity.info)) {\n <fa-icon\n [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.error) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.success) {\n <fa-icon\n [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.warning) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n }\n <div class=\"grow\">\n @if (this.spxTitle() && !this.spxHideTitle()) {\n <p class=\"font-bold\">{{this.spxTitle()}}</p>\n }\n <p class=\"text-sm\">\n <ng-content></ng-content>\n </p>\n </div>\n @if (this.spxCloseable()) {\n <fa-icon\n [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n }\n </div>","import { SpxSeverityEnum } from \"@softpak/components/spx-helpers\";\n\nexport class SpxAlertI {\n closeable?: boolean;\n id?: number;\n message?: string;\n severity?: SpxSeverityEnum;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"softpak-components-spx-alert.mjs","sources":["../../../../projects/softpak/components/spx-alert/spx-alert.component.ts","../../../../projects/softpak/components/spx-alert/spx-alert.component.html","../../../../projects/softpak/components/spx-alert/spx-alert.interface.ts","../../../../projects/softpak/components/spx-alert/softpak-components-spx-alert.ts"],"sourcesContent":["\nimport { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { faCheck, faCircleInfo, faTimes, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\nimport { IsSeverityPipe } from \"@softpak/components/spx-pipes\";\n\n@Component({\n selector: 'spx-alert',\n imports: [\n FontAwesomeModule,\n IsSeverityPipe\n],\n templateUrl: './spx-alert.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n styleUrl: './spx-alert.component.scss',\n})\nexport class SpxAlertComponent {\n _autoCloseTimeout = signal<NodeJS.Timeout | null>(null);\n spxClose = output();\n readonly spxAutoclose = input<number>();\n readonly spxCloseable = input<boolean | undefined>(false);\n readonly spxHideTitle = input(false);\n readonly spxTitle = model<string>();\n readonly spxMarginTop = input(false);\n readonly spxSeverity = input<SpxSeverityEnum>();\n SpxSeverity = SpxSeverityEnum;\n faCheck = faCheck;\n faCircleInfo = faCircleInfo;\n faTriangleExclamation = faTriangleExclamation;\n faTimes = faTimes;\n\n componentDidLoad() {\n if (this.spxAutoclose()) {\n this.prepareAutoClose();\n }\n if (!this.spxTitle()) {\n this._assignDefaultTitle();\n }\n }\n\n private prepareAutoClose(): void {\n this._autoCloseTimeout.set(setTimeout(() => {\n this.onClose();\n this._autoCloseTimeout.set(null);\n }, this.spxAutoclose()));\n }\n\n private _assignDefaultTitle(): void {\n switch (this.spxSeverity()) {\n case SpxSeverityEnum.error:\n this.spxTitle.set('Error');\n break;\n case SpxSeverityEnum.info:\n this.spxTitle.set('Info');\n break;\n case SpxSeverityEnum.success:\n this.spxTitle.set('Notification');\n break;\n case SpxSeverityEnum.warning:\n this.spxTitle.set('Warning');\n break;\n }\n }\n\n onClose() {\n if (this.spxCloseable()) {\n this.spxClose.emit();\n }\n }\n}\n","<div class=\"flex items-center gap-3 border-t-4 rounded px-4 py-3 shadow-md\"\n [class.cursor-pointer]=\"this.spxCloseable()\"\n [class.bg-red-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.border-red-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.text-red-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.error\"\n [class.bg-cyan-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.border-cyan-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.text-cyan-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.info\"\n [class.bg-lime-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.border-lime-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.text-lime-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.success\"\n [class.bg-amber-100]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.border-amber-500]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.text-amber-900]=\"this.spxSeverity() | isSeverity: SpxSeverity.warning\"\n [class.focus:ring-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.hover:bg-red-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.over:border-red-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.error)\"\n [class.focus:ring-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.hover:bg-cyan-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.over:border-cyan-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.info)\"\n [class.focus:ring-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.hover:bg-lime-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.over:border-lime-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.success)\"\n [class.focus:ring-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.hover:bg-amber-200]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n [class.over:border-amber-600]=\"this.spxCloseable() && (this.spxSeverity() | isSeverity: SpxSeverity.warning)\"\n (click)=\"onClose()\">\n @if ((this.spxSeverity() | isSeverity: SpxSeverity.info)) {\n <fa-icon\n [icon]=\"faCircleInfo\" class=\"block text-xl text-cyan-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.error) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-red-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.success) {\n <fa-icon\n [icon]=\"faCheck\" class=\"block text-xl text-lime-600\"></fa-icon>\n }\n @if (this.spxSeverity() | isSeverity: SpxSeverity.warning) {\n <fa-icon\n [icon]=\"faTriangleExclamation\" class=\"block text-xl text-amber-600\"></fa-icon>\n }\n <div class=\"grow\">\n @if (this.spxTitle() && !this.spxHideTitle()) {\n <p class=\"font-bold\">{{this.spxTitle()}}</p>\n }\n <p class=\"text-sm\">\n <ng-content></ng-content>\n </p>\n </div>\n @if (this.spxCloseable()) {\n <fa-icon\n [icon]=\"faTimes\" class=\"block text-xl\"></fa-icon>\n }\n </div>","import { SpxSeverityEnum } from \"@softpak/components/spx-helpers\";\n\nexport class SpxAlertI {\n closeable?: boolean;\n id?: number;\n message?: string;\n severity?: SpxSeverityEnum;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ import { IsSeverityPipe } from '@softpak/components/spx-pipes';
|
|
|
9
9
|
import { SpxSeverityEnum, valuePairToValue } from '@softpak/components/spx-helpers';
|
|
10
10
|
import * as i1$1 from '@angular/forms';
|
|
11
11
|
import { ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
12
|
+
import { JsonPipe } from '@angular/common';
|
|
12
13
|
import { SpxSuggestionComponent } from '@softpak/components/spx-suggestion';
|
|
13
14
|
import { DateTime } from 'luxon';
|
|
14
15
|
import * as i1$2 from '@ionic/angular/standalone';
|
|
@@ -193,7 +194,8 @@ var SpxInputTypeEnum;
|
|
|
193
194
|
})(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
|
|
194
195
|
|
|
195
196
|
class SpxInputTextComponent {
|
|
196
|
-
constructor() {
|
|
197
|
+
constructor(changeDetectorRef) {
|
|
198
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
197
199
|
this.spxName = input();
|
|
198
200
|
this.spxAutofocus = input(false);
|
|
199
201
|
this.spxAutocomplete = input();
|
|
@@ -221,6 +223,9 @@ class SpxInputTextComponent {
|
|
|
221
223
|
this.spxSetFocus();
|
|
222
224
|
});
|
|
223
225
|
}
|
|
226
|
+
triggerChangeDetection() {
|
|
227
|
+
this.changeDetectorRef.detectChanges();
|
|
228
|
+
}
|
|
224
229
|
spxSetFocus() {
|
|
225
230
|
this.inputRef().nativeElement?.focus();
|
|
226
231
|
}
|
|
@@ -242,17 +247,18 @@ class SpxInputTextComponent {
|
|
|
242
247
|
this.spxSetFocus();
|
|
243
248
|
}
|
|
244
249
|
}
|
|
245
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
246
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n <input\n #input\n class=\"font-bold text-lg w-full outline-none\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\"\n [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.inputMode]=\"this.spxInputMode()\"\n [attr.pattern]=\"this.spxPattern()\"\n [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.spxReadonly()\"\n [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\n (ngModelChange)=\"this.handleChange($event)\"\n />\n
|
|
250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
251
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SpxInputTextComponent, isStandalone: true, selector: "spx-input-text", inputs: { spxName: { classPropertyName: "spxName", publicName: "spxName", isSignal: true, isRequired: false, transformFunction: null }, spxAutofocus: { classPropertyName: "spxAutofocus", publicName: "spxAutofocus", isSignal: true, isRequired: false, transformFunction: null }, spxAutocomplete: { classPropertyName: "spxAutocomplete", publicName: "spxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, spxInputMode: { classPropertyName: "spxInputMode", publicName: "spxInputMode", isSignal: true, isRequired: false, transformFunction: null }, spxPattern: { classPropertyName: "spxPattern", publicName: "spxPattern", isSignal: true, isRequired: false, transformFunction: null }, spxSuggestions: { classPropertyName: "spxSuggestions", publicName: "spxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, spxReadonly: { classPropertyName: "spxReadonly", publicName: "spxReadonly", isSignal: true, isRequired: false, transformFunction: null }, spxValidators: { classPropertyName: "spxValidators", publicName: "spxValidators", isSignal: true, isRequired: false, transformFunction: null }, spxCapitalize: { classPropertyName: "spxCapitalize", publicName: "spxCapitalize", isSignal: true, isRequired: false, transformFunction: null }, spxType: { classPropertyName: "spxType", publicName: "spxType", isSignal: true, isRequired: false, transformFunction: null }, spxWasInternalUpdate: { classPropertyName: "spxWasInternalUpdate", publicName: "spxWasInternalUpdate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, spxElementId: { classPropertyName: "spxElementId", publicName: "spxElementId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"relative text-black\">\n <input\n #input\n class=\"font-bold text-lg w-full outline-none\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\"\n [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.inputMode]=\"this.spxInputMode()\"\n [attr.pattern]=\"this.spxPattern()\"\n [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.spxReadonly()\"\n [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\n (ngModelChange)=\"this.handleChange($event)\"\n />\n @if (this.value()?.description && this.value()?.value && this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n <span>{{this.value()?.value}}</span>\n }\n @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\n <spx-dropdown\n [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n </spx-dropdown>\n }\n</div>", dependencies: [{ kind: "component", type: SpxDropdownComponent, selector: "spx-dropdown", inputs: ["spxSuggestions"], outputs: ["spxSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
247
252
|
}
|
|
248
253
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SpxInputTextComponent, decorators: [{
|
|
249
254
|
type: Component,
|
|
250
255
|
args: [{ selector: 'spx-input-text', imports: [
|
|
251
256
|
SpxDropdownComponent,
|
|
252
257
|
ReactiveFormsModule,
|
|
253
|
-
FormsModule
|
|
254
|
-
|
|
255
|
-
|
|
258
|
+
FormsModule,
|
|
259
|
+
JsonPipe
|
|
260
|
+
], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative text-black\">\n <input\n #input\n class=\"font-bold text-lg w-full outline-none\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n [attr.autocomplete]=\"this.spxAutocomplete()\"\n [attr.autofocus]=\"this.spxAutofocus()\"\n [attr.disabled]=\"this.spxReadonly()\"\n [attr.inputMode]=\"this.spxInputMode()\"\n [attr.pattern]=\"this.spxPattern()\"\n [attr.name]=\"this.spxName()\"\n [attr.type]=\"this.spxType()\"\n [class.bg-white]=\"!this.spxReadonly()\"\n [class.bg-gray-300]=\"this.spxReadonly()\"\n [class.cursor-not-allowed]=\"this.spxReadonly()\"\n [class.uppercase]=\"this.spxCapitalize()\"\n [disabled]=\"this.spxReadonly()\"\n [ngModel]=\"this.value()?.description ? this.value()?.description : this.value()?.value\"\n (ngModelChange)=\"this.handleChange($event)\"\n />\n @if (this.value()?.description && this.value()?.value && this.value()?.description?.valueOf() !== this.value()?.value?.valueOf()) {\n <span>{{this.value()?.value}}</span>\n }\n @if (this.spxIsFocused() && (this.spxType() === 'overlay' || this.spxType() === 'overlaynumber')) {\n <spx-dropdown\n [spxSuggestions]=\"this.spxSuggestions()\" (spxSelect)=\"this.handleSuggestionClick($event)\">\n </spx-dropdown>\n }\n</div>" }]
|
|
261
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
|
|
256
262
|
|
|
257
263
|
class SpxInputFloatComponent {
|
|
258
264
|
constructor() {
|
|
@@ -903,6 +909,9 @@ class SpxInputComponent {
|
|
|
903
909
|
handleChange(event) {
|
|
904
910
|
this.value.set(event);
|
|
905
911
|
}
|
|
912
|
+
triggerChangeDetection() {
|
|
913
|
+
this.textInput()?.triggerChangeDetection();
|
|
914
|
+
}
|
|
906
915
|
handleClear() {
|
|
907
916
|
this.spxClear.emit();
|
|
908
917
|
this.passFocusToControl();
|