@softpak/components 0.0.0-beta.1 → 0.0.0-beta.10

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.
Files changed (23) hide show
  1. package/esm2022/spx-button/spx-button.component.mjs +46 -36
  2. package/esm2022/spx-inputs/spx-input-box.component.mjs +15 -15
  3. package/esm2022/spx-inputs/spx-input-text.component.mjs +9 -3
  4. package/esm2022/spx-inputs/spx-input.component.mjs +33 -32
  5. package/esm2022/spx-navigation/spx-home-tile.component.mjs +24 -8
  6. package/esm2022/spx-navigation/spx-home-tiles.component.mjs +3 -5
  7. package/esm2022/spx-navigation/spx-navigation-item.interface.mjs +1 -1
  8. package/esm2022/spx-navigation/spx-navigation.component.mjs +3 -3
  9. package/esm2022/spx-progress-bar/spx-progress-bar.component.mjs +3 -3
  10. package/fesm2022/softpak-components-spx-button.mjs +45 -35
  11. package/fesm2022/softpak-components-spx-button.mjs.map +1 -1
  12. package/fesm2022/softpak-components-spx-inputs.mjs +54 -47
  13. package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
  14. package/fesm2022/softpak-components-spx-navigation.mjs +27 -14
  15. package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
  16. package/fesm2022/softpak-components-spx-progress-bar.mjs +2 -2
  17. package/fesm2022/softpak-components-spx-progress-bar.mjs.map +1 -1
  18. package/package.json +23 -23
  19. package/spx-button/spx-button.component.d.ts +4 -0
  20. package/spx-inputs/spx-input.component.d.ts +0 -1
  21. package/spx-navigation/spx-home-tile.component.d.ts +2 -1
  22. package/spx-navigation/spx-navigation-item.interface.d.ts +1 -0
  23. package/tailwind.css +1 -1
