@softpak/components 0.0.0-beta.16 → 0.0.0-beta.2
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/esm2022/spx-alert/spx-alert.component.mjs +3 -5
- package/esm2022/spx-button/spx-button.component.mjs +36 -46
- package/esm2022/spx-channel-selection/src/spx-channel-selection.component.mjs +4 -5
- package/esm2022/spx-channel-selection/src/spx-company-selection.component.mjs +4 -5
- package/esm2022/spx-check-digit/spx-check-digit.component.mjs +4 -6
- package/esm2022/spx-inputs/public-api.mjs +1 -2
- package/esm2022/spx-inputs/spx-input-box.component.mjs +16 -16
- package/esm2022/spx-inputs/spx-input-text.component.mjs +3 -9
- package/esm2022/spx-inputs/spx-input.component.mjs +9 -11
- package/esm2022/spx-navigation/spx-home-tile.component.mjs +8 -24
- package/esm2022/spx-navigation/spx-home-tiles.component.mjs +5 -3
- package/esm2022/spx-navigation/spx-navigation-item.interface.mjs +1 -1
- package/esm2022/spx-navigation/spx-navigation.component.mjs +3 -3
- package/esm2022/spx-progress-bar/spx-progress-bar.component.mjs +3 -3
- package/esm2022/spx-suggestion/spx-suggestion.component.mjs +3 -3
- package/esm2022/spx-toaster/src/spx-toaster.component.mjs +21 -33
- package/fesm2022/softpak-components-spx-alert.mjs +2 -4
- package/fesm2022/softpak-components-spx-alert.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-button.mjs +35 -45
- package/fesm2022/softpak-components-spx-button.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-channel-selection.mjs +5 -7
- package/fesm2022/softpak-components-spx-channel-selection.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-check-digit.mjs +3 -5
- package/fesm2022/softpak-components-spx-check-digit.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-inputs.mjs +26 -46
- package/fesm2022/softpak-components-spx-inputs.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-navigation.mjs +14 -27
- package/fesm2022/softpak-components-spx-navigation.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-progress-bar.mjs +2 -2
- package/fesm2022/softpak-components-spx-progress-bar.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-suggestion.mjs +2 -2
- package/fesm2022/softpak-components-spx-suggestion.mjs.map +1 -1
- package/fesm2022/softpak-components-spx-toaster.mjs +20 -32
- package/fesm2022/softpak-components-spx-toaster.mjs.map +1 -1
- package/package.json +7 -7
- package/spx-button/spx-button.component.d.ts +0 -4
- package/spx-channel-selection/src/spx-channel-selection.component.d.ts +1 -2
- package/spx-channel-selection/src/spx-company-selection.component.d.ts +1 -2
- package/spx-check-digit/spx-check-digit.component.d.ts +0 -3
- package/spx-inputs/public-api.d.ts +0 -1
- package/spx-inputs/spx-input-box.component.d.ts +2 -2
- package/spx-inputs/spx-input.component.d.ts +3 -3
- package/spx-navigation/spx-home-tile.component.d.ts +1 -2
- package/spx-navigation/spx-navigation-item.interface.d.ts +0 -1
- package/spx-toaster/src/spx-toaster.component.d.ts +1 -1
- package/tailwind.css +1 -1
- package/esm2022/spx-inputs/spx-input-type.enum.mjs +0 -13
- package/spx-inputs/spx-input-type.enum.d.ts +0 -11
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"softpak-components-spx-check-digit.mjs","sources":["../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.ts","../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.html","../../../../projects/softpak/components/spx-check-digit/softpak-components-spx-check-digit.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription, combineLatest, map, startWith } from 'rxjs';\nimport { spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern, SpxValidationModule } from '@softpak/components/spx-validation';\nimport { calcCheckDigit, valuePairToValue } from '@softpak/components/spx-helpers';\nimport { CommonModule } from '@angular/common';\nimport { SpxInputComponent
|
|
1
|
+
{"version":3,"file":"softpak-components-spx-check-digit.mjs","sources":["../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.ts","../../../../projects/softpak/components/spx-check-digit/spx-check-digit.component.html","../../../../projects/softpak/components/spx-check-digit/softpak-components-spx-check-digit.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription, combineLatest, map, startWith } from 'rxjs';\nimport { spxValidatorRequired, spxValidatorMaxLength, spxValidatorMinLength, spxValidatorPattern, SpxValidationModule } from '@softpak/components/spx-validation';\nimport { calcCheckDigit, valuePairToValue } from '@softpak/components/spx-helpers';\nimport { CommonModule } from '@angular/common';\nimport { SpxInputComponent } from '@softpak/components/spx-inputs';\n\nconst ctrlCheckDigit = 'checkDigit';\nconst ctrlContainerNumber = 'containerNumber';\nconst ctrlPrefix = 'prefix';\n\n@Component({\n selector: 'spx-check-digit',\n templateUrl: './spx-check-digit.component.html',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n ReactiveFormsModule,\n SpxValidationModule,\n SpxInputComponent,\n ]\n})\nexport class SpxCheckDigitComponent {\n @Input() txtCheckDigit!: string;\n @Input() txtContainer!: string;\n @Input() txtPrefix!: string;\n formGroup: FormGroup;\n\n get ctrlCheckDigit(): FormControl { return this.formGroup.get(ctrlCheckDigit) as FormControl; }\n get ctrlContainerNumber(): FormControl { return this.formGroup.get(ctrlContainerNumber) as FormControl; }\n get ctrlContainerPrefix(): FormControl { return this.formGroup.get(ctrlPrefix) as FormControl; }\n\n private inputChanges?: Subscription;\n\n constructor(\n private readonly formBuilder: FormBuilder,\n ) {\n this.formGroup = this.formBuilder.group({\n [ctrlCheckDigit]: [null, []],\n [ctrlContainerNumber]: [null, [\n spxValidatorRequired(),\n spxValidatorMaxLength(6),\n spxValidatorMinLength(6),\n spxValidatorPattern(/[0-9]{6}/),\n ]],\n [ctrlPrefix]: [null, [\n spxValidatorRequired(),\n spxValidatorMaxLength(4),\n spxValidatorMinLength(4),\n spxValidatorPattern(/[a-zA-Z]{4}/),\n ]],\n })\n }\n\n ngOnInit(): void {\n this.inputChanges = combineLatest([\n this.ctrlContainerNumber.valueChanges.pipe(startWith(this.ctrlContainerNumber.value)),\n this.ctrlContainerPrefix.valueChanges.pipe(startWith(this.ctrlContainerPrefix.value)),\n ])\n .pipe(map(([containerNumber$, prefix$]) => ({\n containerNumber: containerNumber$,\n prefix: prefix$\n })))\n .subscribe((v) => {\n if (this.ctrlContainerNumber.invalid || this.ctrlContainerPrefix.invalid) {\n this.ctrlCheckDigit.setValue(null, { emitEvent: false });\n } else {\n const prefix = valuePairToValue(this.ctrlContainerPrefix.value);\n const containerNumber = valuePairToValue(this.ctrlContainerNumber.value);\n const checkDigit = calcCheckDigit(`${prefix}${containerNumber}`);\n this.ctrlCheckDigit.setValue({ value: checkDigit }, { emitEvent: false });\n }\n });\n }\n\n ngOnDestroy(): void {\n if (this.inputChanges) {\n this.inputChanges.unsubscribe();\n }\n }\n\n getRawValidators(formControl: FormControl) {\n return (formControl as any)._rawValidators;\n }\n}\n","<form [formGroup]=\"formGroup\" class=\"max-w-lg mx-auto flex flex-col gap-2\">\n <spx-input\n [formControl]=\"ctrlContainerNumber\"\n [spxAutofocus]=\"true\"\n [spxCapitalize]=\"true\"\n [spxLabel]=\"txtContainer\"\n [spxPattern]=\"'[0-9]*'\"\n [spxRequired]=\"true\"\n [spxShowValidationMessages]=\"ctrlContainerNumber && ctrlContainerNumber.errors && ctrlContainerNumber.touched\"\n [spxType]=\"'overlaynumber'\"\n [spxValidators]=\"getRawValidators(ctrlContainerNumber)\">\n <spx-validate-control [control]=\"ctrlContainerNumber\" [label]=\"txtContainer\"></spx-validate-control>\n </spx-input>\n <spx-input\n [formControl]=\"ctrlContainerPrefix\"\n [spxCapitalize]=\"true\"\n [spxLabel]=\"txtPrefix\"\n [spxRequired]=\"true\"\n [spxShowValidationMessages]=\"ctrlContainerPrefix && ctrlContainerPrefix.errors && ctrlContainerPrefix.touched\"\n [spxType]=\"'text'\"\n [spxValidators]=\"getRawValidators(ctrlContainerPrefix)\">\n <spx-validate-control [control]=\"ctrlContainerPrefix\" [label]=\"txtPrefix\"></spx-validate-control>\n </spx-input>\n <spx-input\n *ngIf=\"ctrlCheckDigit.value\"\n [formControl]=\"ctrlCheckDigit\"\n [spxLabel]=\"txtCheckDigit\"\n [spxReadonly]=\"true\"\n [spxType]=\"'text'\">\n </spx-input>\n</form>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ class SpxInputBoxComponent {
|
|
|
18
18
|
this.spxReadonly = false;
|
|
19
19
|
this.spxShowClear = true;
|
|
20
20
|
this.spxClear = new EventEmitter();
|
|
21
|
-
this.
|
|
21
|
+
this.spxSearchOutput = new EventEmitter();
|
|
22
22
|
this.spxFocus = new EventEmitter();
|
|
23
23
|
this.spxFocusOut = new EventEmitter();
|
|
24
24
|
this.spxEdit = new EventEmitter();
|
|
@@ -48,7 +48,7 @@ class SpxInputBoxComponent {
|
|
|
48
48
|
this.spxClear.emit();
|
|
49
49
|
}
|
|
50
50
|
onSearch() {
|
|
51
|
-
this.
|
|
51
|
+
this.spxSearchOutput.emit();
|
|
52
52
|
}
|
|
53
53
|
onEdit() {
|
|
54
54
|
this.spxEdit.emit();
|
|
@@ -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",
|
|
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"
|
|
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
|
|
81
|
+
<div class="flex-none p-0.5 gap-3">
|
|
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 text-xl"></fa-icon>
|
|
89
|
+
<fa-icon [icon]="faEdit" class="block h-4 w-4 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 text-xl"></fa-icon>
|
|
98
|
+
<fa-icon [icon]="faQuestion" class="block h-4 w-4 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 text-xl"></fa-icon>
|
|
107
|
+
<fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
|
|
108
108
|
</spx-button>
|
|
109
109
|
<spx-button
|
|
110
110
|
*ngIf="this.spxShowClear"
|
|
@@ -114,7 +114,7 @@ class SpxInputBoxComponent {
|
|
|
114
114
|
[spxSize]="'xl'"
|
|
115
115
|
[spxTabIndex]="-1"
|
|
116
116
|
[spxType]="'button'">
|
|
117
|
-
<fa-icon [icon]="faTimes" class="block text-xl"></fa-icon>
|
|
117
|
+
<fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
|
|
118
118
|
</spx-button>
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
@@ -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"
|
|
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
|
|
156
|
+
<div class="flex-none p-0.5 gap-3">
|
|
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 text-xl"></fa-icon>
|
|
164
|
+
<fa-icon [icon]="faEdit" class="block h-4 w-4 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 text-xl"></fa-icon>
|
|
173
|
+
<fa-icon [icon]="faQuestion" class="block h-4 w-4 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 text-xl"></fa-icon>
|
|
182
|
+
<fa-icon [icon]="faSearch" class="block h-4 w-4 text-xl"></fa-icon>
|
|
183
183
|
</spx-button>
|
|
184
184
|
<spx-button
|
|
185
185
|
*ngIf="this.spxShowClear"
|
|
@@ -189,7 +189,7 @@ 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 text-xl"></fa-icon>
|
|
192
|
+
<fa-icon [icon]="faTimes" class="block h-4 w-4 text-xl"></fa-icon>
|
|
193
193
|
</spx-button>
|
|
194
194
|
</div>
|
|
195
195
|
</div>
|
|
@@ -219,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
219
219
|
type: Input
|
|
220
220
|
}], spxClear: [{
|
|
221
221
|
type: Output
|
|
222
|
-
}],
|
|
222
|
+
}], spxSearchOutput: [{
|
|
223
223
|
type: Output
|
|
224
224
|
}], spxFocus: [{
|
|
225
225
|
type: Output
|
|
@@ -279,12 +279,9 @@ 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">
|
|
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"
|
|
288
285
|
[class.uppercase]="this.spxCapitalize"
|
|
289
286
|
[attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
|
|
290
287
|
[attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
|
|
@@ -324,12 +321,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
324
321
|
NgFor,
|
|
325
322
|
SpxButtonComponent,
|
|
326
323
|
],
|
|
327
|
-
template: `<div class="relative
|
|
324
|
+
template: `<div class="relative">
|
|
328
325
|
<input
|
|
329
326
|
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"
|
|
333
327
|
[class.uppercase]="this.spxCapitalize"
|
|
334
328
|
[attr.autofocus]="this.spxAutofocus ? this.spxAutofocus : undefined"
|
|
335
329
|
[attr.disabled]="this.spxReadonly ? this.spxReadonly : undefined"
|
|
@@ -968,19 +962,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
968
962
|
type: Output
|
|
969
963
|
}] } });
|
|
970
964
|
|
|
971
|
-
var SpxInputTypeEnum;
|
|
972
|
-
(function (SpxInputTypeEnum) {
|
|
973
|
-
SpxInputTypeEnum["autocomplete"] = "autocomplete";
|
|
974
|
-
SpxInputTypeEnum["date"] = "date";
|
|
975
|
-
SpxInputTypeEnum["float"] = "float";
|
|
976
|
-
SpxInputTypeEnum["overlay"] = "overlay";
|
|
977
|
-
SpxInputTypeEnum["overlayNumber"] = "overlaynumber";
|
|
978
|
-
SpxInputTypeEnum["radio"] = "radio";
|
|
979
|
-
SpxInputTypeEnum["number"] = "number";
|
|
980
|
-
SpxInputTypeEnum["password"] = "password";
|
|
981
|
-
SpxInputTypeEnum["text"] = "text";
|
|
982
|
-
})(SpxInputTypeEnum || (SpxInputTypeEnum = {}));
|
|
983
|
-
|
|
984
965
|
class SpxInputComponent {
|
|
985
966
|
constructor() {
|
|
986
967
|
this.spxLabel = 'label';
|
|
@@ -996,7 +977,7 @@ class SpxInputComponent {
|
|
|
996
977
|
this.spxShowSearch = false;
|
|
997
978
|
this.spxShowValidationMessages = false;
|
|
998
979
|
this.spxSuggestions = [];
|
|
999
|
-
this.spxType =
|
|
980
|
+
this.spxType = 'text';
|
|
1000
981
|
this.spxCapitalize = false;
|
|
1001
982
|
this.spxBlur = new EventEmitter();
|
|
1002
983
|
this.spxClear = new EventEmitter();
|
|
@@ -1009,7 +990,7 @@ class SpxInputComponent {
|
|
|
1009
990
|
this.onChange = () => { };
|
|
1010
991
|
this.onTouched = () => { };
|
|
1011
992
|
}
|
|
1012
|
-
spxSetFocus() {
|
|
993
|
+
async spxSetFocus() {
|
|
1013
994
|
this.passFocusToControl();
|
|
1014
995
|
}
|
|
1015
996
|
handleBlur() {
|
|
@@ -1020,7 +1001,6 @@ class SpxInputComponent {
|
|
|
1020
1001
|
this.spxChange.emit(this.value);
|
|
1021
1002
|
}
|
|
1022
1003
|
handleClear() {
|
|
1023
|
-
this.spxClear.emit();
|
|
1024
1004
|
this.spxFocused = true;
|
|
1025
1005
|
this.passFocusToControl();
|
|
1026
1006
|
this.value = {
|
|
@@ -1030,7 +1010,6 @@ class SpxInputComponent {
|
|
|
1030
1010
|
this.spxChange.emit(this.value);
|
|
1031
1011
|
}
|
|
1032
1012
|
handleFocus() {
|
|
1033
|
-
this.spxFocus.emit();
|
|
1034
1013
|
this.spxFocused = true;
|
|
1035
1014
|
// this.elBox.spxSetFocus();
|
|
1036
1015
|
}
|
|
@@ -1045,11 +1024,9 @@ class SpxInputComponent {
|
|
|
1045
1024
|
this.spxFocused = false;
|
|
1046
1025
|
}
|
|
1047
1026
|
handleEdit() {
|
|
1048
|
-
this.spxEdit.emit();
|
|
1049
1027
|
this.spxFocused = true;
|
|
1050
1028
|
}
|
|
1051
1029
|
handleHelp() {
|
|
1052
|
-
this.spxHelp.emit();
|
|
1053
1030
|
this.spxFocused = true;
|
|
1054
1031
|
}
|
|
1055
1032
|
passFocusToControl() {
|
|
@@ -1072,6 +1049,9 @@ class SpxInputComponent {
|
|
|
1072
1049
|
registerOnTouched(fn) {
|
|
1073
1050
|
this.onTouched = fn;
|
|
1074
1051
|
}
|
|
1052
|
+
setDisabledState(isDisabled) {
|
|
1053
|
+
this.spxReadonly = isDisabled;
|
|
1054
|
+
}
|
|
1075
1055
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1076
1056
|
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: [
|
|
1077
1057
|
{
|
|
@@ -1095,7 +1075,7 @@ class SpxInputComponent {
|
|
|
1095
1075
|
(spxHelp)="this.handleHelp()"
|
|
1096
1076
|
(spxFocus)="this.setFocus()"
|
|
1097
1077
|
(spxFocusOut)="this.setFocusOut()"
|
|
1098
|
-
(
|
|
1078
|
+
(spxSearchOutput)="this.handleSearch()">
|
|
1099
1079
|
<div controls>
|
|
1100
1080
|
<spx-input-text
|
|
1101
1081
|
*ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
|
|
@@ -1168,7 +1148,7 @@ class SpxInputComponent {
|
|
|
1168
1148
|
<div validation-messages>
|
|
1169
1149
|
<ng-content></ng-content>
|
|
1170
1150
|
</div>
|
|
1171
|
-
</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxLabel", "spxRequired", "spxReadonly", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowEdit", "spxShowSearch", "spxShowValidationMessages", "spxValue", "spxFocused"], outputs: ["spxClear", "
|
|
1151
|
+
</spx-input-box>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SpxInputBoxComponent, selector: "spx-input-box", inputs: ["spxLabel", "spxRequired", "spxReadonly", "spxShowHelp", "spxCompact", "spxShowClear", "spxShowEdit", "spxShowSearch", "spxShowValidationMessages", "spxValue", "spxFocused"], outputs: ["spxClear", "spxSearchOutput", "spxFocus", "spxFocusOut", "spxEdit", "spxHelp"] }, { kind: "component", type: SpxInputDateComponent, selector: "spx-input-date", inputs: ["spxMax", "spxMin", "spxName", "spxReadonly", "spxValidators", "spxFocused", "spxSelectMonth", "spxSelectDay", "value", "spxLastKeyPressed", "spxSelectStep", "spxInternalValue", "spxSuggestions", "spxWasInternalUpdate"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputFloatComponent, selector: "spx-input-float", inputs: ["spxName", "spxAutofocus", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value", "spxWasInternalUpdate", "tick"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputNumberComponent, selector: "spx-input-number", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxReadonly", "spxValidators", "spxFocused", "spxStep", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputRadioComponent, selector: "spx-input-radio", inputs: ["spxName", "spxValidators", "spxFocused", "spxReadonly", "spxSuggestions", "value"], outputs: ["spxChange", "spxFocus"] }, { kind: "component", type: SpxInputTextComponent, selector: "spx-input-text", inputs: ["spxName", "spxAutofocus", "spxInputMode", "spxPattern", "spxSuggestions", "spxReadonly", "spxValidators", "spxCapitalize", "spxFocused", "spxType", "value", "spxWasInternalUpdate"], outputs: ["spxBlurFromChild", "spxChange", "spxFocus"] }] }); }
|
|
1172
1152
|
}
|
|
1173
1153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: SpxInputComponent, decorators: [{
|
|
1174
1154
|
type: Component,
|
|
@@ -1210,7 +1190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
1210
1190
|
(spxHelp)="this.handleHelp()"
|
|
1211
1191
|
(spxFocus)="this.setFocus()"
|
|
1212
1192
|
(spxFocusOut)="this.setFocusOut()"
|
|
1213
|
-
(
|
|
1193
|
+
(spxSearchOutput)="this.handleSearch()">
|
|
1214
1194
|
<div controls>
|
|
1215
1195
|
<spx-input-text
|
|
1216
1196
|
*ngIf="this.spxType === 'autocomplete' || this.spxType === 'overlay' || this.spxType === 'overlaynumber' || this.spxType === 'text' || this.spxType === 'password'"
|
|
@@ -1356,5 +1336,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
1356
1336
|
* Generated bundle index. Do not edit.
|
|
1357
1337
|
*/
|
|
1358
1338
|
|
|
1359
|
-
export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent
|
|
1339
|
+
export { SpxInputBoxComponent, SpxInputComponent, SpxInputTextComponent };
|
|
1360
1340
|
//# sourceMappingURL=softpak-components-spx-inputs.mjs.map
|