@skyux/forms 12.0.0-alpha.0 → 12.0.0-alpha.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.
- package/documentation.json +11318 -7163
- package/fesm2022/skyux-forms-testing.mjs +266 -31
- package/fesm2022/skyux-forms-testing.mjs.map +1 -1
- package/fesm2022/skyux-forms.mjs +471 -237
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/lib/modules/checkbox/checkbox-group.component.d.ts +1 -1
- package/lib/modules/checkbox/checkbox.component.d.ts +11 -4
- package/lib/modules/file-attachment/file-attachment/file-attachment.service.d.ts +1 -1
- package/lib/modules/file-attachment/file-drop/file-drop.component.d.ts +10 -2
- package/lib/modules/form-error/form-error.component.d.ts +1 -0
- package/lib/modules/radio/radio.component.d.ts +8 -1
- package/package.json +14 -14
- package/testing/modules/character-counter/character-counter-indicator-harness-filters.d.ts +0 -1
- package/testing/modules/checkbox/checkbox-group-harness-filters.d.ts +0 -1
- package/testing/modules/checkbox/checkbox-harness-filters.d.ts +0 -1
- package/testing/modules/field-group/field-group-harness-filters.d.ts +0 -1
- package/testing/modules/field-group/field-group-harness.d.ts +1 -2
- package/testing/modules/file-attachment/file-attachment/file-attachment-harness-filters.d.ts +0 -1
- package/testing/modules/file-attachment/file-drop/file-drop-harness-filters.d.ts +0 -1
- package/testing/modules/file-attachment/file-drop/file-drop-harness.d.ts +90 -3
- package/testing/modules/file-attachment/file-drop/file-drop-link-upload-harness.d.ts +28 -0
- package/testing/modules/file-attachment/file-drop/file-drop-link-upload-input-harness.d.ts +14 -0
- package/testing/modules/file-attachment/file-drop/file-item-harness-filters.d.ts +10 -0
- package/testing/modules/file-attachment/file-drop/file-item-harness.d.ts +28 -0
- package/testing/modules/input-box/input-box-harness-filters.d.ts +0 -1
- package/testing/modules/input-box/input-box-harness.d.ts +1 -2
- package/testing/modules/radio/radio-group-harness-filters.d.ts +0 -1
- package/testing/modules/radio/radio-harness-filters.d.ts +0 -1
- package/testing/public-api.d.ts +2 -0
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule, formatNumber } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Pipe,
|
|
4
|
+
import { NgModule, Pipe, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, inject, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ChangeDetectorRef, ElementRef, ViewChild, Output, Injectable, ContentChildren, Self, Optional, RendererFactory2, Renderer2, ContentChild, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
|
|
5
5
|
import * as i2$2 from '@angular/forms';
|
|
6
6
|
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormControlDirective, FormControlName, NgModel, NgControl } from '@angular/forms';
|
|
7
7
|
import * as i1 from '@skyux/i18n';
|
|
@@ -16,7 +16,7 @@ import * as i1$1 from '@skyux/theme';
|
|
|
16
16
|
import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
|
|
17
17
|
import * as i2$1 from '@skyux/indicators';
|
|
18
18
|
import { SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
19
|
-
import {
|
|
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
22
|
|
|
@@ -142,17 +142,149 @@ const RESOURCES = {
|
|
|
142
142
|
message: 'Show help content for {0}',
|
|
143
143
|
},
|
|
144
144
|
},
|
|
145
|
+
'FR-CA': {
|
|
146
|
+
skyux_character_count_message: { message: '{0} caractères de {1}' },
|
|
147
|
+
skyux_character_count_over_limit: {
|
|
148
|
+
message: 'Vous avez dépassé la limite de caractères.',
|
|
149
|
+
},
|
|
150
|
+
skyux_form_error_character_count: {
|
|
151
|
+
message: 'Limite {0} de {1} caractère(s).',
|
|
152
|
+
},
|
|
153
|
+
skyux_form_error_date: {
|
|
154
|
+
message: 'Sélectionnez ou entrez une date valide.',
|
|
155
|
+
},
|
|
156
|
+
skyux_form_error_date_max: {
|
|
157
|
+
message: 'Sélectionnez ou entrez une date le ou avant le {0}.',
|
|
158
|
+
},
|
|
159
|
+
skyux_form_error_date_min: {
|
|
160
|
+
message: 'Sélectionnez ou entrez une date le ou après le {0}.',
|
|
161
|
+
},
|
|
162
|
+
skyux_form_error_fuzzy_date_future_disabled: {
|
|
163
|
+
message: 'Les dates futures sont désactivées; sélectionnez ou entrez une date dans le passé.',
|
|
164
|
+
},
|
|
165
|
+
skyux_form_error_fuzzy_date_invalid: {
|
|
166
|
+
message: 'Sélectionnez ou entrez une date valide.',
|
|
167
|
+
},
|
|
168
|
+
skyux_form_error_fuzzy_date_max_date: {
|
|
169
|
+
message: 'Sélectionnez ou entrez une date le ou avant le {0}.',
|
|
170
|
+
},
|
|
171
|
+
skyux_form_error_fuzzy_date_min_date: {
|
|
172
|
+
message: 'Sélectionnez ou entrez une date le ou après le {0}.',
|
|
173
|
+
},
|
|
174
|
+
skyux_form_error_fuzzy_date_year_required: {
|
|
175
|
+
message: 'L’année est requise.',
|
|
176
|
+
},
|
|
177
|
+
skyux_form_error_email: {
|
|
178
|
+
message: 'Entrez une adresse courriel avec un format valide.',
|
|
179
|
+
},
|
|
180
|
+
skyux_form_error_maxlength: { message: 'Limite {0} de {1} caractère(s).' },
|
|
181
|
+
skyux_form_error_minlength: {
|
|
182
|
+
message: '{0} doit avoir au moins {1} caractère(s).',
|
|
183
|
+
},
|
|
184
|
+
skyux_form_error_phone: {
|
|
185
|
+
message: 'Entrez un numéro de téléphone correspondant au format du pays sélectionné.',
|
|
186
|
+
},
|
|
187
|
+
skyux_form_error_required: { message: '{0} est requis.' },
|
|
188
|
+
skyux_form_error_time: {
|
|
189
|
+
message: 'Sélectionnez ou entrez une heure valide.',
|
|
190
|
+
},
|
|
191
|
+
skyux_form_error_url: { message: 'Entrez une URL avec un format valide.' },
|
|
192
|
+
skyux_form_group_required: { message: 'Requis' },
|
|
193
|
+
skyux_file_attachment_button_label_choose_file: {
|
|
194
|
+
message: 'Joindre un fichier',
|
|
195
|
+
},
|
|
196
|
+
skyux_file_attachment_button_label_choose_file_label: {
|
|
197
|
+
message: 'Joindre un fichier pour',
|
|
198
|
+
},
|
|
199
|
+
skyux_file_attachment_button_label_replace_file: {
|
|
200
|
+
message: 'Remplacer le fichier',
|
|
201
|
+
},
|
|
202
|
+
skyux_file_attachment_button_label_replace_file_label: {
|
|
203
|
+
message: 'Remplacer le fichier {0} pour',
|
|
204
|
+
},
|
|
205
|
+
skyux_file_attachment_file_item_delete: { message: 'Supprimer {0}' },
|
|
206
|
+
skyux_file_attachment_file_item_remove: {
|
|
207
|
+
message: 'Retirer le fichier {0} pour',
|
|
208
|
+
},
|
|
209
|
+
skyux_file_attachment_file_size_b_plural: { message: '{0} octets' },
|
|
210
|
+
skyux_file_attachment_file_size_b_singular: { message: '{0} octet' },
|
|
211
|
+
skyux_file_attachment_file_size_gb: { message: '{0} Go' },
|
|
212
|
+
skyux_file_attachment_file_size_kb: { message: '{0} Ko' },
|
|
213
|
+
skyux_file_attachment_file_size_mb: { message: '{0} Mo' },
|
|
214
|
+
skyux_file_attachment_file_upload_drag_file_here: {
|
|
215
|
+
message: 'Faites glisser un fichier ici',
|
|
216
|
+
},
|
|
217
|
+
skyux_file_attachment_file_upload_drag_or_click: {
|
|
218
|
+
message: 'Faites glisser un fichier ici ou cliquez pour naviguer',
|
|
219
|
+
},
|
|
220
|
+
skyux_file_attachment_file_upload_drop_files_here: {
|
|
221
|
+
message: 'Déplacez les fichiers ici',
|
|
222
|
+
},
|
|
223
|
+
skyux_file_attachment_file_upload_file_added: {
|
|
224
|
+
message: '{0} a été ajouté.',
|
|
225
|
+
},
|
|
226
|
+
skyux_file_attachment_file_upload_file_replaced: {
|
|
227
|
+
message: '{0} a été retiré. {1} a été ajouté.',
|
|
228
|
+
},
|
|
229
|
+
skyux_file_attachment_file_upload_file_removed: {
|
|
230
|
+
message: '{0} a été retiré.',
|
|
231
|
+
},
|
|
232
|
+
skyux_file_attachment_file_upload_image_preview_alt_text: {
|
|
233
|
+
message: 'Aperçu de l’image',
|
|
234
|
+
},
|
|
235
|
+
skyux_file_attachment_file_upload_invalid_file: {
|
|
236
|
+
message: 'Ce type de fichier n’est pas valide',
|
|
237
|
+
},
|
|
238
|
+
skyux_file_attachment_file_upload_link_label: {
|
|
239
|
+
message: 'Liens vers un fichier',
|
|
240
|
+
},
|
|
241
|
+
skyux_file_attachment_file_upload_or_click_to_browse: {
|
|
242
|
+
message: 'ou cliquez pour naviguer',
|
|
243
|
+
},
|
|
244
|
+
skyux_file_attachment_file_upload_link_done: { message: 'Terminé' },
|
|
245
|
+
skyux_file_attachment_file_upload_link_added: {
|
|
246
|
+
message: 'Le lien vers {0} a été ajouté.',
|
|
247
|
+
},
|
|
248
|
+
skyux_file_attachment_file_upload_link_removed: {
|
|
249
|
+
message: 'Le lien vers {0} a été retiré.',
|
|
250
|
+
},
|
|
251
|
+
skyux_file_attachment_file_type_error_label_text: {
|
|
252
|
+
message: 'Téléversez l’un de ces types de fichier : {0}.',
|
|
253
|
+
},
|
|
254
|
+
skyux_file_attachment_file_type_error_label_text_with_name: {
|
|
255
|
+
message: '{0} : Téléversez l’un de ces types de fichier : {1}.',
|
|
256
|
+
},
|
|
257
|
+
skyux_file_attachment_max_file_size_error_label_text: {
|
|
258
|
+
message: 'Téléversez un fichier de moins de {0}.',
|
|
259
|
+
},
|
|
260
|
+
skyux_file_attachment_max_file_size_error_label_text_with_name: {
|
|
261
|
+
message: '{0} : Téléversez un fichier de moins de {1}.',
|
|
262
|
+
},
|
|
263
|
+
skyux_file_attachment_min_file_size_error_label_text: {
|
|
264
|
+
message: 'Téléversez un fichier de plus de {0}.',
|
|
265
|
+
},
|
|
266
|
+
skyux_file_attachment_min_file_size_error_label_text_with_name: {
|
|
267
|
+
message: '{0} : Téléversez un fichier de plus de {1}.',
|
|
268
|
+
},
|
|
269
|
+
skyux_file_attachment_label_no_file_chosen: {
|
|
270
|
+
message: 'Aucun fichier choisi.',
|
|
271
|
+
},
|
|
272
|
+
skyux_file_attachment_required: { message: 'Requis' },
|
|
273
|
+
skyux_input_box_help_inline_aria_label: {
|
|
274
|
+
message: 'Afficher le contenu de l’aide pour {0}',
|
|
275
|
+
},
|
|
276
|
+
},
|
|
145
277
|
};
|
|
146
278
|
SkyLibResourcesService.addResources(RESOURCES);
|
|
147
279
|
/**
|
|
148
280
|
* Import into any component library module that needs to use resource strings.
|
|
149
281
|
*/
|
|
150
282
|
class SkyFormsResourcesModule {
|
|
151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
152
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
153
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
283
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
284
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] }); }
|
|
285
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormsResourcesModule, imports: [SkyI18nModule] }); }
|
|
154
286
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
|
|
156
288
|
type: NgModule,
|
|
157
289
|
args: [{
|
|
158
290
|
exports: [SkyI18nModule],
|
|
@@ -192,10 +324,10 @@ class SkyCharacterCounterScreenReaderPipe {
|
|
|
192
324
|
}
|
|
193
325
|
return this.#previousAnnouncementPoint.toLocaleString();
|
|
194
326
|
}
|
|
195
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
196
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
327
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
328
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, isStandalone: true, name: "skyCharacterCounterScreenReader" }); }
|
|
197
329
|
}
|
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, decorators: [{
|
|
199
331
|
type: Pipe,
|
|
200
332
|
args: [{
|
|
201
333
|
name: 'skyCharacterCounterScreenReader',
|
|
@@ -224,10 +356,10 @@ class SkyCharacterCounterIndicatorComponent {
|
|
|
224
356
|
this.#_characterCountLimit = limit;
|
|
225
357
|
this.#changeDetector.markForCheck();
|
|
226
358
|
}
|
|
227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
228
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyCharacterCounterIndicatorComponent, isStandalone: false, selector: "sky-character-counter-indicator", inputs: { characterCount: "characterCount", characterCountLimit: "characterCountLimit" }, ngImport: i0, template: "<span\n class=\"sky-character-count-label sky-font-deemphasized\"\n [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n @if (characterCount > characterCountLimit) {\n <ng-container>{{\n 'skyux_character_count_over_limit' | skyLibResources\n }}</ng-container>\n } @else {\n @if (\n characterCount | skyCharacterCounterScreenReader: characterCountLimit;\n as screenReaderCount\n ) {\n <ng-container>{{\n 'skyux_character_count_message'\n | skyLibResources: screenReaderCount : characterCountLimit\n }}</ng-container>\n }\n }\n</span>\n", styles: [".sky-character-count-label:not(.sky-theme-modern *){--sky-override-character-count-font-size: 15px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-character-count-label{--sky-override-character-count-font-size: 15px}:host{flex-shrink:.0001}.sky-character-count-label{font-size:var(--sky-override-character-count-font-size, inherit)}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyCharacterCounterScreenReaderPipe, name: "skyCharacterCounterScreenReader" }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
229
361
|
}
|
|
230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
|
|
231
363
|
type: Component,
|
|
232
364
|
args: [{ selector: 'sky-character-counter-indicator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n class=\"sky-character-count-label sky-font-deemphasized\"\n [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n @if (characterCount > characterCountLimit) {\n <ng-container>{{\n 'skyux_character_count_over_limit' | skyLibResources\n }}</ng-container>\n } @else {\n @if (\n characterCount | skyCharacterCounterScreenReader: characterCountLimit;\n as screenReaderCount\n ) {\n <ng-container>{{\n 'skyux_character_count_message'\n | skyLibResources: screenReaderCount : characterCountLimit\n }}</ng-container>\n }\n }\n</span>\n", styles: [".sky-character-count-label:not(.sky-theme-modern *){--sky-override-character-count-font-size: 15px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-character-count-label{--sky-override-character-count-font-size: 15px}:host{flex-shrink:.0001}.sky-character-count-label{font-size:var(--sky-override-character-count-font-size, inherit)}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"] }]
|
|
233
365
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { characterCount: [{
|
|
@@ -302,8 +434,8 @@ class SkyCharacterCounterInputDirective {
|
|
|
302
434
|
}
|
|
303
435
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
304
436
|
#validatorChange = () => { };
|
|
305
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
306
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
437
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
438
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyCharacterCounterInputDirective, isStandalone: false, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
|
|
307
439
|
{
|
|
308
440
|
provide: NG_VALIDATORS,
|
|
309
441
|
useExisting: SkyCharacterCounterInputDirective,
|
|
@@ -311,7 +443,7 @@ class SkyCharacterCounterInputDirective {
|
|
|
311
443
|
},
|
|
312
444
|
], ngImport: i0 }); }
|
|
313
445
|
}
|
|
314
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
446
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
|
|
315
447
|
type: Directive,
|
|
316
448
|
args: [{
|
|
317
449
|
selector: '[skyCharacterCounter]',
|
|
@@ -331,20 +463,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
331
463
|
}] } });
|
|
332
464
|
|
|
333
465
|
class SkyCharacterCounterModule {
|
|
334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
335
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
466
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
467
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
|
|
336
468
|
SkyCharacterCounterIndicatorComponent], imports: [CommonModule,
|
|
337
469
|
FormsModule,
|
|
338
470
|
ReactiveFormsModule,
|
|
339
471
|
SkyCharacterCounterScreenReaderPipe,
|
|
340
472
|
SkyFormsResourcesModule], exports: [SkyCharacterCounterInputDirective,
|
|
341
473
|
SkyCharacterCounterIndicatorComponent] }); }
|
|
342
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
474
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterModule, imports: [CommonModule,
|
|
343
475
|
FormsModule,
|
|
344
476
|
ReactiveFormsModule,
|
|
345
477
|
SkyFormsResourcesModule] }); }
|
|
346
478
|
}
|
|
347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
|
|
348
480
|
type: NgModule,
|
|
349
481
|
args: [{
|
|
350
482
|
declarations: [
|
|
@@ -377,6 +509,9 @@ const SKY_FORM_ERRORS_ENABLED = new InjectionToken('SKY_FORM_ERRORS_ENABLED');
|
|
|
377
509
|
* To display custom errors, include sky-form-error elements in the form field component.
|
|
378
510
|
*/
|
|
379
511
|
class SkyFormErrorComponent {
|
|
512
|
+
get hostErrorName() {
|
|
513
|
+
return this.errorName;
|
|
514
|
+
}
|
|
380
515
|
constructor() {
|
|
381
516
|
this.formErrors = inject(SKY_FORM_ERRORS_ENABLED, {
|
|
382
517
|
optional: true,
|
|
@@ -385,8 +520,8 @@ class SkyFormErrorComponent {
|
|
|
385
520
|
throw new Error('The `sky-form-error` component is not supported in the provided context.');
|
|
386
521
|
}
|
|
387
522
|
}
|
|
388
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
523
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyFormErrorComponent, isStandalone: true, selector: "sky-form-error", inputs: { errorName: "errorName", errorText: "errorText" }, host: { properties: { "attr.errorName": "this.hostErrorName" } }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: `
|
|
390
525
|
@if (formErrors) {
|
|
391
526
|
<sky-status-indicator
|
|
392
527
|
class="sky-form-error"
|
|
@@ -398,7 +533,7 @@ class SkyFormErrorComponent {
|
|
|
398
533
|
}
|
|
399
534
|
`, isInline: true, styles: [":host.sky-cmp-theme-default{--sky-override-form-error-margin-top: var(--sky-margin-stacked-xs)}@keyframes sky-modal-error{0%,50%{max-height:0;margin-top:0;opacity:0}to{max-height:500px;opacity:1}}:host{animation:sky-modal-error .3s ease-out 1;display:block;margin-top:var(--sky-override-form-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
400
535
|
}
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
|
|
402
537
|
type: Component,
|
|
403
538
|
args: [{ selector: 'sky-form-error', imports: [SkyStatusIndicatorModule], template: `
|
|
404
539
|
@if (formErrors) {
|
|
@@ -417,14 +552,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
417
552
|
}], errorText: [{
|
|
418
553
|
type: Input,
|
|
419
554
|
args: [{ required: true }]
|
|
555
|
+
}], hostErrorName: [{
|
|
556
|
+
type: HostBinding,
|
|
557
|
+
args: ['attr.errorName']
|
|
420
558
|
}] } });
|
|
421
559
|
|
|
422
560
|
class SkyFormErrorModule {
|
|
423
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
424
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
425
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
562
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent], exports: [SkyFormErrorComponent] }); }
|
|
563
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent] }); }
|
|
426
564
|
}
|
|
427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorModule, decorators: [{
|
|
428
566
|
type: NgModule,
|
|
429
567
|
args: [{
|
|
430
568
|
imports: [SkyFormErrorComponent],
|
|
@@ -449,10 +587,10 @@ class SkyFormErrorsComponent {
|
|
|
449
587
|
this.ariaLive = 'assertive';
|
|
450
588
|
this.ariaRelevant = 'all';
|
|
451
589
|
}
|
|
452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
453
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
590
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
591
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", touched: ["touched", "touched", booleanAttribute], dirty: ["dirty", "dirty", booleanAttribute] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "@if (labelText) {\n @if (touched) {\n @if (errors?.['required']) {\n <sky-form-error\n errorName=\"required\"\n [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n />\n }\n\n @if (errors?.['minlength']; as minLengthError) {\n <sky-form-error\n errorName=\"minlength\"\n [errorText]=\"\n 'skyux_form_error_minlength'\n | skyLibResources: labelText : minLengthError.requiredLength\n \"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n <sky-form-error\n errorName=\"invalidDate\"\n [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n <sky-form-error\n errorName=\"minDate\"\n [errorText]=\"\n 'skyux_form_error_date_min'\n | skyLibResources: errors?.['skyDate']['minDateFormatted']\n \"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n <sky-form-error\n errorName=\"maxDate\"\n [errorText]=\"\n 'skyux_form_error_date_max'\n | skyLibResources: errors?.['skyDate']['maxDateFormatted']\n \"\n />\n }\n\n @if (\n errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n ) {\n <sky-form-error\n errorName=\"fuzzyFutureDisabled\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n \"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n <sky-form-error\n errorName=\"fuzzyInvalidDate\"\n [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n <sky-form-error\n errorName=\"fuzzyMaxDate\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_max_date'\n | skyLibResources: errors?.['skyFuzzyDate']['maxDateFormatted']\n \"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n <sky-form-error\n errorName=\"fuzzyMinDate\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_min_date'\n | skyLibResources\n : errors?.['skyFuzzyDate'] &&\n errors?.['skyFuzzyDate']['minDateFormatted']\n \"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n <sky-form-error\n errorName=\"fuzzyYearRequired\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n \"\n />\n }\n\n @if (errors?.['skyEmail']) {\n <sky-form-error\n errorName=\"email\"\n [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyPhoneField']) {\n <sky-form-error\n errorName=\"phone\"\n [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyTime']) {\n <sky-form-error\n errorName=\"time\"\n [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyUrl']) {\n <sky-form-error\n errorName=\"url\"\n [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n />\n }\n }\n\n @if (touched || dirty) {\n @if (errors?.['maxlength']; as maxLengthError) {\n <sky-form-error\n errorName=\"maxlength\"\n [errorText]=\"\n 'skyux_form_error_maxlength'\n | skyLibResources: labelText : maxLengthError.requiredLength\n \"\n />\n }\n <ng-content />\n }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
454
592
|
}
|
|
455
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
|
|
456
594
|
type: Component,
|
|
457
595
|
args: [{ selector: 'sky-form-errors', imports: [SkyIdModule, SkyFormErrorComponent, SkyFormsResourcesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (labelText) {\n @if (touched) {\n @if (errors?.['required']) {\n <sky-form-error\n errorName=\"required\"\n [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n />\n }\n\n @if (errors?.['minlength']; as minLengthError) {\n <sky-form-error\n errorName=\"minlength\"\n [errorText]=\"\n 'skyux_form_error_minlength'\n | skyLibResources: labelText : minLengthError.requiredLength\n \"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n <sky-form-error\n errorName=\"invalidDate\"\n [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n <sky-form-error\n errorName=\"minDate\"\n [errorText]=\"\n 'skyux_form_error_date_min'\n | skyLibResources: errors?.['skyDate']['minDateFormatted']\n \"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n <sky-form-error\n errorName=\"maxDate\"\n [errorText]=\"\n 'skyux_form_error_date_max'\n | skyLibResources: errors?.['skyDate']['maxDateFormatted']\n \"\n />\n }\n\n @if (\n errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n ) {\n <sky-form-error\n errorName=\"fuzzyFutureDisabled\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n \"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n <sky-form-error\n errorName=\"fuzzyInvalidDate\"\n [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n <sky-form-error\n errorName=\"fuzzyMaxDate\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_max_date'\n | skyLibResources: errors?.['skyFuzzyDate']['maxDateFormatted']\n \"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n <sky-form-error\n errorName=\"fuzzyMinDate\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_min_date'\n | skyLibResources\n : errors?.['skyFuzzyDate'] &&\n errors?.['skyFuzzyDate']['minDateFormatted']\n \"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n <sky-form-error\n errorName=\"fuzzyYearRequired\"\n [errorText]=\"\n 'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n \"\n />\n }\n\n @if (errors?.['skyEmail']) {\n <sky-form-error\n errorName=\"email\"\n [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyPhoneField']) {\n <sky-form-error\n errorName=\"phone\"\n [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyTime']) {\n <sky-form-error\n errorName=\"time\"\n [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyUrl']) {\n <sky-form-error\n errorName=\"url\"\n [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n />\n }\n }\n\n @if (touched || dirty) {\n @if (errors?.['maxlength']; as maxLengthError) {\n <sky-form-error\n errorName=\"maxlength\"\n [errorText]=\"\n 'skyux_form_error_maxlength'\n | skyLibResources: labelText : maxLengthError.requiredLength\n \"\n />\n }\n <ng-content />\n }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"] }]
|
|
458
596
|
}], propDecorators: { errors: [{
|
|
@@ -480,11 +618,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
480
618
|
* @internal
|
|
481
619
|
*/
|
|
482
620
|
class SkyFormErrorsModule {
|
|
483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
484
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
485
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
621
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
622
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent], exports: [SkyFormErrorsComponent] }); }
|
|
623
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent] }); }
|
|
486
624
|
}
|
|
487
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
625
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFormErrorsModule, decorators: [{
|
|
488
626
|
type: NgModule,
|
|
489
627
|
args: [{
|
|
490
628
|
imports: [SkyFormErrorsComponent, SkyFormErrorComponent],
|
|
@@ -571,17 +709,17 @@ class SkyCheckboxGroupComponent {
|
|
|
571
709
|
this.stackedLg = !this.headingLevel && this.stacked;
|
|
572
710
|
this.stackedXL = !!this.headingLevel && this.stacked;
|
|
573
711
|
}
|
|
574
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
575
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
712
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4$1], hintText: "hintText", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { properties: { "class.sky-form-field-stacked": "this.stackedLg", "class.sky-field-group-stacked": "this.stackedXL" } }, providers: [
|
|
576
714
|
{
|
|
577
715
|
provide: NG_VALIDATORS,
|
|
578
716
|
useExisting: SkyCheckboxGroupComponent,
|
|
579
717
|
multi: true,
|
|
580
718
|
},
|
|
581
719
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
582
|
-
], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-checkbox-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span\n class=\"sky-checkbox-group-heading\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-checkbox-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n <div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-checkbox-group-hint-text': !!hintText\n }\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-group:not(.sky-theme-modern *){--sky-override-checkbox-group-content-space: 8px;--sky-override-checkbox-group-content-with-hint-text-space: 10px;--sky-override-checkbox-group-hint-text-space: 5px}.sky-checkbox-group:not(.sky-theme-modern *) .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-checkbox-group .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host{display:block}.sky-checkbox-group-legend h3,.sky-checkbox-group-legend h4,.sky-checkbox-group-legend h5{margin:0;display:inline-block}.sky-checkbox-group-inline,.sky-checkbox-group-stacked{display:block}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-space, var(--sky-space-gap-form-s))}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)) .sky-checkbox-group-hint-text{margin-top:var(--sky-override-checkbox-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
720
|
+
], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-checkbox-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span\n class=\"sky-checkbox-group-heading\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-checkbox-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n <div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-checkbox-group-hint-text': !!hintText\n }\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon], sky-checkbox[iconName]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-group:not(.sky-theme-modern *){--sky-override-checkbox-group-content-space: 8px;--sky-override-checkbox-group-content-with-hint-text-space: 10px;--sky-override-checkbox-group-hint-text-space: 5px}.sky-checkbox-group:not(.sky-theme-modern *) .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-checkbox-group .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host{display:block}.sky-checkbox-group-legend h3,.sky-checkbox-group-legend h4,.sky-checkbox-group-legend h5{margin:0;display:inline-block}.sky-checkbox-group-inline,.sky-checkbox-group-stacked{display:block}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-space, var(--sky-space-gap-form-s))}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)) .sky-checkbox-group-hint-text{margin-top:var(--sky-override-checkbox-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
583
721
|
}
|
|
584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
|
|
585
723
|
type: Component,
|
|
586
724
|
args: [{ selector: 'sky-checkbox-group', imports: [
|
|
587
725
|
CommonModule,
|
|
@@ -597,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
597
735
|
multi: true,
|
|
598
736
|
},
|
|
599
737
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
600
|
-
], hostDirectives: [SkyThemeComponentClassDirective], template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-checkbox-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span\n class=\"sky-checkbox-group-heading\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-checkbox-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n <div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-checkbox-group-hint-text': !!hintText\n }\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-group:not(.sky-theme-modern *){--sky-override-checkbox-group-content-space: 8px;--sky-override-checkbox-group-content-with-hint-text-space: 10px;--sky-override-checkbox-group-hint-text-space: 5px}.sky-checkbox-group:not(.sky-theme-modern *) .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-checkbox-group .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host{display:block}.sky-checkbox-group-legend h3,.sky-checkbox-group-legend h4,.sky-checkbox-group-legend h5{margin:0;display:inline-block}.sky-checkbox-group-inline,.sky-checkbox-group-stacked{display:block}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-space, var(--sky-space-gap-form-s))}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)) .sky-checkbox-group-hint-text{margin-top:var(--sky-override-checkbox-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"] }]
|
|
738
|
+
], hostDirectives: [SkyThemeComponentClassDirective], template: "<fieldset\n class=\"sky-checkbox-group\"\n [attr.aria-invalid]=\"!!formGroup?.errors\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-errormessage]=\"\n headingText && formGroup?.errors ? errorId : undefined\n \"\n>\n <legend\n class=\"sky-checkbox-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span\n class=\"sky-checkbox-group-heading\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-checkbox-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n <div\n #hintTextEl=\"skyId\"\n skyId\n [ngClass]=\"{\n 'sky-checkbox-group-hint-text': !!hintText\n }\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon], sky-checkbox[iconName]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-group:not(.sky-theme-modern *){--sky-override-checkbox-group-content-space: 8px;--sky-override-checkbox-group-content-with-hint-text-space: 10px;--sky-override-checkbox-group-hint-text-space: 5px}.sky-checkbox-group:not(.sky-theme-modern *) .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-checkbox-group .sky-checkbox-group-legend .sky-checkbox-group-heading-text{line-height:1.1}:host{display:block}.sky-checkbox-group-legend h3,.sky-checkbox-group-legend h4,.sky-checkbox-group-legend h5{margin:0;display:inline-block}.sky-checkbox-group-inline,.sky-checkbox-group-stacked{display:block}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-checkbox-group-hint-text)) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-space, var(--sky-space-gap-form-s))}.sky-checkbox-group:has(.sky-checkbox-group-legend:not(.sky-screen-reader-only)) .sky-checkbox-group-hint-text{margin-top:var(--sky-override-checkbox-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-inline,.sky-checkbox-group:has(.sky-checkbox-group-hint-text) .sky-checkbox-group-stacked{margin-top:var(--sky-override-checkbox-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"] }]
|
|
601
739
|
}], propDecorators: { helpPopoverContent: [{
|
|
602
740
|
type: Input
|
|
603
741
|
}], helpPopoverTitle: [{
|
|
@@ -647,10 +785,10 @@ class SkyCheckboxLabelTextLabelComponent {
|
|
|
647
785
|
return this.#_labelText;
|
|
648
786
|
}
|
|
649
787
|
#_labelText;
|
|
650
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
788
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
789
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyCheckboxLabelTextLabelComponent, isStandalone: false, selector: "sky-checkbox-label-text-label", inputs: { labelHidden: "labelHidden", labelText: "labelText" }, ngImport: i0, template: "@if (!labelHidden) {\n <span class=\"sky-switch-label\">{{ labelText }}</span>\n}\n", styles: [".sky-switch-label:not(.sky-theme-modern *){margin-right:0}\n", ":host-context(.sky-theme-modern) .sky-switch-label{margin-right:0}\n"] }); }
|
|
652
790
|
}
|
|
653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, decorators: [{
|
|
654
792
|
type: Component,
|
|
655
793
|
args: [{ selector: 'sky-checkbox-label-text-label', standalone: false, template: "@if (!labelHidden) {\n <span class=\"sky-switch-label\">{{ labelText }}</span>\n}\n", styles: [".sky-switch-label:not(.sky-theme-modern *){margin-right:0}\n", ":host-context(.sky-theme-modern) .sky-switch-label{margin-right:0}\n"] }]
|
|
656
794
|
}], propDecorators: { labelHidden: [{
|
|
@@ -666,10 +804,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
666
804
|
* @deprecated Use `labelText` input on `sky-checkbox-component` instead.
|
|
667
805
|
*/
|
|
668
806
|
class SkyCheckboxLabelComponent {
|
|
669
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
670
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
808
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyCheckboxLabelComponent, isStandalone: false, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }] }); }
|
|
671
809
|
}
|
|
672
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
|
|
673
811
|
type: Component,
|
|
674
812
|
args: [{ selector: 'sky-checkbox-label', standalone: false, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n" }]
|
|
675
813
|
}] });
|
|
@@ -766,7 +904,7 @@ class SkyCheckboxComponent {
|
|
|
766
904
|
* label types. `"info"` creates a blue background, `"success"` creates a green
|
|
767
905
|
* background, `"warning"` creates an orange background, and `"danger"` creates a red background.
|
|
768
906
|
* @default "info"
|
|
769
|
-
* @deprecated checkboxType is no longer supported
|
|
907
|
+
* @deprecated The `checkboxType` input is no longer supported.
|
|
770
908
|
*/
|
|
771
909
|
set checkboxType(value) {
|
|
772
910
|
if (value) {
|
|
@@ -801,11 +939,13 @@ class SkyCheckboxComponent {
|
|
|
801
939
|
* @internal
|
|
802
940
|
*/
|
|
803
941
|
set indeterminate(value) {
|
|
804
|
-
this.#_indeterminate
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
this.inputEl
|
|
808
|
-
|
|
942
|
+
if (value !== this.#_indeterminate) {
|
|
943
|
+
this.#_indeterminate = !!value;
|
|
944
|
+
this.#indeterminateChange.next(this.#_indeterminate);
|
|
945
|
+
if (this.inputEl) {
|
|
946
|
+
this.inputEl.nativeElement.indeterminate = this.#_indeterminate;
|
|
947
|
+
this.#changeDetector.markForCheck();
|
|
948
|
+
}
|
|
809
949
|
}
|
|
810
950
|
}
|
|
811
951
|
get indeterminate() {
|
|
@@ -906,15 +1046,20 @@ class SkyCheckboxComponent {
|
|
|
906
1046
|
this.onTouched = () => { };
|
|
907
1047
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
908
1048
|
this.#controlValueAccessorChangeFn = (value) => { };
|
|
909
|
-
this.#checkedChange = new
|
|
910
|
-
this.#disabledChange = new
|
|
911
|
-
this.#indeterminateChange = new
|
|
1049
|
+
this.#checkedChange = new Subject();
|
|
1050
|
+
this.#disabledChange = new Subject();
|
|
1051
|
+
this.#indeterminateChange = new Subject();
|
|
912
1052
|
this.#checkedChangeObs = this.#checkedChange.asObservable();
|
|
913
1053
|
this.#disabledChangeObs = this.#disabledChange.asObservable();
|
|
914
1054
|
this.#indeterminateChangeObs = this.#indeterminateChange.asObservable();
|
|
915
1055
|
this.id = this.#defaultId;
|
|
916
1056
|
this.name = this.#defaultId;
|
|
917
1057
|
}
|
|
1058
|
+
ngAfterViewInit() {
|
|
1059
|
+
this.#checkedChange.next(this.checked);
|
|
1060
|
+
this.#disabledChange.next(this.disabled);
|
|
1061
|
+
this.#indeterminateChange.next(this.indeterminate);
|
|
1062
|
+
}
|
|
918
1063
|
validate(control) {
|
|
919
1064
|
this.control ||= control;
|
|
920
1065
|
// In template-driven forms, Angular's native 'required' attribute directive only works
|
|
@@ -979,8 +1124,8 @@ class SkyCheckboxComponent {
|
|
|
979
1124
|
#toggle() {
|
|
980
1125
|
this.checked = !this.checked;
|
|
981
1126
|
}
|
|
982
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
983
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
1127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyCheckboxComponent, isStandalone: false, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", iconName: "iconName", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: ["required", "required", booleanAttribute], labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
984
1129
|
{ provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
|
|
985
1130
|
{
|
|
986
1131
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -988,9 +1133,9 @@ class SkyCheckboxComponent {
|
|
|
988
1133
|
multi: true,
|
|
989
1134
|
},
|
|
990
1135
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
991
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<span class=\"sky-checkbox-outer-wrapper\">\n <label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': isCheckboxRequired,\n 'sky-switch-disabled': disabled\n }\"\n >\n <input\n #inputEl\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"isCheckboxRequired\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n [attr.aria-invalid]=\"!!control?.errors\"\n [attr.aria-errormessage]=\"\n labelText && control?.errors ? errorId : undefined\n \"\n [ngClass]=\"{\n 'sky-switch-invalid':\n (control?.touched || control?.dirty) && control?.errors\n }\"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n @if (icon) {\n <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n } @else {\n @if (indeterminate) {\n <sky-icon\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n
|
|
1136
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<span class=\"sky-checkbox-outer-wrapper\">\n <label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': isCheckboxRequired,\n 'sky-switch-disabled': disabled\n }\"\n >\n <input\n #inputEl\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"isCheckboxRequired\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n [attr.aria-invalid]=\"!!control?.errors\"\n [attr.aria-errormessage]=\"\n labelText && control?.errors ? errorId : undefined\n \"\n [ngClass]=\"{\n 'sky-switch-invalid':\n (control?.touched || control?.dirty) && control?.errors\n }\"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon || iconName,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n @if (icon || iconName) {\n @if (iconName) {\n <sky-icon iconSize=\"m\" variant=\"solid\" [iconName]=\"iconName\" />\n } @else {\n <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n }\n } @else {\n @if (indeterminate) {\n <sky-icon\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n iconName=\"square\"\n variant=\"solid\"\n />\n } @else if (checked) {\n <sky-icon\n class=\"sky-checkbox-icon-modern-checked\"\n iconName=\"checkmark\"\n />\n }\n }\n </span>\n\n @if (labelText) {\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n } @else {\n <ng-content select=\"sky-checkbox-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<span #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-checkbox-hint-text sky-checkbox-form-margin\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</span>\n<sky-form-errors\n [class.sky-checkbox-form-margin]=\"labelText && control?.errors\"\n [id]=\"errorId\"\n [errors]=\"control?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"control?.touched\"\n [dirty]=\"control?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-cmp-theme-default{display:inline-block}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-form-field-stacked.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-checkbox-outer-wrapper{--sky-override-checkbox-checked-color: var(--sky-color-icon-action);--sky-override-checkbox-checked-color-disabled: #212327;--sky-override-checkbox-indeterminate-font-size: 14px;--sky-override-checkbox-label-margin-right: var(--sky-margin-inline-xs)}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:inline-block}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern .sky-switch:not(:has(~.sky-control-help-container)):not(:has(.sky-switch-control-icon)):has(sky-checkbox-label-text-label){margin-right:var(--sky-override-checkbox-label-margin-right, 0)}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper{display:flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-help-inline{display:inline-flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-label{padding-left:var(--sky-space-gap-label-s)}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-switch-control{border-radius:var(--sky-border-radius-s)}:host-context(.sky-theme-modern) .sky-checkbox-hint-text{margin-top:var(--sky-space-gap-stacked_supplemental-s)}:host-context(.sky-theme-modern) .sky-checkbox-form-margin{display:block;margin-left:var(--sky-space-inset-switch)}:host-context(.sky-theme-modern) :host.sky-form-field-stacked.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-space-gap-form-s)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }] }); }
|
|
992
1137
|
}
|
|
993
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
994
1139
|
type: Component,
|
|
995
1140
|
args: [{ selector: 'sky-checkbox', hostDirectives: [SkyThemeComponentClassDirective], providers: [
|
|
996
1141
|
{ provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
|
|
@@ -1000,7 +1145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1000
1145
|
multi: true,
|
|
1001
1146
|
},
|
|
1002
1147
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1003
|
-
], standalone: false, template: "<span class=\"sky-checkbox-outer-wrapper\">\n <label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': isCheckboxRequired,\n 'sky-switch-disabled': disabled\n }\"\n >\n <input\n #inputEl\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"isCheckboxRequired\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n [attr.aria-invalid]=\"!!control?.errors\"\n [attr.aria-errormessage]=\"\n labelText && control?.errors ? errorId : undefined\n \"\n [ngClass]=\"{\n 'sky-switch-invalid':\n (control?.touched || control?.dirty) && control?.errors\n }\"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n @if (icon) {\n <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n } @else {\n @if (indeterminate) {\n <sky-icon\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n
|
|
1148
|
+
], standalone: false, template: "<span class=\"sky-checkbox-outer-wrapper\">\n <label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': isCheckboxRequired,\n 'sky-switch-disabled': disabled\n }\"\n >\n <input\n #inputEl\n class=\"sky-checkbox-input sky-switch-input\"\n type=\"checkbox\"\n [id]=\"inputId\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [required]=\"isCheckboxRequired\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n [attr.aria-invalid]=\"!!control?.errors\"\n [attr.aria-errormessage]=\"\n labelText && control?.errors ? errorId : undefined\n \"\n [ngClass]=\"{\n 'sky-switch-invalid':\n (control?.touched || control?.dirty) && control?.errors\n }\"\n (blur)=\"onInputBlur()\"\n (change)=\"onInteractionEvent($event)\"\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon || iconName,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n @if (icon || iconName) {\n @if (iconName) {\n <sky-icon iconSize=\"m\" variant=\"solid\" [iconName]=\"iconName\" />\n } @else {\n <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n }\n } @else {\n @if (indeterminate) {\n <sky-icon\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n iconName=\"square\"\n variant=\"solid\"\n />\n } @else if (checked) {\n <sky-icon\n class=\"sky-checkbox-icon-modern-checked\"\n iconName=\"checkmark\"\n />\n }\n }\n </span>\n\n @if (labelText) {\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n } @else {\n <ng-content select=\"sky-checkbox-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<span #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-checkbox-hint-text sky-checkbox-form-margin\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</span>\n<sky-form-errors\n [class.sky-checkbox-form-margin]=\"labelText && control?.errors\"\n [id]=\"errorId\"\n [errors]=\"control?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"control?.touched\"\n [dirty]=\"control?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-cmp-theme-default{display:inline-block}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-form-field-stacked.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-checkbox-outer-wrapper{--sky-override-checkbox-checked-color: var(--sky-color-icon-action);--sky-override-checkbox-checked-color-disabled: #212327;--sky-override-checkbox-indeterminate-font-size: 14px;--sky-override-checkbox-label-margin-right: var(--sky-margin-inline-xs)}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:inline-block}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern .sky-switch:not(:has(~.sky-control-help-container)):not(:has(.sky-switch-control-icon)):has(sky-checkbox-label-text-label){margin-right:var(--sky-override-checkbox-label-margin-right, 0)}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper{display:flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-help-inline{display:inline-flex}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-checkbox-label{padding-left:var(--sky-space-gap-label-s)}:host-context(.sky-theme-modern) .sky-checkbox-outer-wrapper .sky-switch-control{border-radius:var(--sky-border-radius-s)}:host-context(.sky-theme-modern) .sky-checkbox-hint-text{margin-top:var(--sky-space-gap-stacked_supplemental-s)}:host-context(.sky-theme-modern) .sky-checkbox-form-margin{display:block;margin-left:var(--sky-space-inset-switch)}:host-context(.sky-theme-modern) :host.sky-form-field-stacked.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-space-gap-form-s)}\n"] }]
|
|
1004
1149
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
1005
1150
|
type: Input
|
|
1006
1151
|
}], labelledBy: [{
|
|
@@ -1022,6 +1167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1022
1167
|
type: Output
|
|
1023
1168
|
}], icon: [{
|
|
1024
1169
|
type: Input
|
|
1170
|
+
}], iconName: [{
|
|
1171
|
+
type: Input
|
|
1025
1172
|
}], checkboxType: [{
|
|
1026
1173
|
type: Input
|
|
1027
1174
|
}], checked: [{
|
|
@@ -1058,8 +1205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1058
1205
|
}] } });
|
|
1059
1206
|
|
|
1060
1207
|
class SkyCheckboxModule {
|
|
1061
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1062
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
1208
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1209
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
|
|
1063
1210
|
SkyCheckboxLabelComponent,
|
|
1064
1211
|
SkyCheckboxLabelTextLabelComponent], imports: [CommonModule,
|
|
1065
1212
|
FormsModule,
|
|
@@ -1075,7 +1222,7 @@ class SkyCheckboxModule {
|
|
|
1075
1222
|
SkyCheckboxLabelComponent,
|
|
1076
1223
|
SkyCheckboxGroupComponent,
|
|
1077
1224
|
SkyFormErrorModule] }); }
|
|
1078
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
1225
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule,
|
|
1079
1226
|
FormsModule,
|
|
1080
1227
|
SkyCheckboxGroupComponent,
|
|
1081
1228
|
SkyFormErrorModule,
|
|
@@ -1087,7 +1234,7 @@ class SkyCheckboxModule {
|
|
|
1087
1234
|
SkyTrimModule,
|
|
1088
1235
|
SkyThemeModule, SkyFormErrorModule] }); }
|
|
1089
1236
|
}
|
|
1090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyCheckboxModule, decorators: [{
|
|
1091
1238
|
type: NgModule,
|
|
1092
1239
|
args: [{
|
|
1093
1240
|
declarations: [
|
|
@@ -1148,10 +1295,10 @@ class SkyFieldGroupComponent {
|
|
|
1148
1295
|
set headingStyle(value) {
|
|
1149
1296
|
this.headingClass = `sky-font-heading-${value}`;
|
|
1150
1297
|
}
|
|
1151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
1298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyFieldGroupComponent, isStandalone: true, selector: "sky-field-group", inputs: { headingText: "headingText", hintText: "hintText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute3], headingStyle: ["headingStyle", "headingStyle", numberAttribute3], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-xl": "this.stacked" } }, ngImport: i0, template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <legend\n class=\"sky-field-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span class=\"sky-field-group-heading\">\n @switch (headingLevel) {\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @default {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n }\n </span>\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-field-group-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n <div #hintTextEl=\"skyId\" skyId class=\"sky-field-group-hint-text-wrapper\">\n @if (hintText) {\n <div\n class=\"sky-field-group-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <div class=\"sky-field-group-content\">\n <ng-content />\n </div>\n</fieldset>\n", styles: [".sky-field-group:not(.sky-theme-modern *){--sky-override-field-group-content-space: 8px;--sky-override-field-group-content-with-hint-text-space: 10px;--sky-override-field-group-hint-text-space: 5px}:host{display:block}legend{display:flex}legend h3,legend h4{margin:0}.sky-field-group-hint-text{margin-top:var(--sky-override-field-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-field-group-content{margin-top:var(--sky-override-field-group-content-space, var(--sky-space-gap-form-s))}.sky-field-group-hint-text-wrapper:has(.sky-field-group-hint-text)+.sky-field-group-content{margin-top:var(--sky-override-field-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
1153
1300
|
}
|
|
1154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFieldGroupComponent, decorators: [{
|
|
1155
1302
|
type: Component,
|
|
1156
1303
|
args: [{ selector: 'sky-field-group', imports: [CommonModule, SkyHelpInlineModule, SkyIdModule, SkyThemeModule], template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <legend\n class=\"sky-field-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span class=\"sky-field-group-heading\">\n @switch (headingLevel) {\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @default {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n }\n </span>\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-field-group-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n <div #hintTextEl=\"skyId\" skyId class=\"sky-field-group-hint-text-wrapper\">\n @if (hintText) {\n <div\n class=\"sky-field-group-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <div class=\"sky-field-group-content\">\n <ng-content />\n </div>\n</fieldset>\n", styles: [".sky-field-group:not(.sky-theme-modern *){--sky-override-field-group-content-space: 8px;--sky-override-field-group-content-with-hint-text-space: 10px;--sky-override-field-group-hint-text-space: 5px}:host{display:block}legend{display:flex}legend h3,legend h4{margin:0}.sky-field-group-hint-text{margin-top:var(--sky-override-field-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-field-group-content{margin-top:var(--sky-override-field-group-content-space, var(--sky-space-gap-form-s))}.sky-field-group-hint-text-wrapper:has(.sky-field-group-hint-text)+.sky-field-group-content{margin-top:var(--sky-override-field-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"] }]
|
|
1157
1304
|
}], propDecorators: { headingText: [{
|
|
@@ -1183,11 +1330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1183
1330
|
}] } });
|
|
1184
1331
|
|
|
1185
1332
|
class SkyFieldGroupModule {
|
|
1186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1187
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
1188
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
1333
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFieldGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1334
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent], exports: [SkyFieldGroupComponent] }); }
|
|
1335
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent] }); }
|
|
1189
1336
|
}
|
|
1190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFieldGroupModule, decorators: [{
|
|
1191
1338
|
type: NgModule,
|
|
1192
1339
|
args: [{
|
|
1193
1340
|
imports: [SkyFieldGroupComponent],
|
|
@@ -1211,10 +1358,10 @@ class SkyFileAttachmentLabelComponent {
|
|
|
1211
1358
|
'on the `sky-file-attachment` component instead.',
|
|
1212
1359
|
});
|
|
1213
1360
|
}
|
|
1214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
1361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyFileAttachmentLabelComponent, isStandalone: true, selector: "sky-file-attachment-label", viewQueries: [{ propertyName: "labelContentId", first: true, predicate: ["labelContentId"], descendants: true }], ngImport: i0, template: "<span class=\"sky-control-label\"\n ><span #labelContentId=\"skyId\" skyId skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1216
1363
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
|
|
1218
1365
|
type: Component,
|
|
1219
1366
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyIdModule, SkyTrimModule], selector: 'sky-file-attachment-label', template: "<span class=\"sky-control-label\"\n ><span #labelContentId=\"skyId\" skyId skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"] }]
|
|
1220
1367
|
}], ctorParameters: () => [], propDecorators: { labelContentId: [{
|
|
@@ -1268,10 +1415,10 @@ class SkyFileSizePipe {
|
|
|
1268
1415
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
1269
1416
|
return this.#resourcesService.getStringForLocale({ locale: this.#defaultLocale }, key, ...args);
|
|
1270
1417
|
}
|
|
1271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1272
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
1418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1419
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFileSizePipe, isStandalone: true, name: "skyFileSize" }); }
|
|
1273
1420
|
}
|
|
1274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileSizePipe, decorators: [{
|
|
1275
1422
|
type: Pipe,
|
|
1276
1423
|
args: [{
|
|
1277
1424
|
name: 'skyFileSize',
|
|
@@ -1288,10 +1435,10 @@ class SkyFileAttachmentJoinIdsPipe {
|
|
|
1288
1435
|
// Remove undefined values and join with a " ".
|
|
1289
1436
|
return ids && ids.filter((id) => id).join(' ');
|
|
1290
1437
|
}
|
|
1291
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1292
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
1438
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1439
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, isStandalone: true, name: "skyFileAttachmentJoinIds" }); }
|
|
1293
1440
|
}
|
|
1294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, decorators: [{
|
|
1295
1442
|
type: Pipe,
|
|
1296
1443
|
args: [{
|
|
1297
1444
|
name: 'skyFileAttachmentJoinIds',
|
|
@@ -1305,10 +1452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1305
1452
|
class SkyFileAttachmentService {
|
|
1306
1453
|
checkFiles(files, minFileSize, maxFileSize, acceptedTypes, validateFn) {
|
|
1307
1454
|
const fileResults = [];
|
|
1308
|
-
|
|
1309
|
-
const fileItem = {
|
|
1310
|
-
file: files.item(index),
|
|
1311
|
-
};
|
|
1455
|
+
files.forEach((fileItem) => {
|
|
1312
1456
|
if (fileItem.file.size < minFileSize) {
|
|
1313
1457
|
fileItem.errorType = 'minFileSize';
|
|
1314
1458
|
fileItem.errorParam = minFileSize.toString();
|
|
@@ -1335,7 +1479,7 @@ class SkyFileAttachmentService {
|
|
|
1335
1479
|
else {
|
|
1336
1480
|
fileResults.push(fileItem);
|
|
1337
1481
|
}
|
|
1338
|
-
}
|
|
1482
|
+
});
|
|
1339
1483
|
return fileResults;
|
|
1340
1484
|
}
|
|
1341
1485
|
/**
|
|
@@ -1393,10 +1537,10 @@ class SkyFileAttachmentService {
|
|
|
1393
1537
|
#getMimeMainType(type) {
|
|
1394
1538
|
return type.substr(0, type.indexOf('/'));
|
|
1395
1539
|
}
|
|
1396
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1397
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
1540
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1541
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentService }); }
|
|
1398
1542
|
}
|
|
1399
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1543
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
|
|
1400
1544
|
type: Injectable
|
|
1401
1545
|
}] });
|
|
1402
1546
|
|
|
@@ -1461,10 +1605,10 @@ class SkyFileItemService {
|
|
|
1461
1605
|
}
|
|
1462
1606
|
return fileType.toUpperCase();
|
|
1463
1607
|
}
|
|
1464
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1465
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
1608
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1609
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileItemService, providedIn: 'root' }); }
|
|
1466
1610
|
}
|
|
1467
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
1611
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileItemService, decorators: [{
|
|
1468
1612
|
type: Injectable,
|
|
1469
1613
|
args: [{ providedIn: 'root' }]
|
|
1470
1614
|
}] });
|
|
@@ -1659,7 +1803,10 @@ class SkyFileAttachmentComponent {
|
|
|
1659
1803
|
}
|
|
1660
1804
|
}
|
|
1661
1805
|
fileChangeEvent(fileChangeEvent) {
|
|
1662
|
-
this
|
|
1806
|
+
/** Set a timeout here to allow the browser to regain context from the system dialog. Without this, error messages do not read out correctly to screen readers. */
|
|
1807
|
+
setTimeout(() => {
|
|
1808
|
+
this.#handleFiles(fileChangeEvent.target?.files);
|
|
1809
|
+
}, 500);
|
|
1663
1810
|
}
|
|
1664
1811
|
fileDragEnter(dragEnterEvent) {
|
|
1665
1812
|
// Save this target to know when the drag event leaves
|
|
@@ -1810,8 +1957,16 @@ class SkyFileAttachmentComponent {
|
|
|
1810
1957
|
}
|
|
1811
1958
|
}
|
|
1812
1959
|
}
|
|
1813
|
-
#handleFiles(
|
|
1814
|
-
if (
|
|
1960
|
+
#handleFiles(fileList) {
|
|
1961
|
+
if (fileList) {
|
|
1962
|
+
const files = [];
|
|
1963
|
+
if ('item' in fileList) {
|
|
1964
|
+
for (let index = 0; index < fileList.length; index++) {
|
|
1965
|
+
files.push({
|
|
1966
|
+
file: fileList.item(index),
|
|
1967
|
+
});
|
|
1968
|
+
}
|
|
1969
|
+
}
|
|
1815
1970
|
const processedFiles = this.#fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
|
|
1816
1971
|
for (const file of processedFiles) {
|
|
1817
1972
|
if (file.errorType) {
|
|
@@ -1850,13 +2005,13 @@ class SkyFileAttachmentComponent {
|
|
|
1850
2005
|
#onChange;
|
|
1851
2006
|
// istanbul ignore next
|
|
1852
2007
|
#onTouched;
|
|
1853
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1854
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
2008
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i2$2.NgControl, optional: true, self: true }, { token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2009
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyFileAttachmentComponent, isStandalone: true, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: ["required", "required", booleanAttribute] }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
1855
2010
|
SkyFileAttachmentService,
|
|
1856
2011
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1857
|
-
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon class=\"sky-file-attachment-icon\" icon=\"file-o\" />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n }}\n</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-font-size: 30px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));font-size:var(--sky-override-file-attachment-file-icon-font-size, var(--sky-size-icon-xl));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2012
|
+
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon iconName=\"folder-open\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon\n class=\"sky-file-attachment-icon\"\n iconName=\"document\"\n iconSize=\"xl\"\n />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n }}\n</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: SkyThemeComponentClassDirective, selector: "[skyThemeClass]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1858
2013
|
}
|
|
1859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2014
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
1860
2015
|
type: Component,
|
|
1861
2016
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1862
2017
|
CommonModule,
|
|
@@ -1873,7 +2028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1873
2028
|
], providers: [
|
|
1874
2029
|
SkyFileAttachmentService,
|
|
1875
2030
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1876
|
-
], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon class=\"sky-file-attachment-icon\" icon=\"file-o\" />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n }}\n</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-font-size: 30px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));font-size:var(--sky-override-file-attachment-file-icon-font-size, var(--sky-size-icon-xl));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"] }]
|
|
2031
|
+
], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n }\n } @else {\n <ng-content select=\"sky-file-attachment-label\" />\n }\n @if (isRequired && (hasLabelComponent || labelText)) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (labelText && (helpPopoverContent || helpKey)) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n @if (showFileAttachmentButton) {\n <button\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"\n hintText && hintTextEl.id\n | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n \"\n [attr.aria-labelledby]=\"\n attachButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n [attr.aria-errormessage]=\"\n !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n (blur)=\"onButtonBlur()\"\n >\n <sky-icon iconName=\"folder-open\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n }\n @if (value && !isImage && currentThemeName === 'modern') {\n <sky-icon\n class=\"sky-file-attachment-icon\"\n iconName=\"document\"\n iconSize=\"xl\"\n />\n }\n @if (value || currentThemeName === 'default') {\n <span class=\"sky-file-attachment-file-link\">\n @if (value) {\n <a\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n } @else {\n <span class=\"sky-file-attachment-none sky-font-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n }\n </span>\n }\n\n @if (value) {\n <button\n class=\"sky-btn sky-btn-icon-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : (labelText\n ? labelId\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon iconName=\"delete\" />\n </button>\n }\n </div>\n\n @if (value && isImage) {\n <img\n class=\"sky-file-attachment-preview-img\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n [src]=\"value.url\"\n />\n }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-file-attachment-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n @if (fileErrorName === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n } @else if (fileErrorName === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n } @else if (fileErrorName === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n }\n</sky-form-errors>\n\n<span\n #attachButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file_label'\n | skyLibResources: fileName)\n : ('skyux_file_attachment_button_label_choose_file_label'\n | skyLibResources)\n }}\n</span>\n\n<span\n #deleteButtonLabelRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n skyId\n>\n {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [".sky-file-attachment-wrapper:not(.sky-theme-modern *){--sky-override-file-attachment-accept-border-color: #72bf44;--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-control-label-color: #212327;--sky-override-file-attachment-control-label-font-size: 15px;--sky-override-file-attachment-delete-margin-left: 0;--sky-override-file-attachment-file-link-padding: 0 5px;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #212327;--sky-override-file-attachment-preview-img-border: none;--sky-override-file-attachment-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-attachment-preview-img-margin: 10px;--sky-override-file-attachment-preview-img-width: auto;--sky-override-file-attachment-reject-border-color: #ef4044;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-display: block;--sky-override-file-attachment-upload-padding-right: 8px;--sky-override-file-attachment-wrapper-display: inline-block}.sky-file-attachment-wrapper:not(.sky-theme-modern *) .sky-file-attachment-delete{padding:0}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper{--sky-override-file-attachment-accept-border-radius: 5px;--sky-override-file-attachment-accept-border-width: 1px;--sky-override-file-attachment-btn-non-stacked-margin: 0 10px 0 0;--sky-override-file-attachment-control-label-color: #686c73;--sky-override-file-attachment-control-label-font-size: 13px;--sky-override-file-attachment-delete-height: 40px;--sky-override-file-attachment-delete-width: 40px;--sky-override-file-attachment-file-icon-line-height: normal;--sky-override-file-attachment-file-icon-margin: 5px 10px 5px 5px;--sky-override-file-attachment-file-link-margin: 10px 0 0 0;--sky-override-file-attachment-file-link-padding: 0;--sky-override-file-attachment-invalid-border: 1px solid #ef4044;--sky-override-file-attachment-invalid-box-shadow: 0 0 8px rgba(239, 64, 68, .6);--sky-override-file-attachment-invalid-label-color: #686c73;--sky-override-file-attachment-preview-img-border: var( --sky-border-width-separator-dark ) solid var(--sky-color-border-separator-dark);--sky-override-file-attachment-preview-img-box-shadow: none;--sky-override-file-attachment-preview-img-margin: 0 10px 0 0;--sky-override-file-attachment-reject-border-radius: 5px;--sky-override-file-attachment-reject-border-width: 1px;--sky-override-file-attachment-upload-with-icon-align-items: flex-start}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-attachment-wrapper .sky-file-attachment-delete{padding:0}:host.sky-cmp-theme-default{--sky-override-file-attachment-hint-text-margin-top: var( --sky-margin-stacked-xs )}:host.sky-form-field-stacked{display:block}:host:not(.sky-form-field-stacked) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:var(--sky-override-file-attachment-btn-non-stacked-margin, 0)}.sky-file-attachment-wrapper{display:var(--sky-override-file-attachment-wrapper-display, flex);flex-wrap:wrap}.sky-file-attachment-label-wrapper{width:100%}.sky-file-attachment-upload{flex:1;order:2;display:var(--sky-override-file-attachment-upload-display, flex);align-items:flex-start;padding-right:var(--sky-override-file-attachment-upload-padding-right, 0);border:1px solid transparent}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:var(--sky-override-file-attachment-upload-with-icon-align-items, center)}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, var(--sky-color-border-success));border-style:dashed;border-width:var(--sky-override-file-attachment-accept-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-accept-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, var(--sky-color-border-danger));border-style:dashed;border-width:var(--sky-override-file-attachment-reject-border-width, var(--sky-border-width-input-hover));border-radius:var(--sky-override-file-attachment-reject-border-radius, var(--sky-border-radius-s))}.sky-file-attachment-btn,.sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, none);border:var(--sky-override-file-attachment-invalid-border, var(--sky-border-width-input-error) solid var(--sky-color-border-input-error))}:host(.ng-invalid.ng-dirty) .sky-control-label{color:var(--sky-override-file-attachment-invalid-label-color, var(--sky-color-text-danger))}.sky-file-attachment-file-link{padding:var(--sky-override-file-attachment-file-link-padding, 0 0 0 var(--sky-space-gap-icon-m));margin:var(--sky-override-file-attachment-file-link-margin, 0)}.sky-file-attachment-delete{width:var(--sky-override-file-attachment-delete-width, auto);height:var(--sky-override-file-attachment-delete-height, auto);margin-left:var(--sky-override-file-attachment-delete-margin-left, var(--sky-space-gap-text_action-s))}.sky-file-attachment-preview-img{flex:0;order:1;max-width:25%;width:var(--sky-override-file-attachment-preview-img-width, var(--sky-size-thumbnail-l));height:auto;box-shadow:var(--sky-override-file-attachment-preview-img-box-shadow, var(--sky-elevation-raised-100));border:var(--sky-override-file-attachment-preview-img-border, none);margin:var(--sky-override-file-attachment-preview-img-margin, 0)}.sky-file-attachment-hint-text{margin-top:var(--sky-override-file-attachment-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-control-label{color:var(--sky-override-file-attachment-control-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-attachment-control-label-font-size, var(--sky-font-size-input-label))}.sky-file-attachment-icon{color:var(--sky-color-icon-deemphasized);margin:var(--sky-override-file-attachment-file-icon-margin, 0 0 0 var(--sky-gap-icon-m));line-height:var(--sky-override-file-attachment-file-icon-line-height, 1)}\n"] }]
|
|
1877
2032
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$2.NgControl, decorators: [{
|
|
1878
2033
|
type: Self
|
|
1879
2034
|
}, {
|
|
@@ -1928,13 +2083,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1928
2083
|
}] } });
|
|
1929
2084
|
|
|
1930
2085
|
class SkyFileAttachmentModule {
|
|
1931
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
1932
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
2086
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2087
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent], exports: [SkyFileAttachmentComponent,
|
|
1933
2088
|
SkyFileAttachmentLabelComponent,
|
|
1934
2089
|
SkyFormErrorModule] }); }
|
|
1935
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
2090
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent, SkyFormErrorModule] }); }
|
|
1936
2091
|
}
|
|
1937
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentModule, decorators: [{
|
|
1938
2093
|
type: NgModule,
|
|
1939
2094
|
args: [{
|
|
1940
2095
|
exports: [
|
|
@@ -2008,10 +2163,10 @@ class SkyInputBoxHostService {
|
|
|
2008
2163
|
setRequired(required) {
|
|
2009
2164
|
this.#requiredSubject.next(required);
|
|
2010
2165
|
}
|
|
2011
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2012
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
2166
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2167
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxHostService }); }
|
|
2013
2168
|
}
|
|
2014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
|
|
2015
2170
|
type: Injectable
|
|
2016
2171
|
}] });
|
|
2017
2172
|
|
|
@@ -2027,10 +2182,10 @@ class SkyInputBoxControlDirective {
|
|
|
2027
2182
|
}
|
|
2028
2183
|
#_autocomplete;
|
|
2029
2184
|
#hostSvc = inject(SkyInputBoxHostService, { optional: true });
|
|
2030
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2031
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.
|
|
2185
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2186
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyInputBoxControlDirective, isStandalone: true, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: { autocomplete: "autocomplete" }, host: { properties: { "autocomplete": "this.autocomplete" } }, ngImport: i0 }); }
|
|
2032
2187
|
}
|
|
2033
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
|
|
2034
2189
|
type: Directive,
|
|
2035
2190
|
args: [{
|
|
2036
2191
|
selector:
|
|
@@ -2055,10 +2210,10 @@ class SkyInputBoxHintTextPipe {
|
|
|
2055
2210
|
}
|
|
2056
2211
|
return hintText || hostHintText;
|
|
2057
2212
|
}
|
|
2058
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2059
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.
|
|
2213
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxHintTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2214
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxHintTextPipe, isStandalone: true, name: "skyInputBoxHintText" }); }
|
|
2060
2215
|
}
|
|
2061
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxHintTextPipe, decorators: [{
|
|
2062
2217
|
type: Pipe,
|
|
2063
2218
|
args: [{
|
|
2064
2219
|
standalone: true,
|
|
@@ -2120,10 +2275,10 @@ class SkyInputBoxAdapterService {
|
|
|
2120
2275
|
this.#renderer.setAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR, describedByIds.join(' '));
|
|
2121
2276
|
}
|
|
2122
2277
|
}
|
|
2123
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2124
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
2278
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2279
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxAdapterService }); }
|
|
2125
2280
|
}
|
|
2126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
|
|
2127
2282
|
type: Injectable
|
|
2128
2283
|
}] });
|
|
2129
2284
|
|
|
@@ -2327,8 +2482,8 @@ class SkyInputBoxComponent {
|
|
|
2327
2482
|
control.addValidators([this.#previousMaxLengthValidator]);
|
|
2328
2483
|
}
|
|
2329
2484
|
}
|
|
2330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
2485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyInputBoxComponent, isStandalone: false, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled", labelText: "labelText", characterLimit: "characterLimit", stacked: "stacked", helpPopoverTitle: "helpPopoverTitle", helpPopoverContent: "helpPopoverContent", helpKey: "helpKey", hintText: "hintText" }, host: { properties: { "class": "this.cssClass" } }, providers: [
|
|
2332
2487
|
SkyContentInfoProvider,
|
|
2333
2488
|
SkyInputBoxAdapterService,
|
|
2334
2489
|
SkyInputBoxHostService,
|
|
@@ -2336,9 +2491,9 @@ class SkyInputBoxComponent {
|
|
|
2336
2491
|
provide: SKY_FORM_ERRORS_ENABLED,
|
|
2337
2492
|
useValue: true,
|
|
2338
2493
|
},
|
|
2339
|
-
], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-form-group\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-input-group-inner\"\n [ngClass]=\"{\n 'sky-field-status-active': formControlHasFocus,\n 'sky-field-status-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n </div>\n</div>\n\n<div\n *skyThemeIf=\"'modern'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-input-box-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-group-form-control\"\n [ngClass]=\"{\n 'sky-input-box-group-form-control-focus': formControlHasFocus,\n 'sky-input-box-group-form-control-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <div class=\"sky-form-group\">\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <div class=\"sky-input-box-form-group-inner\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n <ng-content select=\".sky-control-label\" />\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [attr.aria-label]=\"\n characterLimit !== undefined\n ? labelText +\n ' ' +\n ('skyux_character_count_message'\n | skyLibResources: characterCountScreenReader : characterLimit)\n : null\n \"\n [for]=\"controlId\"\n [id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <sky-help-inline\n class=\"sky-control-help\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n @if (characterLimit !== undefined) {\n <sky-character-counter-indicator\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n }\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n @if (hostInputTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n }\n <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n @if (hostButtonsLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <ng-content\n select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n />\n @if (hostButtonsTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n @if (hostButtonsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n @if (hostIconsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n <div\n class=\"sky-input-box-icon-inset-left-wrapper\"\n (click)=\"onInsetIconClick()\"\n >\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n @if (hostIconsInsetLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n <sky-form-errors\n [id]=\"errorId\"\n [errors]=\"controlDir?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"controlDir?.touched\"\n [dirty]=\"controlDir?.dirty\"\n >\n <ng-content\n select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n @if (hintText || hostHintText) {\n <div\n class=\"sky-input-box-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n [ngClass]=\"{\n 'sky-input-box-hint-text-hidden': hintTextHidden,\n 'sky-screen-reader-only': hintTextScreenReaderOnly\n }\"\n [id]=\"hintTextId\"\n >\n {{ hintText | skyInputBoxHintText: hostHintText }}\n </div>\n }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-input-box{--sky-override-button-width: 55px;--sky-override-input-box-character-count-font-size: var( --sky-font-size-body-m );--sky-override-input-box-character-count-padding: 3px 0 0;--sky-override-input-box-color-border-base: var(--modern-color-gray-15);--sky-override-input-box-no-label-space-top: var(--modern-space-s);--sky-override-input-box-select-space: 10px;--sky-override-input-focus-elevation-shadow: var(--modern-shadow-size-1);--sky-override-input-margin-top: -23px;--sky-override-input-padding-top: 26px;--sky-override-label-padding-bottom: 1px;--sky-override-textarea-border-top: 29px;--sky-override-textarea-margin-top: -26px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-input-box{--sky-override-background-color-input-box: var(--modern-color-white)}sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-background-color-input-box-group: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) );--sky-background-color-input-box-group-focused: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-space-inset-input-bottom-m) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-text-deemphasized);margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-text-deemphasized);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-deemphasized);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-space-inset-input_label-top-m);padding-bottom:var(--sky-override-label-padding-bottom, var(--sky-space-inset-input_label-bottom-m));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-override-input-box-character-count-padding, var(--sky-space-inset-input_label-top-m) 0 var(--sky-space-inset-input_label-bottom-m));font-size:var(--sky-override-input-box-character-count-font-size, var(--sky-font-size-input-label))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-override-input-margin-top, var(--sky-input-box-margin-top));padding-top:var(--sky-override-input-padding-top, var(--sky-input-box-space-top))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-space-inset-input-right-m);padding-bottom:var(--sky-space-inset-input-bottom-m);padding-left:var(--sky-space-inset-input-left-m);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m))}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - var(--sky-override-input-box-select-space, var(--sky-space-inset-input-left-m)));z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-override-textarea-margin-top, var(--sky-input-box-margin-top));padding-top:0;resize:vertical;border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-space-inset-input-left-m);width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-input-box-input-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-input-base) );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-input-box-button-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-action-input-base) );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-base) )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-input-box-input-border-color: var(--sky-color-border-input-hover);--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-focus);--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-error);--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-hover) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-active) );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-focus) );--sky-input-box-button-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-input-disabled))}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-action-input-disabled));background-color:var(--sky-color-background-action-input-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-color-background-input-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2494
|
+
], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-form-group\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-input-group-inner\"\n [ngClass]=\"{\n 'sky-field-status-active': formControlHasFocus,\n 'sky-field-status-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n </div>\n</div>\n\n<div\n *skyThemeIf=\"'modern'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-input-box-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-group-form-control\"\n [ngClass]=\"{\n 'sky-input-box-group-form-control-focus': formControlHasFocus,\n 'sky-input-box-group-form-control-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <div class=\"sky-form-group\">\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <div class=\"sky-input-box-form-group-inner\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n <ng-content select=\".sky-control-label\" />\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [attr.aria-label]=\"\n characterLimit !== undefined\n ? labelText +\n ' ' +\n ('skyux_character_count_message'\n | skyLibResources: characterCountScreenReader : characterLimit)\n : null\n \"\n [for]=\"controlId\"\n [id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <sky-help-inline\n class=\"sky-control-help\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n @if (characterLimit !== undefined) {\n <sky-character-counter-indicator\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n }\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n @if (hostInputTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n }\n <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n @if (hostButtonsLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <ng-content\n select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n />\n @if (hostButtonsTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n @if (hostButtonsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n @if (hostIconsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n <div\n class=\"sky-input-box-icon-inset-left-wrapper\"\n (click)=\"onInsetIconClick()\"\n >\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n @if (hostIconsInsetLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n <sky-form-errors\n [id]=\"errorId\"\n [errors]=\"controlDir?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"controlDir?.touched\"\n [dirty]=\"controlDir?.dirty\"\n >\n <ng-content\n select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n @if (hintText || hostHintText) {\n <div\n class=\"sky-input-box-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n [ngClass]=\"{\n 'sky-input-box-hint-text-hidden': hintTextHidden,\n 'sky-screen-reader-only': hintTextScreenReaderOnly\n }\"\n [id]=\"hintTextId\"\n >\n {{ hintText | skyInputBoxHintText: hostHintText }}\n </div>\n }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-input-box{--sky-override-button-width: 55px;--sky-override-input-box-character-count-font-size: var( --sky-font-size-body-m );--sky-override-input-box-character-count-padding: 3px 0 0;--sky-override-input-box-color-border-base: var(--modern-color-gray-15);--sky-override-input-box-no-label-space-top: var(--modern-space-s);--sky-override-input-box-select-space: 10px;--sky-override-input-focus-elevation-shadow: var(--modern-shadow-size-1);--sky-override-input-margin-top: -23px;--sky-override-input-padding-top: 26px;--sky-override-label-padding-bottom: 1px;--sky-override-textarea-border-top: 29px;--sky-override-textarea-margin-top: -26px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-input-box{--sky-override-background-color-input-box: var(--modern-color-white)}sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-background-color-input-box-group: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) );--sky-background-color-input-box-group-focused: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-group-btn .sky-btn{padding:4.5px 12px}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-space-inset-input-bottom-m) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-text-deemphasized);margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-text-deemphasized);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-deemphasized);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-space-inset-input_label-top-m);padding-bottom:var(--sky-override-label-padding-bottom, var(--sky-space-inset-input_label-bottom-m));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-override-input-box-character-count-padding, var(--sky-space-inset-input_label-top-m) 0 var(--sky-space-inset-input_label-bottom-m));font-size:var(--sky-override-input-box-character-count-font-size, var(--sky-font-size-input-label))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-override-input-margin-top, var(--sky-input-box-margin-top));padding-top:var(--sky-override-input-padding-top, var(--sky-input-box-space-top))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-space-inset-input-right-m);padding-bottom:var(--sky-space-inset-input-bottom-m);padding-left:var(--sky-space-inset-input-left-m);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m))}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - var(--sky-override-input-box-select-space, var(--sky-space-inset-input-left-m)));z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-override-textarea-margin-top, var(--sky-input-box-margin-top));padding-top:0;resize:vertical;border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-space-inset-input-left-m);width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-input-box-input-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-input-base) );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-input-box-button-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-action-input-base) );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-base) )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-input-box-input-border-color: var(--sky-color-border-input-hover);--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-focus);--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-error);--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-hover) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-active) );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-focus) );--sky-input-box-button-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-input-disabled))}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-action-input-disabled));background-color:var(--sky-color-background-action-input-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-color-background-input-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2340
2495
|
}
|
|
2341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
|
|
2342
2497
|
type: Component,
|
|
2343
2498
|
args: [{ selector: 'sky-input-box', providers: [
|
|
2344
2499
|
SkyContentInfoProvider,
|
|
@@ -2348,7 +2503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2348
2503
|
provide: SKY_FORM_ERRORS_ENABLED,
|
|
2349
2504
|
useValue: true,
|
|
2350
2505
|
},
|
|
2351
|
-
], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-form-group\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-input-group-inner\"\n [ngClass]=\"{\n 'sky-field-status-active': formControlHasFocus,\n 'sky-field-status-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n </div>\n</div>\n\n<div\n *skyThemeIf=\"'modern'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-input-box-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-group-form-control\"\n [ngClass]=\"{\n 'sky-input-box-group-form-control-focus': formControlHasFocus,\n 'sky-input-box-group-form-control-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <div class=\"sky-form-group\">\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <div class=\"sky-input-box-form-group-inner\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n <ng-content select=\".sky-control-label\" />\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [attr.aria-label]=\"\n characterLimit !== undefined\n ? labelText +\n ' ' +\n ('skyux_character_count_message'\n | skyLibResources: characterCountScreenReader : characterLimit)\n : null\n \"\n [for]=\"controlId\"\n [id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <sky-help-inline\n class=\"sky-control-help\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n @if (characterLimit !== undefined) {\n <sky-character-counter-indicator\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n }\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n @if (hostInputTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n }\n <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n @if (hostButtonsLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <ng-content\n select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n />\n @if (hostButtonsTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n @if (hostButtonsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n @if (hostIconsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n <div\n class=\"sky-input-box-icon-inset-left-wrapper\"\n (click)=\"onInsetIconClick()\"\n >\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n @if (hostIconsInsetLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n <sky-form-errors\n [id]=\"errorId\"\n [errors]=\"controlDir?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"controlDir?.touched\"\n [dirty]=\"controlDir?.dirty\"\n >\n <ng-content\n select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n @if (hintText || hostHintText) {\n <div\n class=\"sky-input-box-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n [ngClass]=\"{\n 'sky-input-box-hint-text-hidden': hintTextHidden,\n 'sky-screen-reader-only': hintTextScreenReaderOnly\n }\"\n [id]=\"hintTextId\"\n >\n {{ hintText | skyInputBoxHintText: hostHintText }}\n </div>\n }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-input-box{--sky-override-button-width: 55px;--sky-override-input-box-character-count-font-size: var( --sky-font-size-body-m );--sky-override-input-box-character-count-padding: 3px 0 0;--sky-override-input-box-color-border-base: var(--modern-color-gray-15);--sky-override-input-box-no-label-space-top: var(--modern-space-s);--sky-override-input-box-select-space: 10px;--sky-override-input-focus-elevation-shadow: var(--modern-shadow-size-1);--sky-override-input-margin-top: -23px;--sky-override-input-padding-top: 26px;--sky-override-label-padding-bottom: 1px;--sky-override-textarea-border-top: 29px;--sky-override-textarea-margin-top: -26px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-input-box{--sky-override-background-color-input-box: var(--modern-color-white)}sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-background-color-input-box-group: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) );--sky-background-color-input-box-group-focused: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-space-inset-input-bottom-m) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-text-deemphasized);margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-text-deemphasized);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-deemphasized);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-space-inset-input_label-top-m);padding-bottom:var(--sky-override-label-padding-bottom, var(--sky-space-inset-input_label-bottom-m));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-override-input-box-character-count-padding, var(--sky-space-inset-input_label-top-m) 0 var(--sky-space-inset-input_label-bottom-m));font-size:var(--sky-override-input-box-character-count-font-size, var(--sky-font-size-input-label))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-override-input-margin-top, var(--sky-input-box-margin-top));padding-top:var(--sky-override-input-padding-top, var(--sky-input-box-space-top))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-space-inset-input-right-m);padding-bottom:var(--sky-space-inset-input-bottom-m);padding-left:var(--sky-space-inset-input-left-m);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m))}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - var(--sky-override-input-box-select-space, var(--sky-space-inset-input-left-m)));z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-override-textarea-margin-top, var(--sky-input-box-margin-top));padding-top:0;resize:vertical;border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-space-inset-input-left-m);width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-input-box-input-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-input-base) );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-input-box-button-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-action-input-base) );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-base) )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-input-box-input-border-color: var(--sky-color-border-input-hover);--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-focus);--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-error);--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-hover) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-active) );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-focus) );--sky-input-box-button-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-input-disabled))}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-action-input-disabled));background-color:var(--sky-color-background-action-input-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-color-background-input-disabled)}\n"] }]
|
|
2506
|
+
], encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-form-group\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-input-group-inner\"\n [ngClass]=\"{\n 'sky-field-status-active': formControlHasFocus,\n 'sky-field-status-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n </div>\n</div>\n\n<div\n *skyThemeIf=\"'modern'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': isDisabled\n }\"\n>\n <div class=\"sky-input-box-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n <div\n class=\"sky-input-box-group-form-control\"\n [ngClass]=\"{\n 'sky-input-box-group-form-control-focus': formControlHasFocus,\n 'sky-input-box-group-form-control-invalid': hasErrorsComputed\n }\"\n (focusin)=\"formControlFocusIn()\"\n (focusout)=\"formControlFocusOut()\"\n >\n <div class=\"sky-form-group\">\n <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n <div class=\"sky-input-box-form-group-inner\">\n <div class=\"sky-input-box-label-wrapper\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n *ngTemplateOutlet=\"inlineHelpTemplate\"\n />\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n </div>\n <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n <ng-content select=\".sky-control-label\" />\n @if (labelText) {\n <label\n class=\"sky-control-label\"\n [attr.aria-label]=\"\n characterLimit !== undefined\n ? labelText +\n ' ' +\n ('skyux_character_count_message'\n | skyLibResources: characterCountScreenReader : characterLimit)\n : null\n \"\n [for]=\"controlId\"\n [id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <sky-help-inline\n class=\"sky-control-help\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverContent]=\"helpPopoverContent\"\n [popoverTitle]=\"helpPopoverTitle\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n @if (characterLimit !== undefined) {\n <sky-character-counter-indicator\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n }\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n @if (hostInputTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n }\n <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n @if (hostButtonsLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <ng-content\n select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n />\n @if (hostButtonsTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n @if (hostButtonsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n @if (hostIconsInsetTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n <div\n class=\"sky-input-box-icon-inset-left-wrapper\"\n (click)=\"onInsetIconClick()\"\n >\n <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n @if (hostIconsInsetLeftTemplate) {\n <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n }\n </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n <sky-form-errors\n [id]=\"errorId\"\n [errors]=\"controlDir?.errors\"\n [labelText]=\"labelText\"\n [touched]=\"controlDir?.touched\"\n [dirty]=\"controlDir?.dirty\"\n >\n <ng-content\n select=\"sky-form-error,span.sky-input-box-descendent-form-error\"\n />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n @if (hintText || hostHintText) {\n <div\n class=\"sky-input-box-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n [ngClass]=\"{\n 'sky-input-box-hint-text-hidden': hintTextHidden,\n 'sky-screen-reader-only': hintTextScreenReaderOnly\n }\"\n [id]=\"hintTextId\"\n >\n {{ hintText | skyInputBoxHintText: hostHintText }}\n </div>\n }\n</ng-template>\n", styles: [".sky-input-box:not(.sky-theme-modern *){--sky-override-button-width: 33px;--sky-override-input-box-error-margin-top: 5px;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-input-box{--sky-override-button-width: 55px;--sky-override-input-box-character-count-font-size: var( --sky-font-size-body-m );--sky-override-input-box-character-count-padding: 3px 0 0;--sky-override-input-box-color-border-base: var(--modern-color-gray-15);--sky-override-input-box-no-label-space-top: var(--modern-space-s);--sky-override-input-box-select-space: 10px;--sky-override-input-focus-elevation-shadow: var(--modern-shadow-size-1);--sky-override-input-margin-top: -23px;--sky-override-input-padding-top: 26px;--sky-override-label-padding-bottom: 1px;--sky-override-textarea-border-top: 29px;--sky-override-textarea-margin-top: -26px}.sky-theme-modern:not(.sky-theme-brand-blackbaud) sky-input-box{--sky-override-background-color-input-box: var(--modern-color-white)}sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-input-box{--sky-input-box-button-width: var( --sky-override-button-width, var(--sky-input-box-height) )}.sky-theme-modern sky-input-box{--sky-background-color-input-box-group: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) );--sky-background-color-input-box-group-focused: var( --sky-override-background-color-input-box, var(--sky-color-background-input-base) )}sky-input-box{display:block}sky-input-box .sky-error-indicator{margin-top:var(--sky-override-input-box-error-margin-top, var(--sky-space-gap-stacked_supplemental-s))}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-form-group select.sky-form-control{border-radius:var(--sky-override-input-box-select-border-radius, var(--sky-border-radius-s))}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-group-btn .sky-btn{padding:4.5px 12px}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:var(--sky-input-box-button-width);display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-override-input-box-hint-margin-top, var(--sky-space-gap-stacked_supplemental-s));text-align:left}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box{--sky-input-box-space-top: calc( calc( var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) ) + var(--sky-space-inset-input_label-top-m) + var(--sky-space-inset-input_label-bottom-m) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-space-inset-input-bottom-m) + calc( var(--sky-font-size-input-val) * var(--sky-font-line_height-input-val) ) + var(--sky-input-box-space-top) )}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:var(--sky-color-text-deemphasized);margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:var(--sky-input-box-button-width)}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:var(--sky-border-radius-s);border-bottom-left-radius:var(--sky-border-radius-s);margin-right:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s)}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:var(--sky-color-text-deemphasized);font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active)+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-focus) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:active+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-active) * -1)}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:calc(var(--sky-border-width-input-base) * -1)}.sky-theme-modern .sky-input-box .sky-form-group{color:var(--sky-color-text-deemphasized);flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{padding:0 var(--sky-space-inset-input-right-m) 0 var(--sky-space-inset-input-left-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding-top:var(--sky-space-inset-input_label-top-m);padding-bottom:var(--sky-override-label-padding-bottom, var(--sky-space-inset-input_label-bottom-m));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-character-counter-indicator){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:var(--sky-font-size-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label);display:inline-block}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px var(--sky-space-gap-text_action-xs)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:var(--sky-space-inset-input-right-m)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-override-input-box-character-count-padding, var(--sky-space-inset-input_label-top-m) 0 var(--sky-space-inset-input_label-bottom-m));font-size:var(--sky-override-input-box-character-count-font-size, var(--sky-font-size-input-label))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-override-input-margin-top, var(--sky-input-box-margin-top));padding-top:var(--sky-override-input-padding-top, var(--sky-input-box-space-top))}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:var(--sky-border-radius-s);font-size:var(--sky-font-size-input-val);height:auto;line-height:var(--sky-font-line_height-input-val);padding-right:var(--sky-space-inset-input-right-m);padding-bottom:var(--sky-space-inset-input-bottom-m);padding-left:var(--sky-space-inset-input-left-m);position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:var(--sky-font-size-input-val)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(var(--sky-input-box-input-border-width) round var(--sky-border-radius-s))!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn{background-color:transparent;border-top-right-radius:var(--sky-border-radius-s);border-bottom-right-radius:var(--sky-border-radius-s);transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-group-btn.sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m))}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:var(--sky-override-input-box-no-label-space-top, var(--sky-space-inset-input-top-m)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - var(--sky-override-input-box-select-space, var(--sky-space-inset-input-left-m)));z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-override-textarea-margin-top, var(--sky-input-box-margin-top));padding-top:0;resize:vertical;border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:var(--sky-override-textarea-border-top, var(--sky-input-box-space-top)) solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 var(--sky-space-inset-input-left-m);width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-input-box-input-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-input-base) );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-input-box-button-border-color: var( --sky-override-input-box-color-border-base, var(--sky-color-border-action-input-base) );--sky-input-box-button-border-width: var(--sky-border-width-action-base);--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-base) )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control .sky-form-group{border:none;box-shadow:var(--sky-input-box-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:var(--sky-input-box-button-box-shadow-with-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color));background-color:var(--sky-input-box-button-background-color)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{--sky-input-box-input-border-color: var(--sky-color-border-input-hover);--sky-input-box-input-border-width: var(--sky-border-width-input-hover);z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active{--sky-input-box-input-border-color: var( --sky-color-border-input-active );--sky-input-box-input-border-width: var( --sky-border-width-input-active )}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-focus);--sky-input-box-input-border-width: var(--sky-border-width-input-focus);--sky-input-box-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-input-border-width) var(--sky-input-box-input-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-action)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid{--sky-input-box-input-border-color: var(--sky-color-border-input-error);--sky-input-box-input-border-width: var(--sky-border-width-input-error)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{color:var(--sky-color-text-danger)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{--sky-input-box-button-border-color: var( --sky-color-border-action-input-hover );--sky-input-box-button-border-width: var( --sky-border-width-action-hover );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-hover) );z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active{--sky-input-box-button-border-color: var( --sky-color-border-action-input-active );--sky-input-box-button-border-width: var( --sky-border-width-action-active );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-active) );color:var(--sky-color-text-default);z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){--sky-input-box-button-border-color: var( --sky-color-border-action-input-focus );--sky-input-box-button-border-width: var( --sky-border-width-action-focus );--sky-input-box-button-background-color: var( --sky-override-background-color-input-box, var(--sky-color-background-action-input-focus) );--sky-input-box-button-box-shadow-with-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var( --sky-override-input-focus-elevation-shadow, var(--sky-elevation-focus) );color:var(--sky-color-text-default);outline:none;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-input-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-input-disabled))}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-override-input-box-color-border-base, var(--sky-color-border-action-input-disabled));background-color:var(--sky-color-background-action-input-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:var(--sky-color-background-input-disabled)}\n"] }]
|
|
2352
2507
|
}], propDecorators: { hasErrors: [{
|
|
2353
2508
|
type: Input
|
|
2354
2509
|
}], disabled: [{
|
|
@@ -2387,8 +2542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2387
2542
|
}] } });
|
|
2388
2543
|
|
|
2389
2544
|
class SkyInputBoxModule {
|
|
2390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2391
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
2545
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2546
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
|
|
2392
2547
|
SkyCharacterCounterModule,
|
|
2393
2548
|
SkyFormErrorsModule,
|
|
2394
2549
|
SkyFormErrorModule,
|
|
@@ -2400,7 +2555,7 @@ class SkyInputBoxModule {
|
|
|
2400
2555
|
SkyInputBoxComponent,
|
|
2401
2556
|
SkyInputBoxControlDirective,
|
|
2402
2557
|
SkyFormErrorModule] }); }
|
|
2403
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
2558
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
|
|
2404
2559
|
SkyCharacterCounterModule,
|
|
2405
2560
|
SkyFormErrorsModule,
|
|
2406
2561
|
SkyFormErrorModule,
|
|
@@ -2408,7 +2563,7 @@ class SkyInputBoxModule {
|
|
|
2408
2563
|
SkyHelpInlineModule,
|
|
2409
2564
|
SkyThemeModule, SkyFormErrorModule] }); }
|
|
2410
2565
|
}
|
|
2411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyInputBoxModule, decorators: [{
|
|
2412
2567
|
type: NgModule,
|
|
2413
2568
|
args: [{
|
|
2414
2569
|
declarations: [SkyInputBoxComponent],
|
|
@@ -2445,6 +2600,37 @@ const MIN_FILE_SIZE_DEFAULT = 0;
|
|
|
2445
2600
|
* on the element that receives drop events to exempt it from the drop exclusion rule.
|
|
2446
2601
|
*/
|
|
2447
2602
|
class SkyFileDropComponent {
|
|
2603
|
+
/**
|
|
2604
|
+
* The minimum size in bytes for valid files.
|
|
2605
|
+
* @default 0
|
|
2606
|
+
*/
|
|
2607
|
+
set minFileSize(value) {
|
|
2608
|
+
this.#_minFileSize = value ?? MIN_FILE_SIZE_DEFAULT;
|
|
2609
|
+
}
|
|
2610
|
+
get minFileSize() {
|
|
2611
|
+
return this.#_minFileSize;
|
|
2612
|
+
}
|
|
2613
|
+
/**
|
|
2614
|
+
* The maximum size in bytes for valid files.
|
|
2615
|
+
* @default 500000
|
|
2616
|
+
*/
|
|
2617
|
+
set maxFileSize(value) {
|
|
2618
|
+
this.#_maxFileSize = value ?? MAX_FILE_SIZE_DEFAULT;
|
|
2619
|
+
}
|
|
2620
|
+
get maxFileSize() {
|
|
2621
|
+
return this.#_maxFileSize;
|
|
2622
|
+
}
|
|
2623
|
+
#enterEventTarget;
|
|
2624
|
+
#_maxFileSize;
|
|
2625
|
+
#_minFileSize;
|
|
2626
|
+
#notifyTouched;
|
|
2627
|
+
#notifyChange;
|
|
2628
|
+
#_uploadedFiles;
|
|
2629
|
+
#fileAttachmentService;
|
|
2630
|
+
#fileReaderSvc;
|
|
2631
|
+
#liveAnnouncerSvc;
|
|
2632
|
+
#resourcesSvc;
|
|
2633
|
+
#idSvc;
|
|
2448
2634
|
constructor() {
|
|
2449
2635
|
/**
|
|
2450
2636
|
* Fires when users add or remove files.
|
|
@@ -2491,52 +2677,77 @@ class SkyFileDropComponent {
|
|
|
2491
2677
|
this.acceptedOver = false;
|
|
2492
2678
|
this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT;
|
|
2493
2679
|
this.#_minFileSize = MIN_FILE_SIZE_DEFAULT;
|
|
2680
|
+
this.#_uploadedFiles = [];
|
|
2494
2681
|
this.#fileAttachmentService = inject(SkyFileAttachmentService);
|
|
2682
|
+
this.#fileReaderSvc = inject(SkyFileReaderService);
|
|
2495
2683
|
this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
|
|
2496
2684
|
this.#resourcesSvc = inject(SkyLibResourcesService);
|
|
2497
2685
|
this.#idSvc = inject(SkyIdService);
|
|
2498
2686
|
this.errorId = this.#idSvc.generateId();
|
|
2687
|
+
this.ngControl = inject(NgControl, { optional: true });
|
|
2499
2688
|
this.rejectedFiles = [];
|
|
2689
|
+
if (this.ngControl) {
|
|
2690
|
+
this.ngControl.valueAccessor = this;
|
|
2691
|
+
}
|
|
2500
2692
|
}
|
|
2501
|
-
/**
|
|
2502
|
-
* The minimum size in bytes for valid files.
|
|
2503
|
-
* @default 0
|
|
2504
|
-
*/
|
|
2505
|
-
set minFileSize(value) {
|
|
2506
|
-
this.#_minFileSize = value ?? MIN_FILE_SIZE_DEFAULT;
|
|
2507
|
-
}
|
|
2508
|
-
get minFileSize() {
|
|
2509
|
-
return this.#_minFileSize;
|
|
2510
|
-
}
|
|
2511
|
-
/**
|
|
2512
|
-
* The maximum size in bytes for valid files.
|
|
2513
|
-
* @default 500000
|
|
2514
|
-
*/
|
|
2515
|
-
set maxFileSize(value) {
|
|
2516
|
-
this.#_maxFileSize = value ?? MAX_FILE_SIZE_DEFAULT;
|
|
2517
|
-
}
|
|
2518
|
-
get maxFileSize() {
|
|
2519
|
-
return this.#_maxFileSize;
|
|
2520
|
-
}
|
|
2521
|
-
#enterEventTarget;
|
|
2522
|
-
#_maxFileSize;
|
|
2523
|
-
#_minFileSize;
|
|
2524
|
-
#fileAttachmentService;
|
|
2525
|
-
#liveAnnouncerSvc;
|
|
2526
|
-
#resourcesSvc;
|
|
2527
|
-
#idSvc;
|
|
2528
2693
|
ngOnDestroy() {
|
|
2529
2694
|
this.filesChanged.complete();
|
|
2530
2695
|
this.linkChanged.complete();
|
|
2531
2696
|
this.linkInputBlur.complete();
|
|
2532
2697
|
}
|
|
2698
|
+
writeValue(value) {
|
|
2699
|
+
if (Array.isArray(value)) {
|
|
2700
|
+
const linkUploads = [];
|
|
2701
|
+
const fileUploads = [];
|
|
2702
|
+
value.forEach((file) => {
|
|
2703
|
+
if ('url' in file && file.url !== undefined) {
|
|
2704
|
+
if (!('file' in file)) {
|
|
2705
|
+
linkUploads.push(file);
|
|
2706
|
+
}
|
|
2707
|
+
else if ('file' in file && file.file !== undefined) {
|
|
2708
|
+
fileUploads.push(file);
|
|
2709
|
+
}
|
|
2710
|
+
}
|
|
2711
|
+
});
|
|
2712
|
+
if (!(linkUploads.length > 0) && !(fileUploads.length > 0)) {
|
|
2713
|
+
this.#notifyChange?.(null);
|
|
2714
|
+
}
|
|
2715
|
+
else {
|
|
2716
|
+
this.#_uploadedFiles = [];
|
|
2717
|
+
if (linkUploads.length > 0) {
|
|
2718
|
+
linkUploads.forEach((file) => {
|
|
2719
|
+
this.uploadLink(file);
|
|
2720
|
+
});
|
|
2721
|
+
}
|
|
2722
|
+
if (fileUploads.length > 0) {
|
|
2723
|
+
// this prevents FormControl from setting an invalid value before the async
|
|
2724
|
+
// processes in #handleFile is complete
|
|
2725
|
+
this.#notifyChange?.(null);
|
|
2726
|
+
this.#handleFiles(fileUploads);
|
|
2727
|
+
}
|
|
2728
|
+
}
|
|
2729
|
+
}
|
|
2730
|
+
else {
|
|
2731
|
+
this.#notifyChange?.(null);
|
|
2732
|
+
}
|
|
2733
|
+
}
|
|
2734
|
+
registerOnChange(fn) {
|
|
2735
|
+
this.#notifyChange = fn;
|
|
2736
|
+
}
|
|
2737
|
+
registerOnTouched(fn) {
|
|
2738
|
+
this.#notifyTouched = fn;
|
|
2739
|
+
}
|
|
2533
2740
|
dropClicked() {
|
|
2534
2741
|
if (!this.noClick && this.inputEl) {
|
|
2742
|
+
this.#notifyTouched?.();
|
|
2535
2743
|
this.inputEl.nativeElement.click();
|
|
2536
2744
|
}
|
|
2537
2745
|
}
|
|
2538
2746
|
fileChangeEvent(fileChangeEvent) {
|
|
2539
|
-
this
|
|
2747
|
+
/** Set a timeout here to allow the browser to regain context from the system dialog. Without this, error messages do not read out correctly to screen readers. */
|
|
2748
|
+
setTimeout(() => {
|
|
2749
|
+
this.#handleFiles(fileChangeEvent.target?.files);
|
|
2750
|
+
}, 500);
|
|
2540
2751
|
}
|
|
2541
2752
|
fileDragEnter(dragEnterEvent) {
|
|
2542
2753
|
// Save this target to know when the drag event leaves
|
|
@@ -2576,6 +2787,7 @@ class SkyFileDropComponent {
|
|
|
2576
2787
|
fileDrop(dropEvent) {
|
|
2577
2788
|
dropEvent.stopPropagation();
|
|
2578
2789
|
dropEvent.preventDefault();
|
|
2790
|
+
this.#notifyTouched?.();
|
|
2579
2791
|
this.#enterEventTarget = undefined;
|
|
2580
2792
|
this.rejectedOver = false;
|
|
2581
2793
|
this.acceptedOver = false;
|
|
@@ -2601,13 +2813,24 @@ class SkyFileDropComponent {
|
|
|
2601
2813
|
}
|
|
2602
2814
|
addLink(event) {
|
|
2603
2815
|
event.preventDefault();
|
|
2604
|
-
this.
|
|
2605
|
-
this.#announceState('skyux_file_attachment_file_upload_link_added', this.linkUrl);
|
|
2816
|
+
this.uploadLink({ url: this.linkUrl });
|
|
2606
2817
|
this.linkUrl = undefined;
|
|
2818
|
+
this.#notifyTouched?.();
|
|
2819
|
+
}
|
|
2820
|
+
uploadLink(file) {
|
|
2821
|
+
this.linkChanged.emit(file);
|
|
2822
|
+
this.#_uploadedFiles?.push(file);
|
|
2823
|
+
this.#notifyChange?.(this.#_uploadedFiles);
|
|
2824
|
+
this.#announceState('skyux_file_attachment_file_upload_link_added', file.url);
|
|
2607
2825
|
}
|
|
2608
2826
|
onLinkBlur() {
|
|
2827
|
+
this.#notifyTouched?.();
|
|
2609
2828
|
this.linkInputBlur.emit();
|
|
2610
2829
|
}
|
|
2830
|
+
get isRequired() {
|
|
2831
|
+
return (this.required ||
|
|
2832
|
+
(this.ngControl?.control?.hasValidator(Validators.required) ?? false));
|
|
2833
|
+
}
|
|
2611
2834
|
#announceState(resourceString, ...args) {
|
|
2612
2835
|
this.#resourcesSvc
|
|
2613
2836
|
.getString(resourceString, ...args)
|
|
@@ -2629,48 +2852,57 @@ class SkyFileDropComponent {
|
|
|
2629
2852
|
}
|
|
2630
2853
|
#filesRejected(file, validFileArray, rejectedFileArray, totalFiles) {
|
|
2631
2854
|
rejectedFileArray.push(file);
|
|
2855
|
+
this.#notifyChange?.(this.#_uploadedFiles.length > 0 ? this.#_uploadedFiles : null);
|
|
2632
2856
|
this.#emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
|
|
2633
2857
|
}
|
|
2634
|
-
#loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
file.url = event.target.result;
|
|
2858
|
+
async #loadFile(fileDrop, file, validFileArray, rejectedFileArray, totalFiles) {
|
|
2859
|
+
try {
|
|
2860
|
+
file.url = await this.#fileReaderSvc.readAsDataURL(file.file);
|
|
2638
2861
|
validFileArray.push(file);
|
|
2639
2862
|
fileDrop.#emitFileChangeEvent(totalFiles, rejectedFileArray, validFileArray);
|
|
2640
2863
|
this.#announceState('skyux_file_attachment_file_upload_file_added', file.file.name);
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
reader.addEventListener('abort', () => {
|
|
2864
|
+
this.#_uploadedFiles?.push(file);
|
|
2865
|
+
this.#notifyChange?.(this.#_uploadedFiles);
|
|
2866
|
+
}
|
|
2867
|
+
catch {
|
|
2646
2868
|
fileDrop.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
|
|
2647
|
-
}
|
|
2648
|
-
reader.readAsDataURL(file.file);
|
|
2869
|
+
}
|
|
2649
2870
|
}
|
|
2650
|
-
#handleFiles(
|
|
2651
|
-
if (
|
|
2871
|
+
#handleFiles(fileList) {
|
|
2872
|
+
if (fileList) {
|
|
2652
2873
|
const validFileArray = [];
|
|
2653
2874
|
const rejectedFileArray = [];
|
|
2654
|
-
const totalFiles =
|
|
2875
|
+
const totalFiles = fileList.length;
|
|
2876
|
+
let files = [];
|
|
2877
|
+
if ('item' in fileList) {
|
|
2878
|
+
for (let index = 0; index < fileList.length; index++) {
|
|
2879
|
+
files.push({
|
|
2880
|
+
file: fileList.item(index),
|
|
2881
|
+
});
|
|
2882
|
+
}
|
|
2883
|
+
}
|
|
2884
|
+
else {
|
|
2885
|
+
files = fileList;
|
|
2886
|
+
}
|
|
2655
2887
|
const processedFiles = this.#fileAttachmentService.checkFiles(files, this.minFileSize, this.maxFileSize, this.acceptedTypes, this.validateFn);
|
|
2656
2888
|
for (const file of processedFiles) {
|
|
2657
2889
|
if (file.errorType) {
|
|
2658
2890
|
this.#filesRejected(file, validFileArray, rejectedFileArray, totalFiles);
|
|
2659
2891
|
}
|
|
2660
2892
|
else {
|
|
2661
|
-
this.#loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
|
|
2893
|
+
void this.#loadFile(this, file, validFileArray, rejectedFileArray, totalFiles);
|
|
2662
2894
|
}
|
|
2663
2895
|
}
|
|
2664
2896
|
this.rejectedFiles = rejectedFileArray;
|
|
2665
2897
|
}
|
|
2666
2898
|
}
|
|
2667
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2668
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
2899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", linkUploadHintText: "linkUploadHintText", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", noClick: "noClick", allowLinks: "allowLinks", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
|
|
2669
2901
|
SkyFileAttachmentService,
|
|
2670
2902
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2671
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset class=\"sky-file-drop-wrapper\">\n @if (labelText) {\n <legend\n class=\"sky-control-label sky-font-body-default\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-file-drop-label-text\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n >\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n ></button>\n\n <input\n #fileInput\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n />\n\n @if (customEl.children.length === 0) {\n <div class=\"sky-file-drop-contents sky-file-drop-upload-contents\">\n <div class=\"sky-file-drop-contents-not-over\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_invalid_file'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n }\n\n <div #customEl class=\"sky-file-drop-contents-custom\">\n <ng-content />\n </div>\n </div>\n @if (allowLinks) {\n <div class=\"sky-file-drop-col\">\n <div class=\"sky-file-drop-contents\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_label'\n | skyLibResources\n }}\n </div>\n </div>\n <sky-input-box [hintText]=\"linkUploadHintText\">\n <input\n type=\"text\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </sky-input-box>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-file-drop-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"rejectedFiles.length > 0\"\n>\n @for (rejectedFile of rejectedFiles; track rejectedFile) {\n <div>\n @if (rejectedFile.errorType === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : rejectedFile.errorParam\n \"\n />\n } @else if (rejectedFile.errorType === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (rejectedFile.errorType === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (\n rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n ) {\n <sky-form-error\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n }\n </div>\n }\n</sky-form-errors>\n", styles: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-icon-font-size: 40px;--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-box-shadow: none;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-box-shadow: var( --modern-shadow-size-0 );--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-space-inset-balanced-s));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus));box-shadow:var(--sky-override-file-drop-upload-contents-focus-box-shadow, var(--sky-elevation-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:var(--sky-override-file-drop-icon-font-size, var(--sky-size-icon-xl));max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: SkyInputBoxControlDirective, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
2903
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset class=\"sky-file-drop-wrapper\">\n @if (labelText) {\n <legend\n class=\"sky-control-label sky-font-body-default\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-file-drop-label-text\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n @if (isRequired) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n ></button>\n\n <input\n #fileInput\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n />\n\n @if (customEl.children.length === 0) {\n <div class=\"sky-file-drop-contents sky-file-drop-upload-contents\">\n <div class=\"sky-file-drop-contents-not-over\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"arrow-upload\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"target\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_invalid_file'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"dismiss\"\n iconSize=\"xl\"\n />\n </div>\n </div>\n }\n\n <div #customEl class=\"sky-file-drop-contents-custom\">\n <ng-content />\n </div>\n </div>\n @if (allowLinks) {\n <div class=\"sky-file-drop-col\">\n <div class=\"sky-file-drop-contents\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_label'\n | skyLibResources\n }}\n </div>\n </div>\n <sky-input-box [hintText]=\"linkUploadHintText\">\n <input\n type=\"text\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </sky-input-box>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-file-drop-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n [dirty]=\"ngControl?.dirty\"\n [errors]=\"ngControl?.errors\"\n>\n <ng-content select=\"sky-form-error\" />\n @for (rejectedFile of rejectedFiles; track rejectedFile) {\n <div>\n @if (rejectedFile.errorType === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : rejectedFile.errorParam\n \"\n />\n } @else if (rejectedFile.errorType === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (rejectedFile.errorType === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (\n rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n ) {\n <sky-form-error\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n }\n </div>\n }\n</sky-form-errors>\n", styles: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-box-shadow: none;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-box-shadow: var( --modern-shadow-size-0 );--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-space-inset-balanced-s));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus));box-shadow:var(--sky-override-file-drop-upload-contents-focus-box-shadow, var(--sky-elevation-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: SkyInputBoxControlDirective, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
|
|
2672
2904
|
}
|
|
2673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
2905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileDropComponent, decorators: [{
|
|
2674
2906
|
type: Component,
|
|
2675
2907
|
args: [{ selector: 'sky-file-drop', providers: [
|
|
2676
2908
|
SkyFileAttachmentService,
|
|
@@ -2687,8 +2919,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2687
2919
|
SkyIdModule,
|
|
2688
2920
|
SkyInputBoxModule,
|
|
2689
2921
|
SkyThemeModule,
|
|
2690
|
-
], template: "<fieldset class=\"sky-file-drop-wrapper\">\n @if (labelText) {\n <legend\n class=\"sky-control-label sky-font-body-default\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-file-drop-label-text\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n >\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n ></button>\n\n <input\n #fileInput\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n />\n\n @if (customEl.children.length === 0) {\n <div class=\"sky-file-drop-contents sky-file-drop-upload-contents\">\n <div class=\"sky-file-drop-contents-not-over\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_invalid_file'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n }\n\n <div #customEl class=\"sky-file-drop-contents-custom\">\n <ng-content />\n </div>\n </div>\n @if (allowLinks) {\n <div class=\"sky-file-drop-col\">\n <div class=\"sky-file-drop-contents\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_label'\n | skyLibResources\n }}\n </div>\n </div>\n <sky-input-box [hintText]=\"linkUploadHintText\">\n <input\n type=\"text\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </sky-input-box>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-file-drop-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"rejectedFiles.length > 0\"\n>\n @for (rejectedFile of rejectedFiles; track rejectedFile) {\n <div>\n @if (rejectedFile.errorType === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : rejectedFile.errorParam\n \"\n />\n } @else if (rejectedFile.errorType === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (rejectedFile.errorType === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (\n rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n ) {\n <sky-form-error\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n }\n </div>\n }\n</sky-form-errors>\n", styles: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-icon-font-size: 40px;--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-box-shadow: none;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-box-shadow: var( --modern-shadow-size-0 );--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-space-inset-balanced-s));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus));box-shadow:var(--sky-override-file-drop-upload-contents-focus-box-shadow, var(--sky-elevation-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:var(--sky-override-file-drop-icon-font-size, var(--sky-size-icon-xl));max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"] }]
|
|
2691
|
-
}], propDecorators: { filesChanged: [{
|
|
2922
|
+
], template: "<fieldset class=\"sky-file-drop-wrapper\">\n @if (labelText) {\n <legend\n class=\"sky-control-label sky-font-body-default\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-file-drop-label-text\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n >\n @if (isRequired) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div\n class=\"sky-file-drop-row\"\n [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n >\n <div\n class=\"sky-file-drop-col\"\n [ngClass]=\"{\n 'sky-file-drop-accept': acceptedOver,\n 'sky-file-drop-reject': rejectedOver\n }\"\n >\n <button\n class=\"sky-file-drop sky-file-drop-target\"\n type=\"button\"\n [attr.aria-label]=\"\n fileUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n \"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n ></button>\n\n <input\n #fileInput\n tabindex=\"-1\"\n aria-hidden=\"true\"\n type=\"file\"\n class=\"sky-file-input-hidden\"\n [attr.multiple]=\"multiple ? multiple : null\"\n [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n (change)=\"fileChangeEvent($event)\"\n />\n\n @if (customEl.children.length === 0) {\n <div class=\"sky-file-drop-contents sky-file-drop-upload-contents\">\n <div class=\"sky-file-drop-contents-not-over\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"arrow-upload\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"target\"\n iconSize=\"xl\"\n />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_invalid_file'\n | skyLibResources\n }}\n </div>\n <sky-icon\n class=\"sky-file-upload-icon\"\n iconName=\"dismiss\"\n iconSize=\"xl\"\n />\n </div>\n </div>\n }\n\n <div #customEl class=\"sky-file-drop-contents-custom\">\n <ng-content />\n </div>\n </div>\n @if (allowLinks) {\n <div class=\"sky-file-drop-col\">\n <div class=\"sky-file-drop-contents\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div\n class=\"sky-file-drop-text-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'default'\n }\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_label'\n | skyLibResources\n }}\n </div>\n </div>\n <sky-input-box [hintText]=\"linkUploadHintText\">\n <input\n type=\"text\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-invalid]=\"!!rejectedFiles.length\"\n [attr.aria-errormessage]=\"\n labelText && rejectedFiles.length ? errorId : undefined\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </sky-input-box>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_done' | skyLibResources\n }}\n </button>\n </div>\n </div>\n </div>\n }\n </div>\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-font-deemphasized sky-file-drop-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl ? ngControl.touched : rejectedFiles.length > 0\"\n [dirty]=\"ngControl?.dirty\"\n [errors]=\"ngControl?.errors\"\n>\n <ng-content select=\"sky-form-error\" />\n @for (rejectedFile of rejectedFiles; track rejectedFile) {\n <div>\n @if (rejectedFile.errorType === 'fileType') {\n <sky-form-error\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : rejectedFile.errorParam\n \"\n />\n } @else if (rejectedFile.errorType === 'maxFileSize') {\n <sky-form-error\n errorName=\"maxFileSize\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_max_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (rejectedFile.errorType === 'minFileSize') {\n <sky-form-error\n errorName=\"minFileSize\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text_with_name'\n | skyLibResources\n : rejectedFile.file.name\n : (rejectedFile.errorParam | skyFileSize)\n \"\n />\n } @else if (\n rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n ) {\n <sky-form-error\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n }\n </div>\n }\n</sky-form-errors>\n", styles: [".sky-file-drop-wrapper:not(.sky-theme-modern *){--sky-override-file-drop-accept-border-color: #72bf44;--sky-override-file-drop-col-padding: 0 5px;--sky-override-file-drop-col-responsive-margin-bottom: 10px;--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-background-color: #eeeeef;--sky-override-file-drop-contents-border-color: #cdcfd2;--sky-override-file-drop-contents-border-radius: 0;--sky-override-file-drop-contents-border-width: 1px;--sky-override-file-drop-contents-padding: 10px;--sky-override-file-drop-drag-border-width: 1px;--sky-override-file-drop-hint-text-margin-top: var(--sky-margin-stacked-xs);--sky-override-file-drop-label-color: #212327;--sky-override-file-drop-label-font-size: 15px;--sky-override-file-drop-link-header-margin-bottom: 5px;--sky-override-file-drop-link-input-background-color: transparent;--sky-override-file-drop-link-input-margin-bottom: 10px;--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: 400;--sky-override-file-drop-text-header-font-size: 22px;--sky-override-file-drop-text-header-font-weight: 600;--sky-override-file-drop-text-header-line-height: 1.1;--sky-override-file-drop-text-line-height: 1.1;--sky-override-file-drop-text-margin-bottom: 20px;--sky-override-file-drop-text-margin-top: 5px;--sky-override-file-drop-upload-contents-active-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-border: #cdcfd2 solid 1px;--sky-override-file-drop-upload-contents-focus-box-shadow: none;--sky-override-file-drop-upload-contents-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-drop-wrapper{--sky-override-file-drop-col-padding: 0 var(--modern-space-xs);--sky-override-file-drop-col-responsive-margin-right: 0;--sky-override-file-drop-contents-border-color: var(--modern-color-gray-20);--sky-override-file-drop-contents-border-radius: var( --modern-border-radius-0 );--sky-override-file-drop-contents-padding: var(--modern-size-10);--sky-override-file-drop-icon-font-size: var(--modern-size-40);--sky-override-file-drop-label-font-size: 13px;--sky-override-file-drop-link-input-background-color: var( --modern-color-white );--sky-override-file-drop-link-input-margin-bottom: var( --sky-space-gap-form-l );--sky-override-file-drop-non-stacked-with-item-margin-bottom: 0;--sky-override-file-drop-outline-focus: auto;--sky-override-file-drop-reject-border-color: #ef4044;--sky-override-file-drop-text-header-font-size: var( --sky-font-size-display-3 );--sky-override-file-drop-text-header-font-weight: var( --sky-font-weight-display-3 );--sky-override-file-drop-text-font-size: 15px;--sky-override-file-drop-text-font-weight: var(--sky-font-weight-body-m);--sky-override-file-drop-text-header-line-height: var( --modern-line_height-110 );--sky-override-file-drop-text-line-height: var(--modern-line_height-110);--sky-override-file-drop-text-margin-bottom: var(--modern-size-20);--sky-override-file-drop-upload-contents-active-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-contents-focus-box-shadow: var( --modern-shadow-size-0 );--sky-override-file-drop-upload-contents-hover-border: var( --modern-color-gray-20 ) solid var(--modern-size-1);--sky-override-file-drop-upload-icon-margin-top: var(--modern-size-10)}:host.sky-form-field-stacked{display:block}:host-context(:has(+ sky-file-item):not(.sky-form-field-stacked)) .sky-file-drop-wrapper{margin-bottom:var(--sky-override-file-drop-non-stacked-with-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-drop-col{padding:var(--sky-override-file-drop-col-padding, 0);position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:var(--sky-override-file-drop-col-responsive-margin-bottom, var(--sky-space-gap-form-s))}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-right:var(--sky-override-file-drop-col-responsive-margin-right, var(--sky-space-gap-action_group-m));margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border:var(--sky-override-file-drop-contents-border-width, var(--sky-border-width-input-base)) solid var(--sky-override-file-drop-contents-border-color, var(--sky-color-border-input-base));background-color:var(--sky-override-file-drop-contents-background-color, var(--sky-color-background-file_drop));border-radius:var(--sky-override-file-drop-contents-border-radius, var(--sky-border-radius-s));padding:var(--sky-override-file-drop-contents-padding, var(--sky-space-inset-balanced-s));cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:var(--sky-override-file-drop-link-header-margin-bottom, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop:active~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-active-border, var(--sky-border-width-input-active) solid var(--sky-color-border-input-active))}.sky-file-drop:focus-visible:not(:active){outline:var(--sky-override-file-drop-outline-focus, none)}.sky-file-drop:focus-visible:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-focus-border, var(--sky-border-width-input-focus) solid var(--sky-color-border-input-focus));box-shadow:var(--sky-override-file-drop-upload-contents-focus-box-shadow, var(--sky-elevation-focus))}.sky-file-drop:hover:not(:active)~.sky-file-drop-contents{border:var(--sky-override-file-drop-upload-contents-hover-border, var(--sky-border-width-input-hover) solid var(--sky-color-border-input-hover))}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-override-file-drop-hint-text-margin-top, var(--sky-space-gap-stacked_supplemental-s))}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-hover))}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:var(--sky-override-file-drop-accept-border-color, var(--sky-color-border-success))}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:var(--sky-override-file-drop-reject-border-color, var(--sky-color-border-danger))}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;max-height:var(--sky-override-file-drop-icon-font-size, auto);color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-deemphasized));margin-top:var(--sky-override-file-drop-upload-icon-margin-top, var(--sky-space-gap-stacked_supplemental-l))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-background-color-input-box-group: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-background-color-input-box-group-focused: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );margin-bottom:var(--sky-override-file-drop-link-input-margin-bottom, var(--sky-space-gap-form-s))}.sky-file-drop-text-header{margin:0;font-size:var(--sky-override-file-drop-text-header-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);font-weight:var(--sky-override-file-drop-text-header-font-weight, var(--sky-font-weight-body-m));line-height:var(--sky-override-file-drop-text-header-line-height, var(--sky-font-line_height-body-m))}.sky-file-drop-text{margin-top:var(--sky-override-file-drop-text-margin-top, var(--sky-space-gap-stacked_supplemental-s));margin-bottom:var(--sky-override-file-drop-text-margin-bottom, 0);font-size:var(--sky-override-file-drop-text-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);font-weight:var(--sky-override-file-drop-text-font-weight, var(--sky-font-weight-body-s));line-height:var(--sky-override-file-drop-text-line-height, var(--sky-font-line_height-body-s))}.sky-file-drop-text,.sky-file-drop-text-header{display:block}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-control-label{color:var(--sky-override-file-drop-label-color, var(--sky-color-text-deemphasized));font-size:var(--sky-override-file-drop-label-font-size, var(--sky-font-size-input-label));font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-weight-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"] }]
|
|
2923
|
+
}], ctorParameters: () => [], propDecorators: { filesChanged: [{
|
|
2692
2924
|
type: Output
|
|
2693
2925
|
}], linkInputBlur: [{
|
|
2694
2926
|
type: Output
|
|
@@ -2816,14 +3048,14 @@ class SkyFileItemComponent {
|
|
|
2816
3048
|
break;
|
|
2817
3049
|
case '.XLS':
|
|
2818
3050
|
case '.XLSX':
|
|
2819
|
-
cls = '
|
|
3051
|
+
cls = 'xls';
|
|
2820
3052
|
break;
|
|
2821
3053
|
case '.TXT':
|
|
2822
3054
|
cls = 'text';
|
|
2823
3055
|
break;
|
|
2824
3056
|
case '.HTM':
|
|
2825
3057
|
case '.HTML':
|
|
2826
|
-
cls = '
|
|
3058
|
+
cls = 'chevron-double';
|
|
2827
3059
|
break;
|
|
2828
3060
|
default:
|
|
2829
3061
|
break;
|
|
@@ -2850,7 +3082,7 @@ class SkyFileItemComponent {
|
|
|
2850
3082
|
break;
|
|
2851
3083
|
}
|
|
2852
3084
|
}
|
|
2853
|
-
this.icon = '
|
|
3085
|
+
this.icon = 'document' + (cls ? '-' + cls : '');
|
|
2854
3086
|
}
|
|
2855
3087
|
}
|
|
2856
3088
|
else {
|
|
@@ -2876,12 +3108,12 @@ class SkyFileItemComponent {
|
|
|
2876
3108
|
});
|
|
2877
3109
|
}
|
|
2878
3110
|
}
|
|
2879
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2880
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
3111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon iconName=\"delete\" iconSize=\"m\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n @if (isImage) {\n <div class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n } @else {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xl\" [iconName]=\"icon\" />\n </div>\n }\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n </div>\n}\n", styles: [".sky-file-item:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-item{--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: var(--modern-size-1) solid #e2e3e4;--sky-override-file-item-border-radius: var(--modern-border-radius-0);--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: var(--sky-font-size-body-m);--sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m)}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-space-inset-balanced-s))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-weight-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-weight-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }] }); }
|
|
2881
3113
|
}
|
|
2882
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileItemComponent, decorators: [{
|
|
2883
3115
|
type: Component,
|
|
2884
|
-
args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon
|
|
3116
|
+
args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', template: "@if (fileItem) {\n <div class=\"sky-file-item\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n @if (isFile) {\n {{ fileName }}\n } @else {\n {{ url }}\n }\n </div>\n @if (isFile) {\n <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n }\n </div>\n <div class=\"sky-file-item-controls\">\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete'\n | skyLibResources: (isFile ? fileName : url)\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon iconName=\"delete\" iconSize=\"m\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n @if (isImage) {\n <div class=\"sky-file-item-preview-img-container\">\n <img\n class=\"sky-file-item-preview-img\"\n [src]=\"url\"\n [alt]=\"\n 'skyux_file_attachment_file_upload_image_preview_alt_text'\n | skyLibResources\n \"\n />\n </div>\n } @else {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xl\" [iconName]=\"icon\" />\n </div>\n }\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n </div>\n}\n", styles: [".sky-file-item:not(.sky-theme-modern *){--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: 1px solid #e2e3e4;--sky-override-file-item-border-radius: 0;--sky-override-file-item-controls-padding-left: 15px;--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-size: 15px;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-padding: 10px 10px 10px 10px;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-color: #686c73;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: 15px;--sky-override-file-item-size-font-weight: 400;--sky-override-file-item-title-bottom-margin: 10px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-file-item{--sky-override-file-item-background-color: #eeeeef;--sky-override-file-item-border: var(--modern-size-1) solid #e2e3e4;--sky-override-file-item-border-radius: var(--modern-border-radius-0);--sky-override-file-item-gap: 10px;--sky-override-file-item-margin-bottom: 10px;--sky-override-file-item-name-line-height: normal;--sky-override-file-item-name-font-weight: bolder;--sky-override-file-item-preview-img-box-shadow: 0 0 5px #666;--sky-override-file-item-preview-other-font-size: 100px;--sky-override-file-item-size-line-height: normal;--sky-override-file-item-size-font-size: var(--sky-font-size-body-m);--sky-override-file-item-size-font-weight: var(--sky-font-weight-body-m)}:host:not(:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-gap, var(--sky-space-gap-form-s))}:host-context(sky-file-drop.sky-form-field-stacked ~ sky-file-item:last-of-type) .sky-file-item{margin-bottom:var(--sky-override-file-item-margin-bottom, var(--sky-space-gap-form-l))}.sky-file-item{border:var(--sky-override-file-item-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));border-radius:var(--sky-override-file-item-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-file-item-background-color, var(--sky-color-background-file_drop));margin-bottom:var(--sky-override-file-item-margin-bottom, 0);padding:var(--sky-override-file-item-padding, var(--sky-space-inset-balanced-s))}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:var(--sky-override-file-item-controls-padding-left, var(--sky-space-gap-text_action-m))}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:var(--sky-override-file-item-name-font-weight, var(--sky-font-weight-body-m));font-size:var(--sky-override-file-item-name-font-size, var(--sky-font-size-body-m));font-style:var(--sky-font-style-body-m);line-height:var(--sky-override-file-item-name-line-height, var(--sky-font-line_height-body-m))}.sky-file-item-size{font-weight:var(--sky-override-file-item-size-font-weight, var(--sky-font-weight-body-s));font-size:var(--sky-override-file-item-size-font-size, var(--sky-font-size-body-s));font-style:var(--sky-font-style-body-s);line-height:var(--sky-override-file-item-size-line-height, var(--sky-font-line_height-body-s))}.sky-file-item-title{margin-bottom:var(--sky-override-file-item-title-bottom-margin, var(--sky-space-gap-stacked_supplemental-m));display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:var(--sky-override-file-item-preview-img-box-shadow, var(--sky-elevation-raised-100))}.sky-file-item-preview-other{color:var(--sky-override-file-item-preview-other-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-file-item-preview-other-font-size, var(--sky-size-illustration-l));line-height:1;text-align:center;width:100%}\n"] }]
|
|
2885
3117
|
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
|
|
2886
3118
|
type: Input
|
|
2887
3119
|
}], deleteFile: [{
|
|
@@ -2889,11 +3121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2889
3121
|
}] } });
|
|
2890
3122
|
|
|
2891
3123
|
class SkyFileDropModule {
|
|
2892
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2893
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
2894
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
3124
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3125
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent], exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
|
|
3126
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
|
|
2895
3127
|
}
|
|
2896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileDropModule, decorators: [{
|
|
2897
3129
|
type: NgModule,
|
|
2898
3130
|
args: [{
|
|
2899
3131
|
exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule],
|
|
@@ -2905,11 +3137,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2905
3137
|
* @deprecated Import either `SkyFileAttachmentModule` or `SkyFileDropModule`.
|
|
2906
3138
|
*/
|
|
2907
3139
|
class SkyFileAttachmentsModule {
|
|
2908
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2909
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
2910
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
3140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3141
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule], exports: [SkyFileAttachmentModule, SkyFileDropModule] }); }
|
|
3142
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule, SkyFileAttachmentModule, SkyFileDropModule] }); }
|
|
2911
3143
|
}
|
|
2912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
|
|
2913
3145
|
type: NgModule,
|
|
2914
3146
|
args: [{
|
|
2915
3147
|
exports: [SkyFileAttachmentModule, SkyFileDropModule],
|
|
@@ -2957,10 +3189,10 @@ class SkyRadioGroupIdService {
|
|
|
2957
3189
|
#emitRadioIds() {
|
|
2958
3190
|
this.#radioIds$.next(Array.from(this.#radioIds.values()));
|
|
2959
3191
|
}
|
|
2960
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
2961
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
3192
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioGroupIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3193
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioGroupIdService }); }
|
|
2962
3194
|
}
|
|
2963
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioGroupIdService, decorators: [{
|
|
2964
3196
|
type: Injectable
|
|
2965
3197
|
}], ctorParameters: () => [] });
|
|
2966
3198
|
|
|
@@ -3261,12 +3493,12 @@ class SkyRadioComponent {
|
|
|
3261
3493
|
#onChangeCallback;
|
|
3262
3494
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3263
3495
|
#onTouchedCallback;
|
|
3264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
3496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3497
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyRadioComponent, isStandalone: false, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", iconName: "iconName", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon || iconName,\n 'sky-rounded-corners': icon || iconName,\n 'sky-rounded-circle': !(icon || iconName),\n 'sky-switch-control-info': (icon || iconName) && radioType === 'info',\n 'sky-switch-control-success':\n (icon || iconName) && radioType === 'success',\n 'sky-switch-control-warning':\n (icon || iconName) && radioType === 'warning',\n 'sky-switch-control-danger':\n (icon || iconName) && radioType === 'danger'\n }\"\n >\n @if (iconName) {\n <sky-icon iconSize=\"m\" [fixedWidth]=\"true\" [iconName]=\"iconName\" />\n } @else if (icon) {\n <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n }\n </span>\n @if (labelText) {\n <span\n class=\"sky-switch-label sky-radio-label-text\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n >{{ labelText }}</span\n >\n } @else {\n <ng-content select=\"sky-radio-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-radio-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n", styles: [".sky-radio-outer-wrapper:not(.sky-theme-modern *){--sky-override-radio-icon-border-radius: 50%;--sky-override-radio-icon-color-disabled: #000000;--sky-override-radio-icon-color-selected: #000000;--sky-override-radio-icon-size: 10px;--sky-override-radio-label-margin-right: var(--sky-margin-inline-xs)}:host.sky-cmp-theme-default{--sky-override-radio-group-radio-bottom-margin: var(--sky-margin-stacked-sm);--sky-override-radio-hint-text-inset: var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-radio-outer-wrapper{--sky-override-radio-icon-color-selected: var(--sky-color-icon-action);--sky-override-radio-label-margin-right: var(--sky-margin-inline-xs)}:host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-override-radio-group-radio-bottom-margin, var(--sky-space-gap-form-s))}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch:not(:has(~.sky-control-help-container)) .sky-switch-label{margin-right:var(--sky-override-radio-label-margin-right, 0)}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:var(--sky-override-radio-icon-size, var(--sky-size-icon-xs));height:var(--sky-override-radio-icon-size, var(--sky-size-icon-xs));background:var(--sky-override-radio-icon-color-selected, var(--sky-color-icon-inverse));border-radius:var(--sky-override-radio-icon-border-radius, var(--sky-border-radius-round))}.sky-radio-input:disabled+.sky-switch-control:not(.sky-switch-control-icon):after{background-color:var(--sky-override-radio-icon-color-disabled, var(--sky-color-text-deemphasized))}.sky-radio-hint-text{margin:var(--sky-override-radio-hint-text-inset, var(--sky-space-gap-stacked_supplemental-s) 0 0 var(--sky-space-inset-switch))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3266
3498
|
}
|
|
3267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioComponent, decorators: [{
|
|
3268
3500
|
type: Component,
|
|
3269
|
-
args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success'
|
|
3501
|
+
args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon || iconName,\n 'sky-rounded-corners': icon || iconName,\n 'sky-rounded-circle': !(icon || iconName),\n 'sky-switch-control-info': (icon || iconName) && radioType === 'info',\n 'sky-switch-control-success':\n (icon || iconName) && radioType === 'success',\n 'sky-switch-control-warning':\n (icon || iconName) && radioType === 'warning',\n 'sky-switch-control-danger':\n (icon || iconName) && radioType === 'danger'\n }\"\n >\n @if (iconName) {\n <sky-icon iconSize=\"m\" [fixedWidth]=\"true\" [iconName]=\"iconName\" />\n } @else if (icon) {\n <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n }\n </span>\n @if (labelText) {\n <span\n class=\"sky-switch-label sky-radio-label-text\"\n [class.sky-screen-reader-only]=\"labelHidden\"\n >{{ labelText }}</span\n >\n } @else {\n <ng-content select=\"sky-radio-label\" />\n }\n </label>\n @if ((helpPopoverContent || helpKey) && labelText) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-radio-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n</div>\n", styles: [".sky-radio-outer-wrapper:not(.sky-theme-modern *){--sky-override-radio-icon-border-radius: 50%;--sky-override-radio-icon-color-disabled: #000000;--sky-override-radio-icon-color-selected: #000000;--sky-override-radio-icon-size: 10px;--sky-override-radio-label-margin-right: var(--sky-margin-inline-xs)}:host.sky-cmp-theme-default{--sky-override-radio-group-radio-bottom-margin: var(--sky-margin-stacked-sm);--sky-override-radio-hint-text-inset: var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-radio-outer-wrapper{--sky-override-radio-icon-color-selected: var(--sky-color-icon-action);--sky-override-radio-label-margin-right: var(--sky-margin-inline-xs)}:host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-override-radio-group-radio-bottom-margin, var(--sky-space-gap-form-s))}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch:not(:has(~.sky-control-help-container)) .sky-switch-label{margin-right:var(--sky-override-radio-label-margin-right, 0)}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:var(--sky-override-radio-icon-size, var(--sky-size-icon-xs));height:var(--sky-override-radio-icon-size, var(--sky-size-icon-xs));background:var(--sky-override-radio-icon-color-selected, var(--sky-color-icon-inverse));border-radius:var(--sky-override-radio-icon-border-radius, var(--sky-border-radius-round))}.sky-radio-input:disabled+.sky-switch-control:not(.sky-switch-control-icon):after{background-color:var(--sky-override-radio-icon-color-disabled, var(--sky-color-text-deemphasized))}.sky-radio-hint-text{margin:var(--sky-override-radio-hint-text-inset, var(--sky-space-gap-stacked_supplemental-s) 0 0 var(--sky-space-inset-switch))}\n"] }]
|
|
3270
3502
|
}], ctorParameters: () => [], propDecorators: { checked: [{
|
|
3271
3503
|
type: Input
|
|
3272
3504
|
}], disabled: [{
|
|
@@ -3290,6 +3522,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3290
3522
|
type: Input
|
|
3291
3523
|
}], icon: [{
|
|
3292
3524
|
type: Input
|
|
3525
|
+
}], iconName: [{
|
|
3526
|
+
type: Input
|
|
3293
3527
|
}], radioType: [{
|
|
3294
3528
|
type: Input
|
|
3295
3529
|
}], labelText: [{
|
|
@@ -3616,13 +3850,13 @@ class SkyRadioGroupComponent {
|
|
|
3616
3850
|
this.stackedLg = !this.headingLevel && this.stacked;
|
|
3617
3851
|
this.stackedXL = !!this.headingLevel && this.stacked;
|
|
3618
3852
|
}
|
|
3619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3620
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
3853
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3854
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyRadioGroupComponent, isStandalone: false, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-form-field-stacked": "this.stackedLg", "class.sky-field-group-stacked": "this.stackedXL" } }, providers: [
|
|
3621
3855
|
SkyRadioGroupIdService,
|
|
3622
3856
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
3623
3857
|
], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<fieldset\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"isRequired ? true : null\"\n [attr.required]=\"isRequired ? '' : null\"\n [attr.aria-invalid]=\"!!ngControl?.errors\"\n [attr.aria-errormessage]=\"\n headingText && ngControl?.errors ? errorId : undefined\n \"\n>\n @if (headingText) {\n <legend\n class=\"sky-radio-group-legend\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden\n }\"\n >\n <span\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n @switch (headingLevel) {\n @case (3) {\n <h3 [class]=\"headingClass\">{{ headingText }}</h3>\n }\n @case (4) {\n <h4 [class]=\"headingClass\">{{ headingText }}</h4>\n }\n @case (5) {\n <h5 [class]=\"headingClass\">{{ headingText }}</h5>\n }\n @default {\n <span [class]=\"'sky-radio-group-heading-text ' + headingClass\">{{\n headingText\n }}</span>\n }\n }\n </span>\n @if (required) {\n <span class=\"sky-screen-reader-only\">{{\n 'skyux_form_group_required' | skyLibResources\n }}</span>\n }\n @if (helpPopoverContent || helpKey) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </legend>\n }\n <div #hintTextEl=\"skyId\" skyId>\n @if (hintText) {\n <div\n class=\"sky-radio-group-hint-text\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'default',\n 'sky-font-hint-text-s': 'modern'\n }\"\n >\n {{ hintText }}\n </div>\n }\n </div>\n <div class=\"sky-radio-group-content\">\n <ng-content />\n </div>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-radio-group:not(.sky-theme-modern *){--sky-override-radio-group-content-space: 8px;--sky-override-radio-group-content-with-hint-text-space: 10px;--sky-override-radio-group-hint-text-space: 5px}.sky-radio-group:not(.sky-theme-modern *) .sky-radio-group-legend .sky-radio-group-heading-text{line-height:1.1}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-radio-group .sky-radio-group-legend .sky-radio-group-heading-text{line-height:1.1}:host.sky-field-group-stacked,:host.sky-form-field-stacked{display:block}.sky-radio-group-legend h3,.sky-radio-group-legend h4,.sky-radio-group-legend h5{margin:0;display:inline-block}.sky-radio-group:has(.sky-radio-group-legend:not(.sky-screen-reader-only)):not(:has(.sky-radio-group-hint-text)) .sky-radio-group-content{margin-top:var(--sky-override-radio-group-content-space, var(--sky-space-gap-form-s))}.sky-radio-group:has(.sky-radio-group-legend:not(.sky-screen-reader-only)) .sky-radio-group-hint-text{margin-top:var(--sky-override-radio-group-hint-text-space, var(--sky-space-gap-stacked_supplemental-s))}.sky-radio-group:has(.sky-radio-group-hint-text) .sky-radio-group-content{margin-top:var(--sky-override-radio-group-content-with-hint-text-space, var(--sky-space-gap-form-l))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
3624
3858
|
}
|
|
3625
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
|
|
3626
3860
|
type: Component,
|
|
3627
3861
|
args: [{ selector: 'sky-radio-group', providers: [
|
|
3628
3862
|
SkyRadioGroupIdService,
|
|
@@ -3700,10 +3934,10 @@ class SkyRadioLabelComponent {
|
|
|
3700
3934
|
replacementRecommendation: 'To add a label to radio button, use the `labelText` input on the radio button component instead.',
|
|
3701
3935
|
});
|
|
3702
3936
|
}
|
|
3703
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
3937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3938
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyRadioLabelComponent, isStandalone: false, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }] }); }
|
|
3705
3939
|
}
|
|
3706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
|
|
3707
3941
|
type: Component,
|
|
3708
3942
|
args: [{ selector: 'sky-radio-label', standalone: false, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n" }]
|
|
3709
3943
|
}], ctorParameters: () => [], propDecorators: { onClick: [{
|
|
@@ -3712,8 +3946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3712
3946
|
}] } });
|
|
3713
3947
|
|
|
3714
3948
|
class SkyRadioModule {
|
|
3715
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3716
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
3949
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3950
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
|
|
3717
3951
|
SkyRadioGroupComponent,
|
|
3718
3952
|
SkyRadioLabelComponent], imports: [CommonModule,
|
|
3719
3953
|
FormsModule,
|
|
@@ -3728,7 +3962,7 @@ class SkyRadioModule {
|
|
|
3728
3962
|
SkyRadioComponent,
|
|
3729
3963
|
SkyRadioGroupComponent,
|
|
3730
3964
|
SkyRadioLabelComponent] }); }
|
|
3731
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
3965
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioModule, imports: [CommonModule,
|
|
3732
3966
|
FormsModule,
|
|
3733
3967
|
SkyFormErrorModule,
|
|
3734
3968
|
SkyFormErrorsModule,
|
|
@@ -3739,7 +3973,7 @@ class SkyRadioModule {
|
|
|
3739
3973
|
SkyTrimModule,
|
|
3740
3974
|
SkyThemeModule, SkyFormErrorModule] }); }
|
|
3741
3975
|
}
|
|
3742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
3976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRadioModule, decorators: [{
|
|
3743
3977
|
type: NgModule,
|
|
3744
3978
|
args: [{
|
|
3745
3979
|
declarations: [
|
|
@@ -3786,10 +4020,10 @@ class SkyRequiredStateDirective {
|
|
|
3786
4020
|
!!this.#ngControl?.control?.hasValidator(Validators.required));
|
|
3787
4021
|
}
|
|
3788
4022
|
#ngControl;
|
|
3789
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3790
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.
|
|
4023
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRequiredStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4024
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.1", type: SkyRequiredStateDirective, isStandalone: true, inputs: { required: ["required", "required", booleanAttribute] }, ngImport: i0 }); }
|
|
3791
4025
|
}
|
|
3792
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4026
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyRequiredStateDirective, decorators: [{
|
|
3793
4027
|
type: Directive,
|
|
3794
4028
|
args: [{
|
|
3795
4029
|
standalone: true,
|
|
@@ -3916,10 +4150,10 @@ class SkySelectionBoxAdapterService {
|
|
|
3916
4150
|
const el = element.nativeElement;
|
|
3917
4151
|
el.tabIndex = tabIndex;
|
|
3918
4152
|
}
|
|
3919
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3920
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.
|
|
4153
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4154
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxAdapterService }); }
|
|
3921
4155
|
}
|
|
3922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
|
|
3923
4157
|
type: Injectable
|
|
3924
4158
|
}], ctorParameters: () => [{ type: i1$2.SkyCoreAdapterService }, { type: i0.RendererFactory2 }] });
|
|
3925
4159
|
|
|
@@ -3927,10 +4161,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3927
4161
|
* Specifies the description to display in a selection box.
|
|
3928
4162
|
*/
|
|
3929
4163
|
class SkySelectionBoxDescriptionComponent {
|
|
3930
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
3931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
4164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkySelectionBoxDescriptionComponent, isStandalone: false, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content />\n" }); }
|
|
3932
4166
|
}
|
|
3933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
|
|
3934
4168
|
type: Component,
|
|
3935
4169
|
args: [{ selector: 'sky-selection-box-description', standalone: false, template: "<ng-content />\n" }]
|
|
3936
4170
|
}] });
|
|
@@ -4038,10 +4272,10 @@ class SkySelectionBoxComponent {
|
|
|
4038
4272
|
});
|
|
4039
4273
|
}
|
|
4040
4274
|
}
|
|
4041
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
4275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4276
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkySelectionBoxComponent, isStandalone: false, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n #selectionBox\n class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n [attr.disabled]=\"disabled ? true : null\"\n [ngClass]=\"{\n 'sky-selection-box-selected': checked,\n 'sky-selection-box-disabled': disabled\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n (keydown)=\"onKeydown($event)\"\n>\n <div\n #icon\n class=\"sky-selection-box-icon\"\n [ngStyle]=\"{\n display: !icon.innerHTML.trim() ? 'none' : ''\n }\"\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div\n class=\"sky-selection-box-header\"\n [ngClass]=\"{\n 'sky-font-heading-2': icon.innerHTML.trim(),\n 'sky-font-heading-3': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div\n class=\"sky-selection-box-description\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n <ng-content select=\"sky-selection-box-description\" />\n </div>\n </div>\n\n <div #control class=\"sky-selection-box-control\">\n <ng-content select=\"sky-radio\" />\n <ng-content select=\"sky-checkbox\" />\n </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4043
4277
|
}
|
|
4044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
|
|
4045
4279
|
type: Component,
|
|
4046
4280
|
args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<label\n #selectionBox\n class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n [attr.disabled]=\"disabled ? true : null\"\n [ngClass]=\"{\n 'sky-selection-box-selected': checked,\n 'sky-selection-box-disabled': disabled\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n (keydown)=\"onKeydown($event)\"\n>\n <div\n #icon\n class=\"sky-selection-box-icon\"\n [ngStyle]=\"{\n display: !icon.innerHTML.trim() ? 'none' : ''\n }\"\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div\n class=\"sky-selection-box-header\"\n [ngClass]=\"{\n 'sky-font-heading-2': icon.innerHTML.trim(),\n 'sky-font-heading-3': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div\n class=\"sky-selection-box-description\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n <ng-content select=\"sky-selection-box-description\" />\n </div>\n </div>\n\n <div #control class=\"sky-selection-box-control\">\n <ng-content select=\"sky-radio\" />\n <ng-content select=\"sky-checkbox\" />\n </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"] }]
|
|
4047
4281
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }], propDecorators: { control: [{
|
|
@@ -4166,10 +4400,10 @@ class SkySelectionBoxGridComponent {
|
|
|
4166
4400
|
this.#coreAdapterService.syncMaxHeight(this.containerElementRef, SKY_SELECTION_BOX_CLASS_NAME);
|
|
4167
4401
|
}
|
|
4168
4402
|
}
|
|
4169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
4403
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i1$2.SkyMutationObserverService }, { token: i0.NgZone }, { token: i1$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4404
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, 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: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto -15px}.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 7.5px 15px;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:15px}.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-size:20px;font-weight:400}.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:15px}.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-size:20px;font-weight:400}.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-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4171
4405
|
}
|
|
4172
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
4173
4407
|
type: Component,
|
|
4174
4408
|
args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto -15px}.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 7.5px 15px;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:15px}.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-size:20px;font-weight:400}.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:15px}.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-size:20px;font-weight:400}.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-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"] }]
|
|
4175
4409
|
}], ctorParameters: () => [{ type: i1$2.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i1$2.SkyMutationObserverService }, { type: i0.NgZone }, { type: i1$1.SkyThemeService, decorators: [{
|
|
@@ -4196,26 +4430,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
4196
4430
|
* Specifies the header to display in a selection box.
|
|
4197
4431
|
*/
|
|
4198
4432
|
class SkySelectionBoxHeaderComponent {
|
|
4199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
4433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkySelectionBoxHeaderComponent, isStandalone: false, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content />\n" }); }
|
|
4201
4435
|
}
|
|
4202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
|
|
4203
4437
|
type: Component,
|
|
4204
4438
|
args: [{ selector: 'sky-selection-box-header', standalone: false, template: "<ng-content />\n" }]
|
|
4205
4439
|
}] });
|
|
4206
4440
|
|
|
4207
4441
|
class SkySelectionBoxModule {
|
|
4208
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4209
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
4442
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4443
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
|
|
4210
4444
|
SkySelectionBoxComponent,
|
|
4211
4445
|
SkySelectionBoxDescriptionComponent,
|
|
4212
4446
|
SkySelectionBoxHeaderComponent], imports: [CommonModule, SkyThemeModule], exports: [SkySelectionBoxGridComponent,
|
|
4213
4447
|
SkySelectionBoxComponent,
|
|
4214
4448
|
SkySelectionBoxDescriptionComponent,
|
|
4215
4449
|
SkySelectionBoxHeaderComponent] }); }
|
|
4216
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
4450
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [CommonModule, SkyThemeModule] }); }
|
|
4217
4451
|
}
|
|
4218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
|
|
4219
4453
|
type: NgModule,
|
|
4220
4454
|
args: [{
|
|
4221
4455
|
declarations: [
|
|
@@ -4248,10 +4482,10 @@ class SkyToggleSwitchLabelComponent {
|
|
|
4248
4482
|
replacementRecommendation: 'To add a label to toggle switch, use the `labelText` input on the toggle switch component instead.',
|
|
4249
4483
|
});
|
|
4250
4484
|
}
|
|
4251
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4252
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.
|
|
4485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4486
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: SkyToggleSwitchLabelComponent, isStandalone: false, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4253
4487
|
}
|
|
4254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
|
|
4255
4489
|
type: Component,
|
|
4256
4490
|
args: [{ selector: 'sky-toggle-switch-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span skyTrim><ng-content /></span>\n" }]
|
|
4257
4491
|
}], ctorParameters: () => [] });
|
|
@@ -4410,13 +4644,13 @@ class SkyToggleSwitchComponent {
|
|
|
4410
4644
|
#toggleChecked() {
|
|
4411
4645
|
this.checked = !this.checked;
|
|
4412
4646
|
}
|
|
4413
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4414
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.
|
|
4647
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4648
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyToggleSwitchComponent, isStandalone: false, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", tabIndex: "tabIndex", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], helpKey: "helpKey" }, outputs: { toggleChange: "toggleChange" }, providers: [
|
|
4415
4649
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
4416
4650
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
4417
4651
|
], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\n #toggle=\"skyId\"\n class=\"sky-toggle-switch-button\"\n role=\"switch\"\n type=\"button\"\n skyId\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"labelText || ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n >\n <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n <i\n class=\"sky-toggle-switch-indicator\"\n [ngClass]=\"{\n 'sky-toggle-switch-transition': enableIndicatorAnimation\n }\"\n > </i\n >\n </div>\n </button>\n <span>\n @if (hasLabelComponent || labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <ng-container>{{ labelText }}</ng-container>\n }\n } @else {\n <ng-content select=\"sky-toggle-switch-label\" />\n }\n </label>\n }\n <span class=\"sky-control-help-container\">\n @if (labelText && (helpPopoverContent || helpKey)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #cdcfd2;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width: 1px;--sky-override-toggle-switch-border-width-active: 1px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-box-shadow-focus: none;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 1px;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-toggle-switch{--sky-override-toggle-switch-background-color: var(--modern-color-white);--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .5);--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-width: var(--modern-size-48)}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-input-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-input-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:var(--sky-override-toggle-switch-box-shadow-focus, var(--sky-elevation-focus))}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-input-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-input-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-heavy))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-selected));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-input-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-input-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4418
4652
|
}
|
|
4419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4653
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
|
|
4420
4654
|
type: Component,
|
|
4421
4655
|
args: [{ selector: 'sky-toggle-switch', providers: [
|
|
4422
4656
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
@@ -4449,19 +4683,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
4449
4683
|
}] } });
|
|
4450
4684
|
|
|
4451
4685
|
class SkyToggleSwitchModule {
|
|
4452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.
|
|
4453
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.
|
|
4686
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4687
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [CommonModule,
|
|
4454
4688
|
FormsModule,
|
|
4455
4689
|
SkyHelpInlineModule,
|
|
4456
4690
|
SkyIdModule,
|
|
4457
4691
|
SkyTrimModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] }); }
|
|
4458
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.
|
|
4692
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchModule, imports: [CommonModule,
|
|
4459
4693
|
FormsModule,
|
|
4460
4694
|
SkyHelpInlineModule,
|
|
4461
4695
|
SkyIdModule,
|
|
4462
4696
|
SkyTrimModule] }); }
|
|
4463
4697
|
}
|
|
4464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.
|
|
4698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
|
|
4465
4699
|
type: NgModule,
|
|
4466
4700
|
args: [{
|
|
4467
4701
|
declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
|