@skyux/forms 15.0.0-alpha.9 → 15.0.0-beta.0
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/skyux-forms.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
|
-
import { CommonModule, formatNumber } from '@angular/common';
|
|
2
|
+
import { CommonModule, formatNumber, NgTemplateOutlet } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Pipe, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ElementRef, ViewChild, Output, Injectable, DOCUMENT, input, computed, linkedSignal, RendererFactory2, Renderer2, ContentChild, ViewEncapsulation, KeyValueDiffers, forwardRef, ContentChildren, HostListener, NgZone } from '@angular/core';
|
|
4
|
+
import { NgModule, Pipe, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ElementRef, ViewChild, Output, Injectable, DOCUMENT, input, computed, linkedSignal, RendererFactory2, Renderer2, ContentChild, ViewEncapsulation, KeyValueDiffers, forwardRef, ContentChildren, HostListener, NgZone, output } from '@angular/core';
|
|
5
5
|
import * as i2$1 from '@angular/forms';
|
|
6
6
|
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
|
|
7
7
|
import * as i6 from '@skyux/i18n';
|
|
8
8
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
9
9
|
import * as i5 from '@skyux/core';
|
|
10
|
-
import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyFileReaderService, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyCoreAdapterService, SkyMediaBreakpoints, SkyMutationObserverService } from '@skyux/core';
|
|
10
|
+
import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyFileReaderService, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyCoreAdapterService, SkyMediaBreakpoints, SkyMutationObserverService, SkyResizeObserverService } from '@skyux/core';
|
|
11
11
|
import * as i3 from '@skyux/help-inline';
|
|
12
12
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
13
13
|
import * as i4 from '@skyux/icon';
|
|
@@ -19,6 +19,8 @@ import { SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
|
19
19
|
import { Subject, BehaviorSubject, ReplaySubject, takeUntil as takeUntil$1 } from 'rxjs';
|
|
20
20
|
import { takeUntil, take } from 'rxjs/operators';
|
|
21
21
|
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
22
|
+
import * as i2$2 from '@skyux/router';
|
|
23
|
+
import { SkyAppLinkModule, SkyHrefModule } from '@skyux/router';
|
|
22
24
|
|
|
23
25
|
/* istanbul ignore file */
|
|
24
26
|
/**
|
|
@@ -142,6 +144,138 @@ const RESOURCES = {
|
|
|
142
144
|
message: 'Show help content for {0}',
|
|
143
145
|
},
|
|
144
146
|
},
|
|
147
|
+
ES: {
|
|
148
|
+
skyux_character_count_message: { message: '{0} caracteres de {1}' },
|
|
149
|
+
skyux_character_count_over_limit: {
|
|
150
|
+
message: 'Ha superado el límite de caracteres.',
|
|
151
|
+
},
|
|
152
|
+
skyux_form_error_character_count: {
|
|
153
|
+
message: 'Limite {0} a {1} caracteres.',
|
|
154
|
+
},
|
|
155
|
+
skyux_form_error_date: {
|
|
156
|
+
message: 'Seleccione o introduzca una fecha válida.',
|
|
157
|
+
},
|
|
158
|
+
skyux_form_error_date_max: {
|
|
159
|
+
message: 'Seleccione o introduzca una fecha igual o anterior al {0}.',
|
|
160
|
+
},
|
|
161
|
+
skyux_form_error_date_min: {
|
|
162
|
+
message: 'Seleccione o introduzca una fecha igual o posterior al {0}.',
|
|
163
|
+
},
|
|
164
|
+
skyux_form_error_fuzzy_date_future_disabled: {
|
|
165
|
+
message: 'Las fechas futuras están deshabilitadas. Seleccione o introduzca una fecha pasada.',
|
|
166
|
+
},
|
|
167
|
+
skyux_form_error_fuzzy_date_invalid: {
|
|
168
|
+
message: 'Seleccione o introduzca una fecha válida.',
|
|
169
|
+
},
|
|
170
|
+
skyux_form_error_fuzzy_date_max_date: {
|
|
171
|
+
message: 'Seleccione o introduzca una fecha igual o anterior al {0}.',
|
|
172
|
+
},
|
|
173
|
+
skyux_form_error_fuzzy_date_min_date: {
|
|
174
|
+
message: 'Seleccione o introduzca una fecha igual o posterior al {0}.',
|
|
175
|
+
},
|
|
176
|
+
skyux_form_error_fuzzy_date_year_required: {
|
|
177
|
+
message: 'El año es obligatorio.',
|
|
178
|
+
},
|
|
179
|
+
skyux_form_error_email: {
|
|
180
|
+
message: 'Introduzca una dirección de correo electrónico con un formato válido.',
|
|
181
|
+
},
|
|
182
|
+
skyux_form_error_maxlength: { message: 'Limite {0} a {1} caracteres.' },
|
|
183
|
+
skyux_form_error_minlength: {
|
|
184
|
+
message: '{0} debe tener al menos {1} caracteres.',
|
|
185
|
+
},
|
|
186
|
+
skyux_form_error_phone: {
|
|
187
|
+
message: 'Introduzca un número de teléfono válido para el país seleccionado.',
|
|
188
|
+
},
|
|
189
|
+
skyux_form_error_required: { message: '{0} es obligatorio.' },
|
|
190
|
+
skyux_form_error_time: {
|
|
191
|
+
message: 'Seleccione o introduzca una hora válida.',
|
|
192
|
+
},
|
|
193
|
+
skyux_form_error_url: {
|
|
194
|
+
message: 'Introduzca una URL con un formato válido.',
|
|
195
|
+
},
|
|
196
|
+
skyux_form_group_required: { message: 'Obligatorio' },
|
|
197
|
+
skyux_file_attachment_button_label_choose_file: {
|
|
198
|
+
message: 'Adjuntar archivo',
|
|
199
|
+
},
|
|
200
|
+
skyux_file_attachment_button_label_choose_file_label: {
|
|
201
|
+
message: 'Adjuntar archivo para',
|
|
202
|
+
},
|
|
203
|
+
skyux_file_attachment_button_label_replace_file: {
|
|
204
|
+
message: 'Reemplazar archivo',
|
|
205
|
+
},
|
|
206
|
+
skyux_file_attachment_button_label_replace_file_label: {
|
|
207
|
+
message: 'Reemplazar archivo {0} para',
|
|
208
|
+
},
|
|
209
|
+
skyux_file_attachment_file_item_delete: { message: 'Eliminar {0}' },
|
|
210
|
+
skyux_file_attachment_file_item_remove: {
|
|
211
|
+
message: 'Eliminar archivo {0} para',
|
|
212
|
+
},
|
|
213
|
+
skyux_file_attachment_file_size_b_plural: { message: '{0} bytes' },
|
|
214
|
+
skyux_file_attachment_file_size_b_singular: { message: '{0} byte' },
|
|
215
|
+
skyux_file_attachment_file_size_gb: { message: '{0} GB' },
|
|
216
|
+
skyux_file_attachment_file_size_kb: { message: '{0} KB' },
|
|
217
|
+
skyux_file_attachment_file_size_mb: { message: '{0} MB' },
|
|
218
|
+
skyux_file_attachment_file_upload_drag_file_here: {
|
|
219
|
+
message: 'Arrastrar un archivo aquí',
|
|
220
|
+
},
|
|
221
|
+
skyux_file_attachment_file_upload_drag_or_click: {
|
|
222
|
+
message: 'Arrastre un archivo aquí o haga clic para buscarlo',
|
|
223
|
+
},
|
|
224
|
+
skyux_file_attachment_file_upload_drop_files_here: {
|
|
225
|
+
message: 'Arrastrar archivos aquí',
|
|
226
|
+
},
|
|
227
|
+
skyux_file_attachment_file_upload_file_added: { message: 'Se agregó {0}.' },
|
|
228
|
+
skyux_file_attachment_file_upload_file_replaced: {
|
|
229
|
+
message: 'Se eliminó {0}. Se agregó {1}.',
|
|
230
|
+
},
|
|
231
|
+
skyux_file_attachment_file_upload_file_removed: {
|
|
232
|
+
message: 'Se eliminó {0}',
|
|
233
|
+
},
|
|
234
|
+
skyux_file_attachment_file_upload_image_preview_alt_text: {
|
|
235
|
+
message: 'Vista previa de la imagen',
|
|
236
|
+
},
|
|
237
|
+
skyux_file_attachment_file_upload_invalid_file: {
|
|
238
|
+
message: 'Este tipo de archivo no es válido',
|
|
239
|
+
},
|
|
240
|
+
skyux_file_attachment_file_upload_link_label: {
|
|
241
|
+
message: 'Vincule a un archivo',
|
|
242
|
+
},
|
|
243
|
+
skyux_file_attachment_file_upload_or_click_to_browse: {
|
|
244
|
+
message: 'o haga clic para navegar',
|
|
245
|
+
},
|
|
246
|
+
skyux_file_attachment_file_upload_link_done: { message: 'Hecho' },
|
|
247
|
+
skyux_file_attachment_file_upload_link_added: {
|
|
248
|
+
message: 'Se agregó el vínculo a {0}.',
|
|
249
|
+
},
|
|
250
|
+
skyux_file_attachment_file_upload_link_removed: {
|
|
251
|
+
message: 'Se eliminó el vínculo a {0}.',
|
|
252
|
+
},
|
|
253
|
+
skyux_file_attachment_file_type_error_label_text: {
|
|
254
|
+
message: 'Cargue uno de estos tipos de archivo: {0}.',
|
|
255
|
+
},
|
|
256
|
+
skyux_file_attachment_file_type_error_label_text_with_name: {
|
|
257
|
+
message: '{0}: Cargue uno de estos tipos de archivo: {1}.',
|
|
258
|
+
},
|
|
259
|
+
skyux_file_attachment_max_file_size_error_label_text: {
|
|
260
|
+
message: 'Cargue un archivo de menos de {0}.',
|
|
261
|
+
},
|
|
262
|
+
skyux_file_attachment_max_file_size_error_label_text_with_name: {
|
|
263
|
+
message: '{0}: Cargue un archivo de menos de {1}.',
|
|
264
|
+
},
|
|
265
|
+
skyux_file_attachment_min_file_size_error_label_text: {
|
|
266
|
+
message: 'Cargue un archivo de más de {0}.',
|
|
267
|
+
},
|
|
268
|
+
skyux_file_attachment_min_file_size_error_label_text_with_name: {
|
|
269
|
+
message: '{0}: Cargue un archivo de más de {1}.',
|
|
270
|
+
},
|
|
271
|
+
skyux_file_attachment_label_no_file_chosen: {
|
|
272
|
+
message: 'No se ha seleccionado ningún archivo.',
|
|
273
|
+
},
|
|
274
|
+
skyux_file_attachment_required: { message: 'Obligatorio' },
|
|
275
|
+
skyux_input_box_help_inline_aria_label: {
|
|
276
|
+
message: 'Mostrar contenido de ayuda para {0}',
|
|
277
|
+
},
|
|
278
|
+
},
|
|
145
279
|
'FR-CA': {
|
|
146
280
|
skyux_character_count_message: { message: '{0} caractères de {1}' },
|
|
147
281
|
skyux_character_count_over_limit: {
|
|
@@ -2364,13 +2498,13 @@ class SkyInputBoxComponent {
|
|
|
2364
2498
|
#elementRef;
|
|
2365
2499
|
#renderer;
|
|
2366
2500
|
/**
|
|
2367
|
-
* The
|
|
2368
|
-
*
|
|
2369
|
-
*
|
|
2370
|
-
*
|
|
2371
|
-
*
|
|
2372
|
-
* `maxLength`
|
|
2373
|
-
*
|
|
2501
|
+
* The character limit for the input box. If users exceed the limit, the input box's form control
|
|
2502
|
+
* becomes invalid and the property adds [Validators.maxLength](https://angular.dev/api/forms/Validators).
|
|
2503
|
+
* The validation error message and screen reader announcement use `labelText`. This property also
|
|
2504
|
+
* displays a character count indicator in the top right with the number of characters that users enter,
|
|
2505
|
+
* the character limit, and a danger icon if users exceed the limit. If users are unlikely to exceed a
|
|
2506
|
+
* character limit, use `Validators.maxLength` directly instead with a `maxLength` attribute on the
|
|
2507
|
+
* input element.
|
|
2374
2508
|
*/
|
|
2375
2509
|
set characterLimit(value) {
|
|
2376
2510
|
this.#_characterLimit =
|
|
@@ -4384,15 +4518,18 @@ class SkySelectionBoxGridComponent {
|
|
|
4384
4518
|
set containerElementRef(value) {
|
|
4385
4519
|
this.#_containerElementRef = value;
|
|
4386
4520
|
this.#destroyMutationObserver();
|
|
4521
|
+
this.#destroyResizeObserver();
|
|
4387
4522
|
if (value) {
|
|
4388
4523
|
this.#updateBreakpointClass();
|
|
4389
4524
|
this.#initMutationObserver();
|
|
4525
|
+
this.#initResizeObserver(value);
|
|
4390
4526
|
}
|
|
4391
4527
|
}
|
|
4392
4528
|
get containerElementRef() {
|
|
4393
4529
|
return this.#_containerElementRef;
|
|
4394
4530
|
}
|
|
4395
4531
|
#mutationObserver;
|
|
4532
|
+
#resizeSubscription;
|
|
4396
4533
|
#ngUnsubscribe = new Subject();
|
|
4397
4534
|
#_alignItems = 'center';
|
|
4398
4535
|
#_containerElementRef;
|
|
@@ -4401,6 +4538,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4401
4538
|
#hostElRef = inject(ElementRef);
|
|
4402
4539
|
#mutationObserverSvc = inject(SkyMutationObserverService);
|
|
4403
4540
|
#ngZone = inject(NgZone);
|
|
4541
|
+
#resizeObserverSvc = inject(SkyResizeObserverService);
|
|
4404
4542
|
#themeSvc = inject(SkyThemeService, { optional: true });
|
|
4405
4543
|
ngOnInit() {
|
|
4406
4544
|
/* istanbul ignore else */
|
|
@@ -4416,9 +4554,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4416
4554
|
this.#ngUnsubscribe.next();
|
|
4417
4555
|
this.#ngUnsubscribe.complete();
|
|
4418
4556
|
this.#destroyMutationObserver();
|
|
4419
|
-
|
|
4420
|
-
onWindowResize() {
|
|
4421
|
-
this.#updateBreakpointClass();
|
|
4557
|
+
this.#destroyResizeObserver();
|
|
4422
4558
|
}
|
|
4423
4559
|
#initMutationObserver() {
|
|
4424
4560
|
/* istanbul ignore else */
|
|
@@ -4445,6 +4581,17 @@ class SkySelectionBoxGridComponent {
|
|
|
4445
4581
|
this.#mutationObserver = undefined;
|
|
4446
4582
|
}
|
|
4447
4583
|
}
|
|
4584
|
+
#initResizeObserver(containerElementRef) {
|
|
4585
|
+
this.#resizeSubscription = this.#resizeObserverSvc
|
|
4586
|
+
.observe(containerElementRef)
|
|
4587
|
+
.subscribe(() => {
|
|
4588
|
+
this.#updateBreakpointClass();
|
|
4589
|
+
});
|
|
4590
|
+
}
|
|
4591
|
+
#destroyResizeObserver() {
|
|
4592
|
+
this.#resizeSubscription?.unsubscribe();
|
|
4593
|
+
this.#resizeSubscription = undefined;
|
|
4594
|
+
}
|
|
4448
4595
|
#updateBreakpointClass() {
|
|
4449
4596
|
const parentWidth = this.#selectionBoxAdapter.getParentWidth(this.#hostElRef);
|
|
4450
4597
|
if (this.containerElementRef) {
|
|
@@ -4459,7 +4606,7 @@ class SkySelectionBoxGridComponent {
|
|
|
4459
4606
|
}
|
|
4460
4607
|
}
|
|
4461
4608
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" },
|
|
4609
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n #container\n class=\"sky-selection-box-grid\"\n [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n>\n <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-family-no-icon: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-collapsed-space-inset-top) var(--sky-comp-selection_box-collapsed-space-inset-right) var(--sky-comp-selection_box-collapsed-space-inset-bottom) var(--sky-comp-selection_box-collapsed-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4463
4610
|
}
|
|
4464
4611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
4465
4612
|
type: Component,
|
|
@@ -4477,9 +4624,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
4477
4624
|
read: ElementRef,
|
|
4478
4625
|
static: true,
|
|
4479
4626
|
}]
|
|
4480
|
-
}], onWindowResize: [{
|
|
4481
|
-
type: HostListener,
|
|
4482
|
-
args: ['window:resize']
|
|
4483
4627
|
}] } });
|
|
4484
4628
|
|
|
4485
4629
|
/**
|
|
@@ -4723,9 +4867,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
4723
4867
|
}]
|
|
4724
4868
|
}] });
|
|
4725
4869
|
|
|
4870
|
+
/**
|
|
4871
|
+
* Buttons provide interactive elements for users to trigger actions in the system.
|
|
4872
|
+
*/
|
|
4873
|
+
class SkyButton {
|
|
4874
|
+
constructor() {
|
|
4875
|
+
/**
|
|
4876
|
+
* Whether the button is displayed as a block element that fills the horizontal space of its container.
|
|
4877
|
+
* @default false
|
|
4878
|
+
*/
|
|
4879
|
+
this.block = input(false, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4880
|
+
/**
|
|
4881
|
+
* The display style of the button.
|
|
4882
|
+
* @default "default"
|
|
4883
|
+
*/
|
|
4884
|
+
this.buttonStyle = input('default', /* @ts-ignore */
|
|
4885
|
+
...(ngDevMode ? [{ debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
|
|
4886
|
+
/**
|
|
4887
|
+
* The type of the underlying HTML button element.
|
|
4888
|
+
* @default "button"
|
|
4889
|
+
*/
|
|
4890
|
+
this.buttonType = input('button', /* @ts-ignore */
|
|
4891
|
+
...(ngDevMode ? [{ debugName: "buttonType" }] : /* istanbul ignore next */ []));
|
|
4892
|
+
/**
|
|
4893
|
+
* Whether the button is disabled.
|
|
4894
|
+
* @default false
|
|
4895
|
+
*/
|
|
4896
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4897
|
+
/**
|
|
4898
|
+
* The name of the icon to display.
|
|
4899
|
+
*/
|
|
4900
|
+
this.iconName = input('', /* @ts-ignore */
|
|
4901
|
+
...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
|
|
4902
|
+
/**
|
|
4903
|
+
* Whether to hide the button's label. When the label is hidden, `labelText` is used as the button's ARIA label.
|
|
4904
|
+
* @default false
|
|
4905
|
+
*/
|
|
4906
|
+
this.labelHidden = input(false, { ...(ngDevMode ? { debugName: "labelHidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4907
|
+
/**
|
|
4908
|
+
* The text to display as the button's label.
|
|
4909
|
+
* @required
|
|
4910
|
+
*/
|
|
4911
|
+
this.labelText = input.required(/* @ts-ignore */
|
|
4912
|
+
...(ngDevMode ? [{ debugName: "labelText" }] : /* istanbul ignore next */ []));
|
|
4913
|
+
/**
|
|
4914
|
+
* Whether the icon is a logo icon.
|
|
4915
|
+
* @default false
|
|
4916
|
+
*/
|
|
4917
|
+
this.logo = input(false, { ...(ngDevMode ? { debugName: "logo" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4918
|
+
/**
|
|
4919
|
+
* The link for the button.
|
|
4920
|
+
*/
|
|
4921
|
+
this.permalink = input(/* @ts-ignore */
|
|
4922
|
+
...(ngDevMode ? [undefined, { debugName: "permalink" }] : /* istanbul ignore next */ []));
|
|
4923
|
+
/**
|
|
4924
|
+
* Fires when the button is clicked.
|
|
4925
|
+
*/
|
|
4926
|
+
this.buttonClick = output();
|
|
4927
|
+
this.ariaLabel = computed(() => this.labelHidden() ? this.labelText() : null, /* @ts-ignore */
|
|
4928
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
4929
|
+
this.buttonClass = computed(() => {
|
|
4930
|
+
let buttonClass = `sky-btn sky-btn-${this.buttonStyle()}`;
|
|
4931
|
+
if (this.block()) {
|
|
4932
|
+
buttonClass += ' sky-btn-block';
|
|
4933
|
+
}
|
|
4934
|
+
return buttonClass;
|
|
4935
|
+
}, /* @ts-ignore */
|
|
4936
|
+
...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
|
|
4937
|
+
}
|
|
4938
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4939
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyButton, isStandalone: true, selector: "sky-button", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: true, isRequired: true, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, permalink: { classPropertyName: "permalink", publicName: "permalink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@if (!disabled() && permalink(); as permalink) {\n @if (permalink.route?.commands) {\n <a\n href=\"\"\n [aria-label]=\"ariaLabel()\"\n [class]=\"buttonClass()\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [queryParams]=\"permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n [skyAppLink]=\"permalink.route.commands\"\n (click)=\"buttonClick.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </a>\n } @else if (permalink.url) {\n <a\n href=\"\"\n [aria-label]=\"ariaLabel()\"\n [class]=\"buttonClass()\"\n [skyHref]=\"permalink.url\"\n (click)=\"buttonClick.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </a>\n }\n} @else {\n <button\n [aria-label]=\"ariaLabel()\"\n [class]=\"buttonClass()\"\n [disabled]=\"disabled()\"\n [type]=\"buttonType()\"\n (click)=\"buttonClick.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (iconName(); as iconName) {\n <sky-icon [class.sky-btn-block-logo]=\"logo()\" [iconName]=\"iconName\" />\n }\n\n @if (!labelHidden()) {\n <!-- Wrapping text in a span prevents extra space from rendering between the icon and text -->\n <span>{{ labelText() }}</span>\n }\n</ng-template>\n", styles: [":host{display:inline}:host:has(>.sky-btn-block){display:block}sky-icon:has(+span){margin-right:var(--sky-space-gap-icon-s)}.sky-btn:has(sky-icon:only-child){padding:var(--sky-comp-button-icon-space-inset-top) var(--sky-comp-button-icon-space-inset-right) var(--sky-comp-button-icon-space-inset-bottom) var(--sky-comp-button-icon-space-inset-left)}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyAppLinkModule }, { kind: "directive", type: i2$2.λ3, selector: "[skyAppLink]", inputs: ["skyAppLink"] }, { kind: "ngmodule", type: SkyHrefModule }, { kind: "directive", type: i2$2.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }] }); }
|
|
4940
|
+
}
|
|
4941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyButton, decorators: [{
|
|
4942
|
+
type: Component,
|
|
4943
|
+
args: [{ selector: 'sky-button', imports: [SkyIconModule, NgTemplateOutlet, SkyAppLinkModule, SkyHrefModule], template: "@if (!disabled() && permalink(); as permalink) {\n @if (permalink.route?.commands) {\n <a\n href=\"\"\n [aria-label]=\"ariaLabel()\"\n [class]=\"buttonClass()\"\n [fragment]=\"permalink.route.extras?.fragment\"\n [queryParams]=\"permalink.route.extras?.queryParams\"\n [queryParamsHandling]=\"permalink.route.extras?.queryParamsHandling\"\n [skyAppLink]=\"permalink.route.commands\"\n (click)=\"buttonClick.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </a>\n } @else if (permalink.url) {\n <a\n href=\"\"\n [aria-label]=\"ariaLabel()\"\n [class]=\"buttonClass()\"\n [skyHref]=\"permalink.url\"\n (click)=\"buttonClick.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </a>\n }\n} @else {\n <button\n [aria-label]=\"ariaLabel()\"\n [class]=\"buttonClass()\"\n [disabled]=\"disabled()\"\n [type]=\"buttonType()\"\n (click)=\"buttonClick.emit($event)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (iconName(); as iconName) {\n <sky-icon [class.sky-btn-block-logo]=\"logo()\" [iconName]=\"iconName\" />\n }\n\n @if (!labelHidden()) {\n <!-- Wrapping text in a span prevents extra space from rendering between the icon and text -->\n <span>{{ labelText() }}</span>\n }\n</ng-template>\n", styles: [":host{display:inline}:host:has(>.sky-btn-block){display:block}sky-icon:has(+span){margin-right:var(--sky-space-gap-icon-s)}.sky-btn:has(sky-icon:only-child){padding:var(--sky-comp-button-icon-space-inset-top) var(--sky-comp-button-icon-space-inset-right) var(--sky-comp-button-icon-space-inset-bottom) var(--sky-comp-button-icon-space-inset-left)}\n"] }]
|
|
4944
|
+
}], propDecorators: { block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], labelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelText", required: true }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], permalink: [{ type: i0.Input, args: [{ isSignal: true, alias: "permalink", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }] } });
|
|
4945
|
+
|
|
4726
4946
|
/**
|
|
4727
4947
|
* Generated bundle index. Do not edit.
|
|
4728
4948
|
*/
|
|
4729
4949
|
|
|
4730
|
-
export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
|
|
4950
|
+
export { SKY_FORM_ERRORS_ENABLED, SkyButton, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
|
|
4731
4951
|
//# sourceMappingURL=skyux-forms.mjs.map
|