@skyux/forms 15.0.0-alpha.1 → 15.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-forms-testing.mjs +115 -31
- package/fesm2022/skyux-forms-testing.mjs.map +1 -1
- package/fesm2022/skyux-forms.mjs +256 -276
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/package.json +13 -19
- package/types/skyux-forms-testing.d.ts +26 -0
- package/types/skyux-forms.d.ts +41 -52
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, formatNumber } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Pipe, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ElementRef, ViewChild, Output, Injectable, DOCUMENT,
|
|
4
|
+
import { NgModule, Pipe, inject, ChangeDetectorRef, Input, ChangeDetectionStrategy, Component, Directive, InjectionToken, HostBinding, booleanAttribute, numberAttribute, EventEmitter, ElementRef, ViewChild, Output, Injectable, DOCUMENT, input, computed, linkedSignal, RendererFactory2, Renderer2, ContentChild, ViewEncapsulation, KeyValueDiffers, forwardRef, ContentChildren, HostListener, NgZone } from '@angular/core';
|
|
5
5
|
import * as i2$1 from '@angular/forms';
|
|
6
6
|
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, NgControl, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
|
|
7
7
|
import * as i6 from '@skyux/i18n';
|
|
8
8
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
9
9
|
import * as i5 from '@skyux/core';
|
|
10
10
|
import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyFileReaderService, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyCoreAdapterService, SkyMediaBreakpoints, SkyMutationObserverService } from '@skyux/core';
|
|
11
|
-
import * as
|
|
11
|
+
import * as i3 from '@skyux/help-inline';
|
|
12
12
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
13
|
-
import * as i4
|
|
13
|
+
import * as i4 from '@skyux/icon';
|
|
14
14
|
import { SkyIconModule } from '@skyux/icon';
|
|
15
15
|
import * as i1$1 from '@skyux/theme';
|
|
16
16
|
import { SkyThemeComponentClassDirective, SkyThemeModule, SkyThemeService } from '@skyux/theme';
|
|
@@ -148,7 +148,7 @@ const RESOURCES = {
|
|
|
148
148
|
message: 'Vous avez dépassé la limite de caractères.',
|
|
149
149
|
},
|
|
150
150
|
skyux_form_error_character_count: {
|
|
151
|
-
message: '
|
|
151
|
+
message: 'Limitez {0} à {1} caractères.',
|
|
152
152
|
},
|
|
153
153
|
skyux_form_error_date: {
|
|
154
154
|
message: 'Sélectionnez ou entrez une date valide.',
|
|
@@ -160,7 +160,7 @@ const RESOURCES = {
|
|
|
160
160
|
message: 'Sélectionnez ou entrez une date le ou après le {0}.',
|
|
161
161
|
},
|
|
162
162
|
skyux_form_error_fuzzy_date_future_disabled: {
|
|
163
|
-
message: 'Les dates futures sont désactivées. Sélectionnez ou
|
|
163
|
+
message: 'Les dates futures sont désactivées. Sélectionnez ou saisissez une date antérieure.',
|
|
164
164
|
},
|
|
165
165
|
skyux_form_error_fuzzy_date_invalid: {
|
|
166
166
|
message: 'Sélectionnez ou entrez une date valide.',
|
|
@@ -177,12 +177,12 @@ const RESOURCES = {
|
|
|
177
177
|
skyux_form_error_email: {
|
|
178
178
|
message: 'Entrez une adresse courriel avec un format valide.',
|
|
179
179
|
},
|
|
180
|
-
skyux_form_error_maxlength: { message: '
|
|
180
|
+
skyux_form_error_maxlength: { message: 'Limitez {0} à {1} caractères.' },
|
|
181
181
|
skyux_form_error_minlength: {
|
|
182
182
|
message: '{0} doit avoir au moins {1} caractère(s).',
|
|
183
183
|
},
|
|
184
184
|
skyux_form_error_phone: {
|
|
185
|
-
message: '
|
|
185
|
+
message: 'Saisissez un numéro de téléphone valide pour le pays sélectionné.',
|
|
186
186
|
},
|
|
187
187
|
skyux_form_error_required: { message: '{0} est requis.' },
|
|
188
188
|
skyux_form_error_time: {
|
|
@@ -280,17 +280,21 @@ SkyLibResourcesService.addResources(RESOURCES);
|
|
|
280
280
|
* Import into any component library module that needs to use resource strings.
|
|
281
281
|
*/
|
|
282
282
|
class SkyFormsResourcesModule {
|
|
283
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
284
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
285
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
283
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
284
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] }); }
|
|
285
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormsResourcesModule, imports: [SkyI18nModule] }); }
|
|
286
286
|
}
|
|
287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
|
|
288
288
|
type: NgModule,
|
|
289
289
|
args: [{
|
|
290
290
|
exports: [SkyI18nModule],
|
|
291
291
|
}]
|
|
292
292
|
}] });
|
|
293
293
|
|
|
294
|
+
/**
|
|
295
|
+
* @deprecated Use [input box](https://developer.blackbaud.com/skyux/components/input-box)
|
|
296
|
+
* with its `characterLimit` input instead.
|
|
297
|
+
*/
|
|
294
298
|
class SkyCharacterCounterScreenReaderPipe {
|
|
295
299
|
#previousAnnouncementPoint;
|
|
296
300
|
transform(characterCount, characterCountLimit) {
|
|
@@ -324,16 +328,20 @@ class SkyCharacterCounterScreenReaderPipe {
|
|
|
324
328
|
}
|
|
325
329
|
return this.#previousAnnouncementPoint.toLocaleString();
|
|
326
330
|
}
|
|
327
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
328
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
332
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, isStandalone: true, name: "skyCharacterCounterScreenReader" }); }
|
|
329
333
|
}
|
|
330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, decorators: [{
|
|
331
335
|
type: Pipe,
|
|
332
336
|
args: [{
|
|
333
337
|
name: 'skyCharacterCounterScreenReader',
|
|
334
338
|
}]
|
|
335
339
|
}] });
|
|
336
340
|
|
|
341
|
+
/**
|
|
342
|
+
* @deprecated Use [input box](https://developer.blackbaud.com/skyux/components/input-box)
|
|
343
|
+
* with its `characterLimit` input instead.
|
|
344
|
+
*/
|
|
337
345
|
class SkyCharacterCounterIndicatorComponent {
|
|
338
346
|
#_characterCountLimit = 0;
|
|
339
347
|
#_characterCount = 0;
|
|
@@ -352,10 +360,10 @@ class SkyCharacterCounterIndicatorComponent {
|
|
|
352
360
|
this.#_characterCountLimit = limit;
|
|
353
361
|
this.#changeDetector.markForCheck();
|
|
354
362
|
}
|
|
355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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{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:1px;height:1px;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);outline:none;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyCharacterCounterScreenReaderPipe, name: "skyCharacterCounterScreenReader" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
357
365
|
}
|
|
358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
|
|
359
367
|
type: Component,
|
|
360
368
|
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{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:1px;height:1px;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);outline:none;white-space:nowrap}\n"] }]
|
|
361
369
|
}], propDecorators: { characterCount: [{
|
|
@@ -369,6 +377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
369
377
|
* an `input` or `textarea` element. If users enter more characters than allowed, then the
|
|
370
378
|
* input field is invalid and the component displays an error indicator.
|
|
371
379
|
* @required
|
|
380
|
+
* @deprecated Use [input box](https://developer.blackbaud.com/skyux/components/input-box)
|
|
381
|
+
* with its `characterLimit` input instead.
|
|
372
382
|
*/
|
|
373
383
|
class SkyCharacterCounterInputDirective {
|
|
374
384
|
/**
|
|
@@ -430,8 +440,8 @@ class SkyCharacterCounterInputDirective {
|
|
|
430
440
|
}
|
|
431
441
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
432
442
|
#validatorChange = () => { };
|
|
433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
434
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
443
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
444
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: SkyCharacterCounterInputDirective, isStandalone: false, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
|
|
435
445
|
{
|
|
436
446
|
provide: NG_VALIDATORS,
|
|
437
447
|
useExisting: SkyCharacterCounterInputDirective,
|
|
@@ -439,7 +449,7 @@ class SkyCharacterCounterInputDirective {
|
|
|
439
449
|
},
|
|
440
450
|
], ngImport: i0 }); }
|
|
441
451
|
}
|
|
442
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
452
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
|
|
443
453
|
type: Directive,
|
|
444
454
|
args: [{
|
|
445
455
|
selector: '[skyCharacterCounter]',
|
|
@@ -458,21 +468,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
458
468
|
type: Input
|
|
459
469
|
}] } });
|
|
460
470
|
|
|
471
|
+
/**
|
|
472
|
+
* @deprecated Use [input box](https://developer.blackbaud.com/skyux/components/input-box)
|
|
473
|
+
* with its `characterLimit` input instead.
|
|
474
|
+
*/
|
|
461
475
|
class SkyCharacterCounterModule {
|
|
462
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
463
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
477
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
|
|
464
478
|
SkyCharacterCounterIndicatorComponent], imports: [CommonModule,
|
|
465
479
|
FormsModule,
|
|
466
480
|
ReactiveFormsModule,
|
|
467
481
|
SkyCharacterCounterScreenReaderPipe,
|
|
468
482
|
SkyFormsResourcesModule], exports: [SkyCharacterCounterInputDirective,
|
|
469
483
|
SkyCharacterCounterIndicatorComponent] }); }
|
|
470
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
484
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterModule, imports: [CommonModule,
|
|
471
485
|
FormsModule,
|
|
472
486
|
ReactiveFormsModule,
|
|
473
487
|
SkyFormsResourcesModule] }); }
|
|
474
488
|
}
|
|
475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
|
|
476
490
|
type: NgModule,
|
|
477
491
|
args: [{
|
|
478
492
|
declarations: [
|
|
@@ -516,8 +530,8 @@ class SkyFormErrorComponent {
|
|
|
516
530
|
throw new Error('The `sky-form-error` component is not supported in the provided context.');
|
|
517
531
|
}
|
|
518
532
|
}
|
|
519
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyFormErrorComponent, isStandalone: true, selector: "sky-form-error", inputs: { errorName: "errorName", errorText: "errorText" }, host: { properties: { "attr.data-error-name": "this.dataErrorName" } }, hostDirectives: [{ directive: i1$1.SkyThemeComponentClassDirective }], ngImport: i0, template: `
|
|
521
535
|
@if (formErrors) {
|
|
522
536
|
<sky-status-indicator
|
|
523
537
|
class="sky-form-error"
|
|
@@ -529,7 +543,7 @@ class SkyFormErrorComponent {
|
|
|
529
543
|
}
|
|
530
544
|
`, 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.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
531
545
|
}
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
546
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
|
|
533
547
|
type: Component,
|
|
534
548
|
args: [{ selector: 'sky-form-error', imports: [SkyStatusIndicatorModule], template: `
|
|
535
549
|
@if (formErrors) {
|
|
@@ -554,11 +568,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
554
568
|
}] } });
|
|
555
569
|
|
|
556
570
|
class SkyFormErrorModule {
|
|
557
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
558
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
559
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
571
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
572
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent], exports: [SkyFormErrorComponent] }); }
|
|
573
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent] }); }
|
|
560
574
|
}
|
|
561
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorModule, decorators: [{
|
|
562
576
|
type: NgModule,
|
|
563
577
|
args: [{
|
|
564
578
|
imports: [SkyFormErrorComponent],
|
|
@@ -583,10 +597,10 @@ class SkyFormErrorsComponent {
|
|
|
583
597
|
this.ariaLive = 'assertive';
|
|
584
598
|
this.ariaRelevant = 'all';
|
|
585
599
|
}
|
|
586
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
600
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
601
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
588
602
|
}
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
603
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
|
|
590
604
|
type: Component,
|
|
591
605
|
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"] }]
|
|
592
606
|
}], propDecorators: { errors: [{
|
|
@@ -614,11 +628,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
614
628
|
* @internal
|
|
615
629
|
*/
|
|
616
630
|
class SkyFormErrorsModule {
|
|
617
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
618
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
619
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
631
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
632
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent], exports: [SkyFormErrorsComponent] }); }
|
|
633
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent] }); }
|
|
620
634
|
}
|
|
621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFormErrorsModule, decorators: [{
|
|
622
636
|
type: NgModule,
|
|
623
637
|
args: [{
|
|
624
638
|
imports: [SkyFormErrorsComponent, SkyFormErrorComponent],
|
|
@@ -705,17 +719,17 @@ class SkyCheckboxGroupComponent {
|
|
|
705
719
|
this.stackedLg = !this.headingLevel && this.stacked;
|
|
706
720
|
this.stackedXL = !!this.headingLevel && this.stacked;
|
|
707
721
|
}
|
|
708
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
|
|
710
724
|
{
|
|
711
725
|
provide: NG_VALIDATORS,
|
|
712
726
|
useExisting: SkyCheckboxGroupComponent,
|
|
713
727
|
multi: true,
|
|
714
728
|
},
|
|
715
729
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
716
|
-
], 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[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{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: i1.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: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type:
|
|
730
|
+
], 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[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{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: i1.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: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
717
731
|
}
|
|
718
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
732
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
|
|
719
733
|
type: Component,
|
|
720
734
|
args: [{ selector: 'sky-checkbox-group', imports: [
|
|
721
735
|
CommonModule,
|
|
@@ -781,10 +795,10 @@ class SkyCheckboxLabelTextLabelComponent {
|
|
|
781
795
|
return this.#_labelText;
|
|
782
796
|
}
|
|
783
797
|
#_labelText;
|
|
784
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
785
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
798
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
799
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
786
800
|
}
|
|
787
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, decorators: [{
|
|
788
802
|
type: Component,
|
|
789
803
|
args: [{ selector: 'sky-checkbox-label-text-label', changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
|
|
790
804
|
}], propDecorators: { labelHidden: [{
|
|
@@ -800,10 +814,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
800
814
|
* @deprecated Use `labelText` input on `sky-checkbox-component` instead.
|
|
801
815
|
*/
|
|
802
816
|
class SkyCheckboxLabelComponent {
|
|
803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
817
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
805
819
|
}
|
|
806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
|
|
807
821
|
type: Component,
|
|
808
822
|
args: [{ selector: 'sky-checkbox-label', changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
809
823
|
}] });
|
|
@@ -1120,8 +1134,8 @@ class SkyCheckboxComponent {
|
|
|
1120
1134
|
#toggle() {
|
|
1121
1135
|
this.checked = !this.checked;
|
|
1122
1136
|
}
|
|
1123
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1137
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1138
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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", 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: [
|
|
1125
1139
|
{ provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
|
|
1126
1140
|
{
|
|
1127
1141
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1129,9 +1143,9 @@ class SkyCheckboxComponent {
|
|
|
1129
1143
|
multi: true,
|
|
1130
1144
|
},
|
|
1131
1145
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1132
|
-
], 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\"\n [ngClass]=\"{\n 'sky-switch-control-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 [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default'\n }\"\n >\n @if (iconName) {\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\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 iconSize=\"s\"\n />\n } @else if (checked) {\n <sky-icon\n class=\"sky-checkbox-icon-modern-checked\"\n iconName=\"checkmark\"\n iconSize=\"s\"\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) :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: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:not(.sky-switch-control-icon){border-radius:var(--sky-comp-checkbox-border-radius)}:host-context(.sky-theme-modern) .sky-checkbox-hint-text{margin-top:var(--sky-space-gap-stacked_supplemental-xs)}: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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type:
|
|
1146
|
+
], 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\"\n [ngClass]=\"{\n 'sky-switch-control-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 [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default'\n }\"\n >\n @if (iconName) {\n <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\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 iconSize=\"s\"\n />\n } @else if (checked) {\n <sky-icon\n class=\"sky-checkbox-icon-modern-checked\"\n iconName=\"checkmark\"\n iconSize=\"s\"\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) :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: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:not(.sky-switch-control-icon){border-radius:var(--sky-comp-checkbox-border-radius)}:host-context(.sky-theme-modern) .sky-checkbox-hint-text{margin-top:var(--sky-space-gap-stacked_supplemental-xs)}: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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i5.λ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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1133
1147
|
}
|
|
1134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
1135
1149
|
type: Component,
|
|
1136
1150
|
args: [{ selector: 'sky-checkbox', hostDirectives: [SkyThemeComponentClassDirective], providers: [
|
|
1137
1151
|
{ provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
|
|
@@ -1199,8 +1213,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1199
1213
|
}] } });
|
|
1200
1214
|
|
|
1201
1215
|
class SkyCheckboxModule {
|
|
1202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1203
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
1216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1217
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
|
|
1204
1218
|
SkyCheckboxLabelComponent,
|
|
1205
1219
|
SkyCheckboxLabelTextLabelComponent], imports: [CommonModule,
|
|
1206
1220
|
FormsModule,
|
|
@@ -1216,7 +1230,7 @@ class SkyCheckboxModule {
|
|
|
1216
1230
|
SkyCheckboxLabelComponent,
|
|
1217
1231
|
SkyCheckboxGroupComponent,
|
|
1218
1232
|
SkyFormErrorModule] }); }
|
|
1219
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
1233
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule,
|
|
1220
1234
|
FormsModule,
|
|
1221
1235
|
SkyCheckboxGroupComponent,
|
|
1222
1236
|
SkyFormErrorModule,
|
|
@@ -1228,7 +1242,7 @@ class SkyCheckboxModule {
|
|
|
1228
1242
|
SkyTrimModule,
|
|
1229
1243
|
SkyThemeModule, SkyFormErrorModule] }); }
|
|
1230
1244
|
}
|
|
1231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyCheckboxModule, decorators: [{
|
|
1232
1246
|
type: NgModule,
|
|
1233
1247
|
args: [{
|
|
1234
1248
|
declarations: [
|
|
@@ -1289,10 +1303,10 @@ class SkyFieldGroupComponent {
|
|
|
1289
1303
|
set headingStyle(value) {
|
|
1290
1304
|
this.headingClass = `sky-font-heading-${value}`;
|
|
1291
1305
|
}
|
|
1292
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1293
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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-field-group-stacked": "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-align-items: normal;--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;align-items:var(--sky-override-field-group-align-items, baseline)}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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1294
1308
|
}
|
|
1295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFieldGroupComponent, decorators: [{
|
|
1296
1310
|
type: Component,
|
|
1297
1311
|
args: [{ selector: 'sky-field-group', changeDetection: ChangeDetectionStrategy.Eager, 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-align-items: normal;--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;align-items:var(--sky-override-field-group-align-items, baseline)}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"] }]
|
|
1298
1312
|
}], propDecorators: { headingText: [{
|
|
@@ -1324,11 +1338,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1324
1338
|
}] } });
|
|
1325
1339
|
|
|
1326
1340
|
class SkyFieldGroupModule {
|
|
1327
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1328
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
1329
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
1341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFieldGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1342
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent], exports: [SkyFieldGroupComponent] }); }
|
|
1343
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent] }); }
|
|
1330
1344
|
}
|
|
1331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFieldGroupModule, decorators: [{
|
|
1332
1346
|
type: NgModule,
|
|
1333
1347
|
args: [{
|
|
1334
1348
|
imports: [SkyFieldGroupComponent],
|
|
@@ -1336,33 +1350,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1336
1350
|
}]
|
|
1337
1351
|
}] });
|
|
1338
1352
|
|
|
1339
|
-
/**
|
|
1340
|
-
* Displays a label above the file attachment element. To display a help button
|
|
1341
|
-
* beside the label, include a help button element, such as `sky-help-inline`,
|
|
1342
|
-
* in the `sky-file-attachment-label` element and a `sky-control-help` CSS class
|
|
1343
|
-
* on that help button element.
|
|
1344
|
-
* @deprecated Use the `labelText` input on the single file attachment component
|
|
1345
|
-
* instead.
|
|
1346
|
-
*/
|
|
1347
|
-
class SkyFileAttachmentLabelComponent {
|
|
1348
|
-
constructor() {
|
|
1349
|
-
inject(SkyLogService).deprecated('SkyFileAttachmentLabelComponent', {
|
|
1350
|
-
deprecationMajorVersion: 9,
|
|
1351
|
-
replacementRecommendation: 'To add a label to single file attachment, use the `labelText` input ' +
|
|
1352
|
-
'on the `sky-file-attachment` component instead.',
|
|
1353
|
-
});
|
|
1354
|
-
}
|
|
1355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", 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: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1357
|
-
}
|
|
1358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
|
|
1359
|
-
type: Component,
|
|
1360
|
-
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"] }]
|
|
1361
|
-
}], ctorParameters: () => [], propDecorators: { labelContentId: [{
|
|
1362
|
-
type: ViewChild,
|
|
1363
|
-
args: ['labelContentId']
|
|
1364
|
-
}] } });
|
|
1365
|
-
|
|
1366
1353
|
/**
|
|
1367
1354
|
* @internal
|
|
1368
1355
|
*/
|
|
@@ -1424,10 +1411,10 @@ class SkyFileItemService {
|
|
|
1424
1411
|
}
|
|
1425
1412
|
return fileType.toUpperCase();
|
|
1426
1413
|
}
|
|
1427
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1428
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
1414
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1415
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileItemService, providedIn: 'root' }); }
|
|
1429
1416
|
}
|
|
1430
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileItemService, decorators: [{
|
|
1431
1418
|
type: Injectable,
|
|
1432
1419
|
args: [{ providedIn: 'root' }]
|
|
1433
1420
|
}] });
|
|
@@ -1475,10 +1462,10 @@ class SkyFileSizePipe {
|
|
|
1475
1462
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
1476
1463
|
return this.#resourcesService.getStringForLocale({ locale: this.#defaultLocale }, key, ...args);
|
|
1477
1464
|
}
|
|
1478
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1479
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
1465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1466
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFileSizePipe, isStandalone: true, name: "skyFileSize" }); }
|
|
1480
1467
|
}
|
|
1481
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileSizePipe, decorators: [{
|
|
1482
1469
|
type: Pipe,
|
|
1483
1470
|
args: [{
|
|
1484
1471
|
name: 'skyFileSize',
|
|
@@ -1494,10 +1481,10 @@ class SkyFileAttachmentJoinIdsPipe {
|
|
|
1494
1481
|
// Remove undefined values and join with a " ".
|
|
1495
1482
|
return ids && ids.filter((id) => id).join(' ');
|
|
1496
1483
|
}
|
|
1497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1498
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
1484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1485
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, isStandalone: true, name: "skyFileAttachmentJoinIds" }); }
|
|
1499
1486
|
}
|
|
1500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, decorators: [{
|
|
1501
1488
|
type: Pipe,
|
|
1502
1489
|
args: [{
|
|
1503
1490
|
name: 'skyFileAttachmentJoinIds',
|
|
@@ -1595,10 +1582,10 @@ class SkyFileAttachmentService {
|
|
|
1595
1582
|
#getMimeMainType(type) {
|
|
1596
1583
|
return type.substr(0, type.indexOf('/'));
|
|
1597
1584
|
}
|
|
1598
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1599
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
1585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1586
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentService }); }
|
|
1600
1587
|
}
|
|
1601
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
|
|
1602
1589
|
type: Injectable
|
|
1603
1590
|
}] });
|
|
1604
1591
|
|
|
@@ -1695,7 +1682,6 @@ class SkyFileAttachmentComponent {
|
|
|
1695
1682
|
*/
|
|
1696
1683
|
this.fileClick = new EventEmitter();
|
|
1697
1684
|
this.acceptedOver = false;
|
|
1698
|
-
this.hasLabelComponent = false;
|
|
1699
1685
|
this.rejectedOver = false;
|
|
1700
1686
|
/**
|
|
1701
1687
|
* Whether the input is required for form validation.
|
|
@@ -1771,19 +1757,6 @@ class SkyFileAttachmentComponent {
|
|
|
1771
1757
|
});
|
|
1772
1758
|
}
|
|
1773
1759
|
}
|
|
1774
|
-
ngAfterContentInit() {
|
|
1775
|
-
if (this.labelComponents) {
|
|
1776
|
-
this.hasLabelComponent = this.labelComponents.length > 0;
|
|
1777
|
-
this.#changeDetector.detectChanges();
|
|
1778
|
-
// Handles updating classes when label changes
|
|
1779
|
-
this.labelComponents.changes
|
|
1780
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
1781
|
-
.subscribe((newLabelComponents) => {
|
|
1782
|
-
this.hasLabelComponent = newLabelComponents.length > 0;
|
|
1783
|
-
this.#changeDetector.markForCheck();
|
|
1784
|
-
});
|
|
1785
|
-
}
|
|
1786
|
-
}
|
|
1787
1760
|
onButtonBlur() {
|
|
1788
1761
|
// Only mark the field as touched on blur when the document still has focus. This
|
|
1789
1762
|
// prevents validation from occurring while the user has the file dialog open,
|
|
@@ -2009,13 +1982,13 @@ class SkyFileAttachmentComponent {
|
|
|
2009
1982
|
#onChange;
|
|
2010
1983
|
// istanbul ignore next
|
|
2011
1984
|
#onTouched;
|
|
2012
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2013
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1985
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
|
|
2014
1987
|
SkyFileAttachmentService,
|
|
2015
1988
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2016
|
-
], 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 (cancel)=\"onFileCancel()\"\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 class=\"sky-btn sky-btn-link-inline\"\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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-border: 1px solid transparent;--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.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: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{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:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}:host(.ng-invalid.ng-touched) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: i4$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ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]" }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1989
|
+
], 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 class=\"sky-file-attachment-label-wrapper\">\n @if (labelText) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired,\n 'sky-screen-reader-only': labelHidden\n }\"\n >{{ labelText }}</span\n >\n }\n @if (isRequired && 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 (cancel)=\"onFileCancel()\"\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: (labelText ? labelId : undefined)\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 class=\"sky-btn sky-btn-link-inline\"\n role=\"link\"\n tabindex=\"0\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n (keydown.enter)=\"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: (labelText ? labelId : undefined)\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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-border: 1px solid transparent;--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.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: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{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:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}:host(.ng-invalid.ng-touched) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ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]" }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2017
1990
|
}
|
|
2018
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1991
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
2019
1992
|
type: Component,
|
|
2020
1993
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2021
1994
|
CommonModule,
|
|
@@ -2032,7 +2005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2032
2005
|
], providers: [
|
|
2033
2006
|
SkyFileAttachmentService,
|
|
2034
2007
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2035
|
-
], 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 (cancel)=\"onFileCancel()\"\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 class=\"sky-btn sky-btn-link-inline\"\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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-border: 1px solid transparent;--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.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: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{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:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}:host(.ng-invalid.ng-touched) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"] }]
|
|
2008
|
+
], hostDirectives: [SkyThemeComponentClassDirective], selector: 'sky-file-attachment', template: "<div class=\"sky-file-attachment-wrapper\">\n <div class=\"sky-file-attachment-label-wrapper\">\n @if (labelText) {\n <span\n class=\"sky-control-label\"\n [attr.id]=\"labelId\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired,\n 'sky-screen-reader-only': labelHidden\n }\"\n >{{ labelText }}</span\n >\n }\n @if (isRequired && 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 (cancel)=\"onFileCancel()\"\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: (labelText ? labelId : undefined)\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 class=\"sky-btn sky-btn-link-inline\"\n role=\"link\"\n tabindex=\"0\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n (keydown.enter)=\"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: (labelText ? labelId : undefined)\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-drag-border-style: dashed;--sky-override-file-attachment-drag-box-shadow: none;--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-border: 1px solid transparent;--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.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: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{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:var(--sky-override-file-attachment-upload-border, none)}.sky-file-attachment-upload:has(.sky-file-attachment-icon){align-items:center}.sky-file-attachment-accept{border-color:var(--sky-override-file-attachment-accept-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-accept-border-width, none);border-radius:var(--sky-override-file-attachment-accept-border-radius, none)}.sky-file-attachment-accept button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-base) var(--sky-color-border-success))}.sky-file-attachment-reject{border-color:var(--sky-override-file-attachment-reject-border-color, none);border-style:var(--sky-override-file-attachment-drag-border-style, none);border-width:var(--sky-override-file-attachment-reject-border-width, none);border-radius:var(--sky-override-file-attachment-reject-border-radius, none)}.sky-file-attachment-reject button{box-shadow:var(--sky-override-file-attachment-drag-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger))}.sky-file-attachment-btn,.sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}:host(.ng-invalid.ng-touched) .sky-file-attachment-btn{box-shadow:var(--sky-override-file-attachment-invalid-box-shadow, inset 0 0 0 var(--sky-border-width-input-error) var(--sky-color-border-danger));border:var(--sky-override-file-attachment-invalid-border, none)}:host(.ng-invalid.ng-touched) .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:0}.sky-file-attachment-delete{width:auto;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-default));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:0 0 0 var(--sky-gap-icon-m);line-height:1}\n"] }]
|
|
2036
2009
|
}], ctorParameters: () => [], propDecorators: { acceptedTypes: [{
|
|
2037
2010
|
type: Input
|
|
2038
2011
|
}], acceptedTypesErrorMessage: [{
|
|
@@ -2075,30 +2048,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2075
2048
|
}], inputEl: [{
|
|
2076
2049
|
type: ViewChild,
|
|
2077
2050
|
args: ['fileInputRef']
|
|
2078
|
-
}], labelComponents: [{
|
|
2079
|
-
type: ContentChildren,
|
|
2080
|
-
args: [SkyFileAttachmentLabelComponent]
|
|
2081
2051
|
}] } });
|
|
2082
2052
|
|
|
2083
2053
|
class SkyFileAttachmentModule {
|
|
2084
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2085
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
2086
|
-
|
|
2087
|
-
SkyFormErrorModule] }); }
|
|
2088
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent, SkyFormErrorModule] }); }
|
|
2054
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2055
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent], exports: [SkyFileAttachmentComponent, SkyFormErrorModule] }); }
|
|
2056
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFormErrorModule] }); }
|
|
2089
2057
|
}
|
|
2090
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentModule, decorators: [{
|
|
2091
2059
|
type: NgModule,
|
|
2092
2060
|
args: [{
|
|
2093
|
-
exports: [
|
|
2094
|
-
|
|
2095
|
-
SkyFileAttachmentLabelComponent,
|
|
2096
|
-
SkyFormErrorModule,
|
|
2097
|
-
],
|
|
2098
|
-
imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent],
|
|
2061
|
+
exports: [SkyFileAttachmentComponent, SkyFormErrorModule],
|
|
2062
|
+
imports: [SkyFileAttachmentComponent],
|
|
2099
2063
|
}]
|
|
2100
2064
|
}] });
|
|
2101
2065
|
|
|
2066
|
+
class SkyInputBoxCharacterLimit {
|
|
2067
|
+
constructor() {
|
|
2068
|
+
this.characterCount = input.required(/* @ts-ignore */
|
|
2069
|
+
...(ngDevMode ? [{ debugName: "characterCount" }] : /* istanbul ignore next */ []));
|
|
2070
|
+
this.characterLimit = input.required(/* @ts-ignore */
|
|
2071
|
+
...(ngDevMode ? [{ debugName: "characterLimit" }] : /* istanbul ignore next */ []));
|
|
2072
|
+
this.ratio = computed(() => {
|
|
2073
|
+
return `${this.characterCount()}/${this.characterLimit()}`;
|
|
2074
|
+
}, /* @ts-ignore */
|
|
2075
|
+
...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
|
|
2076
|
+
this.limitReached = computed(() => {
|
|
2077
|
+
return this.characterCount() > this.characterLimit();
|
|
2078
|
+
}, /* @ts-ignore */
|
|
2079
|
+
...(ngDevMode ? [{ debugName: "limitReached" }] : /* istanbul ignore next */ []));
|
|
2080
|
+
// Holds the count steady between milestones so screen readers announce it
|
|
2081
|
+
// periodically instead of on every keystroke.
|
|
2082
|
+
this.announcedCount = linkedSignal({ ...(ngDevMode ? { debugName: "announcedCount" } : /* istanbul ignore next */ {}), source: this.characterCount,
|
|
2083
|
+
computation: (characterCount, previous) => {
|
|
2084
|
+
const characterLimit = this.characterLimit();
|
|
2085
|
+
// Announce every 10 characters within 50 of the limit, every 50 otherwise.
|
|
2086
|
+
const interval = characterLimit - Math.floor(characterCount / 10) * 10 <= 50 ? 10 : 50;
|
|
2087
|
+
// The limit is worth announcing even when it doesn't fall on an interval.
|
|
2088
|
+
if (previous === undefined || // is this the first value assignment?
|
|
2089
|
+
characterCount === characterLimit || // has the count reached the limit?
|
|
2090
|
+
characterCount % interval === 0 // is the count a multiple of the interval?
|
|
2091
|
+
) {
|
|
2092
|
+
return characterCount;
|
|
2093
|
+
}
|
|
2094
|
+
// A held announcement from above the limit would read as "100 characters
|
|
2095
|
+
// out of 99", so re-anchor once the count comes back under.
|
|
2096
|
+
if (previous.value > characterLimit) {
|
|
2097
|
+
return characterCount;
|
|
2098
|
+
}
|
|
2099
|
+
// The previous announcement may be the limit, which doesn't always fall
|
|
2100
|
+
// on an interval, so round both counts down before comparing them.
|
|
2101
|
+
const previousMilestone = Math.floor(previous.value / interval) * interval;
|
|
2102
|
+
const currentMilestone = Math.floor(characterCount / interval) * interval;
|
|
2103
|
+
// Stay quiet while the count is still at the announced milestone or has
|
|
2104
|
+
// dipped just below it, so deleting one character doesn't drop the
|
|
2105
|
+
// announcement from 50 to 40.
|
|
2106
|
+
if (currentMilestone === previousMilestone ||
|
|
2107
|
+
currentMilestone + interval === previousMilestone) {
|
|
2108
|
+
return previous.value;
|
|
2109
|
+
}
|
|
2110
|
+
// Typing can't skip a milestone, so the value was replaced wholesale and
|
|
2111
|
+
// the previous announcement is stale -- for example, 43 of 50 to 21 of 50.
|
|
2112
|
+
return currentMilestone;
|
|
2113
|
+
} });
|
|
2114
|
+
}
|
|
2115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxCharacterLimit, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: SkyInputBoxCharacterLimit, isStandalone: true, selector: "sky-input-box-character-limit", inputs: { characterCount: { classPropertyName: "characterCount", publicName: "characterCount", isSignal: true, isRequired: true, transformFunction: null }, characterLimit: { classPropertyName: "characterLimit", publicName: "characterLimit", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<span\n class=\"sky-input-box-character-limit-label sky-font-deemphasized\"\n [class.sky-error-label]=\"limitReached()\"\n>\n {{ ratio() }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n @if (limitReached()) {\n {{ 'skyux_character_count_over_limit' | skyLibResources }}\n } @else {\n {{\n 'skyux_character_count_message'\n | skyLibResources: announcedCount().toLocaleString() : characterLimit()\n }}\n }\n</span>\n", styles: [".sky-input-box-character-limit-label:not(.sky-theme-modern *){--sky-override-character-count-font-size: 15px}:host{flex-shrink:.0001}.sky-input-box-character-limit-label{font-size:var(--sky-override-character-count-font-size, inherit)}.sky-input-box-character-limit-label.sky-error-label{margin:0}\n"], dependencies: [{ kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
2117
|
+
}
|
|
2118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxCharacterLimit, decorators: [{
|
|
2119
|
+
type: Component,
|
|
2120
|
+
args: [{ imports: [SkyFormsResourcesModule], selector: 'sky-input-box-character-limit', template: "<span\n class=\"sky-input-box-character-limit-label sky-font-deemphasized\"\n [class.sky-error-label]=\"limitReached()\"\n>\n {{ ratio() }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n @if (limitReached()) {\n {{ 'skyux_character_count_over_limit' | skyLibResources }}\n } @else {\n {{\n 'skyux_character_count_message'\n | skyLibResources: announcedCount().toLocaleString() : characterLimit()\n }}\n }\n</span>\n", styles: [".sky-input-box-character-limit-label:not(.sky-theme-modern *){--sky-override-character-count-font-size: 15px}:host{flex-shrink:.0001}.sky-input-box-character-limit-label{font-size:var(--sky-override-character-count-font-size, inherit)}.sky-input-box-character-limit-label.sky-error-label{margin:0}\n"] }]
|
|
2121
|
+
}], propDecorators: { characterCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterCount", required: true }] }], characterLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterLimit", required: true }] }] } });
|
|
2122
|
+
|
|
2102
2123
|
/**
|
|
2103
2124
|
* @internal
|
|
2104
2125
|
*/
|
|
@@ -2181,10 +2202,10 @@ class SkyInputBoxHostService {
|
|
|
2181
2202
|
}
|
|
2182
2203
|
return this.#host.queryPopulatedElement(query);
|
|
2183
2204
|
}
|
|
2184
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2185
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
2205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2206
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxHostService }); }
|
|
2186
2207
|
}
|
|
2187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
|
|
2188
2209
|
type: Injectable
|
|
2189
2210
|
}] });
|
|
2190
2211
|
|
|
@@ -2200,10 +2221,10 @@ class SkyInputBoxControlDirective {
|
|
|
2200
2221
|
}
|
|
2201
2222
|
#_autocomplete;
|
|
2202
2223
|
#hostSvc = inject(SkyInputBoxHostService, { optional: true });
|
|
2203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2204
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
2224
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2225
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", 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 }); }
|
|
2205
2226
|
}
|
|
2206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
|
|
2207
2228
|
type: Directive,
|
|
2208
2229
|
args: [{
|
|
2209
2230
|
selector:
|
|
@@ -2227,10 +2248,10 @@ class SkyInputBoxHintTextPipe {
|
|
|
2227
2248
|
}
|
|
2228
2249
|
return hintText || hostHintText;
|
|
2229
2250
|
}
|
|
2230
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2231
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.
|
|
2251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxHintTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2252
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxHintTextPipe, isStandalone: true, name: "skyInputBoxHintText" }); }
|
|
2232
2253
|
}
|
|
2233
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxHintTextPipe, decorators: [{
|
|
2234
2255
|
type: Pipe,
|
|
2235
2256
|
args: [{
|
|
2236
2257
|
name: 'skyInputBoxHintText',
|
|
@@ -2305,10 +2326,10 @@ class SkyInputBoxAdapterService {
|
|
|
2305
2326
|
this.#renderer.setAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR, describedByIds.join(' '));
|
|
2306
2327
|
}
|
|
2307
2328
|
}
|
|
2308
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2309
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
2329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2330
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxAdapterService }); }
|
|
2310
2331
|
}
|
|
2311
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
|
|
2312
2333
|
type: Injectable
|
|
2313
2334
|
}] });
|
|
2314
2335
|
|
|
@@ -2343,13 +2364,13 @@ class SkyInputBoxComponent {
|
|
|
2343
2364
|
#elementRef;
|
|
2344
2365
|
#renderer;
|
|
2345
2366
|
/**
|
|
2346
|
-
* The
|
|
2347
|
-
*
|
|
2348
|
-
*
|
|
2349
|
-
*
|
|
2350
|
-
*
|
|
2351
|
-
* `maxLength`
|
|
2352
|
-
*
|
|
2367
|
+
* The character limit for the input box. If users exceed the limit, the input box's form control
|
|
2368
|
+
* becomes invalid and the property adds [Validators.maxLength](https://angular.dev/api/forms/Validators).
|
|
2369
|
+
* The validation error message and screen reader announcement use `labelText`. This property also
|
|
2370
|
+
* displays a character count indicator in the top right with the number of characters that users enter,
|
|
2371
|
+
* the character limit, and a danger icon if users exceed the limit. If users are unlikely to exceed a
|
|
2372
|
+
* character limit, use `Validators.maxLength` directly instead with a `maxLength` attribute on the
|
|
2373
|
+
* input element.
|
|
2353
2374
|
*/
|
|
2354
2375
|
set characterLimit(value) {
|
|
2355
2376
|
this.#_characterLimit =
|
|
@@ -2536,8 +2557,8 @@ class SkyInputBoxComponent {
|
|
|
2536
2557
|
control.addValidators([this.#previousMaxLengthValidator]);
|
|
2537
2558
|
}
|
|
2538
2559
|
}
|
|
2539
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2540
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2560
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2561
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
|
|
2541
2562
|
SkyContentInfoProvider,
|
|
2542
2563
|
SkyInputBoxAdapterService,
|
|
2543
2564
|
SkyInputBoxHostService,
|
|
@@ -2545,9 +2566,9 @@ class SkyInputBoxComponent {
|
|
|
2545
2566
|
provide: SKY_FORM_ERRORS_ENABLED,
|
|
2546
2567
|
useValue: true,
|
|
2547
2568
|
},
|
|
2548
|
-
], 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-autocomplete,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-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: 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-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-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));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMC41MzAzIDIuNzE5NjdDMTAuMjM3NCAyLjQyNjc4IDkuNzYyNTYgMi40MjY3OCA5LjQ2OTY3IDIuNzE5NjdMNS4yMTk2NyA2Ljk2OTY3QzQuOTI2NzggNy4yNjI1NiA0LjkyNjc4IDcuNzM3NDQgNS4yMTk2NyA4LjAzMDMzQzUuNTEyNTYgOC4zMjMyMiA1Ljk4NzQ0IDguMzIzMjIgNi4yODAzMyA4LjAzMDMzTDEwIDQuMzEwNjZMMTMuNzE5NyA4LjAzMDMzQzE0LjAxMjYgOC4zMjMyMiAxNC40ODc0IDguMzIzMjIgMTQuNzgwMyA4LjAzMDMzQzE1LjA3MzIgNy43Mzc0NCAxNS4wNzMyIDcuMjYyNTYgMTQuNzgwMyA2Ljk2OTY3TDEwLjUzMDMgMi43MTk2N1pNMTQuNzgwMyAxMy4wMzAzTDEwLjUzMDMgMTcuMjgwM0MxMC4yMzc0IDE3LjU3MzIgOS43NjI1NiAxNy41NzMyIDkuNDY5NjcgMTcuMjgwM0w1LjIxOTY3IDEzLjAzMDNDNC45MjY3OCAxMi43Mzc0IDQuOTI2NzggMTIuMjYyNiA1LjIxOTY3IDExLjk2OTdDNS41MTI1NiAxMS42NzY4IDUuOTg3NDQgMTEuNjc2OCA2LjI4MDMzIDExLjk2OTdMMTAgMTUuNjg5M0wxMy43MTk3IDExLjk2OTdDMTQuMDEyNiAxMS42NzY4IDE0LjQ4NzQgMTEuNjc2OCAxNC43ODAzIDExLjk2OTdDMTUuMDczMiAxMi4yNjI2IDE1LjA3MzIgMTIuNzM3NCAxNC43ODAzIDEzLjAzMDNaIiBmaWxsPSIjMmI2YmQ1Ii8+DQo8L3N2Zz4NCg==) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUzMDMgMi43MTk2N0MxMC4yMzc0IDIuNDI2NzggOS43NjI1NiAyLjQyNjc4IDkuNDY5NjcgMi43MTk2N0w1LjIxOTY3IDYuOTY5NjdDNC45MjY3OCA3LjI2MjU2IDQuOTI2NzggNy43Mzc0NCA1LjIxOTY3IDguMDMwMzNDNS41MTI1NiA4LjMyMzIyIDUuOTg3NDQgOC4zMjMyMiA2LjI4MDMzIDguMDMwMzNMMTAgNC4zMTA2NkwxMy43MTk3IDguMDMwMzNDMTQuMDEyNiA4LjMyMzIyIDE0LjQ4NzQgOC4zMjMyMiAxNC43ODAzIDguMDMwMzNDMTUuMDczMiA3LjczNzQ0IDE1LjA3MzIgNy4yNjI1NiAxNC43ODAzIDYuOTY5NjdMMTAuNTMwMyAyLjcxOTY3Wk0xNC43ODAzIDEzLjAzMDNMMTAuNTMwMyAxNy4yODAzQzEwLjIzNzQgMTcuNTczMiA5Ljc2MjU2IDE3LjU3MzIgOS40Njk2NyAxNy4yODAzTDUuMjE5NjcgMTMuMDMwM0M0LjkyNjc4IDEyLjczNzQgNC45MjY3OCAxMi4yNjI2IDUuMjE5NjcgMTEuOTY5N0M1LjUxMjU2IDExLjY3NjggNS45ODc0NCAxMS42NzY4IDYuMjgwMzMgMTEuOTY5N0wxMCAxNS42ODkzTDEzLjcxOTcgMTEuOTY5N0MxNC4wMTI2IDExLjY3NjggMTQuNDg3NCAxMS42NzY4IDE0Ljc4MDMgMTEuOTY5N0MxNS4wNzMyIDEyLjI2MjYgMTUuMDczMiAxMi43Mzc0IDE0Ljc4MDMgMTMuMDMwM1oiIGZpbGw9IiM2NjZiNzAiLz4KPC9zdmc+) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}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-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));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-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + 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-icon-input-action);margin:0;padding:0;position:relative;transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short);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-icon-input-action);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-default);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-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.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-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-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-comp-input-label-space-inset-right)}.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-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);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-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);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-comp-input-value-space-inset-top)}.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-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;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-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-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .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-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: 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-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.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-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));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-comp-override-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-comp-override-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-comp-override-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-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);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-comp-override-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-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-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 var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: i6.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2569
|
+
], 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-input-box-character-limit\n [characterCount]=\"controlDir?.value?.length ?? 0\"\n [characterLimit]=\"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-autocomplete,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-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-option-background-color: auto;--sky-override-input-box-select-option-text-color: auto;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: 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-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-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));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) var(--sky-image-select_icon-base) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) var(--sky-image-select_icon-disabled) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}sky-input-box .sky-form-group select.sky-form-control option{background-color:var(--sky-override-input-box-select-option-background-color, var(--sky-color-background-container-menu));color:var(--sky-override-input-box-select-option-text-color, var(--sky-color-text-default))}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-input-box-character-limit,sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-input-box-character-limit,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-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));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-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + 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-icon-input-action);margin:0;padding:0;position:relative;transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short);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-icon-input-action);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-default);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-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.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-input-box-character-limit,.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-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-input-box-character-limit,+sky-character-counter-indicator){margin-right:var(--sky-comp-input-label-space-inset-right)}.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,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-input-box-character-limit-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-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-input-box-character-limit,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);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-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);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-comp-input-value-space-inset-top)}.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-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;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-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-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .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-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: 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-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.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-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));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-comp-override-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-comp-override-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-comp-override-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-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);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-comp-override-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-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-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 var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: SkyInputBoxCharacterLimit, selector: "sky-input-box-character-limit", inputs: ["characterCount", "characterLimit"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2549
2570
|
}
|
|
2550
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
|
|
2551
2572
|
type: Component,
|
|
2552
2573
|
args: [{ selector: 'sky-input-box', providers: [
|
|
2553
2574
|
SkyContentInfoProvider,
|
|
@@ -2557,7 +2578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2557
2578
|
provide: SKY_FORM_ERRORS_ENABLED,
|
|
2558
2579
|
useValue: true,
|
|
2559
2580
|
},
|
|
2560
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, 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-autocomplete,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-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: 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-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-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));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMC41MzAzIDIuNzE5NjdDMTAuMjM3NCAyLjQyNjc4IDkuNzYyNTYgMi40MjY3OCA5LjQ2OTY3IDIuNzE5NjdMNS4yMTk2NyA2Ljk2OTY3QzQuOTI2NzggNy4yNjI1NiA0LjkyNjc4IDcuNzM3NDQgNS4yMTk2NyA4LjAzMDMzQzUuNTEyNTYgOC4zMjMyMiA1Ljk4NzQ0IDguMzIzMjIgNi4yODAzMyA4LjAzMDMzTDEwIDQuMzEwNjZMMTMuNzE5NyA4LjAzMDMzQzE0LjAxMjYgOC4zMjMyMiAxNC40ODc0IDguMzIzMjIgMTQuNzgwMyA4LjAzMDMzQzE1LjA3MzIgNy43Mzc0NCAxNS4wNzMyIDcuMjYyNTYgMTQuNzgwMyA2Ljk2OTY3TDEwLjUzMDMgMi43MTk2N1pNMTQuNzgwMyAxMy4wMzAzTDEwLjUzMDMgMTcuMjgwM0MxMC4yMzc0IDE3LjU3MzIgOS43NjI1NiAxNy41NzMyIDkuNDY5NjcgMTcuMjgwM0w1LjIxOTY3IDEzLjAzMDNDNC45MjY3OCAxMi43Mzc0IDQuOTI2NzggMTIuMjYyNiA1LjIxOTY3IDExLjk2OTdDNS41MTI1NiAxMS42NzY4IDUuOTg3NDQgMTEuNjc2OCA2LjI4MDMzIDExLjk2OTdMMTAgMTUuNjg5M0wxMy43MTk3IDExLjk2OTdDMTQuMDEyNiAxMS42NzY4IDE0LjQ4NzQgMTEuNjc2OCAxNC43ODAzIDExLjk2OTdDMTUuMDczMiAxMi4yNjI2IDE1LjA3MzIgMTIuNzM3NCAxNC43ODAzIDEzLjAzMDNaIiBmaWxsPSIjMmI2YmQ1Ii8+DQo8L3N2Zz4NCg==) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUzMDMgMi43MTk2N0MxMC4yMzc0IDIuNDI2NzggOS43NjI1NiAyLjQyNjc4IDkuNDY5NjcgMi43MTk2N0w1LjIxOTY3IDYuOTY5NjdDNC45MjY3OCA3LjI2MjU2IDQuOTI2NzggNy43Mzc0NCA1LjIxOTY3IDguMDMwMzNDNS41MTI1NiA4LjMyMzIyIDUuOTg3NDQgOC4zMjMyMiA2LjI4MDMzIDguMDMwMzNMMTAgNC4zMTA2NkwxMy43MTk3IDguMDMwMzNDMTQuMDEyNiA4LjMyMzIyIDE0LjQ4NzQgOC4zMjMyMiAxNC43ODAzIDguMDMwMzNDMTUuMDczMiA3LjczNzQ0IDE1LjA3MzIgNy4yNjI1NiAxNC43ODAzIDYuOTY5NjdMMTAuNTMwMyAyLjcxOTY3Wk0xNC43ODAzIDEzLjAzMDNMMTAuNTMwMyAxNy4yODAzQzEwLjIzNzQgMTcuNTczMiA5Ljc2MjU2IDE3LjU3MzIgOS40Njk2NyAxNy4yODAzTDUuMjE5NjcgMTMuMDMwM0M0LjkyNjc4IDEyLjczNzQgNC45MjY3OCAxMi4yNjI2IDUuMjE5NjcgMTEuOTY5N0M1LjUxMjU2IDExLjY3NjggNS45ODc0NCAxMS42NzY4IDYuMjgwMzMgMTEuOTY5N0wxMCAxNS42ODkzTDEzLjcxOTcgMTEuOTY5N0MxNC4wMTI2IDExLjY3NjggMTQuNDg3NCAxMS42NzY4IDE0Ljc4MDMgMTEuOTY5N0MxNS4wNzMyIDEyLjI2MjYgMTUuMDczMiAxMi43Mzc0IDE0Ljc4MDMgMTMuMDMwM1oiIGZpbGw9IiM2NjZiNzAiLz4KPC9zdmc+) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}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-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));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-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + 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-icon-input-action);margin:0;padding:0;position:relative;transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short);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-icon-input-action);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-default);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-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.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-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-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-comp-input-label-space-inset-right)}.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-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);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-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);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-comp-input-value-space-inset-top)}.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-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;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-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-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .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-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: 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-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.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-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));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-comp-override-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-comp-override-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-comp-override-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-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);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-comp-override-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-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-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 var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"] }]
|
|
2581
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, 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-input-box-character-limit\n [characterCount]=\"controlDir?.value?.length ?? 0\"\n [characterLimit]=\"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-autocomplete,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-form-errors-margin-left: 0;--sky-override-input-box-hint-margin-left: 0;--sky-override-input-box-hint-margin-top: var(--sky-margin-stacked-xs);--sky-override-input-box-select-border-radius: 0;--sky-override-input-box-select-background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-background-disabled: var( --sky-background-color-disabled ) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+) no-repeat right / 15px 30px;--sky-override-input-box-select-option-background-color: auto;--sky-override-input-box-select-option-text-color: auto;--sky-override-input-box-select-padding-right: 23px}sky-input-box{--sky-comp-override-input-box-group-background-color: transparent;--sky-comp-override-input-box-group-background-color-active: transparent;--sky-comp-override-input-box-group-background-color-hover: transparent;--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-active: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-disabled: var( --sky-color-background-input-disabled );--sky-comp-override-input-box-group-background-color-hover: var( --sky-color-background-input-base );--sky-comp-override-input-box-group-background-color-focused: 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-error,sky-input-box .sky-error-label,sky-input-box .sky-error-indicator{margin-left:var(--sky-override-input-box-form-errors-margin-left, var(--sky-comp-input-label-space-inset-left));display:block}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-comp-override-input-box-group-background-color)}sky-input-box .sky-form-group:has(:active){background-color:var(--sky-comp-override-input-box-group-background-color-active)}sky-input-box .sky-form-group:hover:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-hover)}sky-input-box .sky-form-group:focus-within:not(:has(:active)){background-color:var(--sky-comp-override-input-box-group-background-color-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));background:var(--sky-override-input-box-select-background, var(--sky-color-background-input-base) var(--sky-image-select_icon-base) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m));padding-right:var(--sky-override-input-box-select-padding-right)}sky-input-box .sky-form-group select.sky-form-control:disabled{background:var(--sky-override-input-box-select-background-disabled, var(--sky-color-background-input-base) var(--sky-image-select_icon-disabled) no-repeat right/var(--sky-size-icon-m) var(--sky-size-icon-m))}sky-input-box .sky-form-group select.sky-form-control option{background-color:var(--sky-override-input-box-select-option-background-color, var(--sky-color-background-container-menu));color:var(--sky-override-input-box-select-option-text-color, var(--sky-color-text-default))}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-input-box-character-limit,sky-input-box sky-character-counter-indicator{text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-input-box-character-limit,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-left:var(--sky-override-input-box-hint-margin-left, var(--sky-comp-input-label-space-inset-left));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-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom) );--sky-input-box-margin-top: calc(var(--sky-input-box-space-top) * -1);--sky-input-box-height: calc( var(--sky-comp-input-value-space-inset-bottom) + 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-icon-input-action);margin:0;padding:0;position:relative;transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short);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-icon-input-action);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-default);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-comp-input-value-space-inset-right) 0 var(--sky-comp-input-value-space-inset-left)}.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-input-box-character-limit,.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-comp-input-label-space-inset-top);padding-bottom:var(--sky-comp-input-label-space-inset-bottom);font-style:var(--sky-font-style-input-label);font-weight:var(--sky-font-style-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label:has(+sky-input-box-character-limit,+sky-character-counter-indicator){margin-right:var(--sky-comp-input-label-space-inset-right)}.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,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-input-box-character-limit-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-comp-input-value-space-inset-right)}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-input-box-character-limit,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:var(--sky-comp-input-label-space-inset-top) 0 var(--sky-comp-input-label-space-inset-bottom);font-size:var(--sky-font-size-input-label)}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:var(--sky-input-box-margin-top);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-comp-input-value-space-inset-right);padding-bottom:var(--sky-comp-input-value-space-inset-bottom);padding-left:var(--sky-comp-input-value-space-inset-left);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-comp-input-value-space-inset-top)}.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-comp-input-value-space-inset-top) solid transparent}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - .75rem);z-index:3;padding-right:calc(var(--sky-size-icon-m) + 1rem)}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:var(--sky-input-box-margin-top);padding-top:0;resize:vertical;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-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-comp-input-value-space-inset-left);width:initial}.sky-theme-modern .sky-input-box .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-comp-override-input-box-input-border-color), var(--sky-comp-override-input-box-input-elevation-shadow))}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled){--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-base );--sky-input-box-input-border-width: var(--sky-border-width-input-base);--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-base );--sky-input-box-button-border-color: 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-color-background-action-input-base );--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-base )}.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-focus-elevation, inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-input-box-button-elevation-shadow));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-comp-override-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-comp-override-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-comp-override-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-comp-override-input-box-input-border-color), var(--sky-elevation-input-base);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-comp-override-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-color-background-action-input-hover );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-active );--sky-input-box-button-elevation-shadow: var( --sky-elevation-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-color-background-action-input-focus );--sky-input-box-button-box-shadow-with-focus-elevation: inset 0 0 0 var(--sky-input-box-button-border-width) var(--sky-input-box-button-border-color), var(--sky-elevation-action-input-focus);--sky-input-box-button-elevation-shadow: var( --sky-elevation-action-input-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 var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color var(--sky-global-duration-short),box-shadow var(--sky-global-duration-short),color var(--sky-global-duration-short)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{border:none;--sky-comp-override-input-box-input-border-color: var( --sky-color-border-input-disabled );--sky-input-box-input-border-width: var( --sky-border-width-input-disabled );--sky-comp-override-input-box-input-elevation-shadow: var( --sky-elevation-input-disabled )}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{border:none;color:var(--sky-color-icon-deemphasized);box-shadow:inset 0 0 0 var(--sky-border-width-action-disabled) var(--sky-color-border-action-input-disabled),var(--sky-elevation-action-input-disabled);background-color:var(--sky-comp-override-input-box-group-background-color-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-comp-override-input-box-group-background-color-disabled)}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-icon{color:var(--sky-color-icon-deemphasized)}\n"] }]
|
|
2561
2582
|
}], propDecorators: { hasErrors: [{
|
|
2562
2583
|
type: Input
|
|
2563
2584
|
}], disabled: [{
|
|
@@ -2596,20 +2617,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2596
2617
|
}] } });
|
|
2597
2618
|
|
|
2598
2619
|
class SkyInputBoxModule {
|
|
2599
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2600
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
2620
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2621
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
|
|
2601
2622
|
SkyCharacterCounterModule,
|
|
2602
2623
|
SkyFormErrorsModule,
|
|
2603
2624
|
SkyFormErrorModule,
|
|
2604
2625
|
SkyFormsResourcesModule,
|
|
2605
2626
|
SkyHelpInlineModule,
|
|
2627
|
+
SkyInputBoxCharacterLimit,
|
|
2606
2628
|
SkyInputBoxControlDirective,
|
|
2607
2629
|
SkyInputBoxHintTextPipe,
|
|
2608
2630
|
SkyThemeModule], exports: [SkyInputBoxHintTextPipe,
|
|
2609
2631
|
SkyInputBoxComponent,
|
|
2610
2632
|
SkyInputBoxControlDirective,
|
|
2611
2633
|
SkyFormErrorModule] }); }
|
|
2612
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
2634
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
|
|
2613
2635
|
SkyCharacterCounterModule,
|
|
2614
2636
|
SkyFormErrorsModule,
|
|
2615
2637
|
SkyFormErrorModule,
|
|
@@ -2617,7 +2639,7 @@ class SkyInputBoxModule {
|
|
|
2617
2639
|
SkyHelpInlineModule,
|
|
2618
2640
|
SkyThemeModule, SkyFormErrorModule] }); }
|
|
2619
2641
|
}
|
|
2620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInputBoxModule, decorators: [{
|
|
2621
2643
|
type: NgModule,
|
|
2622
2644
|
args: [{
|
|
2623
2645
|
declarations: [SkyInputBoxComponent],
|
|
@@ -2628,6 +2650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2628
2650
|
SkyFormErrorModule,
|
|
2629
2651
|
SkyFormsResourcesModule,
|
|
2630
2652
|
SkyHelpInlineModule,
|
|
2653
|
+
SkyInputBoxCharacterLimit,
|
|
2631
2654
|
SkyInputBoxControlDirective,
|
|
2632
2655
|
SkyInputBoxHintTextPipe,
|
|
2633
2656
|
SkyThemeModule,
|
|
@@ -2950,13 +2973,13 @@ class SkyFileDropComponent {
|
|
|
2950
2973
|
this.rejectedFiles = rejectedFileArray;
|
|
2951
2974
|
}
|
|
2952
2975
|
}
|
|
2953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
2976
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2977
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
|
|
2955
2978
|
SkyFileAttachmentService,
|
|
2956
2979
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2957
|
-
], 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 sky-file-upload-icon-target\"\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 sky-file-upload-icon-close\"\n iconName=\"prohibited\"\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.url) {\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-drag-contents-border-style: dashed;--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-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}: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-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));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))}.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:var(--sky-override-file-drop-drag-contents-border-style, solid);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));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.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: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-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-comp-override-input-box-group-background-color-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-style-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-style-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-default));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-style-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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "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: i4$1.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ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"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2980
|
+
], 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 sky-file-upload-icon-target\"\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 sky-file-upload-icon-close\"\n iconName=\"prohibited\"\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.url) {\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-drag-contents-border-style: dashed;--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-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}: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-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));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))}.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:var(--sky-override-file-drop-drag-contents-border-style, solid);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));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.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: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-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-override-file-drop-link-input-background-color, var(--sky-color-background-input-base) );--sky-comp-override-input-box-group-background-color-focused: var( --sky-override-file-drop-link-input-background-color, var(--sky-color-background-input-base) );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-style-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-style-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-default));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-style-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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i5.λ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"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
2958
2981
|
}
|
|
2959
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
2982
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileDropComponent, decorators: [{
|
|
2960
2983
|
type: Component,
|
|
2961
2984
|
args: [{ selector: 'sky-file-drop', providers: [
|
|
2962
2985
|
SkyFileAttachmentService,
|
|
@@ -2973,7 +2996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
2973
2996
|
SkyIdModule,
|
|
2974
2997
|
SkyInputBoxModule,
|
|
2975
2998
|
SkyThemeModule,
|
|
2976
|
-
], 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 sky-file-upload-icon-target\"\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 sky-file-upload-icon-close\"\n iconName=\"prohibited\"\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.url) {\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-drag-contents-border-style: dashed;--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-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}: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-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));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))}.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:var(--sky-override-file-drop-drag-contents-border-style, solid);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));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.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: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-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-override-file-drop-link-input-background-color, var(--bb-color-white) );--sky-comp-override-input-box-group-background-color-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-style-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-style-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-default));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-style-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"] }]
|
|
2999
|
+
], 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 sky-file-upload-icon-target\"\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 sky-file-upload-icon-close\"\n iconName=\"prohibited\"\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.url) {\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-drag-contents-border-style: dashed;--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-hover-border: #cdcfd2 solid 1px;--sky-override-file-upload-icon-color: #686c73;--sky-override-file-drop-upload-icon-margin-top: 10px}: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-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left));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))}.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:var(--sky-override-file-drop-drag-contents-border-style, solid);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));border-width:var(--sky-override-file-drop-drag-border-width, var(--sky-border-width-input-error))}.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: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-upload-icon-close{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-danger))}.sky-file-upload-icon-target{color:var(--sky-override-file-upload-icon-color, var(--sky-color-icon-success))}.sky-file-drop-link{cursor:default}.sky-file-drop-link sky-input-box{--sky-comp-override-input-box-group-background-color: var( --sky-override-file-drop-link-input-background-color, var(--sky-color-background-input-base) );--sky-comp-override-input-box-group-background-color-focused: var( --sky-override-file-drop-link-input-background-color, var(--sky-color-background-input-base) );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-style-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-style-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-default));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-style-input-label);letter-spacing:var(--sky-font-letter_spacing-input-label);line-height:var(--sky-font-line_height-input-label)}\n"] }]
|
|
2977
3000
|
}], ctorParameters: () => [], propDecorators: { filesChanged: [{
|
|
2978
3001
|
type: Output
|
|
2979
3002
|
}], linkInputBlur: [{
|
|
@@ -3164,10 +3187,10 @@ class SkyFileItemComponent {
|
|
|
3164
3187
|
});
|
|
3165
3188
|
}
|
|
3166
3189
|
}
|
|
3167
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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\" />\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 if (icon) {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xxxl\" [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: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-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.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-style-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-style-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: "ngmodule", type: SkyFormsResourcesModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3169
3192
|
}
|
|
3170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileItemComponent, decorators: [{
|
|
3171
3194
|
type: Component,
|
|
3172
3195
|
args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', changeDetection: ChangeDetectionStrategy.Eager, 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\" />\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 if (icon) {\n <div class=\"sky-file-item-preview-other\">\n <sky-icon iconSize=\"xxxl\" [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: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-comp-file_drop-content-space-inset-top) var(--sky-comp-file_drop-content-space-inset-right) var(--sky-comp-file_drop-content-space-inset-bottom) var(--sky-comp-file_drop-content-space-inset-left))}.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-style-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-style-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"] }]
|
|
3173
3196
|
}], propDecorators: { fileItem: [{
|
|
@@ -3177,11 +3200,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
3177
3200
|
}] } });
|
|
3178
3201
|
|
|
3179
3202
|
class SkyFileDropModule {
|
|
3180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3181
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
3182
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
3203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3204
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent], exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
|
|
3205
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
|
|
3183
3206
|
}
|
|
3184
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileDropModule, decorators: [{
|
|
3185
3208
|
type: NgModule,
|
|
3186
3209
|
args: [{
|
|
3187
3210
|
exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule],
|
|
@@ -3193,11 +3216,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
3193
3216
|
* @deprecated Import either `SkyFileAttachmentModule` or `SkyFileDropModule`.
|
|
3194
3217
|
*/
|
|
3195
3218
|
class SkyFileAttachmentsModule {
|
|
3196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3197
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
3198
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
3219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3220
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule], exports: [SkyFileAttachmentModule, SkyFileDropModule] }); }
|
|
3221
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule, SkyFileAttachmentModule, SkyFileDropModule] }); }
|
|
3199
3222
|
}
|
|
3200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
|
|
3201
3224
|
type: NgModule,
|
|
3202
3225
|
args: [{
|
|
3203
3226
|
exports: [SkyFileAttachmentModule, SkyFileDropModule],
|
|
@@ -3245,10 +3268,10 @@ class SkyRadioGroupIdService {
|
|
|
3245
3268
|
#emitRadioIds() {
|
|
3246
3269
|
this.#radioIds$.next(Array.from(this.#radioIds.values()));
|
|
3247
3270
|
}
|
|
3248
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3249
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
3271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioGroupIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3272
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioGroupIdService }); }
|
|
3250
3273
|
}
|
|
3251
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioGroupIdService, decorators: [{
|
|
3252
3275
|
type: Injectable
|
|
3253
3276
|
}], ctorParameters: () => [] });
|
|
3254
3277
|
|
|
@@ -3549,10 +3572,10 @@ class SkyRadioComponent {
|
|
|
3549
3572
|
#onChangeCallback;
|
|
3550
3573
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3551
3574
|
#onTouchedCallback;
|
|
3552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3575
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3576
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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", 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': iconName,\n 'sky-rounded-circle': !iconName,\n 'sky-switch-control-info': iconName && radioType === 'info',\n 'sky-switch-control-success': iconName && radioType === 'success',\n 'sky-switch-control-warning': iconName && radioType === 'warning',\n 'sky-switch-control-danger': iconName && radioType === 'danger'\n }\"\n >\n @if (iconName) {\n <sky-icon [iconName]=\"iconName\" />\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-border-color-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-checked-active: 2px;--sky-override-radio-border-width-checked-hover: 2px;--sky-override-radio-border-color-icon-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-icon-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-icon-checked-active: 2px;--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: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-xxs));height:var(--sky-override-radio-icon-size, var(--sky-size-icon-xxs));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-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-active, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control.sky-switch-control-icon{border-width:var(--sky-override-radio-border-width-icon-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-icon-checked-active, var(--sky-color-border-selected))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-hover, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-hover, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control.sky-switch-control-icon{border-color:var(--sky-override-radio-border-color-icon-checked-hover, var(--sky-color-border-selected))}.sky-radio-hint-text{margin:var(--sky-override-radio-hint-text-inset, var(--sky-space-gap-stacked_supplemental-xs) 0 0 var(--sky-space-inset-switch))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i4.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3554
3577
|
}
|
|
3555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioComponent, decorators: [{
|
|
3556
3579
|
type: Component,
|
|
3557
3580
|
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': iconName,\n 'sky-rounded-circle': !iconName,\n 'sky-switch-control-info': iconName && radioType === 'info',\n 'sky-switch-control-success': iconName && radioType === 'success',\n 'sky-switch-control-warning': iconName && radioType === 'warning',\n 'sky-switch-control-danger': iconName && radioType === 'danger'\n }\"\n >\n @if (iconName) {\n <sky-icon [iconName]=\"iconName\" />\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-border-color-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-checked-active: 2px;--sky-override-radio-border-width-checked-hover: 2px;--sky-override-radio-border-color-icon-checked-active: var( --sky-highlight-color-info );--sky-override-radio-border-color-icon-checked-hover: var( --sky-highlight-color-info );--sky-override-radio-border-width-icon-checked-active: 2px;--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: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-xxs));height:var(--sky-override-radio-icon-size, var(--sky-size-icon-xxs));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-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-active, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:active+.sky-switch-control.sky-switch-control-icon{border-width:var(--sky-override-radio-border-width-icon-checked-active, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-icon-checked-active, var(--sky-color-border-selected))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control{border-width:var(--sky-override-radio-border-width-checked-hover, var(--sky-border-width-selected-s));border-color:var(--sky-override-radio-border-color-checked-hover, var(--sky-color-border-switch-selected-base))}.sky-switch-input:checked:not(:disabled).sky-radio-input:hover:not(:active)+.sky-switch-control.sky-switch-control-icon{border-color:var(--sky-override-radio-border-color-icon-checked-hover, var(--sky-color-border-selected))}.sky-radio-hint-text{margin:var(--sky-override-radio-hint-text-inset, var(--sky-space-gap-stacked_supplemental-xs) 0 0 var(--sky-space-inset-switch))}\n"] }]
|
|
3558
3581
|
}], ctorParameters: () => [], propDecorators: { checked: [{
|
|
@@ -3904,13 +3927,13 @@ class SkyRadioGroupComponent {
|
|
|
3904
3927
|
this.stackedLg = !this.headingLevel && this.stacked;
|
|
3905
3928
|
this.stackedXL = !!this.headingLevel && this.stacked;
|
|
3906
3929
|
}
|
|
3907
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
3930
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3931
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
|
|
3909
3932
|
SkyRadioGroupIdService,
|
|
3910
3933
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
3911
|
-
], 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.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type:
|
|
3934
|
+
], 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.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3912
3935
|
}
|
|
3913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
|
|
3914
3937
|
type: Component,
|
|
3915
3938
|
args: [{ selector: 'sky-radio-group', providers: [
|
|
3916
3939
|
SkyRadioGroupIdService,
|
|
@@ -3984,10 +4007,10 @@ class SkyRadioLabelComponent {
|
|
|
3984
4007
|
replacementRecommendation: 'To add a label to radio button, use the `labelText` input on the radio button component instead.',
|
|
3985
4008
|
});
|
|
3986
4009
|
}
|
|
3987
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
3988
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
4010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
3989
4012
|
}
|
|
3990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
|
|
3991
4014
|
type: Component,
|
|
3992
4015
|
args: [{ selector: 'sky-radio-label', changeDetection: ChangeDetectionStrategy.Eager, 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" }]
|
|
3993
4016
|
}], ctorParameters: () => [], propDecorators: { onClick: [{
|
|
@@ -3996,8 +4019,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
3996
4019
|
}] } });
|
|
3997
4020
|
|
|
3998
4021
|
class SkyRadioModule {
|
|
3999
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4000
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
4022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4023
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
|
|
4001
4024
|
SkyRadioGroupComponent,
|
|
4002
4025
|
SkyRadioLabelComponent], imports: [CommonModule,
|
|
4003
4026
|
FormsModule,
|
|
@@ -4012,7 +4035,7 @@ class SkyRadioModule {
|
|
|
4012
4035
|
SkyRadioComponent,
|
|
4013
4036
|
SkyRadioGroupComponent,
|
|
4014
4037
|
SkyRadioLabelComponent] }); }
|
|
4015
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
4038
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioModule, imports: [CommonModule,
|
|
4016
4039
|
FormsModule,
|
|
4017
4040
|
SkyFormErrorModule,
|
|
4018
4041
|
SkyFormErrorsModule,
|
|
@@ -4023,7 +4046,7 @@ class SkyRadioModule {
|
|
|
4023
4046
|
SkyTrimModule,
|
|
4024
4047
|
SkyThemeModule, SkyFormErrorModule] }); }
|
|
4025
4048
|
}
|
|
4026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRadioModule, decorators: [{
|
|
4027
4050
|
type: NgModule,
|
|
4028
4051
|
args: [{
|
|
4029
4052
|
declarations: [
|
|
@@ -4070,10 +4093,10 @@ class SkyRequiredStateDirective {
|
|
|
4070
4093
|
!!this.#ngControl?.control?.hasValidator(Validators.required));
|
|
4071
4094
|
}
|
|
4072
4095
|
#ngControl;
|
|
4073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4074
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.
|
|
4096
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRequiredStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4097
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.2", type: SkyRequiredStateDirective, isStandalone: true, inputs: { required: ["required", "required", booleanAttribute] }, ngImport: i0 }); }
|
|
4075
4098
|
}
|
|
4076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyRequiredStateDirective, decorators: [{
|
|
4077
4100
|
type: Directive,
|
|
4078
4101
|
args: [{}]
|
|
4079
4102
|
}], propDecorators: { required: [{
|
|
@@ -4197,10 +4220,10 @@ class SkySelectionBoxAdapterService {
|
|
|
4197
4220
|
const el = element.nativeElement;
|
|
4198
4221
|
el.tabIndex = tabIndex;
|
|
4199
4222
|
}
|
|
4200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4201
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.
|
|
4223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4224
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxAdapterService }); }
|
|
4202
4225
|
}
|
|
4203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4226
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
|
|
4204
4227
|
type: Injectable
|
|
4205
4228
|
}], ctorParameters: () => [] });
|
|
4206
4229
|
|
|
@@ -4208,10 +4231,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4208
4231
|
* Specifies the description to display in a selection box.
|
|
4209
4232
|
*/
|
|
4210
4233
|
class SkySelectionBoxDescriptionComponent {
|
|
4211
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4212
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
4234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySelectionBoxDescriptionComponent, isStandalone: false, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4213
4236
|
}
|
|
4214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
|
|
4215
4238
|
type: Component,
|
|
4216
4239
|
args: [{ selector: 'sky-selection-box-description', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ng-content />\n" }]
|
|
4217
4240
|
}] });
|
|
@@ -4315,10 +4338,10 @@ class SkySelectionBoxComponent {
|
|
|
4315
4338
|
});
|
|
4316
4339
|
}
|
|
4317
4340
|
}
|
|
4318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4319
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
4341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4342
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", 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 (keydown)=\"onKeydown($event)\"\n>\n <div\n #icon\n class=\"sky-selection-box-icon\"\n [ngClass]=\"{\n 'sky-selection-box-icon-hidden': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div class=\"sky-selection-box-header sky-font-display-2\">\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div class=\"sky-selection-box-description sky-font-deemphasized\">\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:not(.sky-theme-modern *){--sky-override-selection-box-background-hover: #ffffff;--sky-override-selection-box-background-selected: #f1eef6;--sky-override-selection-box-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-box-shadow-hover: 0px 0px 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px #00b4f1;--sky-override-selection-box-box-shadow-selected: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-content-margin-right: 10px;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 0;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-icon-background: transparent;--sky-override-selection-box-icon-border-radius: 0;--sky-override-selection-box-icon-color: #0974a1;--sky-override-selection-box-icon-margin: 10px;--sky-override-selection-box-icon-size: 42px;--sky-override-selection-box-padding: 15px 15px 15px 15px;--sky-override-selection-box-switch-border-hover: solid 1px #00b4f1;--sky-override-selection-box-switch-control-outline-hover: auto;--sky-override-selection-box-switch-control-box-shadow-focus: none;--sky-override-selection-box-switch-control-border-focus: 1px solid #cdcfd2;--sky-override-selection-box-background-color-disabled: #eeeeef;--sky-override-selection-box-icon-color-disabled: #686c73;--sky-override-selection-box-icon-background-color-disabled: transparent;--sky-override-selection-box-header-color-disabled: var( --sky-text-color-default )}.sky-selection-box{display:flex;flex-flow:row nowrap;text-align:left}.sky-selection-box.sky-btn-default:not(.sky-selection-box-disabled){box-shadow:var(--sky-override-selection-box-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default{padding:var(--sky-override-selection-box-padding, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box.sky-btn-default:hover{background:var(--sky-override-selection-box-background-hover, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover .sky-switch-control{border:var(--sky-override-selection-box-switch-border-hover, solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover.sky-selection-box-selected:not(:has(sky-radio)){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:active{background:var(--sky-color-background-action-secondary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active)}.sky-selection-box.sky-btn-default:active .sky-switch-control{border:solid var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active)}.sky-selection-box.sky-btn-default:active.sky-selection-box-selected:not(:has(sky-radio)){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-action-secondary-active));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active))}.sky-selection-box.sky-btn-default:focus-visible:not(:active){background:var(--sky-color-background-action-secondary-focus)}.sky-selection-box.sky-btn-default:focus-visible:not(:active) .sky-switch-control .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-selection-box.sky-btn-default:focus-visible:not(:active) .sky-switch-control{outline:var(--sky-override-selection-box-switch-control-outline-hover, none);border:var(--sky-override-selection-box-switch-control-border-focus, none);box-shadow:var(--sky-override-selection-box-switch-control-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default:focus-visible:not(:active).sky-selection-box-selected:not(:has(sky-radio)){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-action-secondary-focus));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default.sky-selection-box-selected:not(:active):not(:hover):not(:focus-visible),.sky-selection-box.sky-btn-default.sky-selection-box-selected:has(sky-radio){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default.sky-selection-box-disabled{background:var(--sky-override-selection-box-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box.sky-btn-default.sky-selection-box-disabled .sky-selection-box-header{color:var(--sky-override-selection-box-header-color-disabled, var(--sky-color-text-deemphasized))}.sky-selection-box.sky-btn-default.sky-selection-box-disabled .sky-selection-box-icon{color:var(--sky-override-selection-box-icon-color-disabled, var(--sky-color-icon-deemphasized));background:var(--sky-override-selection-box-icon-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box .sky-selection-box-icon{background:var(--sky-override-selection-box-icon-background, var(--sky-color-background-icon_matte-action-soft));color:var(--sky-override-selection-box-icon-color, var(--sky-color-icon-action));margin:0 var(--sky-override-selection-box-icon-margin, var(--sky-space-inline-m)) 0 0;width:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));height:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));border-radius:var(--sky-override-selection-box-icon-border-radius, var(--sky-border-radius-round));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-icon.sky-selection-box-icon-hidden{display:none}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 var(--sky-override-selection-box-content-margin-right, var(--sky-space-inline-xl)) 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:var(--sky-override-selection-box-header-padding-top, 0)}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:var(--sky-override-selection-box-control-padding-top, 0)}.sky-selection-box .sky-selection-box-description{margin-top:var(--sky-override-selection-box-description-margin-top, var(--sky-space-stacked-xs))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4320
4343
|
}
|
|
4321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
|
|
4322
4345
|
type: Component,
|
|
4323
4346
|
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 (keydown)=\"onKeydown($event)\"\n>\n <div\n #icon\n class=\"sky-selection-box-icon\"\n [ngClass]=\"{\n 'sky-selection-box-icon-hidden': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div class=\"sky-selection-box-header sky-font-display-2\">\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div class=\"sky-selection-box-description sky-font-deemphasized\">\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:not(.sky-theme-modern *){--sky-override-selection-box-background-hover: #ffffff;--sky-override-selection-box-background-selected: #f1eef6;--sky-override-selection-box-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-box-shadow-hover: 0px 0px 5px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px #00b4f1;--sky-override-selection-box-box-shadow-selected: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-selection-box-content-margin-right: 10px;--sky-override-selection-box-control-padding-top: 5px;--sky-override-selection-box-description-margin-top: 0;--sky-override-selection-box-header-padding-top: 3px;--sky-override-selection-box-icon-background: transparent;--sky-override-selection-box-icon-border-radius: 0;--sky-override-selection-box-icon-color: #0974a1;--sky-override-selection-box-icon-margin: 10px;--sky-override-selection-box-icon-size: 42px;--sky-override-selection-box-padding: 15px 15px 15px 15px;--sky-override-selection-box-switch-border-hover: solid 1px #00b4f1;--sky-override-selection-box-switch-control-outline-hover: auto;--sky-override-selection-box-switch-control-box-shadow-focus: none;--sky-override-selection-box-switch-control-border-focus: 1px solid #cdcfd2;--sky-override-selection-box-background-color-disabled: #eeeeef;--sky-override-selection-box-icon-color-disabled: #686c73;--sky-override-selection-box-icon-background-color-disabled: transparent;--sky-override-selection-box-header-color-disabled: var( --sky-text-color-default )}.sky-selection-box{display:flex;flex-flow:row nowrap;text-align:left}.sky-selection-box.sky-btn-default:not(.sky-selection-box-disabled){box-shadow:var(--sky-override-selection-box-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default{padding:var(--sky-override-selection-box-padding, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box.sky-btn-default:hover{background:var(--sky-override-selection-box-background-hover, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-hover, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover .sky-switch-control{border:var(--sky-override-selection-box-switch-border-hover, solid var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:hover.sky-selection-box-selected:not(:has(sky-radio)){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-action-secondary-hover));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-secondary-hover))}.sky-selection-box.sky-btn-default:active{background:var(--sky-color-background-action-secondary-active);box-shadow:inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active)}.sky-selection-box.sky-btn-default:active .sky-switch-control{border:solid var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active)}.sky-selection-box.sky-btn-default:active.sky-selection-box-selected:not(:has(sky-radio)){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-action-secondary-active));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-secondary-active))}.sky-selection-box.sky-btn-default:focus-visible:not(:active){background:var(--sky-color-background-action-secondary-focus)}.sky-selection-box.sky-btn-default:focus-visible:not(:active) .sky-switch-control .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-selection-box.sky-btn-default:focus-visible:not(:active) .sky-switch-control{outline:var(--sky-override-selection-box-switch-control-outline-hover, none);border:var(--sky-override-selection-box-switch-control-border-focus, none);box-shadow:var(--sky-override-selection-box-switch-control-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default:focus-visible:not(:active).sky-selection-box-selected:not(:has(sky-radio)){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-action-secondary-focus));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-secondary-focus))}.sky-selection-box.sky-btn-default.sky-selection-box-selected:not(:active):not(:hover):not(:focus-visible),.sky-selection-box.sky-btn-default.sky-selection-box-selected:has(sky-radio){background:var(--sky-override-selection-box-background-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-selection-box-box-shadow-selected, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base))}.sky-selection-box.sky-btn-default.sky-selection-box-disabled{background:var(--sky-override-selection-box-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box.sky-btn-default.sky-selection-box-disabled .sky-selection-box-header{color:var(--sky-override-selection-box-header-color-disabled, var(--sky-color-text-deemphasized))}.sky-selection-box.sky-btn-default.sky-selection-box-disabled .sky-selection-box-icon{color:var(--sky-override-selection-box-icon-color-disabled, var(--sky-color-icon-deemphasized));background:var(--sky-override-selection-box-icon-background-color-disabled, var(--sky-color-background-action-secondary-disabled))}.sky-selection-box .sky-selection-box-icon{background:var(--sky-override-selection-box-icon-background, var(--sky-color-background-icon_matte-action-soft));color:var(--sky-override-selection-box-icon-color, var(--sky-color-icon-action));margin:0 var(--sky-override-selection-box-icon-margin, var(--sky-space-inline-m)) 0 0;width:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));height:var(--sky-override-selection-box-icon-size, calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2));border-radius:var(--sky-override-selection-box-icon-border-radius, var(--sky-border-radius-round));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-icon.sky-selection-box-icon-hidden{display:none}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 var(--sky-override-selection-box-content-margin-right, var(--sky-space-inline-xl)) 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:var(--sky-override-selection-box-header-padding-top, 0)}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:var(--sky-override-selection-box-control-padding-top, 0)}.sky-selection-box .sky-selection-box-description{margin-top:var(--sky-override-selection-box-description-margin-top, var(--sky-space-stacked-xs))}\n"] }]
|
|
4324
4347
|
}], propDecorators: { control: [{
|
|
@@ -4435,10 +4458,10 @@ class SkySelectionBoxGridComponent {
|
|
|
4435
4458
|
this.#coreAdapterService.syncMaxHeight(this.containerElementRef, SKY_SELECTION_BOX_CLASS_NAME);
|
|
4436
4459
|
}
|
|
4437
4460
|
}
|
|
4438
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
4461
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4462
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySelectionBoxGridComponent, isStandalone: false, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, 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: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-family-no-icon: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-collapsed-space-inset-top) var(--sky-comp-selection_box-collapsed-space-inset-right) var(--sky-comp-selection_box-collapsed-space-inset-bottom) var(--sky-comp-selection_box-collapsed-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4440
4463
|
}
|
|
4441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
4442
4465
|
type: Component,
|
|
4443
4466
|
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: [".sky-selection-box-grid:not(.sky-theme-modern *){--sky-override-selection-box-grid-margin-bottom: -15px;--sky-override-selection-box-grid-padding-horizontal: 7.5px;--sky-override-selection-box-margin-horizontal: 7.5px;--sky-override-selection-box-margin-bottom: 15px;--sky-override-selection-box-padding-responsive: 15px 15px 15px 15px;--sky-override-selection-box-header-heading-2-font-size: 26px;--sky-override-selection-box-header-heading-2-font-weight: 300;--sky-override-selection-box-header-heading-2-line-height: calc(20 / 14);--sky-override-selection-box-header-heading-3-color-no-icon: var( --sky-text-color-deemphasized );--sky-override-selection-box-header-heading-3-font-family: BLKB Sans Condensed, Helvetica Neue Condensed, Arial Narrow;--sky-override-selection-box-header-heading-3-font-family-no-icon: BLKB Sans, Helvetica Neue, Arial, sans-serif;--sky-override-selection-box-header-heading-3-font-size: 20px;--sky-override-selection-box-header-heading-3-font-size-no-icon: 19px;--sky-override-selection-box-header-heading-3-font-size-no-icon-sm: 20px;--sky-override-selection-box-header-heading-3-font-weight: 400;--sky-override-selection-box-header-heading-3-font-weight-no-icon: 300;--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm: 400;--sky-override-selection-box-header-heading-3-line-height: calc(20 / 14)}:host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 var(--sky-override-selection-box-grid-padding-horizontal, calc(var(--sky-space-gap-action_group-l) / 2));margin:0 auto var(--sky-override-selection-box-grid-margin-bottom, calc(var(--sky-space-stacked-m) * -1))}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 var(--sky-override-selection-box-margin-horizontal, calc(var(--sky-space-gap-action_group-l) / 2)) var(--sky-override-selection-box-margin-bottom, var(--sky-space-stacked-m));height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-collapsed-space-inset-top) var(--sky-comp-selection_box-collapsed-space-inset-right) var(--sky-comp-selection_box-collapsed-space-inset-bottom) var(--sky-comp-selection_box-collapsed-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:var(--sky-override-selection-box-padding-responsive, var(--sky-comp-selection_box-expanded-space-inset-top) var(--sky-comp-selection_box-expanded-space-inset-right) var(--sky-comp-selection_box-expanded-space-inset-bottom) var(--sky-comp-selection_box-expanded-space-inset-left))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-family:var(--sky-override-selection-box-header-heading-3-font-family, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon-sm, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon-sm, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-md .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-header{font-size:var(--sky-override-selection-box-header-heading-2-font-size, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-2-font-weight, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-2-line-height, var(--sky-font-line_height-display-2))}.sky-selection-box-grid.sky-selection-box-container-lg .sky-selection-box .sky-selection-box-icon-hidden+.sky-selection-box-content .sky-selection-box-header{color:var(--sky-override-selection-box-header-heading-3-color-no-icon, var(--sky-color-text-default));font-family:var(--sky-override-selection-box-header-heading-3-font-family-no-icon, var(--sky-font-family-primary));font-size:var(--sky-override-selection-box-header-heading-3-font-size-no-icon, var(--sky-font-size-display-2));font-weight:var(--sky-override-selection-box-header-heading-3-font-weight-no-icon, var(--sky-font-style-display-2));line-height:var(--sky-override-selection-box-header-heading-3-line-height, var(--sky-font-line_height-display-2))}\n"] }]
|
|
4444
4467
|
}], propDecorators: { alignItems: [{
|
|
@@ -4463,26 +4486,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4463
4486
|
* Specifies the header to display in a selection box.
|
|
4464
4487
|
*/
|
|
4465
4488
|
class SkySelectionBoxHeaderComponent {
|
|
4466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
4489
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkySelectionBoxHeaderComponent, isStandalone: false, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content />\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
4468
4491
|
}
|
|
4469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
|
|
4470
4493
|
type: Component,
|
|
4471
4494
|
args: [{ selector: 'sky-selection-box-header', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<ng-content />\n" }]
|
|
4472
4495
|
}] });
|
|
4473
4496
|
|
|
4474
4497
|
class SkySelectionBoxModule {
|
|
4475
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4476
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
4498
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4499
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
|
|
4477
4500
|
SkySelectionBoxComponent,
|
|
4478
4501
|
SkySelectionBoxDescriptionComponent,
|
|
4479
4502
|
SkySelectionBoxHeaderComponent], imports: [CommonModule, SkyThemeModule], exports: [SkySelectionBoxGridComponent,
|
|
4480
4503
|
SkySelectionBoxComponent,
|
|
4481
4504
|
SkySelectionBoxDescriptionComponent,
|
|
4482
4505
|
SkySelectionBoxHeaderComponent] }); }
|
|
4483
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
4506
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [CommonModule, SkyThemeModule] }); }
|
|
4484
4507
|
}
|
|
4485
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
|
|
4486
4509
|
type: NgModule,
|
|
4487
4510
|
args: [{
|
|
4488
4511
|
declarations: [
|
|
@@ -4502,27 +4525,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4502
4525
|
}]
|
|
4503
4526
|
}] });
|
|
4504
4527
|
|
|
4505
|
-
/**
|
|
4506
|
-
* Specifies the label to display beside the toggle switch. To display a help button beside the label, include a help
|
|
4507
|
-
* button element, such as `sky-help-inline`, in the `sky-toggle-switch` element and a `sky-control-help` CSS class on
|
|
4508
|
-
* that help button element.
|
|
4509
|
-
* @deprecated Use the `labelText` input on the toggle switch component instead.
|
|
4510
|
-
*/
|
|
4511
|
-
class SkyToggleSwitchLabelComponent {
|
|
4512
|
-
constructor() {
|
|
4513
|
-
inject(SkyLogService).deprecated('SkyToggleSwitchLabelComponent', {
|
|
4514
|
-
deprecationMajorVersion: 9,
|
|
4515
|
-
replacementRecommendation: 'To add a label to toggle switch, use the `labelText` input on the toggle switch component instead.',
|
|
4516
|
-
});
|
|
4517
|
-
}
|
|
4518
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: SkyToggleSwitchLabelComponent, isStandalone: false, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4520
|
-
}
|
|
4521
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
|
|
4522
|
-
type: Component,
|
|
4523
|
-
args: [{ selector: 'sky-toggle-switch-label', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span skyTrim><ng-content /></span>\n" }]
|
|
4524
|
-
}], ctorParameters: () => [] });
|
|
4525
|
-
|
|
4526
4528
|
const SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR = {
|
|
4527
4529
|
provide: NG_VALUE_ACCESSOR,
|
|
4528
4530
|
useExisting: forwardRef(() => SkyToggleSwitchComponent),
|
|
@@ -4538,7 +4540,7 @@ class SkyToggleSwitchComponent {
|
|
|
4538
4540
|
* The ARIA label for the toggle switch. This sets the `aria-label`
|
|
4539
4541
|
* attribute to provide a text equivalent for screen readers [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
|
|
4540
4542
|
* Use a context-sensitive label, such as "Activate annual fundraiser" for a toggle switch that activates and deactivates an annual fundraiser. Context is especially important if multiple toggle switches are in close proximity.
|
|
4541
|
-
*
|
|
4543
|
+
* This property only applies when `labelText` is not set, since `labelText` takes precedence when both inputs are provided.
|
|
4542
4544
|
* For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).
|
|
4543
4545
|
* @deprecated Use the `labelText` input instead.
|
|
4544
4546
|
*/
|
|
@@ -4577,7 +4579,6 @@ class SkyToggleSwitchComponent {
|
|
|
4577
4579
|
#control;
|
|
4578
4580
|
#isFirstChange;
|
|
4579
4581
|
#logSvc;
|
|
4580
|
-
#ngUnsubscribe;
|
|
4581
4582
|
#_ariaLabel;
|
|
4582
4583
|
#_checked;
|
|
4583
4584
|
#changeDetector;
|
|
@@ -4600,11 +4601,9 @@ class SkyToggleSwitchComponent {
|
|
|
4600
4601
|
* Fires when the checked state of a toggle switch changes.
|
|
4601
4602
|
*/
|
|
4602
4603
|
this.toggleChange = new EventEmitter();
|
|
4603
|
-
this.hasLabelComponent = false;
|
|
4604
4604
|
this.enableIndicatorAnimation = false;
|
|
4605
4605
|
this.#isFirstChange = true;
|
|
4606
4606
|
this.#logSvc = inject(SkyLogService);
|
|
4607
|
-
this.#ngUnsubscribe = new Subject();
|
|
4608
4607
|
this.#_checked = false;
|
|
4609
4608
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
4610
4609
|
/* istanbul ignore next */
|
|
@@ -4614,28 +4613,12 @@ class SkyToggleSwitchComponent {
|
|
|
4614
4613
|
this.labelId = inject(SkyIdService).generateId();
|
|
4615
4614
|
}
|
|
4616
4615
|
ngAfterContentInit() {
|
|
4617
|
-
/* istanbul ignore else */
|
|
4618
|
-
if (this.labelComponents) {
|
|
4619
|
-
this.hasLabelComponent = this.labelComponents.length > 0;
|
|
4620
|
-
this.labelComponents.changes
|
|
4621
|
-
.pipe(takeUntil(this.#ngUnsubscribe))
|
|
4622
|
-
.subscribe((newLabelComponents) => {
|
|
4623
|
-
this.hasLabelComponent = newLabelComponents.length > 0;
|
|
4624
|
-
// Allow the template to reload any ARIA attributes that are relying on the
|
|
4625
|
-
// label component existing in the DOM.
|
|
4626
|
-
this.#changeDetector.markForCheck();
|
|
4627
|
-
});
|
|
4628
|
-
}
|
|
4629
4616
|
// Wait for the view to render before applying animation effects.
|
|
4630
4617
|
// (Some browsers, such as Firefox, apply the animation too early.)
|
|
4631
4618
|
setTimeout(() => {
|
|
4632
4619
|
this.enableIndicatorAnimation = true;
|
|
4633
4620
|
});
|
|
4634
4621
|
}
|
|
4635
|
-
ngOnDestroy() {
|
|
4636
|
-
this.#ngUnsubscribe.next();
|
|
4637
|
-
this.#ngUnsubscribe.complete();
|
|
4638
|
-
}
|
|
4639
4622
|
writeValue(value) {
|
|
4640
4623
|
this.checked = !!value;
|
|
4641
4624
|
this.#changeDetector.markForCheck();
|
|
@@ -4677,18 +4660,18 @@ class SkyToggleSwitchComponent {
|
|
|
4677
4660
|
#toggleChecked() {
|
|
4678
4661
|
this.checked = !this.checked;
|
|
4679
4662
|
}
|
|
4680
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4681
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
4663
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: [
|
|
4682
4665
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
4683
4666
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
4684
|
-
], 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 <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\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: #00b4f1;--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-active: 2px;--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-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-color-disabled: var( --sky-text-color-default );--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: 0;--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}.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-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-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 var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short))}.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-switch-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:none}.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-switch-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):not(:active) .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-switch-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:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.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-switch-selected-base));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:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.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:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-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+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.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 var(--sky-global-duration-short)}\n"], dependencies: [{ kind: "directive", type: i1.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: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4667
|
+
], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': 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]=\"!ariaLabel && labelText ? labelId : null\"\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 (labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (!labelHidden) {\n <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\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: #00b4f1;--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-active: 2px;--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-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-color-disabled: var( --sky-text-color-default );--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: 0;--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}.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-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-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 var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short))}.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-switch-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:none}.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-switch-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):not(:active) .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-switch-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:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.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-switch-selected-base));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:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.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:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-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+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.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 var(--sky-global-duration-short)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i5.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4685
4668
|
}
|
|
4686
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4669
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
|
|
4687
4670
|
type: Component,
|
|
4688
4671
|
args: [{ selector: 'sky-toggle-switch', providers: [
|
|
4689
4672
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
4690
4673
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
4691
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\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: #00b4f1;--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-active: 2px;--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-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-color-disabled: var( --sky-text-color-default );--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: 0;--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}.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-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-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 var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short))}.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-switch-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:none}.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-switch-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):not(:active) .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-switch-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:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.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-switch-selected-base));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:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.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:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-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+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.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 var(--sky-global-duration-short)}\n"] }]
|
|
4674
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': 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]=\"!ariaLabel && labelText ? labelId : null\"\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 (labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (!labelHidden) {\n <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\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: #00b4f1;--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-active: 2px;--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-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-color-disabled: var( --sky-text-color-default );--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: 0;--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}.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-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-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 var(--sky-global-duration-short), box-shadow var(--sky-global-duration-short))}.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-switch-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:none}.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-switch-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):not(:active) .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-switch-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:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-switch-base));background-origin:border-box}.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-switch-selected-base));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:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.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:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-selected-switch-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-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+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.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 var(--sky-global-duration-short)}\n"] }]
|
|
4692
4675
|
}], ctorParameters: () => [], propDecorators: { ariaLabel: [{
|
|
4693
4676
|
type: Input
|
|
4694
4677
|
}], checked: [{
|
|
@@ -4710,28 +4693,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4710
4693
|
type: Input
|
|
4711
4694
|
}], toggleChange: [{
|
|
4712
4695
|
type: Output
|
|
4713
|
-
}], labelComponents: [{
|
|
4714
|
-
type: ContentChildren,
|
|
4715
|
-
args: [SkyToggleSwitchLabelComponent]
|
|
4716
4696
|
}] } });
|
|
4717
4697
|
|
|
4718
4698
|
class SkyToggleSwitchModule {
|
|
4719
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
4720
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
4699
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4700
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchComponent], imports: [CommonModule,
|
|
4721
4701
|
FormsModule,
|
|
4722
4702
|
SkyHelpInlineModule,
|
|
4723
4703
|
SkyIdModule,
|
|
4724
|
-
SkyTrimModule], exports: [
|
|
4725
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
4704
|
+
SkyTrimModule], exports: [SkyToggleSwitchComponent] }); }
|
|
4705
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyToggleSwitchModule, imports: [CommonModule,
|
|
4726
4706
|
FormsModule,
|
|
4727
4707
|
SkyHelpInlineModule,
|
|
4728
4708
|
SkyIdModule,
|
|
4729
4709
|
SkyTrimModule] }); }
|
|
4730
4710
|
}
|
|
4731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
4711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
|
|
4732
4712
|
type: NgModule,
|
|
4733
4713
|
args: [{
|
|
4734
|
-
declarations: [
|
|
4714
|
+
declarations: [SkyToggleSwitchComponent],
|
|
4735
4715
|
imports: [
|
|
4736
4716
|
CommonModule,
|
|
4737
4717
|
FormsModule,
|
|
@@ -4739,7 +4719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4739
4719
|
SkyIdModule,
|
|
4740
4720
|
SkyTrimModule,
|
|
4741
4721
|
],
|
|
4742
|
-
exports: [
|
|
4722
|
+
exports: [SkyToggleSwitchComponent],
|
|
4743
4723
|
}]
|
|
4744
4724
|
}] });
|
|
4745
4725
|
|
|
@@ -4747,5 +4727,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
4747
4727
|
* Generated bundle index. Do not edit.
|
|
4748
4728
|
*/
|
|
4749
4729
|
|
|
4750
|
-
export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17,
|
|
4730
|
+
export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
|
|
4751
4731
|
//# sourceMappingURL=skyux-forms.mjs.map
|