package/fesm2022/softpak-components-spx-button.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"softpak-components-spx-button.mjs","sources":["../../../../projects/softpak/components/spx-button/spx-button.component.ts","../../../../projects/softpak/components/spx-button/softpak-components-spx-button.ts"],"sourcesContent":["import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n selector: 'spx-button',\n standalone: true,\n template: `\n <button\n class=\"border border-transparent font-medium px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm\"\n [class.h-full]=\"this.spxFullHeight\"\n [class.w-full]=\"this.spxFullWidth\"\n [class.bg-blue-600]=\"!this.spxSeverity || this.spxSeverity === 'info'\"\n [class.focus:ring-blue-500]=\"!this.spxSeverity || this.spxSeverity === 'info'\"\n [class.hover:bg-blue-800]=\"!this.spxSeverity || this.spxSeverity === 'info'\"\n [class.bg-red-600]=\"!this.spxSeverity || this.spxSeverity === 'error'\"\n [class.focus:ring-red-500]=\"!this.spxSeverity || this.spxSeverity === 'error'\"\n [class.hover:bg-red-800]=\"!this.spxSeverity || this.spxSeverity === 'error'\"\n [class.bg-lime-600]=\"!this.spxSeverity || this.spxSeverity === 'success'\"\n [class.focus:ring-lime-500]=\"!this.spxSeverity || this.spxSeverity === 'success'\"\n [class.hover:bg-lime-800]=\"!this.spxSeverity || this.spxSeverity === 'success'\"\n [class.bg-amber-600]=\"!this.spxSeverity || this.spxSeverity === 'warning'\"\n [class.focus:ring-amber-500]=\"!this.spxSeverity || this.spxSeverity === 'warning'\"\n [class.hover:bg-amber-800]=\"!this.spxSeverity || this.spxSeverity === 'warning'\"\n [class.text-xl]=\"this.spxSize === 'xl'\"\n [class.text-lg]=\"this.spxSize === 'lg'\"\n [class.cursor-pointer]=\"!this.spxDisabled\"\n [class.cursor-not-allowed]=\"this.spxDisabled\"\n [class.opacity-50]=\"this.spxDisabled\"\n [class.focus:ring-0]=\"this.spxDisabled\"\n [class.hover:bg-red-600]=\"this.spxDisabled && this.spxSeverity === 'error'\"\n [class.hover:bg-blue-600]=\"this.spxDisabled && this.spxSeverity === 'info'\"\n [class.hover:bg-lime-600]=\"this.spxDisabled && this.spxSeverity === 'success'\"\n [class.hover:bg-amber-600]=\"this.spxDisabled && this.spxSeverity === 'warning'\"\n [attr.disabled]=\"this.spxDisabled ? this.spxDisabled : undefined\"\n [attr.form]=\"this.spxForm ? this.spxForm : undefined\"\n [attr.tabindex]=\"this.spxTabIndex ? this.spxTabIndex : undefined\"\n [attr.type]=\"this.spxType ? this.spxType : undefined\"\n (click)=\"this.handleClick()\"\n part=\"button\"><ng-content></ng-content></button>`,\n})\nexport class SpxButtonComponent {\n @HostBinding('class.block') get hostClassBlock() { return this.spxFullWidth; }\n @HostBinding('class.h-full') get hostClassHFull() { return this.spxFullHeight; }\n @HostBinding('class.w-full') get hostClassWFull() { return this.spxFullWidth; }\n @Input() spxDisabled = false;\n @Input() spxClass?: string;\n @Input() spxClassObject?: object;\n @Input() spxForm?: string;\n @Input() spxFullHeight?: boolean;\n @Input() spxFullWidth?: boolean;\n @Input() spxSeverity: SpxSeverityEnum = SpxSeverityEnum.info;\n @Input() spxSize: 'lg' | 'xl' = 'lg';\n @Input() spxTabIndex?: number;\n @Input() spxType: 'button' | 'submit' = 'submit';\n @Output() spxClick: EventEmitter<void> = new EventEmitter<void>();\n\n hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow;\n };\n handleClick = () => {\n if (!this.spxDisabled) {\n this.spxClick.emit();\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"softpak-components-spx-button.mjs","sources":["../../../../projects/softpak/components/spx-button/spx-button.component.ts","../../../../projects/softpak/components/spx-button/softpak-components-spx-button.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\nimport { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';\nimport { SpxSeverityEnum } from '@softpak/components/spx-helpers';\n\n@Component({\n selector: 'spx-button',\n standalone: true,\n imports: [\n NgClass,\n ],\n template: `\n <button\n class=\"border border-transparent font-bold px-4 py-2 relative rounded text-center text-white focus:outline-none focus:ring-2 focus:ring-offset-2\"\n [class.h-full]=\"this.spxFullHeight\"\n [class.w-full]=\"this.spxFullWidth\"\n [class.bg-blue-600]=\"!this.spxSeverity || this.severityInfo\"\n [class.focus:ring-blue-500]=\"!this.spxSeverity || this.severityInfo\"\n [class.hover:bg-blue-800]=\"!this.spxSeverity || this.severityInfo\"\n [class.bg-red-600]=\"this.severityError\"\n [class.focus:ring-red-500]=\"this.severityError\"\n [class.hover:bg-red-800]=\"this.severityError\"\n [class.bg-lime-600]=\"this.severitySuccess\"\n [class.focus:ring-lime-500]=\"this.severitySuccess\"\n [class.hover:bg-lime-800]=\"this.severitySuccess\"\n [class.bg-amber-600]=\"this.severityWarning\"\n [class.focus:ring-amber-500]=\"this.severityWarning\"\n [class.hover:bg-amber-800]=\"this.severityWarning\"\n [class.text-xl]=\"this.spxSize === 'xl'\"\n [class.text-lg]=\"this.spxSize === 'lg'\"\n [class.cursor-pointer]=\"!this.spxDisabled\"\n [class.cursor-not-allowed]=\"this.spxDisabled\"\n [class.opacity-50]=\"this.spxDisabled\"\n [class.focus:ring-0]=\"this.spxDisabled\"\n [class.hover:bg-red-600]=\"this.spxDisabled && this.severityError\"\n [class.hover:bg-blue-600]=\"this.spxDisabled && this.severityInfo\"\n [class.hover:bg-lime-600]=\"this.spxDisabled && this.severitySuccess\"\n [class.hover:bg-amber-600]=\"this.spxDisabled && this.severityWarning\"\n [ngClass]=\"this.spxClass ? this.spxClass : undefined\"\n [attr.disabled]=\"this.spxDisabled ? this.spxDisabled : undefined\"\n [attr.form]=\"this.spxForm ? this.spxForm : undefined\"\n [attr.tabindex]=\"this.spxTabIndex ? this.spxTabIndex : undefined\"\n [attr.type]=\"this.spxType ? this.spxType : undefined\"\n (click)=\"this.handleClick()\"\n part=\"button\"><ng-content></ng-content></button>`,\n})\nexport class SpxButtonComponent {\n @HostBinding('class.block') get hostClassBlock() { return this.spxFullWidth; }\n @HostBinding('class.h-full') get hostClassHFull() { return this.spxFullHeight; }\n @HostBinding('class.w-full') get hostClassWFull() { return this.spxFullWidth; }\n @Input() spxDisabled = false;\n @Input() spxClass?: string;\n @Input() spxClassObject?: object;\n @Input() spxForm?: string;\n @Input() spxFullHeight?: boolean;\n @Input() spxFullWidth?: boolean;\n @Input() spxSeverity: SpxSeverityEnum = SpxSeverityEnum.info;\n @Input() spxSize: 'lg' | 'xl' = 'lg';\n @Input() spxTabIndex?: number;\n @Input() spxType: 'button' | 'submit' = 'submit';\n @Output() spxClick: EventEmitter<void> = new EventEmitter<void>();\n\n get severityError() { return this.spxSeverity === SpxSeverityEnum.error; }\n get severityInfo() { return this.spxSeverity === SpxSeverityEnum.info; }\n get severitySuccess() { return this.spxSeverity === SpxSeverityEnum.success; }\n get severityWarning() { return this.spxSeverity === SpxSeverityEnum.warning; }\n\n hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow;\n };\n handleClick = () => {\n if (!this.spxDisabled) {\n this.spxClick.emit();\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/softpak-components-spx-inputs.mjs CHANGED
@@ -57,7 +57,7 @@ class SpxInputBoxComponent {
57
57
  this.spxHelp.emit();
58
58
  }
59
59
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
60
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxLabel: "spxLabel", spxRequired: "spxRequired", spxReadonly: "spxReadonly", spxShowHelp: "spxShowHelp", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue", spxFocused: "spxFocused" }, outputs: { spxClear: "spxClear", spxSearchOutput: "spxSearchOutput", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, ngImport: i0, template: `<div class="flex rounded w-full"
60
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputBoxComponent, isStandalone: true, selector: "spx-input-box", inputs: { spxLabel: "spxLabel", spxRequired: "spxRequired", spxReadonly: "spxReadonly", spxShowHelp: "spxShowHelp", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowEdit: "spxShowEdit", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxValue: "spxValue", spxFocused: "spxFocused" }, outputs: { spxClear: "spxClear", spxSearchOutput: "spxSearchOutput", spxFocus: "spxFocus", spxFocusOut: "spxFocusOut", spxEdit: "spxEdit", spxHelp: "spxHelp" }, ngImport: i0, template: `<div class="flex rounded w-full gap-3"
61
61
  [class.rounded-none]="this.spxShowValidationMessages"
62
62
  [class.rounded-t]="this.spxShowValidationMessages"
63
63
  [class.outline-none]="this.spxFocused && !this.spxReadonly"
@@ -78,7 +78,7 @@ class SpxInputBoxComponent {
78
78
  </div>
79
79
  <ng-content select="[controls]"></ng-content>
80
80
  </div>
81
- <div class="flex-none p-0.5 gap-3">
81
+ <div class="flex flex-none gap-1 p-1">
82
82
  <spx-button
83
83
  *ngIf="this.spxShowEdit"
84
84
  (spxClick)="onEdit()"
@@ -86,7 +86,7 @@ class SpxInputBoxComponent {
86
86
  [spxSize]="'xl'"
87
87
  [spxTabIndex]="-1"
88
88
  [spxType]="'button'">
89
- <fa-icon [icon]="faEdit" class="block h-4 w-4 text-xl"></fa-icon>
89
+ <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
90
90
  </spx-button>
91
91
  <spx-button
92
92
  *ngIf="this.spxShowHelp"
@@ -95,7 +95,7 @@ class SpxInputBoxComponent {
95
95
  [spxSize]="'xl'"
96
96
  [spxTabIndex]="-1"
97
97
  [spxType]="'button'">
98
- <fa-icon [icon]="faQuestion" class="block h-4 w-4 text-xl"></fa-icon>
98
+ <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
99
99
  </spx-button>
100
100
  <spx-button
101
101
  *ngIf="this.spxShowSearch"
@@ -104,7 +104,7 @@ class SpxInputBoxComponent {
104
104
  [spxSize]="'xl'"
105
105
  [spxTabIndex]="-1"
106
106
  [spxType]="'button'">
107
- <fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
107
+ <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
108
108
  </spx-button>
109
109
  <spx-button
110
110
  *ngIf="this.spxShowClear"
@@ -114,11 +114,11 @@ class SpxInputBoxComponent {
114
114
  [spxSize]="'xl'"
115
115
  [spxTabIndex]="-1"
116
116
  [spxType]="'button'">
117
- <fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
117
+ <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
118
118
  </spx-button>
119
119
  </div>
120
120
  </div>
121
- <div class="bg-red-600 rounded-b text-white p-3">
121
+ <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
122
122
  <ng-content select="[validation-messages]"></ng-content>
123
123
  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxButtonComponent, selector: "spx-button", inputs: ["spxDisabled", "spxClass", "spxClassObject", "spxForm", "spxFullHeight", "spxFullWidth", "spxSeverity", "spxSize", "spxTabIndex", "spxType"], outputs: ["spxClick"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] }); }
124
124
  }
@@ -132,7 +132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
132
132
  SpxButtonComponent,
133
133
  FontAwesomeModule,
134
134
  ],
135
- template: `<div class="flex rounded w-full"
135
+ template: `<div class="flex rounded w-full gap-3"
136
136
  [class.rounded-none]="this.spxShowValidationMessages"
137
137
  [class.rounded-t]="this.spxShowValidationMessages"
138
138
  [class.outline-none]="this.spxFocused && !this.spxReadonly"
@@ -153,7 +153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
153
153
  </div>
154
154
  <ng-content select="[controls]"></ng-content>
155
155
  </div>
156
- <div class="flex-none p-0.5 gap-3">
156
+ <div class="flex flex-none gap-1 p-1">
157
157
  <spx-button
158
158
  *ngIf="this.spxShowEdit"
159
159
  (spxClick)="onEdit()"
@@ -161,7 +161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
161
161
  [spxSize]="'xl'"
162
162
  [spxTabIndex]="-1"
163
163
  [spxType]="'button'">
164
- <fa-icon [icon]="faEdit" class="block h-4 w-4 text-xl"></fa-icon>
164
+ <fa-icon [icon]="faEdit" class="block text-xl"></fa-icon>
165
165
  </spx-button>
166
166
  <spx-button
167
167
  *ngIf="this.spxShowHelp"
@@ -170,7 +170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
170
170
  [spxSize]="'xl'"
171
171
  [spxTabIndex]="-1"
172
172
  [spxType]="'button'">
173
- <fa-icon [icon]="faQuestion" class="block h-4 w-4 text-xl"></fa-icon>
173
+ <fa-icon [icon]="faQuestion" class="block text-xl"></fa-icon>
174
174
  </spx-button>
175
175
  <spx-button
176
176
  *ngIf="this.spxShowSearch"
@@ -179,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
179
179
  [spxSize]="'xl'"
180
180
  [spxTabIndex]="-1"
181
181
  [spxType]="'button'">
182
- <fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
182
+ <fa-icon [icon]="faSearch" class="block text-xl"></fa-icon>
183
183
  </spx-button>
184
184
  <spx-button
185
185
  *ngIf="this.spxShowClear"
@@ -189,11 +189,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
189
189
  [spxSize]="'xl'"
190
190
  [spxTabIndex]="-1"
191
191
  [spxType]="'button'">
192
- <fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
192
+ <fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
193
193
  </spx-button>
194
194
  </div>
195
195
  </div>
196
- <div class="bg-red-600 rounded-b text-white p-3">
196
+ <div *ngIf="this.spxShowValidationMessages" class="bg-red-600 rounded-b text-white p-3">
197
197
  <ng-content select="[validation-messages]"></ng-content>
198
198
  </div>`,
199
199
  }]
