@skyux/forms 9.21.3 → 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 +4 -4
- 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 +5 -5
- 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 +5 -5
- 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 +138 -138
- 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,14 +2153,14 @@ 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
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,
|
|
@@ -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
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:
|
|
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
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:
|
|
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],
|