@skyux/forms 9.21.2 → 10.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +805 -805
- package/esm2022/lib/modules/character-counter/character-counter-indicator.component.mjs +5 -5
- package/esm2022/lib/modules/character-counter/character-counter.directive.mjs +4 -4
- package/esm2022/lib/modules/character-counter/character-counter.module.mjs +4 -4
- package/esm2022/lib/modules/checkbox/checkbox-label.component.mjs +3 -3
- package/esm2022/lib/modules/checkbox/checkbox.component.mjs +5 -5
- package/esm2022/lib/modules/checkbox/checkbox.module.mjs +4 -4
- package/esm2022/lib/modules/file-attachment/file-attachment-label.component.mjs +3 -3
- package/esm2022/lib/modules/file-attachment/file-attachment.component.mjs +6 -6
- package/esm2022/lib/modules/file-attachment/file-attachment.service.mjs +4 -4
- package/esm2022/lib/modules/file-attachment/file-attachments.module.mjs +4 -4
- package/esm2022/lib/modules/file-attachment/file-drop.component.mjs +4 -4
- package/esm2022/lib/modules/file-attachment/file-item.component.mjs +5 -5
- package/esm2022/lib/modules/file-attachment/file-item.service.mjs +4 -4
- package/esm2022/lib/modules/file-attachment/file-size.pipe.mjs +5 -5
- package/esm2022/lib/modules/form-error/form-error.component.mjs +3 -3
- package/esm2022/lib/modules/form-error/form-errors.component.mjs +3 -3
- package/esm2022/lib/modules/form-error/form-errors.module.mjs +4 -4
- package/esm2022/lib/modules/input-box/input-box-adapter.service.mjs +4 -4
- package/esm2022/lib/modules/input-box/input-box-control.directive.mjs +3 -3
- package/esm2022/lib/modules/input-box/input-box-help-inline.component.mjs +3 -3
- package/esm2022/lib/modules/input-box/input-box-host.service.mjs +4 -4
- package/esm2022/lib/modules/input-box/input-box.component.mjs +6 -6
- package/esm2022/lib/modules/input-box/input-box.module.mjs +4 -4
- package/esm2022/lib/modules/radio/radio-group-id.service.mjs +5 -5
- package/esm2022/lib/modules/radio/radio-group.component.mjs +6 -6
- package/esm2022/lib/modules/radio/radio-label.component.mjs +3 -3
- package/esm2022/lib/modules/radio/radio.component.mjs +6 -6
- package/esm2022/lib/modules/radio/radio.module.mjs +4 -4
- package/esm2022/lib/modules/selection-box/selection-box-adapter.service.mjs +5 -5
- package/esm2022/lib/modules/selection-box/selection-box-description.component.mjs +3 -3
- package/esm2022/lib/modules/selection-box/selection-box-grid.component.mjs +6 -6
- package/esm2022/lib/modules/selection-box/selection-box-header.component.mjs +3 -3
- package/esm2022/lib/modules/selection-box/selection-box.component.mjs +6 -6
- package/esm2022/lib/modules/selection-box/selection-box.module.mjs +4 -4
- package/esm2022/lib/modules/shared/forms-utility.mjs +1 -1
- package/esm2022/lib/modules/shared/sky-forms-resources.module.mjs +4 -4
- package/esm2022/lib/modules/toggle-switch/toggle-switch-label.component.mjs +3 -3
- package/esm2022/lib/modules/toggle-switch/toggle-switch.component.mjs +5 -5
- package/esm2022/lib/modules/toggle-switch/toggle-switch.module.mjs +4 -4
- package/esm2022/testing/character-counter/character-counter-indicator-harness.mjs +1 -1
- package/esm2022/testing/checkbox/checkbox-harness.mjs +1 -1
- package/esm2022/testing/checkbox-fixture.mjs +1 -1
- package/esm2022/testing/input-box/input-box-harness.mjs +1 -1
- package/esm2022/testing/radio-fixture.mjs +1 -1
- package/fesm2022/skyux-forms-testing.mjs.map +1 -1
- package/fesm2022/skyux-forms.mjs +142 -142
- package/fesm2022/skyux-forms.mjs.map +1 -1
- package/package.json +12 -12
package/fesm2022/skyux-forms.mjs
CHANGED
|
@@ -115,9 +115,9 @@ class SkyFormsResourcesProvider {
|
|
|
115
115
|
* Import into any component library module that needs to use resource strings.
|
|
116
116
|
*/
|
|
117
117
|
class SkyFormsResourcesModule {
|
|
118
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
119
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
120
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
119
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] }); }
|
|
120
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormsResourcesModule, providers: [
|
|
121
121
|
{
|
|
122
122
|
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
123
123
|
useClass: SkyFormsResourcesProvider,
|
|
@@ -125,7 +125,7 @@ class SkyFormsResourcesModule {
|
|
|
125
125
|
},
|
|
126
126
|
], imports: [SkyI18nModule] }); }
|
|
127
127
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
|
|
129
129
|
type: NgModule,
|
|
130
130
|
args: [{
|
|
131
131
|
exports: [SkyI18nModule],
|
|
@@ -160,13 +160,13 @@ class SkyCharacterCounterIndicatorComponent {
|
|
|
160
160
|
this.#_characterCountLimit = limit;
|
|
161
161
|
this.#changeDetector.markForCheck();
|
|
162
162
|
}
|
|
163
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n {{ characterCountLimit }}.\n {{\n characterCount > characterCountLimit\n ? ('skyux_character_count_over_limit' | skyLibResources)\n : ''\n }}\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
165
165
|
}
|
|
166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
|
|
167
167
|
type: Component,
|
|
168
168
|
args: [{ selector: 'sky-character-counter-indicator', changeDetection: ChangeDetectionStrategy.OnPush, 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 {{ characterCount }} {{ 'skyux_character_count_message' | skyLibResources }}\n {{ characterCountLimit }}.\n {{\n characterCount > characterCountLimit\n ? ('skyux_character_count_over_limit' | skyLibResources)\n : ''\n }}\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"] }]
|
|
169
|
-
}], ctorParameters:
|
|
169
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { characterCount: [{
|
|
170
170
|
type: Input
|
|
171
171
|
}], characterCountLimit: [{
|
|
172
172
|
type: Input
|
|
@@ -238,8 +238,8 @@ class SkyCharacterCounterInputDirective {
|
|
|
238
238
|
}
|
|
239
239
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
240
240
|
#validatorChange = () => { };
|
|
241
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
242
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
242
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
|
|
243
243
|
{
|
|
244
244
|
provide: NG_VALIDATORS,
|
|
245
245
|
useExisting: SkyCharacterCounterInputDirective,
|
|
@@ -247,7 +247,7 @@ class SkyCharacterCounterInputDirective {
|
|
|
247
247
|
},
|
|
248
248
|
], ngImport: i0 }); }
|
|
249
249
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
|
|
251
251
|
type: Directive,
|
|
252
252
|
args: [{
|
|
253
253
|
selector: '[skyCharacterCounter]',
|
|
@@ -266,19 +266,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
266
266
|
}] } });
|
|
267
267
|
|
|
268
268
|
class SkyCharacterCounterModule {
|
|
269
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
270
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
269
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
270
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
|
|
271
271
|
SkyCharacterCounterIndicatorComponent], imports: [CommonModule,
|
|
272
272
|
FormsModule,
|
|
273
273
|
ReactiveFormsModule,
|
|
274
274
|
SkyFormsResourcesModule], exports: [SkyCharacterCounterInputDirective,
|
|
275
275
|
SkyCharacterCounterIndicatorComponent] }); }
|
|
276
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
276
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterModule, imports: [CommonModule,
|
|
277
277
|
FormsModule,
|
|
278
278
|
ReactiveFormsModule,
|
|
279
279
|
SkyFormsResourcesModule] }); }
|
|
280
280
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
|
|
282
282
|
type: NgModule,
|
|
283
283
|
args: [{
|
|
284
284
|
declarations: [
|
|
@@ -304,10 +304,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
304
304
|
* element.
|
|
305
305
|
*/
|
|
306
306
|
class SkyCheckboxLabelComponent {
|
|
307
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
308
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
307
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
308
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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$1.λ4, selector: "[skyTrim]" }] }); }
|
|
309
309
|
}
|
|
310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
|
|
311
311
|
type: Component,
|
|
312
312
|
args: [{ selector: 'sky-checkbox-label', 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" }]
|
|
313
313
|
}] });
|
|
@@ -611,13 +611,13 @@ class SkyCheckboxComponent {
|
|
|
611
611
|
this.#ngControl.control?.updateValueAndValidity();
|
|
612
612
|
}
|
|
613
613
|
}
|
|
614
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
614
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
615
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: "required" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': required,\n 'sky-switch-disabled': disabled\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]=\"required\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\n [attr.aria-required]=\"required ? true : null\"\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 <ng-content select=\"sky-checkbox-label\" />\n</label>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }] }); }
|
|
616
616
|
}
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
|
|
618
618
|
type: Component,
|
|
619
619
|
args: [{ selector: 'sky-checkbox', template: "<label\n class=\"sky-checkbox-wrapper sky-switch\"\n [ngClass]=\"{\n 'sky-control-label-required': required,\n 'sky-switch-disabled': disabled\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]=\"required\"\n [tabIndex]=\"tabindex\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\n [attr.aria-required]=\"required ? true : null\"\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 <ng-content select=\"sky-checkbox-label\" />\n</label>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"] }]
|
|
620
|
-
}], ctorParameters:
|
|
620
|
+
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
621
621
|
type: Input
|
|
622
622
|
}], labelledBy: [{
|
|
623
623
|
type: Input
|
|
@@ -653,11 +653,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
653
653
|
}] } });
|
|
654
654
|
|
|
655
655
|
class SkyCheckboxModule {
|
|
656
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
657
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
658
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
656
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
657
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent, SkyCheckboxLabelComponent], imports: [CommonModule, FormsModule, SkyIconModule, SkyTrimModule], exports: [SkyCheckboxComponent, SkyCheckboxLabelComponent] }); }
|
|
658
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule, FormsModule, SkyIconModule, SkyTrimModule] }); }
|
|
659
659
|
}
|
|
660
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyCheckboxModule, decorators: [{
|
|
661
661
|
type: NgModule,
|
|
662
662
|
args: [{
|
|
663
663
|
declarations: [SkyCheckboxComponent, SkyCheckboxLabelComponent],
|
|
@@ -673,8 +673,8 @@ class SkyFormErrorComponent {
|
|
|
673
673
|
constructor() {
|
|
674
674
|
this.cssClass = 'sky-form-error-indicator';
|
|
675
675
|
}
|
|
676
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
676
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyFormErrorComponent, isStandalone: true, selector: "sky-form-error", host: { properties: { "class": "this.cssClass" } }, ngImport: i0, template: `
|
|
678
678
|
<sky-status-indicator
|
|
679
679
|
class="sky-form-error"
|
|
680
680
|
descriptionType="error"
|
|
@@ -684,7 +684,7 @@ class SkyFormErrorComponent {
|
|
|
684
684
|
</sky-status-indicator>
|
|
685
685
|
`, isInline: true, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i2$1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
686
686
|
}
|
|
687
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
687
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
|
|
688
688
|
type: Component,
|
|
689
689
|
args: [{ selector: 'sky-form-error', standalone: true, imports: [SkyStatusIndicatorModule], template: `
|
|
690
690
|
<sky-status-indicator
|
|
@@ -714,10 +714,10 @@ class SkyFormErrorsComponent {
|
|
|
714
714
|
this.ariaLive = 'assertive';
|
|
715
715
|
this.ariaRelevant = 'all';
|
|
716
716
|
}
|
|
717
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
718
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
717
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
718
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.0", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", showErrors: ["showErrors", "showErrors", coerceBooleanProperty] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "<ng-container *ngIf=\"labelText && showErrors && errors\">\n <sky-form-error *ngIf=\"errors['required']\" class=\"sky-form-error-required\">\n {{ 'skyux_form_error_required' | skyLibResources : labelText }}\n </sky-form-error>\n\n <sky-form-error\n *ngIf=\"errors['maxlength'] as maxLengthError\"\n class=\"sky-form-error-maxlength\"\n >\n {{\n 'skyux_form_error_maxlength'\n | skyLibResources : labelText : maxLengthError.requiredLength\n }}\n </sky-form-error>\n\n <sky-form-error\n *ngIf=\"errors['minlength'] as minLengthError\"\n class=\"sky-form-error-minlength\"\n >\n {{\n 'skyux_form_error_minlength'\n | skyLibResources : labelText : minLengthError.requiredLength\n }}\n </sky-form-error>\n\n <sky-form-error\n *ngIf=\"errors['skyCharacterCounter'] as characterCounterError\"\n class=\"sky-form-error-character-counter\"\n >\n {{\n 'skyux_form_error_character_count'\n | skyLibResources : labelText : characterCounterError.limit\n }}\n </sky-form-error>\n\n <sky-form-error *ngIf=\"errors['skyDate']\" class=\"sky-form-error-date\">\n {{ 'skyux_form_error_date' | skyLibResources }}\n </sky-form-error>\n\n <sky-form-error *ngIf=\"errors['skyEmail']\" class=\"sky-form-error-email\">\n {{ 'skyux_form_error_email' | skyLibResources }}\n </sky-form-error>\n\n <sky-form-error *ngIf=\"errors['skyPhoneField']\" class=\"sky-form-error-phone\">\n {{ 'skyux_form_error_phone' | skyLibResources }}\n </sky-form-error>\n\n <sky-form-error *ngIf=\"errors['skyTime']\" class=\"sky-form-error-time\">\n {{ 'skyux_form_error_time' | skyLibResources }}\n </sky-form-error>\n\n <sky-form-error *ngIf=\"errors['skyUrl']\" class=\"sky-form-error-url\">\n {{ 'skyux_form_error_url' | skyLibResources }}\n </sky-form-error>\n</ng-container>\n<ng-content />\n", styles: [":host,sky-status-indicator{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
719
719
|
}
|
|
720
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
|
|
721
721
|
type: Component,
|
|
722
722
|
args: [{ selector: 'sky-form-errors', standalone: true, imports: [
|
|
723
723
|
CommonModule,
|
|
@@ -747,11 +747,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
747
747
|
* @internal
|
|
748
748
|
*/
|
|
749
749
|
class SkyFormErrorsModule {
|
|
750
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
751
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
752
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
750
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
751
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent], exports: [SkyFormErrorsComponent] }); }
|
|
752
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent] }); }
|
|
753
753
|
}
|
|
754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFormErrorsModule, decorators: [{
|
|
755
755
|
type: NgModule,
|
|
756
756
|
args: [{
|
|
757
757
|
imports: [SkyFormErrorsComponent],
|
|
@@ -765,10 +765,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
765
765
|
* that help button element.
|
|
766
766
|
*/
|
|
767
767
|
class SkyFileAttachmentLabelComponent {
|
|
768
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
769
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyFileAttachmentLabelComponent, 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: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
770
770
|
}
|
|
771
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
|
|
772
772
|
type: Component,
|
|
773
773
|
args: [{ selector: 'sky-file-attachment-label', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
774
774
|
}], propDecorators: { labelContentId: [{
|
|
@@ -861,10 +861,10 @@ class SkyFileAttachmentService {
|
|
|
861
861
|
#getMimeMainType(type) {
|
|
862
862
|
return type.substr(0, type.indexOf('/'));
|
|
863
863
|
}
|
|
864
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
865
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
864
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
865
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentService }); }
|
|
866
866
|
}
|
|
867
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
|
|
868
868
|
type: Injectable
|
|
869
869
|
}] });
|
|
870
870
|
|
|
@@ -929,10 +929,10 @@ class SkyFileItemService {
|
|
|
929
929
|
}
|
|
930
930
|
return fileType.toUpperCase();
|
|
931
931
|
}
|
|
932
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
933
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
932
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
933
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileItemService }); }
|
|
934
934
|
}
|
|
935
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileItemService, decorators: [{
|
|
936
936
|
type: Injectable
|
|
937
937
|
}] });
|
|
938
938
|
|
|
@@ -1301,19 +1301,19 @@ class SkyFileAttachmentComponent {
|
|
|
1301
1301
|
// istanbul ignore next
|
|
1302
1302
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
1303
1303
|
#onTouched;
|
|
1304
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1304
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i2$2.NgControl, optional: true, self: true }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1305
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyFileAttachmentComponent, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", disabled: "disabled", maxFileSize: "maxFileSize", minFileSize: "minFileSize", validateFn: "validateFn", required: "required" }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, providers: [SkyFileAttachmentService], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.id]=\"labelElementId\"\n [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n >\n <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\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 aria-hidden=\"true\"\n class=\"sky-file-attachment-drop-description\"\n role=\"tooltip\"\n [attr.id]=\"fileDropDescriptionElementId\"\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\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 skyId\n [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n [attr.aria-label]=\"\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 [attr.aria-labelledby]=\"\n attachButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n #attachButton=\"skyId\"\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-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFile>\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 skyId\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_remove' | skyLibResources : fileName\n \"\n [attr.aria-labelledby]=\"\n deleteButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n #deleteButton=\"skyId\"\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\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [".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-name{padding:0 5px}.sky-file-attachment-name 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-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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-name{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-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-name{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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1306
1306
|
}
|
|
1307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
|
|
1308
1308
|
type: Component,
|
|
1309
1309
|
args: [{ selector: 'sky-file-attachment', providers: [SkyFileAttachmentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.id]=\"labelElementId\"\n [ngClass]=\"{ 'sky-control-label-required': required && hasLabelComponent }\"\n >\n <ng-container *ngTemplateOutlet=\"labelContent\"></ng-container>\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 aria-hidden=\"true\"\n class=\"sky-file-attachment-drop-description\"\n role=\"tooltip\"\n [attr.id]=\"fileDropDescriptionElementId\"\n >\n {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n </div>\n <input\n hidden\n tabindex=\"-1\"\n type=\"file\"\n [attr.accept]=\"acceptedTypes || null\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"fileChangeEvent($event)\"\n #fileInput\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 skyId\n [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n [attr.aria-label]=\"\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 [attr.aria-labelledby]=\"\n attachButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n #attachButton=\"skyId\"\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-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"fileName\"\n (click)=\"emitClick()\"\n >\n {{ truncatedFileName }}\n </a>\n </span>\n <ng-template #noFile>\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 skyId\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_remove' | skyLibResources : fileName\n \"\n [attr.aria-labelledby]=\"\n deleteButton.id +\n ' ' +\n (hasLabelComponent\n ? labelComponents?.get(0)?.labelContentId?.id\n : undefined)\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n #deleteButton=\"skyId\"\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\n<ng-template #labelContent>\n <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [".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-name{padding:0 5px}.sky-file-attachment-name 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-drop-description{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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-name{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-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-name{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"] }]
|
|
1310
|
-
}], ctorParameters:
|
|
1310
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2$2.NgControl, decorators: [{
|
|
1311
1311
|
type: Self
|
|
1312
1312
|
}, {
|
|
1313
1313
|
type: Optional
|
|
1314
1314
|
}] }, { type: i4.SkyThemeService, decorators: [{
|
|
1315
1315
|
type: Optional
|
|
1316
|
-
}] }]
|
|
1316
|
+
}] }], propDecorators: { acceptedTypes: [{
|
|
1317
1317
|
type: Input
|
|
1318
1318
|
}], disabled: [{
|
|
1319
1319
|
type: Input
|
|
@@ -1548,10 +1548,10 @@ class SkyFileDropComponent {
|
|
|
1548
1548
|
}
|
|
1549
1549
|
}
|
|
1550
1550
|
}
|
|
1551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1552
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<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 ></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' | 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-sm\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label' | skyLibResources)\n \"\n [attr.placeholder]=\"\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </div>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{ 'skyux_file_attachment_file_upload_link_done' | skyLibResources }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;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-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-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-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-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-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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
|
|
1553
1553
|
}
|
|
1554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileDropComponent, decorators: [{
|
|
1555
1555
|
type: Component,
|
|
1556
1556
|
args: [{ selector: 'sky-file-drop', providers: [SkyFileAttachmentService], template: "<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 ></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' | 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-sm\">\n <input\n type=\"text\"\n class=\"sky-form-control\"\n [attr.aria-label]=\"\n linkUploadAriaLabel ||\n ('skyux_file_attachment_file_upload_link_label' | skyLibResources)\n \"\n [attr.placeholder]=\"\n 'skyux_file_attachment_file_upload_link_placeholder'\n | skyLibResources\n \"\n [(ngModel)]=\"linkUrl\"\n (blur)=\"onLinkBlur()\"\n (keyup)=\"addLinkEnter($event)\"\n />\n </div>\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-primary\"\n [disabled]=\"!linkUrl\"\n (click)=\"addLink($event)\"\n >\n {{ 'skyux_file_attachment_file_upload_link_done' | skyLibResources }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;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-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-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-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-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-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}\n"] }]
|
|
1557
1557
|
}], propDecorators: { filesChanged: [{
|
|
@@ -1627,15 +1627,15 @@ class SkyFileSizePipe {
|
|
|
1627
1627
|
// TODO: Need to implement the async `getString` method in a breaking change.
|
|
1628
1628
|
return this.#resourcesService.getStringForLocale({ locale: 'en-US' }, key, ...args);
|
|
1629
1629
|
}
|
|
1630
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1631
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1630
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i1.DecimalPipe }, { token: i2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1631
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyFileSizePipe, name: "skyFileSize" }); }
|
|
1632
1632
|
}
|
|
1633
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileSizePipe, decorators: [{
|
|
1634
1634
|
type: Pipe,
|
|
1635
1635
|
args: [{
|
|
1636
1636
|
name: 'skyFileSize',
|
|
1637
1637
|
}]
|
|
1638
|
-
}], ctorParameters:
|
|
1638
|
+
}], ctorParameters: () => [{ type: i1.DecimalPipe }, { type: i2.SkyLibResourcesService }] });
|
|
1639
1639
|
|
|
1640
1640
|
class SkyFileItemComponent {
|
|
1641
1641
|
/**
|
|
@@ -1770,21 +1770,21 @@ class SkyFileItemComponent {
|
|
|
1770
1770
|
});
|
|
1771
1771
|
}
|
|
1772
1772
|
}
|
|
1773
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1773
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1774
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyFileItemComponent, 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;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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }] }); }
|
|
1775
1775
|
}
|
|
1776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1776
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileItemComponent, decorators: [{
|
|
1777
1777
|
type: Component,
|
|
1778
1778
|
args: [{ selector: 'sky-file-item', 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;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"] }]
|
|
1779
|
-
}], ctorParameters:
|
|
1779
|
+
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
|
|
1780
1780
|
type: Input
|
|
1781
1781
|
}], deleteFile: [{
|
|
1782
1782
|
type: Output
|
|
1783
1783
|
}] } });
|
|
1784
1784
|
|
|
1785
1785
|
class SkyFileAttachmentsModule {
|
|
1786
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1787
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1786
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1787
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentsModule, declarations: [SkyFileAttachmentComponent,
|
|
1788
1788
|
SkyFileAttachmentLabelComponent,
|
|
1789
1789
|
SkyFileDropComponent,
|
|
1790
1790
|
SkyFileItemComponent,
|
|
@@ -1799,7 +1799,7 @@ class SkyFileAttachmentsModule {
|
|
|
1799
1799
|
SkyFileDropComponent,
|
|
1800
1800
|
SkyFileItemComponent,
|
|
1801
1801
|
SkyFileSizePipe] }); }
|
|
1802
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1802
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentsModule, providers: [DecimalPipe, SkyFileItemService], imports: [CommonModule,
|
|
1803
1803
|
FormsModule,
|
|
1804
1804
|
SkyFormsResourcesModule,
|
|
1805
1805
|
SkyIconModule,
|
|
@@ -1807,7 +1807,7 @@ class SkyFileAttachmentsModule {
|
|
|
1807
1807
|
SkyThemeModule,
|
|
1808
1808
|
SkyTrimModule] }); }
|
|
1809
1809
|
}
|
|
1810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
|
|
1811
1811
|
type: NgModule,
|
|
1812
1812
|
args: [{
|
|
1813
1813
|
declarations: [
|
|
@@ -1862,10 +1862,10 @@ class SkyInputBoxHostService {
|
|
|
1862
1862
|
}
|
|
1863
1863
|
this.#host.populate(args);
|
|
1864
1864
|
}
|
|
1865
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1866
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1865
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1866
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxHostService }); }
|
|
1867
1867
|
}
|
|
1868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
|
|
1869
1869
|
type: Injectable
|
|
1870
1870
|
}] });
|
|
1871
1871
|
|
|
@@ -1881,10 +1881,10 @@ class SkyInputBoxControlDirective {
|
|
|
1881
1881
|
}
|
|
1882
1882
|
#_autocomplete;
|
|
1883
1883
|
#hostSvc = inject(SkyInputBoxHostService, { optional: true });
|
|
1884
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1885
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1884
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1885
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: SkyInputBoxControlDirective, isStandalone: true, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: { autocomplete: "autocomplete" }, host: { properties: { "autocomplete": "this.autocomplete" } }, ngImport: i0 }); }
|
|
1886
1886
|
}
|
|
1887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
|
|
1888
1888
|
type: Directive,
|
|
1889
1889
|
args: [{
|
|
1890
1890
|
selector:
|
|
@@ -1915,10 +1915,10 @@ class SkyInputBoxHelpInlineComponent {
|
|
|
1915
1915
|
togglePopoverOpen(open) {
|
|
1916
1916
|
this.popoverOpen = open;
|
|
1917
1917
|
}
|
|
1918
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1919
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1918
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxHelpInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1919
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyInputBoxHelpInlineComponent, isStandalone: true, selector: "sky-input-box-help-inline", inputs: { labelText: "labelText", popoverTitle: "popoverTitle", popoverContent: "popoverContent" }, ngImport: i0, template: "<sky-help-inline\n [ariaControls]=\"popoverId.id\"\n [ariaExpanded]=\"popoverOpen\"\n [ariaLabel]=\"\n labelText\n ? ('skyux_input_box_help_inline_aria_label' | skyLibResources : labelText)\n : undefined\n \"\n [skyPopover]=\"helpPopover\"\n>\n</sky-help-inline>\n\n<sky-popover\n skyId\n [popoverTitle]=\"popoverTitle\"\n (popoverClosed)=\"togglePopoverOpen(false)\"\n (popoverOpened)=\"togglePopoverOpen(true)\"\n #helpPopover\n #popoverId=\"skyId\"\n>\n <ng-container *ngIf=\"popoverContentTemplate; else popoverContentText\">\n <ng-container *ngTemplateOutlet=\"popoverContentTemplate\" />\n </ng-container>\n</sky-popover>\n\n<ng-template #popoverContentText>\n {{ popoverContent }}\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i2$1.λ3, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i5.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i5.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1920
1920
|
}
|
|
1921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1921
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxHelpInlineComponent, decorators: [{
|
|
1922
1922
|
type: Component,
|
|
1923
1923
|
args: [{ selector: 'sky-input-box-help-inline', standalone: true, imports: [
|
|
1924
1924
|
CommonModule,
|
|
@@ -1989,10 +1989,10 @@ class SkyInputBoxAdapterService {
|
|
|
1989
1989
|
this.#renderer.setAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR, describedByIds.join(' '));
|
|
1990
1990
|
}
|
|
1991
1991
|
}
|
|
1992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1993
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1992
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1993
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxAdapterService }); }
|
|
1994
1994
|
}
|
|
1995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
|
|
1996
1996
|
type: Injectable
|
|
1997
1997
|
}] });
|
|
1998
1998
|
|
|
@@ -2153,20 +2153,20 @@ class SkyInputBoxComponent {
|
|
|
2153
2153
|
control.addValidators([this.#previousMaxLengthValidator]);
|
|
2154
2154
|
}
|
|
2155
2155
|
}
|
|
2156
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2157
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled", labelText: "labelText", characterLimit: "characterLimit", stacked: "stacked", helpPopoverTitle: "helpPopoverTitle", helpPopoverContent: "helpPopoverContent", hintText: "hintText" }, host: { properties: { "class": "this.cssClass" } }, providers: [
|
|
2158
2158
|
SkyContentInfoProvider,
|
|
2159
2159
|
SkyInputBoxAdapterService,
|
|
2160
2160
|
SkyInputBoxHostService,
|
|
2161
|
-
], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': disabled\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': disabled\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 [for]=\"controlId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-input-box-help-inline\n *ngIf=\"helpPopoverContent\"\n class=\"sky-control-help\"\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 [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n >\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n </sky-form-errors>\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\n [id]=\"hintTextId\"\n >\n {{ hintText }}\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-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:-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,.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:-webkit-autofill:hover{clip-path:inset(1px 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:-webkit-autofill{clip-path:inset(1px round 6px)!important}.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:-webkit-autofill{border-top:29px solid transparent!important}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: SkyInputBoxHelpInlineComponent, selector: "sky-input-box-help-inline", inputs: ["labelText", "popoverTitle", "popoverContent"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2161
|
+
], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': disabled\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': disabled\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 [for]=\"controlId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-input-box-help-inline\n *ngIf=\"helpPopoverContent\"\n class=\"sky-control-help\"\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 [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n >\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n </sky-form-errors>\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\n [id]=\"hintTextId\"\n >\n {{ hintText }}\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-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: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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: SkyInputBoxHelpInlineComponent, selector: "sky-input-box-help-inline", inputs: ["labelText", "popoverTitle", "popoverContent"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2162
2162
|
}
|
|
2163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
|
|
2164
2164
|
type: Component,
|
|
2165
2165
|
args: [{ selector: 'sky-input-box', providers: [
|
|
2166
2166
|
SkyContentInfoProvider,
|
|
2167
2167
|
SkyInputBoxAdapterService,
|
|
2168
2168
|
SkyInputBoxHostService,
|
|
2169
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': disabled\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': disabled\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 [for]=\"controlId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-input-box-help-inline\n *ngIf=\"helpPopoverContent\"\n class=\"sky-control-help\"\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 [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n >\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n </sky-form-errors>\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\n [id]=\"hintTextId\"\n >\n {{ hintText }}\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-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:-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,.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:-webkit-autofill:hover{clip-path:inset(1px 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:-webkit-autofill{clip-path:inset(1px round 6px)!important}.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:-webkit-autofill{border-top:29px solid transparent!important}.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"] }]
|
|
2169
|
+
], encapsulation: ViewEncapsulation.None, template: "<div\n *skyThemeIf=\"'default'\"\n class=\"sky-input-box\"\n [ngClass]=\"{\n 'sky-input-box-disabled': disabled\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': disabled\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 [for]=\"controlId\"\n [ngClass]=\"{\n 'sky-control-label-required': required\n }\"\n >{{ labelText }}</label\n >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <sky-input-box-help-inline\n *ngIf=\"helpPopoverContent\"\n class=\"sky-control-help\"\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 [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n >\n <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n </sky-form-errors>\n</ng-template>\n\n<ng-template #hintTextTemplate>\n <div\n *ngIf=\"hintText\"\n class=\"sky-font-deemphasized sky-input-box-hint-text\"\n [id]=\"hintTextId\"\n >\n {{ hintText }}\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-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: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"] }]
|
|
2170
2170
|
}], propDecorators: { hasErrors: [{
|
|
2171
2171
|
type: Input
|
|
2172
2172
|
}], disabled: [{
|
|
@@ -2203,20 +2203,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
2203
2203
|
}] } });
|
|
2204
2204
|
|
|
2205
2205
|
class SkyInputBoxModule {
|
|
2206
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2207
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2207
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
|
|
2208
2208
|
SkyCharacterCounterModule,
|
|
2209
2209
|
SkyFormErrorsComponent,
|
|
2210
2210
|
SkyInputBoxControlDirective,
|
|
2211
2211
|
SkyInputBoxHelpInlineComponent,
|
|
2212
2212
|
SkyThemeModule], exports: [SkyInputBoxComponent, SkyInputBoxControlDirective] }); }
|
|
2213
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2213
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
|
|
2214
2214
|
SkyCharacterCounterModule,
|
|
2215
2215
|
SkyFormErrorsComponent,
|
|
2216
2216
|
SkyInputBoxHelpInlineComponent,
|
|
2217
2217
|
SkyThemeModule] }); }
|
|
2218
2218
|
}
|
|
2219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyInputBoxModule, decorators: [{
|
|
2220
2220
|
type: NgModule,
|
|
2221
2221
|
args: [{
|
|
2222
2222
|
declarations: [SkyInputBoxComponent],
|
|
@@ -2272,12 +2272,12 @@ class SkyRadioGroupIdService {
|
|
|
2272
2272
|
#emitRadioIds() {
|
|
2273
2273
|
this.#radioIds$.next(Array.from(this.#radioIds.values()));
|
|
2274
2274
|
}
|
|
2275
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2276
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioGroupIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2276
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioGroupIdService }); }
|
|
2277
2277
|
}
|
|
2278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioGroupIdService, decorators: [{
|
|
2279
2279
|
type: Injectable
|
|
2280
|
-
}], ctorParameters:
|
|
2280
|
+
}], ctorParameters: () => [] });
|
|
2281
2281
|
|
|
2282
2282
|
/**
|
|
2283
2283
|
* Provider Expression that allows sky-radio to register as a ControlValueAccessor.
|
|
@@ -2531,13 +2531,13 @@ class SkyRadioComponent {
|
|
|
2531
2531
|
#onChangeCallback;
|
|
2532
2532
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
2533
2533
|
#onTouchedCallback;
|
|
2534
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2535
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2534
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", icon: "icon", radioType: "radioType" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<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]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\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-content select=\"sky-radio-label\" />\n</label>\n", styles: [".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%}: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}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2536
2536
|
}
|
|
2537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioComponent, decorators: [{
|
|
2538
2538
|
type: Component,
|
|
2539
|
-
args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\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-content select=\"sky-radio-label\" />\n</label>\n", styles: [".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:#
|
|
2540
|
-
}], ctorParameters:
|
|
2539
|
+
args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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]=\"label\"\n [attr.aria-labelledby]=\"labelledBy\"\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-content select=\"sky-radio-label\" />\n</label>\n", styles: [".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%}: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}.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}\n"] }]
|
|
2540
|
+
}], ctorParameters: () => [], propDecorators: { checked: [{
|
|
2541
2541
|
type: Input
|
|
2542
2542
|
}], disabled: [{
|
|
2543
2543
|
type: Input
|
|
@@ -2789,17 +2789,17 @@ class SkyRadioGroupComponent {
|
|
|
2789
2789
|
this.#updateRadioButtonTabIndexes();
|
|
2790
2790
|
this.#updateRadioButtonDisabled();
|
|
2791
2791
|
}
|
|
2792
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2793
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2792
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i2$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2793
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: "disabled", name: "name", required: "required", value: "value", tabIndex: "tabIndex" }, providers: [SkyRadioGroupIdService], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.required]=\"required ? '' : null\"\n>\n <ng-content />\n</div>\n" }); }
|
|
2794
2794
|
}
|
|
2795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
|
|
2796
2796
|
type: Component,
|
|
2797
2797
|
args: [{ selector: 'sky-radio-group', providers: [SkyRadioGroupIdService], template: "<div\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.required]=\"required ? '' : null\"\n>\n <ng-content />\n</div>\n" }]
|
|
2798
|
-
}], ctorParameters:
|
|
2798
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i2$2.NgControl, decorators: [{
|
|
2799
2799
|
type: Self
|
|
2800
2800
|
}, {
|
|
2801
2801
|
type: Optional
|
|
2802
|
-
}] }]
|
|
2802
|
+
}] }], propDecorators: { ariaLabelledBy: [{
|
|
2803
2803
|
type: Input
|
|
2804
2804
|
}], ariaLabel: [{
|
|
2805
2805
|
type: Input
|
|
@@ -2830,10 +2830,10 @@ class SkyRadioLabelComponent {
|
|
|
2830
2830
|
onClick(event) {
|
|
2831
2831
|
event.stopPropagation();
|
|
2832
2832
|
}
|
|
2833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2833
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2834
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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", styles: [""], dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }] }); }
|
|
2835
2835
|
}
|
|
2836
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
|
|
2837
2837
|
type: Component,
|
|
2838
2838
|
args: [{ selector: 'sky-radio-label', 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" }]
|
|
2839
2839
|
}], propDecorators: { onClick: [{
|
|
@@ -2842,13 +2842,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
2842
2842
|
}] } });
|
|
2843
2843
|
|
|
2844
2844
|
class SkyRadioModule {
|
|
2845
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2846
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2845
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2846
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
|
|
2847
2847
|
SkyRadioGroupComponent,
|
|
2848
2848
|
SkyRadioLabelComponent], imports: [CommonModule, FormsModule, SkyIconModule, SkyTrimModule], exports: [SkyRadioComponent, SkyRadioGroupComponent, SkyRadioLabelComponent] }); }
|
|
2849
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2849
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioModule, imports: [CommonModule, FormsModule, SkyIconModule, SkyTrimModule] }); }
|
|
2850
2850
|
}
|
|
2851
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyRadioModule, decorators: [{
|
|
2852
2852
|
type: NgModule,
|
|
2853
2853
|
args: [{
|
|
2854
2854
|
declarations: [
|
|
@@ -2978,21 +2978,21 @@ class SkySelectionBoxAdapterService {
|
|
|
2978
2978
|
const el = element.nativeElement;
|
|
2979
2979
|
el.tabIndex = tabIndex;
|
|
2980
2980
|
}
|
|
2981
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2982
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2981
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2982
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxAdapterService }); }
|
|
2983
2983
|
}
|
|
2984
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
|
|
2985
2985
|
type: Injectable
|
|
2986
|
-
}], ctorParameters:
|
|
2986
|
+
}], ctorParameters: () => [{ type: i1$1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }] });
|
|
2987
2987
|
|
|
2988
2988
|
/**
|
|
2989
2989
|
* Specifies the description to display in a selection box.
|
|
2990
2990
|
*/
|
|
2991
2991
|
class SkySelectionBoxDescriptionComponent {
|
|
2992
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2993
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2992
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2993
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content />\n" }); }
|
|
2994
2994
|
}
|
|
2995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
|
|
2996
2996
|
type: Component,
|
|
2997
2997
|
args: [{ selector: 'sky-selection-box-description', template: "<ng-content />\n" }]
|
|
2998
2998
|
}] });
|
|
@@ -3100,13 +3100,13 @@ class SkySelectionBoxComponent {
|
|
|
3100
3100
|
});
|
|
3101
3101
|
}
|
|
3102
3102
|
}
|
|
3103
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3104
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n [attr.disabled]=\"disabled ? true : null\"\n [ngClass]=\"{\n 'sky-selection-box-selected': checked,\n 'sky-selection-box-disabled': disabled\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n (keydown)=\"onKeydown($event)\"\n #selectionBox\n>\n <div\n class=\"sky-selection-box-icon\"\n [ngStyle]=\"{\n display: !icon.innerHTML.trim() ? 'none' : ''\n }\"\n #icon\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div\n class=\"sky-selection-box-header\"\n [ngClass]=\"{\n 'sky-font-heading-2': icon.innerHTML.trim(),\n 'sky-font-heading-3': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div\n class=\"sky-selection-box-description\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n <ng-content select=\"sky-selection-box-description\" />\n </div>\n </div>\n\n <div class=\"sky-selection-box-control\" #control>\n <ng-content select=\"sky-radio\" />\n <ng-content select=\"sky-checkbox\" />\n </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3105
3105
|
}
|
|
3106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
|
|
3107
3107
|
type: Component,
|
|
3108
|
-
args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label\n class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n [attr.disabled]=\"disabled ? true : null\"\n [ngClass]=\"{\n 'sky-selection-box-selected': checked,\n 'sky-selection-box-disabled': disabled\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n (keydown)=\"onKeydown($event)\"\n #selectionBox\n>\n <div\n class=\"sky-selection-box-icon\"\n [ngStyle]=\"{\n display: !icon.innerHTML.trim() ? 'none' : ''\n }\"\n #icon\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div\n class=\"sky-selection-box-header\"\n [ngClass]=\"{\n 'sky-font-heading-2': icon.innerHTML.trim(),\n 'sky-font-heading-3': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div\n class=\"sky-selection-box-description\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n <ng-content select=\"sky-selection-box-description\" />\n </div>\n </div>\n\n <div class=\"sky-selection-box-control\" #control>\n <ng-content select=\"sky-radio\" />\n <ng-content select=\"sky-checkbox\" />\n </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#
|
|
3109
|
-
}], ctorParameters:
|
|
3108
|
+
args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label\n class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n [attr.disabled]=\"disabled ? true : null\"\n [ngClass]=\"{\n 'sky-selection-box-selected': checked,\n 'sky-selection-box-disabled': disabled\n }\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n (keydown)=\"onKeydown($event)\"\n #selectionBox\n>\n <div\n class=\"sky-selection-box-icon\"\n [ngStyle]=\"{\n display: !icon.innerHTML.trim() ? 'none' : ''\n }\"\n #icon\n >\n <ng-content select=\"sky-icon\" />\n </div>\n\n <div class=\"sky-selection-box-content\">\n <div\n class=\"sky-selection-box-header\"\n [ngClass]=\"{\n 'sky-font-heading-2': icon.innerHTML.trim(),\n 'sky-font-heading-3': !icon.innerHTML.trim()\n }\"\n >\n <ng-content select=\"sky-selection-box-header\" />\n </div>\n <div\n class=\"sky-selection-box-description\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern',\n 'sky-deemphasized': 'default'\n }\"\n >\n <ng-content select=\"sky-selection-box-description\" />\n </div>\n </div>\n\n <div class=\"sky-selection-box-control\" #control>\n <ng-content select=\"sky-radio\" />\n <ng-content select=\"sky-checkbox\" />\n </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"] }]
|
|
3109
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }], propDecorators: { control: [{
|
|
3110
3110
|
type: Input
|
|
3111
3111
|
}], controlEl: [{
|
|
3112
3112
|
type: ViewChild,
|
|
@@ -3228,15 +3228,15 @@ class SkySelectionBoxGridComponent {
|
|
|
3228
3228
|
this.#coreAdapterService.syncMaxHeight(this.containerElementRef, SKY_SELECTION_BOX_CLASS_NAME);
|
|
3229
3229
|
}
|
|
3230
3230
|
}
|
|
3231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i1$1.SkyMutationObserverService }, { token: i0.NgZone }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", 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 var(--sky-compat-selection-box-grid-margin-bottom, -15px) auto}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3233
3233
|
}
|
|
3234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
|
|
3235
3235
|
type: Component,
|
|
3236
3236
|
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 var(--sky-compat-selection-box-grid-margin-bottom, -15px) auto}.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"] }]
|
|
3237
|
-
}], ctorParameters:
|
|
3237
|
+
}], ctorParameters: () => [{ type: i1$1.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i1$1.SkyMutationObserverService }, { type: i0.NgZone }, { type: i4.SkyThemeService, decorators: [{
|
|
3238
3238
|
type: Optional
|
|
3239
|
-
}] }]
|
|
3239
|
+
}] }], propDecorators: { alignItems: [{
|
|
3240
3240
|
type: Input
|
|
3241
3241
|
}], selectionBoxes: [{
|
|
3242
3242
|
type: ContentChildren,
|
|
@@ -3258,26 +3258,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
3258
3258
|
* Specifies the header to display in a selection box.
|
|
3259
3259
|
*/
|
|
3260
3260
|
class SkySelectionBoxHeaderComponent {
|
|
3261
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3262
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3261
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3262
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content />\n" }); }
|
|
3263
3263
|
}
|
|
3264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
|
|
3265
3265
|
type: Component,
|
|
3266
3266
|
args: [{ selector: 'sky-selection-box-header', template: "<ng-content />\n" }]
|
|
3267
3267
|
}] });
|
|
3268
3268
|
|
|
3269
3269
|
class SkySelectionBoxModule {
|
|
3270
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3271
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3270
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3271
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
|
|
3272
3272
|
SkySelectionBoxComponent,
|
|
3273
3273
|
SkySelectionBoxDescriptionComponent,
|
|
3274
3274
|
SkySelectionBoxHeaderComponent], imports: [CommonModule, SkyThemeModule], exports: [SkySelectionBoxGridComponent,
|
|
3275
3275
|
SkySelectionBoxComponent,
|
|
3276
3276
|
SkySelectionBoxDescriptionComponent,
|
|
3277
3277
|
SkySelectionBoxHeaderComponent] }); }
|
|
3278
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3278
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [CommonModule, SkyThemeModule] }); }
|
|
3279
3279
|
}
|
|
3280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3280
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
|
|
3281
3281
|
type: NgModule,
|
|
3282
3282
|
args: [{
|
|
3283
3283
|
declarations: [
|
|
@@ -3303,10 +3303,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
3303
3303
|
* that help button element.
|
|
3304
3304
|
*/
|
|
3305
3305
|
class SkyToggleSwitchLabelComponent {
|
|
3306
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3307
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3308
3308
|
}
|
|
3309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
|
|
3310
3310
|
type: Component,
|
|
3311
3311
|
args: [{ selector: 'sky-toggle-switch-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span skyTrim><ng-content /></span>\n" }]
|
|
3312
3312
|
}] });
|
|
@@ -3442,19 +3442,19 @@ class SkyToggleSwitchComponent {
|
|
|
3442
3442
|
#toggleChecked() {
|
|
3443
3443
|
this.checked = !this.checked;
|
|
3444
3444
|
}
|
|
3445
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3446
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3445
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: SkyToggleSwitchComponent, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { toggleChange: "toggleChange" }, providers: [
|
|
3447
3447
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
3448
3448
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
3449
3449
|
], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent\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]=\"ariaLabel\"\n [attr.aria-labelledby]=\"!ariaLabel && hasLabelComponent ? labelId : null\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n #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\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n class=\"sky-toggle-switch-label\"\n ><ng-container *ngTemplateOutlet=\"labelContent\"></ng-container></label\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span></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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3450
3450
|
}
|
|
3451
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
|
|
3452
3452
|
type: Component,
|
|
3453
3453
|
args: [{ selector: 'sky-toggle-switch', providers: [
|
|
3454
3454
|
SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
|
|
3455
3455
|
SKY_TOGGLE_SWITCH_VALIDATOR,
|
|
3456
3456
|
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent\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]=\"ariaLabel\"\n [attr.aria-labelledby]=\"!ariaLabel && hasLabelComponent ? labelId : null\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n #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\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n class=\"sky-toggle-switch-label\"\n ><ng-container *ngTemplateOutlet=\"labelContent\"></ng-container></label\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\" /></span></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"] }]
|
|
3457
|
-
}], ctorParameters:
|
|
3457
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyIdService }], propDecorators: { ariaLabel: [{
|
|
3458
3458
|
type: Input
|
|
3459
3459
|
}], checked: [{
|
|
3460
3460
|
type: Input
|
|
@@ -3470,11 +3470,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
|
|
|
3470
3470
|
}] } });
|
|
3471
3471
|
|
|
3472
3472
|
class SkyToggleSwitchModule {
|
|
3473
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3474
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3475
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3474
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [CommonModule, FormsModule, SkyTrimModule, SkyIdModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] }); }
|
|
3475
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchModule, imports: [CommonModule, FormsModule, SkyTrimModule, SkyIdModule] }); }
|
|
3476
3476
|
}
|
|
3477
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
|
|
3478
3478
|
type: NgModule,
|
|
3479
3479
|
args: [{
|
|
3480
3480
|
declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
|