@@ -279,9 +279,12 @@ class SpxInputTextComponent {
279
279
  this.spxFocused = true;
280
280
  }
281
281
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
282
- 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">
282
+ 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 text-black">
283
283
  <input
284
284
  class="font-bold text-lg w-full outline-none"
285
+ [class.bg-white]="!this.spxReadonly"
286
+ [class.bg-gray-300]="this.spxReadonly"
287
+ [class.cursor-not-allowed]="this.spxReadonly"
285
288
  [class.uppercase]="this.spxCapitalize"
286
289
  [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
287
290
  [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -321,9 +324,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
321
324
  NgFor,
322
325
  SpxButtonComponent,
323
326
  ],
324
- template: `<div class="relative">
327
+ template: `<div class="relative text-black">
325
328
  <input
326
329
  class="font-bold text-lg w-full outline-none"
330
+ [class.bg-white]="!this.spxReadonly"
331
+ [class.bg-gray-300]="this.spxReadonly"
332
+ [class.cursor-not-allowed]="this.spxReadonly"
327
333
  [class.uppercase]="this.spxCapitalize"
328
334
  [attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
329
335
  [attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
@@ -1001,6 +1007,7 @@ class SpxInputComponent {
1001
1007
  this.spxChange.emit(this.value);
1002
1008
  }
1003
1009
  handleClear() {
1010
+ this.spxClear.emit();
1004
1011
  this.spxFocused = true;
1005
1012
  this.passFocusToControl();
1006
1013
  this.value = {
@@ -1010,6 +1017,7 @@ class SpxInputComponent {
1010
1017
  this.spxChange.emit(this.value);
1011
1018
  }
1012
1019
  handleFocus() {
1020
+ this.spxFocus.emit();
1013
1021
  this.spxFocused = true;
1014
1022
  // this.elBox.spxSetFocus();
1015
1023
  }
@@ -1024,9 +1032,11 @@ class SpxInputComponent {
1024
1032
  this.spxFocused = false;
1025
1033
  }
1026
1034
  handleEdit() {
1035
+ this.spxEdit.emit();
1027
1036
  this.spxFocused = true;
1028
1037
  }
1029
1038
  handleHelp() {
1039
+ this.spxHelp.emit();
1030
1040
  this.spxFocused = true;
1031
1041
  }
1032
1042
  passFocusToControl() {
@@ -1049,9 +1059,6 @@ class SpxInputComponent {
1049
1059
  registerOnTouched(fn) {
1050
1060
  this.onTouched = fn;
1051
1061
  }
1052
- setDisabledState(isDisabled) {
1053
- this.spxReadonly = isDisabled;
1054
- }
1055
1062
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1056
1063
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: SpxInputComponent, isStandalone: true, selector: "spx-input", inputs: { spxLabel: "spxLabel", spxMax: "spxMax", spxMin: "spxMin", spxName: "spxName", spxReadonly: "spxReadonly", spxAutofocus: "spxAutofocus", spxInputMode: "spxInputMode", spxPattern: "spxPattern", spxRequired: "spxRequired", spxSelectMonth: "spxSelectMonth", spxSelectDay: "spxSelectDay", spxShowEdit: "spxShowEdit", spxShowHelp: "spxShowHelp", spxCompact: "spxCompact", spxShowClear: "spxShowClear", spxShowSearch: "spxShowSearch", spxShowValidationMessages: "spxShowValidationMessages", spxStep: "spxStep", spxSuggestions: "spxSuggestions", spxType: "spxType", spxValidators: "spxValidators", value: "value", spxCapitalize: "spxCapitalize", spxFocused: "spxFocused" }, outputs: { spxBlur: "spxBlur", spxClear: "spxClear", spxChange: "spxChange", spxFocus: "spxFocus", spxEdit: "spxEdit", spxHelp: "spxHelp", spxSearch: "spxSearch" }, host: { listeners: { "spxChange": "handleChangeEvent($event)", "focusout": "_handleBlurEvent()" } }, providers: [
1057
1064
  {
@@ -1079,6 +1086,9 @@ class SpxInputComponent {
1079
1086
  <div controls>
1080
1087
  <spx-input-text
1081
1088
  *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
1089
+ (spxBlurFromChild)="this.handleBlur()"
1090
+ (spxChange)="this.handleChange($event)"
1091
+ (spxFocus)="this.handleFocus()"
1082
1092
  [spxAutofocus]="this.spxAutofocus"
1083
1093
  [spxCapitalize]="this.spxCapitalize"
1084
1094
  [spxFocused]="this.spxFocused"
@@ -1090,12 +1100,11 @@ class SpxInputComponent {
1090
1100
  [spxType]="this.spxType"
1091
1101
  [spxValidators]="this.spxValidators"
1092
1102
  [value]="this.value"
1093
- (spxBlurFromChild)="this.handleBlur()"
1094
- (spxChange)="this.handleChange($event)"
1095
- (spxFocus)="this.handleFocus()"
1096
1103
  ></spx-input-text>
1097
1104
  <spx-input-date
1098
1105
  *ngIf="this.spxType === 'date'"
1106
+ (spxChange)="this.handleChange($event)"
1107
+ (spxFocus)="this.handleFocus()"
1099
1108
  [spxFocused]="this.spxFocused"
1100
1109
  [spxMax]="this.spxMax"
1101
1110
  [spxMin]="this.spxMin"
@@ -1105,11 +1114,11 @@ class SpxInputComponent {
1105
1114
  [spxSelectMonth]="this.spxSelectMonth"
1106
1115
  [spxValidators]="this.spxValidators"
1107
1116
  [value]="this.value"
1108
- (spxChange)="this.handleChange($event)"
1109
- (spxFocus)="this.handleFocus()"
1110
1117
  ></spx-input-date>
1111
1118
  <spx-input-float
1112
1119
  *ngIf="this.spxType === 'float'"
1120
+ (spxChange)="this.handleChange($event)"
1121
+ (spxFocus)="this.handleFocus()"
1113
1122
  [spxAutofocus]="this.spxAutofocus"
1114
1123
  [spxFocused]="this.spxFocused"
1115
1124
  [spxName]="this.spxName"
@@ -1117,31 +1126,29 @@ class SpxInputComponent {
1117
1126
  [spxStep]="this.spxStep"
1118
1127
  [spxValidators]="this.spxValidators"
1119
1128
  [value]="this.value"
1120
- (spxChange)="this.handleChange($event)"
1121
- (spxFocus)="this.handleFocus()"
1122
1129
  ></spx-input-float>
1123
1130
  <spx-input-number
1124
1131
  *ngIf="this.spxType === 'number'"
1125
- [spxStep]="this.spxStep"
1132
+ (spxChange)="this.handleChange($event)"
1133
+ (spxFocus)="this.handleFocus()"
1126
1134
  [spxAutofocus]="this.spxAutofocus"
1127
1135
  [spxFocused]="this.spxFocused"
1128
1136
  [spxInputMode]="this.spxInputMode"
1129
1137
  [spxName]="this.spxName"
1138
+ [spxReadonly]="this.spxReadonly"
1139
+ [spxStep]="this.spxStep"
1130
1140
  [spxValidators]="this.spxValidators"
1131
- (spxChange)="this.handleChange($event)"
1132
- (spxFocus)="this.handleFocus()"
1133
- (spxReadonly)="this.spxReadonly"
1134
1141
  [value]="this.value"
1135
1142
  ></spx-input-number>
1136
1143
  <spx-input-radio
1137
1144
  *ngIf="this.spxType === 'radio'"
1145
+ (spxChange)="this.handleChange($event)"
1146
+ (spxFocus)="this.handleFocus()"
1138
1147
  [spxFocused]="this.spxFocused"
1139
1148
  [spxName]="this.spxName"
1149
+ [spxReadonly]="this.spxReadonly"
1140
1150
  [spxSuggestions]="this.spxSuggestions"
1141
1151
  [spxValidators]="this.spxValidators"
1142
- (spxChange)="this.handleChange($event)"
1143
- (spxFocus)="this.handleFocus()"
1144
- (spxReadonly)="this.spxReadonly"
1145
1152
  [value]="this.value"
1146
1153
  ></spx-input-radio>
1147
1154
  </div>
@@ -1194,6 +1201,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
1194
1201
  <div controls>
1195
1202
  <spx-input-text
1196
1203
  *ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
1204
+ (spxBlurFromChild)="this.handleBlur()"
1205
+ (spxChange)="this.handleChange($event)"
1206
+ (spxFocus)="this.handleFocus()"
1197
1207
  [spxAutofocus]="this.spxAutofocus"
1198
1208
  [spxCapitalize]="this.spxCapitalize"
1199
1209
  [spxFocused]="this.spxFocused"
@@ -1205,12 +1215,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
1205
1215
  [spxType]="this.spxType"
1206
1216
  [spxValidators]="this.spxValidators"
1207
1217
  [value]="this.value"
1208
- (spxBlurFromChild)="this.handleBlur()"
1209
- (spxChange)="this.handleChange($event)"
1210
- (spxFocus)="this.handleFocus()"
1211
1218
  ></spx-input-text>
1212
1219
  <spx-input-date
1213
1220
  *ngIf="this.spxType === 'date'"
1221
+ (spxChange)="this.handleChange($event)"
1222
+ (spxFocus)="this.handleFocus()"
1214
1223
  [spxFocused]="this.spxFocused"
1215
1224
  [spxMax]="this.spxMax"
1216
1225
  [spxMin]="this.spxMin"
@@ -1220,11 +1229,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
1220
1229
  [spxSelectMonth]="this.spxSelectMonth"
1221
1230
  [spxValidators]="this.spxValidators"
1222
1231
  [value]="this.value"
1223
- (spxChange)="this.handleChange($event)"
1224
- (spxFocus)="this.handleFocus()"
1225
1232
  ></spx-input-date>
1226
1233
  <spx-input-float
1227
1234
  *ngIf="this.spxType === 'float'"
1235
+ (spxChange)="this.handleChange($event)"
1236
+ (spxFocus)="this.handleFocus()"
1228
1237
  [spxAutofocus]="this.spxAutofocus"
1229
1238
  [spxFocused]="this.spxFocused"
1230
1239
  [spxName]="this.spxName"
@@ -1232,31 +1241,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
1232
1241
  [spxStep]="this.spxStep"
1233
1242
  [spxValidators]="this.spxValidators"
1234
1243
  [value]="this.value"
1235
- (spxChange)="this.handleChange($event)"
1236
- (spxFocus)="this.handleFocus()"
1237
1244
  ></spx-input-float>
1238
1245
  <spx-input-number
1239
1246
  *ngIf="this.spxType === 'number'"
1240
- [spxStep]="this.spxStep"
1247
+ (spxChange)="this.handleChange($event)"
1248
+ (spxFocus)="this.handleFocus()"
1241
1249
  [spxAutofocus]="this.spxAutofocus"
1242
1250
  [spxFocused]="this.spxFocused"
1243
1251
  [spxInputMode]="this.spxInputMode"
1244
1252
  [spxName]="this.spxName"
1253
+ [spxReadonly]="this.spxReadonly"
1254
+ [spxStep]="this.spxStep"
1245
1255
  [spxValidators]="this.spxValidators"
1246
- (spxChange)="this.handleChange($event)"
1247
- (spxFocus)="this.handleFocus()"
1248
- (spxReadonly)="this.spxReadonly"
1249
1256
  [value]="this.value"
1250
1257
  ></spx-input-number>
1251
1258
  <spx-input-radio
1252
1259
  *ngIf="this.spxType === 'radio'"
1260
+ (spxChange)="this.handleChange($event)"
1261
+ (spxFocus)="this.handleFocus()"
1253
1262
  [spxFocused]="this.spxFocused"
1254
1263
  [spxName]="this.spxName"
1264
+ [spxReadonly]="this.spxReadonly"
1255
1265
  [spxSuggestions]="this.spxSuggestions"
1256
1266
  [spxValidators]="this.spxValidators"
1257
- (spxChange)="this.handleChange($event)"
1258
- (spxFocus)="this.handleFocus()"
1259
- (spxReadonly)="this.spxReadonly"
1260
1267
  [value]="this.value"
1261
1268
  ></spx-input-radio>
1262
1269
  </div>