@skyux/forms 11.0.0-alpha.11 → 11.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +1808 -1808
- package/esm2022/lib/modules/checkbox/checkbox-group.component.mjs +3 -3
- package/esm2022/lib/modules/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/modules/file-attachment/file-attachment/file-attachment.component.mjs +4 -4
- package/esm2022/lib/modules/file-attachment/file-drop/file-drop.component.mjs +3 -3
- package/esm2022/lib/modules/form-error/form-errors.component.mjs +16 -12
- package/esm2022/lib/modules/input-box/input-box.component.mjs +3 -3
- package/esm2022/lib/modules/radio/radio-group.component.mjs +3 -3
- package/esm2022/lib/modules/radio/radio.component.mjs +2 -2
- package/fesm2022/skyux-forms.mjs +55 -49
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/lib/modules/form-error/form-errors.component.d.ts +9 -5
- package/package.json +9 -9
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import * as i2 from '@angular/common';
|
|
2
2
|
import { CommonModule, formatNumber } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, numberAttribute,
|
|
5
|
-
import * as i3
|
|
4
|
+
import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, booleanAttribute, HostBinding, numberAttribute, Injectable, ChangeDetectorRef, EventEmitter, ElementRef, Output, ViewChild, Self, Optional, ContentChildren, RendererFactory2, Renderer2, input, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
|
|
5
|
+
import * as i3 from '@angular/forms';
|
|
6
6
|
import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormControlDirective, FormControlName, NgModel, NgControl } from '@angular/forms';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i1 from '@skyux/i18n';
|
|
8
8
|
import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
9
|
-
import * as i1$
|
|
9
|
+
import * as i1$2 from '@skyux/core';
|
|
10
10
|
import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyMediaBreakpoints } from '@skyux/core';
|
|
11
11
|
import * as i5 from '@skyux/help-inline';
|
|
12
12
|
import { SkyHelpInlineModule } from '@skyux/help-inline';
|
|
13
13
|
import * as i6 from '@skyux/icon';
|
|
14
14
|
import { SkyIconModule } from '@skyux/icon';
|
|
15
|
-
import * as i1 from '@skyux/indicators';
|
|
15
|
+
import * as i1$1 from '@skyux/indicators';
|
|
16
16
|
import { SkyStatusIndicatorModule } from '@skyux/indicators';
|
|
17
|
-
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
18
17
|
import * as i4 from '@skyux/theme';
|
|
19
18
|
import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
|
|
20
19
|
import { BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
|
|
21
20
|
import { takeUntil, take } from 'rxjs/operators';
|
|
21
|
+
import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
22
22
|
|
|
23
23
|
/* istanbul ignore file */
|
|
24
24
|
/**
|
|
@@ -246,7 +246,7 @@ class SkyCharacterCounterIndicatorComponent {
|
|
|
246
246
|
this.#changeDetector.markForCheck();
|
|
247
247
|
}
|
|
248
248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
249
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: { characterCount: "characterCount", characterCountLimit: "characterCountLimit" }, ngImport: i0, template: "<span\n class=\"sky-character-count-label sky-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 <ng-container\n *ngIf=\"characterCount > characterCountLimit; else screenReaderCountMessage\"\n >{{ 'skyux_character_count_over_limit' | skyLibResources }}</ng-container\n >\n <ng-template #screenReaderCountMessage>\n <ng-container\n *ngIf=\"\n characterCount\n | skyCharacterCounterScreenReader\n : characterCountLimit as screenReaderCount\n \"\n >{{\n 'skyux_character_count_message'\n | skyLibResources: screenReaderCount : characterCountLimit\n }}</ng-container\n >\n </ng-template>\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyCharacterCounterScreenReaderPipe, name: "skyCharacterCounterScreenReader" }, { kind: "pipe", type:
|
|
249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: { characterCount: "characterCount", characterCountLimit: "characterCountLimit" }, ngImport: i0, template: "<span\n class=\"sky-character-count-label sky-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 <ng-container\n *ngIf=\"characterCount > characterCountLimit; else screenReaderCountMessage\"\n >{{ 'skyux_character_count_over_limit' | skyLibResources }}</ng-container\n >\n <ng-template #screenReaderCountMessage>\n <ng-container\n *ngIf=\"\n characterCount\n | skyCharacterCounterScreenReader\n : characterCountLimit as screenReaderCount\n \"\n >{{\n 'skyux_character_count_message'\n | skyLibResources: screenReaderCount : characterCountLimit\n }}</ng-container\n >\n </ng-template>\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyCharacterCounterScreenReaderPipe, name: "skyCharacterCounterScreenReader" }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
250
250
|
}
|
|
251
251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
|
|
252
252
|
type: Component,
|
|
@@ -415,7 +415,7 @@ class SkyFormErrorComponent {
|
|
|
415
415
|
>
|
|
416
416
|
{{ errorText }}
|
|
417
417
|
</sky-status-indicator>
|
|
418
|
-
`, isInline: true, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
418
|
+
`, isInline: true, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
419
419
|
}
|
|
420
420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
|
|
421
421
|
type: Component,
|
|
@@ -456,16 +456,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
456
456
|
class SkyFormErrorsComponent {
|
|
457
457
|
constructor() {
|
|
458
458
|
/**
|
|
459
|
-
* Indicates whether
|
|
460
|
-
* form control is touched or dirty.
|
|
459
|
+
* Indicates whether the parent component's control is touched
|
|
461
460
|
*/
|
|
462
|
-
this.
|
|
461
|
+
this.touched = false;
|
|
462
|
+
/**
|
|
463
|
+
* Indicates whether the parent component's control is dirty
|
|
464
|
+
*/
|
|
465
|
+
this.dirty = false;
|
|
463
466
|
this.ariaAtomic = 'true';
|
|
464
467
|
this.ariaLive = 'assertive';
|
|
465
468
|
this.ariaRelevant = 'all';
|
|
466
469
|
}
|
|
467
470
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
468
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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]=\"'skyux_form_error_date_min' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n <sky-form-error\n errorName=\"maxDate\"\n [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\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]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n <sky-form-error\n errorName=\"fuzzyMinDate\"\n [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\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: CommonModule }, { kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
469
472
|
}
|
|
470
473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
|
|
471
474
|
type: Component,
|
|
@@ -474,14 +477,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
474
477
|
SkyIdModule,
|
|
475
478
|
SkyFormErrorComponent,
|
|
476
479
|
SkyFormsResourcesModule,
|
|
477
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
480
|
+
], 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]=\"'skyux_form_error_date_min' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n <sky-form-error\n errorName=\"maxDate\"\n [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\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]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n />\n }\n\n @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n <sky-form-error\n errorName=\"fuzzyMinDate\"\n [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\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"] }]
|
|
478
481
|
}], propDecorators: { errors: [{
|
|
479
482
|
type: Input
|
|
480
483
|
}], labelText: [{
|
|
481
484
|
type: Input
|
|
482
|
-
}],
|
|
485
|
+
}], touched: [{
|
|
483
486
|
type: Input,
|
|
484
|
-
args: [{ transform:
|
|
487
|
+
args: [{ transform: booleanAttribute }]
|
|
488
|
+
}], dirty: [{
|
|
489
|
+
type: Input,
|
|
490
|
+
args: [{ transform: booleanAttribute }]
|
|
485
491
|
}], ariaAtomic: [{
|
|
486
492
|
type: HostBinding,
|
|
487
493
|
args: ['attr.aria-atomic']
|
|
@@ -596,7 +602,7 @@ class SkyCheckboxGroupComponent {
|
|
|
596
602
|
multi: true,
|
|
597
603
|
},
|
|
598
604
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
599
|
-
], 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-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5> </span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_checkbox_group_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\n <div\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n !!hintText\n }\"\n #hintTextEl=\"skyId\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [
|
|
605
|
+
], 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-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5> </span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_checkbox_group_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\n <div\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n !!hintText\n }\"\n #hintTextEl=\"skyId\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
600
606
|
}
|
|
601
607
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
|
|
602
608
|
type: Component,
|
|
@@ -613,7 +619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
613
619
|
multi: true,
|
|
614
620
|
},
|
|
615
621
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
616
|
-
], 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-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5> </span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_checkbox_group_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\n <div\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n !!hintText\n }\"\n #hintTextEl=\"skyId\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [
|
|
622
|
+
], 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-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-xs': !!hintText,\n 'sky-margin-stacked-sm': !hintText\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5> </span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_checkbox_group_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\n <div\n skyId\n [ngClass]=\"{\n 'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n !!hintText\n }\"\n #hintTextEl=\"skyId\"\n >\n {{ hintText }}\n </div>\n <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n <ng-content select=\"sky-checkbox[icon]\" />\n </span>\n <span class=\"sky-checkbox-group-stacked\">\n <ng-content select=\"sky-checkbox\" />\n </span>\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [attr.data-sky-id]=\"formErrorsDataId\"\n [errors]=\"formGroup?.errors\"\n [labelText]=\"headingText\"\n [touched]=\"formGroup?.touched\"\n [dirty]=\"formGroup?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"] }]
|
|
617
623
|
}], propDecorators: { helpPopoverContent: [{
|
|
618
624
|
type: Input
|
|
619
625
|
}], helpPopoverTitle: [{
|
|
@@ -683,7 +689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
683
689
|
*/
|
|
684
690
|
class SkyCheckboxLabelComponent {
|
|
685
691
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
686
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$
|
|
692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }] }); }
|
|
687
693
|
}
|
|
688
694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
|
|
689
695
|
type: Component,
|
|
@@ -1057,7 +1063,7 @@ class SkyCheckboxComponent {
|
|
|
1057
1063
|
multi: true,
|
|
1058
1064
|
},
|
|
1059
1065
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1060
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i4.SkyThemeComponentClassDirective }, { directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], 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 'sky-margin-inline-xs': labelText && !icon\n }\"\n >\n <input\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 #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n >\n {{ hintText }}\n </div>\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 [
|
|
1066
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i4.SkyThemeComponentClassDirective }, { directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], 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 'sky-margin-inline-xs': labelText && !icon\n }\"\n >\n <input\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 #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n >\n {{ hintText }}\n </div>\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-margin-stacked-lg.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}:is(.sky-theme-modern .sky-checkbox-outer-wrapper){display:flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-help-inline{display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-indeterminate{font-size:14px}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-switch-control{border-radius:6px}:is(.sky-theme-modern .sky-checkbox-hint-text){margin-top:var(--sky-margin-stacked-xs)}:is(.sky-theme-modern .sky-checkbox-form-margin){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) :host.sky-margin-stacked-lg.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-margin-stacked-sm)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }] }); }
|
|
1061
1067
|
}
|
|
1062
1068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
1063
1069
|
type: Component,
|
|
@@ -1075,7 +1081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
1075
1081
|
multi: true,
|
|
1076
1082
|
},
|
|
1077
1083
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1078
|
-
], 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 'sky-margin-inline-xs': labelText && !icon\n }\"\n >\n <input\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 #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n >\n {{ hintText }}\n </div>\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 [
|
|
1084
|
+
], 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 'sky-margin-inline-xs': labelText && !icon\n }\"\n >\n <input\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 #inputEl\n />\n <span\n class=\"sky-switch-control sky-rounded-corners\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-switch-control-info': checkboxType === 'info',\n 'sky-switch-control-success': checkboxType === 'success',\n 'sky-switch-control-warning': checkboxType === 'warning',\n 'sky-switch-control-danger': checkboxType === 'danger'\n }\"\n >\n <sky-icon\n *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n [fixedWidth]=\"true\"\n [icon]=\"icon\"\n />\n <ng-template #checkedOrIndeterminateTemplate>\n <sky-icon\n *ngIf=\"!indeterminate && checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n [fixedWidth]=\"true\"\n icon=\"check\"\n />\n <sky-icon\n *ngIf=\"indeterminate\"\n class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n [fixedWidth]=\"true\"\n icon=\"square\"\n />\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"labelText; else labelElement\">\n <sky-checkbox-label-text-label\n [labelText]=\"labelText\"\n [labelHidden]=\"labelHidden\"\n />\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-checkbox-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-checkbox-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n >\n {{ hintText }}\n </div>\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-margin-stacked-lg.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}:is(.sky-theme-modern .sky-checkbox-outer-wrapper){display:flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-help-inline{display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-indeterminate{font-size:14px}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-switch-control{border-radius:6px}:is(.sky-theme-modern .sky-checkbox-hint-text){margin-top:var(--sky-margin-stacked-xs)}:is(.sky-theme-modern .sky-checkbox-form-margin){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) :host.sky-margin-stacked-lg.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-margin-stacked-sm)}\n"] }]
|
|
1079
1085
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
1080
1086
|
type: Input
|
|
1081
1087
|
}], labelledBy: [{
|
|
@@ -1221,7 +1227,7 @@ class SkyFieldGroupComponent {
|
|
|
1221
1227
|
this.headingClass = `sky-font-heading-${value}`;
|
|
1222
1228
|
}
|
|
1223
1229
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.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-margin-stacked-xl": "this.stacked" } }, providers: [SkyFormFieldLabelTextRequiredService], ngImport: i0, template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <span class=\"sky-field-group-legend-wrapper\">\n <legend\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n </legend>\n <sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n class=\"sky-field-group-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n <div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-field-group-hint-text sky-font-deemphasized\"\n >\n {{ hintText }}\n </div>\n </div>\n <div class=\"sky-field-group-content\">\n <ng-content />\n </div>\n</fieldset>\n", styles: [":host{display:block}.sky-field-group-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-field-group-content{margin-top:var(--sky-margin-stacked-sm)}h3,h4{margin:0}.sky-field-group-legend-wrapper{display:inline-flex}sky-help-inline{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$
|
|
1230
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.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-margin-stacked-xl": "this.stacked" } }, providers: [SkyFormFieldLabelTextRequiredService], ngImport: i0, template: "<fieldset\n class=\"sky-field-group\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n <span class=\"sky-field-group-legend-wrapper\">\n <legend\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n </legend>\n <sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n class=\"sky-field-group-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n <div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-field-group-hint-text sky-font-deemphasized\"\n >\n {{ hintText }}\n </div>\n </div>\n <div class=\"sky-field-group-content\">\n <ng-content />\n </div>\n</fieldset>\n", styles: [":host{display:block}.sky-field-group-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-field-group-content{margin-top:var(--sky-margin-stacked-sm)}h3,h4{margin:0}.sky-field-group-legend-wrapper{display:inline-flex}sky-help-inline{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
1225
1231
|
}
|
|
1226
1232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupComponent, decorators: [{
|
|
1227
1233
|
type: Component,
|
|
@@ -1284,7 +1290,7 @@ class SkyFileAttachmentLabelComponent {
|
|
|
1284
1290
|
});
|
|
1285
1291
|
}
|
|
1286
1292
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1287
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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 skyId skyTrim #labelContentId=\"skyId\"><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: CommonModule }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$
|
|
1293
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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 skyId skyTrim #labelContentId=\"skyId\"><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: CommonModule }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1288
1294
|
}
|
|
1289
1295
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
|
|
1290
1296
|
type: Component,
|
|
@@ -1340,7 +1346,7 @@ class SkyFileSizePipe {
|
|
|
1340
1346
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
1341
1347
|
return this.#resourcesService.getStringForLocale({ locale: this.#defaultLocale }, key, ...args);
|
|
1342
1348
|
}
|
|
1343
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, deps: [{ token:
|
|
1349
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1344
1350
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, isStandalone: true, name: "skyFileSize" }); }
|
|
1345
1351
|
}
|
|
1346
1352
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, decorators: [{
|
|
@@ -1349,7 +1355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
1349
1355
|
name: 'skyFileSize',
|
|
1350
1356
|
standalone: true,
|
|
1351
1357
|
}]
|
|
1352
|
-
}], ctorParameters: () => [{ type:
|
|
1358
|
+
}], ctorParameters: () => [{ type: i1.SkyLibResourcesService }] });
|
|
1353
1359
|
|
|
1354
1360
|
/**
|
|
1355
1361
|
* Joins an array of IDs with a single space.
|
|
@@ -1915,11 +1921,11 @@ class SkyFileAttachmentComponent {
|
|
|
1915
1921
|
// istanbul ignore next
|
|
1916
1922
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1917
1923
|
#onTouched;
|
|
1918
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i3
|
|
1919
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1924
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i3.NgControl, optional: true, self: true }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1925
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.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-margin-stacked-lg": "this.stacked" } }, providers: [
|
|
1920
1926
|
SkyFileAttachmentService,
|
|
1921
1927
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1922
|
-
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n #labelRef=\"skyId\"\n class=\"sky-file-attachment-label-wrapper\"\n skyId\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"isRequired && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\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 ? labelRef.id\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-file-link\"\n >\n <a\n *ngIf=\"value; else noFileRef\"\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFileRef>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : labelComponents?.get(0)?.labelContentId?.id\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\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</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n [labelText]=\"labelText\"\n [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\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: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-file-link{padding:0 5px}.sky-file-attachment-file-link a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1928
|
+
], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n #labelRef=\"skyId\"\n class=\"sky-file-attachment-label-wrapper\"\n skyId\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"isRequired && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\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 ? labelRef.id\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-file-link\"\n >\n <a\n *ngIf=\"value; else noFileRef\"\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFileRef>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : labelComponents?.get(0)?.labelContentId?.id\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\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</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\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: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-file-link{padding:0 5px}.sky-file-attachment-file-link a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1923
1929
|
}
|
|
1924
1930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
1925
1931
|
type: Component,
|
|
@@ -1942,8 +1948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
1942
1948
|
], providers: [
|
|
1943
1949
|
SkyFileAttachmentService,
|
|
1944
1950
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
1945
|
-
], selector: 'sky-file-attachment', standalone: true, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n #labelRef=\"skyId\"\n class=\"sky-file-attachment-label-wrapper\"\n skyId\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"isRequired && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\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 ? labelRef.id\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-file-link\"\n >\n <a\n *ngIf=\"value; else noFileRef\"\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFileRef>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : labelComponents?.get(0)?.labelContentId?.id\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\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</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n [labelText]=\"labelText\"\n [
|
|
1946
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i3
|
|
1951
|
+
], selector: 'sky-file-attachment', standalone: true, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n #labelRef=\"skyId\"\n class=\"sky-file-attachment-label-wrapper\"\n skyId\n [ngClass]=\"{\n 'sky-control-label-required':\n !labelText && isRequired && hasLabelComponent\n }\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <span\n *ngIf=\"!labelHidden\"\n class=\"sky-control-label sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': isRequired\n }\"\n >{{ labelText }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [labelText]=\"labelText\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </ng-container>\n <span\n class=\"sky-screen-reader-only\"\n *ngIf=\"isRequired && (hasLabelComponent || labelText)\"\n >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n >\n </div>\n <div\n class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n [ngClass]=\"{\n 'sky-file-attachment-accept': acceptedOver,\n 'sky-file-attachment-reject': rejectedOver\n }\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragover)=\"fileDragOver($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\n >\n <div\n #fileDropDescriptionRef=\"skyId\"\n aria-hidden=\"true\"\n class=\"sky-screen-reader-only\"\n role=\"tooltip\"\n skyId\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n #fileInputRef\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"isRequired\"\n (change)=\"fileChangeEvent($event)\"\n />\n <ng-container *ngIf=\"showFileAttachmentButton\">\n <button\n *ngIf=\"showFileAttachmentButton\"\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 ? labelRef.id\n : labelComponents?.get(0)?.labelContentId?.id)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n >\n <sky-icon icon=\"folder-open-o\" />\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file'\n | skyLibResources)\n }}\n </button>\n </ng-container>\n <sky-icon\n *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n class=\"sky-file-attachment-icon sky-deemphasized\"\n icon=\"file-o\"\n size=\"2x\"\n />\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-file-link\"\n >\n <a\n *ngIf=\"value; else noFileRef\"\n [href]=\"isData ? value.url : undefined\"\n [download]=\"isData ? value.file.name : undefined\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFileRef>\n <span class=\"sky-file-attachment-none sky-deemphasized\">\n {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n </span>\n </ng-template>\n <button\n *ngIf=\"value\"\n class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n type=\"button\"\n [attr.aria-labelledby]=\"\n deleteButtonLabelRef.id\n | skyFileAttachmentJoinIds\n : labelComponents?.get(0)?.labelContentId?.id\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\" />\n </button>\n </div>\n\n <img\n *ngIf=\"value && isImage\"\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</div>\n<div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n >\n {{ hintText }}\n </div>\n</div>\n\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n [labelText]=\"labelText\"\n [touched]=\"ngControl?.touched\"\n [dirty]=\"ngControl?.dirty\"\n>\n <ng-content select=\"sky-form-error\" />\n @if (ngControl?.touched) {\n <sky-form-error\n *ngIf=\"fileErrorName === 'fileType'\"\n [errorName]=\"'fileType'\"\n [errorText]=\"\n acceptedTypesErrorMessage ??\n 'skyux_file_attachment_file_type_error_label_text'\n | skyLibResources: fileErrorParam\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'maxFileSize'\"\n [errorName]=\"'maxFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_max_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n <sky-form-error\n *ngIf=\"fileErrorName === 'minFileSize'\"\n [errorName]=\"'minFileSize'\"\n [errorText]=\"\n 'skyux_file_attachment_min_file_size_error_label_text'\n | skyLibResources: (fileErrorParam | skyFileSize)\n \"\n />\n }\n</sky-form-errors>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\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: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-file-link{padding:0 5px}.sky-file-attachment-file-link a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"] }]
|
|
1952
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i3.NgControl, decorators: [{
|
|
1947
1953
|
type: Self
|
|
1948
1954
|
}, {
|
|
1949
1955
|
type: Optional
|
|
@@ -2251,7 +2257,7 @@ class SkyFileDropComponent {
|
|
|
2251
2257
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", 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-margin-stacked-lg": "this.stacked" } }, providers: [
|
|
2252
2258
|
SkyFileAttachmentService,
|
|
2253
2259
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2254
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<fieldset>\n <legend\n *ngIf=\"labelText\"\n class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\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 (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\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 ></button>\n\n <input\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 #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content />\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_link_label' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-margin-stacked-xs\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-describedby]=\"uploadHintText.id\"\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 </div>\n <div\n skyId\n #uploadHintText=\"skyId\"\n class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n }}\n </div>\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 </div>\n <div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n {{ hintText }}\n </div>\n </div>\n</fieldset>\n<sky-form-errors\n [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [showErrors]=\"rejectedFiles.length\"\n>\n <div *ngFor=\"let rejectedFile of rejectedFiles\">\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'fileType'\"\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;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:10px}: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:10px}: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-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-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-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.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:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
2260
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<fieldset>\n <legend\n *ngIf=\"labelText\"\n class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\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 (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\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 ></button>\n\n <input\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 #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content />\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_link_label' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-margin-stacked-xs\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-describedby]=\"uploadHintText.id\"\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 </div>\n <div\n skyId\n #uploadHintText=\"skyId\"\n class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n }}\n </div>\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 </div>\n <div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n {{ hintText }}\n </div>\n </div>\n</fieldset>\n<sky-form-errors\n [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"rejectedFiles.length > 0\"\n>\n <div *ngFor=\"let rejectedFile of rejectedFiles\">\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'fileType'\"\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;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:10px}: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:10px}: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-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-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-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.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:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
2255
2261
|
}
|
|
2256
2262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropComponent, decorators: [{
|
|
2257
2263
|
type: Component,
|
|
@@ -2273,7 +2279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
2273
2279
|
], providers: [
|
|
2274
2280
|
SkyFileAttachmentService,
|
|
2275
2281
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
2276
|
-
], selector: 'sky-file-drop', standalone: true, template: "<fieldset>\n <legend\n *ngIf=\"labelText\"\n class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\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 (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\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 ></button>\n\n <input\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 #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content />\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_link_label' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-margin-stacked-xs\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-describedby]=\"uploadHintText.id\"\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 </div>\n <div\n skyId\n #uploadHintText=\"skyId\"\n class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n }}\n </div>\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 </div>\n <div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n {{ hintText }}\n </div>\n </div>\n</fieldset>\n<sky-form-errors\n [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [showErrors]=\"rejectedFiles.length\"\n>\n <div *ngFor=\"let rejectedFile of rejectedFiles\">\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'fileType'\"\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;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:10px}: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:10px}: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-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-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-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.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:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
|
|
2282
|
+
], selector: 'sky-file-drop', standalone: true, template: "<fieldset>\n <legend\n *ngIf=\"labelText\"\n class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n [ngClass]=\"{\n 'sky-screen-reader-only': labelHidden\n }\"\n >\n <span\n class=\"sky-margin-inline-xs\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</span\n ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n 'skyux_file_attachment_required' | skyLibResources\n }}</span\n ><sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </legend>\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 (click)=\"dropClicked()\"\n (dragover)=\"fileDragOver($event)\"\n (dragenter)=\"fileDragEnter($event)\"\n (dragleave)=\"fileDragLeave($event)\"\n (drop)=\"fileDrop($event)\"\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 ></button>\n\n <input\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 #fileInput\n />\n\n <div\n class=\"sky-file-drop-contents sky-padding-even-default\"\n *ngIf=\"customEl.children.length === 0\"\n >\n <div class=\"sky-file-drop-contents-not-over\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drag_file_here'\n | skyLibResources\n }}\n </div>\n <div class=\"sky-file-drop-text\">\n {{\n 'skyux_file_attachment_file_upload_or_click_to_browse'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is valid -->\n <div class=\"sky-file-drop-contents-accept\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_drop_files_here'\n | skyLibResources\n }}\n </div>\n <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n </div>\n\n <!-- This will appear when file is dragged over and is invalid -->\n <div class=\"sky-file-drop-contents-reject\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n }}\n </div>\n <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n </div>\n </div>\n\n <div class=\"sky-file-drop-contents-custom\" #customEl>\n <ng-content />\n </div>\n </div>\n <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n <div class=\"sky-file-drop-contents sky-padding-even-default\">\n <div class=\"sky-file-drop-link\">\n <div class=\"sky-file-drop-link-header\">\n <div class=\"sky-file-drop-text-header sky-font-display-3\">\n {{\n 'skyux_file_attachment_file_upload_link_label' | skyLibResources\n }}\n </div>\n </div>\n <div class=\"sky-margin-stacked-xs\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label'\n | skyLibResources)\n \"\n [attr.aria-describedby]=\"uploadHintText.id\"\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 </div>\n <div\n skyId\n #uploadHintText=\"skyId\"\n class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n >\n {{\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n }}\n </div>\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 </div>\n <div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n {{ hintText }}\n </div>\n </div>\n</fieldset>\n<sky-form-errors\n [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n [id]=\"errorId\"\n [labelText]=\"labelText\"\n [touched]=\"rejectedFiles.length > 0\"\n>\n <div *ngFor=\"let rejectedFile of rejectedFiles\">\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'fileType'\"\n errorName=\"fileType\"\n [errorText]=\"\n 'skyux_file_attachment_file_type_error_label_text_with_name'\n | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n \"\n />\n <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\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 <sky-form-error\n *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n errorName=\"validate\"\n [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n />\n </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;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:10px}: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:10px}: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-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-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-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.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:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
|
|
2277
2283
|
}], propDecorators: { filesChanged: [{
|
|
2278
2284
|
type: Output
|
|
2279
2285
|
}], linkInputBlur: [{
|
|
@@ -2461,7 +2467,7 @@ class SkyFileItemComponent {
|
|
|
2461
2467
|
}
|
|
2462
2468
|
}
|
|
2463
2469
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "<div class=\"sky-file-item sky-padding-even-default\" *ngIf=\"fileItem\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n <strong *ngIf=\"isFile\">{{ fileName }}</strong>\n <strong *ngIf=\"!isFile\">{{ url }}</strong>\n </div>\n <div class=\"sky-file-item-size\" *ngIf=\"isFile\">\n ({{ fileSize | skyFileSize }})\n </div>\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' | skyLibResources\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon icon=\"trash-o\" size=\"lg\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n <div *ngIf=\"isImage\" 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 <div *ngIf=\"!isImage\" class=\"sky-file-item-preview-other\">\n <sky-icon [icon]=\"icon\" />\n </div>\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;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:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type:
|
|
2470
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "<div class=\"sky-file-item sky-padding-even-default\" *ngIf=\"fileItem\">\n <div class=\"sky-file-item-title\">\n <div class=\"sky-file-item-name-container\">\n <div class=\"sky-file-item-name\">\n <strong *ngIf=\"isFile\">{{ fileName }}</strong>\n <strong *ngIf=\"!isFile\">{{ url }}</strong>\n </div>\n <div class=\"sky-file-item-size\" *ngIf=\"isFile\">\n ({{ fileSize | skyFileSize }})\n </div>\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' | skyLibResources\n \"\n (click)=\"itemDelete()\"\n >\n <sky-icon icon=\"trash-o\" size=\"lg\" />\n </button>\n </div>\n </div>\n <div class=\"sky-file-item-content\">\n <div class=\"sky-file-item-preview\">\n <div *ngIf=\"isImage\" 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 <div *ngIf=\"!isImage\" class=\"sky-file-item-preview-other\">\n <sky-icon [icon]=\"icon\" />\n </div>\n </div>\n <div class=\"sky-file-item-content-custom\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;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:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }] }); }
|
|
2465
2471
|
}
|
|
2466
2472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemComponent, decorators: [{
|
|
2467
2473
|
type: Component,
|
|
@@ -2873,7 +2879,7 @@ class SkyInputBoxComponent {
|
|
|
2873
2879
|
provide: SKY_FORM_ERRORS_ENABLED,
|
|
2874
2880
|
useValue: true,
|
|
2875
2881
|
},
|
|
2876
|
-
], 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 }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], 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 <label\n *ngIf=\"labelText\"\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</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\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 <sky-character-counter-indicator\n *ngIf=\"characterLimit !== undefined\"\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n <ng-container\n *ngIf=\"hostInputTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsLeftTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetLeftTemplate\"\n [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 [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n >\n <ng-content select=\"sky-form-error\" />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText || hostHintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\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</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;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{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}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-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:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.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:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.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:6px;border-bottom-left-radius:6px;margin-right:-1px}.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:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;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+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.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:6px 0 1px}.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:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;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(2px round 6px)!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(1px round 6px)!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:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.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(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .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:10px}.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:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px 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:29px 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 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.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{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{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-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{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2882
|
+
], 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 }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], 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 <label\n *ngIf=\"labelText\"\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</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\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 <sky-character-counter-indicator\n *ngIf=\"characterLimit !== undefined\"\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n <ng-container\n *ngIf=\"hostInputTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsLeftTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetLeftTemplate\"\n [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 [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n [touched]=\"controlDir?.touched\"\n [dirty]=\"controlDir?.dirty\"\n >\n <ng-content select=\"sky-form-error\" />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText || hostHintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\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</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;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{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}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-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:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.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:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.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:6px;border-bottom-left-radius:6px;margin-right:-1px}.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:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;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+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.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:6px 0 1px}.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:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;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(2px round 6px)!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(1px round 6px)!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:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.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(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .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:10px}.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:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px 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:29px 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 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.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{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{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-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{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2877
2883
|
}
|
|
2878
2884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
|
|
2879
2885
|
type: Component,
|
|
@@ -2890,7 +2896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
2890
2896
|
provide: SKY_FORM_ERRORS_ENABLED,
|
|
2891
2897
|
useValue: true,
|
|
2892
2898
|
},
|
|
2893
|
-
], encapsulation: ViewEncapsulation.None, 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 <label\n *ngIf=\"labelText\"\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</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\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 <sky-character-counter-indicator\n *ngIf=\"characterLimit !== undefined\"\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n <ng-container\n *ngIf=\"hostInputTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsLeftTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetLeftTemplate\"\n [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 [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n >\n <ng-content select=\"sky-form-error\" />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText || hostHintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\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</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;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{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}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-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:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.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:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.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:6px;border-bottom-left-radius:6px;margin-right:-1px}.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:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;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+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.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:6px 0 1px}.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:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;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(2px round 6px)!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(1px round 6px)!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:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.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(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .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:10px}.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:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px 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:29px 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 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.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{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{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-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{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"] }]
|
|
2899
|
+
], encapsulation: ViewEncapsulation.None, 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 <label\n *ngIf=\"labelText\"\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</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-help-inline\n *ngIf=\"helpPopoverContent || helpKey\"\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 <sky-character-counter-indicator\n *ngIf=\"characterLimit !== undefined\"\n [characterCount]=\"controlDir?.value?.length || 0\"\n [characterCountLimit]=\"characterLimit\"\n />\n <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content\n select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n />\n <ng-container\n *ngIf=\"hostInputTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsLeftTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsTemplate\"\n [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 <ng-container\n *ngIf=\"hostButtonsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetTemplate\"\n [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 <ng-container\n *ngIf=\"hostIconsInsetLeftTemplate\"\n [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 [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n [touched]=\"controlDir?.touched\"\n [dirty]=\"controlDir?.dirty\"\n >\n <ng-content select=\"sky-form-error\" />\n </sky-form-errors>\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText || hostHintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\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</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;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{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}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-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:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.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:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.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:6px;border-bottom-left-radius:6px;margin-right:-1px}.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:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;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+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.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:6px 0 1px}.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:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;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(2px round 6px)!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(1px round 6px)!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:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.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(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .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:10px}.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:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px 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:29px 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 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.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{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{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-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{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"] }]
|
|
2894
2900
|
}], propDecorators: { hasErrors: [{
|
|
2895
2901
|
type: Input
|
|
2896
2902
|
}], disabled: [{
|
|
@@ -3319,7 +3325,7 @@ class SkyRadioComponent {
|
|
|
3319
3325
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
3320
3326
|
#onTouchedCallback;
|
|
3321
3327
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3322
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", 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: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-container *ngIf=\"labelText; else labelElement\">\n <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-radio-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n {{ hintText }}\n </div>\n</div>\n", styles: [":host{display:inline-block}.sky-radio-outer-wrapper
|
|
3328
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", 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: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-container *ngIf=\"labelText; else labelElement\">\n <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-radio-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n {{ hintText }}\n </div>\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3323
3329
|
}
|
|
3324
3330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioComponent, decorators: [{
|
|
3325
3331
|
type: Component,
|
|
@@ -3328,7 +3334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
3328
3334
|
directive: SkyFormFieldLabelTextRequiredDirective,
|
|
3329
3335
|
inputs: ['labelText'],
|
|
3330
3336
|
},
|
|
3331
|
-
], providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-container *ngIf=\"labelText; else labelElement\">\n <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-radio-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n {{ hintText }}\n </div>\n</div>\n", styles: [":host{display:inline-block}.sky-radio-outer-wrapper
|
|
3337
|
+
], providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"sky-radio-outer-wrapper\">\n <label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n >\n <input\n class=\"sky-radio-input sky-switch-input\"\n type=\"radio\"\n [attr.aria-label]=\"labelText || label\"\n [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n [checked]=\"checked\"\n [disabled]=\"disabled || radioGroupDisabled\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange()\"\n (change)=\"onInputChange($event)\"\n />\n <span\n class=\"sky-switch-control\"\n [ngClass]=\"{\n 'sky-switch-control-icon': icon,\n 'sky-rounded-corners': icon,\n 'sky-rounded-circle': !icon,\n 'sky-switch-control-info': icon && radioType === 'info',\n 'sky-switch-control-success': icon && radioType === 'success',\n 'sky-switch-control-warning': icon && radioType === 'warning',\n 'sky-switch-control-danger': icon && radioType === 'danger'\n }\"\n >\n <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n </span>\n <ng-container *ngIf=\"labelText; else labelElement\">\n <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n </ng-container>\n <ng-template #labelElement>\n <ng-content select=\"sky-radio-label\" />\n </ng-template>\n </label>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n class=\"sky-radio-help-inline\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n {{ hintText }}\n </div>\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"] }]
|
|
3332
3338
|
}], ctorParameters: () => [], propDecorators: { checked: [{
|
|
3333
3339
|
type: Input
|
|
3334
3340
|
}], disabled: [{
|
|
@@ -3678,11 +3684,11 @@ class SkyRadioGroupComponent {
|
|
|
3678
3684
|
this.stackedLg = !this.headingLevel && this.stacked;
|
|
3679
3685
|
this.stackedXL = !!this.headingLevel && this.stacked;
|
|
3680
3686
|
}
|
|
3681
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i3
|
|
3687
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3682
3688
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyRadioGroupComponent, 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-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
|
|
3683
3689
|
SkyRadioGroupIdService,
|
|
3684
3690
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
3685
|
-
], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "headingText"] }], 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 <span class=\"sky-radio-group-label-wrapper\">\n <legend\n *ngIf=\"headingText\"\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-sm': !hintText,\n 'sky-control-label-required': isRequired,\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5>\n </legend>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n\n <div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n >\n {{ hintText }}\n </div>\n </div>\n <ng-content />\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"headingText\"\n [
|
|
3691
|
+
], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "headingText"] }], 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 <span class=\"sky-radio-group-label-wrapper\">\n <legend\n *ngIf=\"headingText\"\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-sm': !hintText,\n 'sky-control-label-required': isRequired,\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5>\n </legend>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n\n <div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n >\n {{ hintText }}\n </div>\n </div>\n <ng-content />\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: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
|
|
3686
3692
|
}
|
|
3687
3693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
|
|
3688
3694
|
type: Component,
|
|
@@ -3694,8 +3700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
3694
3700
|
], providers: [
|
|
3695
3701
|
SkyRadioGroupIdService,
|
|
3696
3702
|
{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
|
|
3697
|
-
], 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 <span class=\"sky-radio-group-label-wrapper\">\n <legend\n *ngIf=\"headingText\"\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-sm': !hintText,\n 'sky-control-label-required': isRequired,\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5>\n </legend>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n\n <div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n >\n {{ hintText }}\n </div>\n </div>\n <ng-content />\n</fieldset>\n<sky-form-errors\n [id]=\"errorId\"\n [errors]=\"ngControl?.errors\"\n [labelText]=\"headingText\"\n [
|
|
3698
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i3
|
|
3703
|
+
], 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 <span class=\"sky-radio-group-label-wrapper\">\n <legend\n *ngIf=\"headingText\"\n class=\"sky-control-label\"\n [ngClass]=\"{\n 'sky-screen-reader-only': headingHidden,\n 'sky-margin-stacked-sm': !hintText,\n 'sky-control-label-required': isRequired,\n 'sky-margin-inline-xs': helpPopoverContent\n }\"\n >\n <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n {{ headingText }}\n </span>\n <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n {{ headingText }}\n </h3>\n <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n {{ headingText }}\n </h4>\n <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n {{ headingText }}\n </h5>\n </legend>\n <sky-help-inline\n *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n\n <div skyId #hintTextEl=\"skyId\">\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n >\n {{ hintText }}\n </div>\n </div>\n <ng-content />\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: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"] }]
|
|
3704
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i3.NgControl, decorators: [{
|
|
3699
3705
|
type: Self
|
|
3700
3706
|
}, {
|
|
3701
3707
|
type: Optional
|
|
@@ -3768,7 +3774,7 @@ class SkyRadioLabelComponent {
|
|
|
3768
3774
|
});
|
|
3769
3775
|
}
|
|
3770
3776
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$
|
|
3777
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\"\n ><span skyTrim><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }] }); }
|
|
3772
3778
|
}
|
|
3773
3779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
|
|
3774
3780
|
type: Component,
|
|
@@ -3980,12 +3986,12 @@ class SkySelectionBoxAdapterService {
|
|
|
3980
3986
|
const el = element.nativeElement;
|
|
3981
3987
|
el.tabIndex = tabIndex;
|
|
3982
3988
|
}
|
|
3983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i1$
|
|
3989
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3984
3990
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService }); }
|
|
3985
3991
|
}
|
|
3986
3992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
|
|
3987
3993
|
type: Injectable
|
|
3988
|
-
}], ctorParameters: () => [{ type: i1$
|
|
3994
|
+
}], ctorParameters: () => [{ type: i1$2.SkyCoreAdapterService }, { type: i0.RendererFactory2 }] });
|
|
3989
3995
|
|
|
3990
3996
|
/**
|
|
3991
3997
|
* Specifies the description to display in a selection box.
|
|
@@ -4230,13 +4236,13 @@ class SkySelectionBoxGridComponent {
|
|
|
4230
4236
|
this.#coreAdapterService.syncMaxHeight(this.containerElementRef, SKY_SELECTION_BOX_CLASS_NAME);
|
|
4231
4237
|
}
|
|
4232
4238
|
}
|
|
4233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$
|
|
4239
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$2.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i1$2.SkyMutationObserverService }, { token: i0.NgZone }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4234
4240
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkySelectionBoxGridComponent, 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 class=\"sky-selection-box-grid\"\n [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n #container\n>\n <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto -15px}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4235
4241
|
}
|
|
4236
4242
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
4237
4243
|
type: Component,
|
|
4238
4244
|
args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"sky-selection-box-grid\"\n [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n #container\n>\n <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto -15px}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"] }]
|
|
4239
|
-
}], ctorParameters: () => [{ type: i1$
|
|
4245
|
+
}], ctorParameters: () => [{ type: i1$2.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i1$2.SkyMutationObserverService }, { type: i0.NgZone }, { type: i4.SkyThemeService, decorators: [{
|
|
4240
4246
|
type: Optional
|
|
4241
4247
|
}] }], propDecorators: { alignItems: [{
|
|
4242
4248
|
type: Input
|
|
@@ -4313,7 +4319,7 @@ class SkyToggleSwitchLabelComponent {
|
|
|
4313
4319
|
});
|
|
4314
4320
|
}
|
|
4315
4321
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i1$
|
|
4322
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i1$2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4317
4323
|
}
|
|
4318
4324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
|
|
4319
4325
|
type: Component,
|
|
@@ -4478,11 +4484,11 @@ class SkyToggleSwitchComponent {
|
|
|
4478
4484
|
#toggleChecked() {
|
|
4479
4485
|
this.checked = !this.checked;
|
|
4480
4486
|
}
|
|
4481
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$
|
|
4487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4482
4488
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyToggleSwitchComponent, 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: [
|
|
4483
4489
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
4484
4490
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
4485
|
-
], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\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 #toggle=\"skyId\"\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 <label\n *ngIf=\"hasLabelComponent || labelText\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n class=\"sky-toggle-switch-label\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <ng-container *ngIf=\"!labelHidden\">{{ labelText }}</ng-container>\n </ng-container>\n </label>\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n *ngIf=\"labelText && (helpPopoverContent || helpKey)\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-toggle-switch-label\" />\n</ng-template>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$
|
|
4491
|
+
], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\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 #toggle=\"skyId\"\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 <label\n *ngIf=\"hasLabelComponent || labelText\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n class=\"sky-toggle-switch-label\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <ng-container *ngIf=\"!labelHidden\">{{ labelText }}</ng-container>\n </ng-container>\n </label>\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n *ngIf=\"labelText && (helpPopoverContent || helpKey)\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-toggle-switch-label\" />\n</ng-template>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$2.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4486
4492
|
}
|
|
4487
4493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
|
|
4488
4494
|
type: Component,
|
|
@@ -4495,7 +4501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
|
|
|
4495
4501
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
4496
4502
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
4497
4503
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\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 #toggle=\"skyId\"\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 <label\n *ngIf=\"hasLabelComponent || labelText\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n class=\"sky-toggle-switch-label\"\n >\n <ng-container *ngIf=\"labelText; else labelContent\">\n <ng-container *ngIf=\"!labelHidden\">{{ labelText }}</ng-container>\n </ng-container>\n </label>\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n *ngIf=\"labelText && (helpPopoverContent || helpKey)\"\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n\n<ng-template #labelContent>\n <ng-content select=\"sky-toggle-switch-label\" />\n</ng-template>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"] }]
|
|
4498
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$
|
|
4504
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.SkyIdService }], propDecorators: { ariaLabel: [{
|
|
4499
4505
|
type: Input
|
|
4500
4506
|
}], checked: [{
|
|
4501
4507
|
type: Input
|