@skyux/forms 5.6.1 → 5.7.1
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/bundles/skyux-forms.umd.js +15 -12
- package/documentation.json +255 -595
- package/esm2015/lib/modules/character-counter/character-counter.directive.js +1 -0
- package/esm2015/lib/modules/character-counter/character-counter.directive.js.map +1 -1
- package/esm2015/lib/modules/checkbox/checkbox.component.js +2 -1
- package/esm2015/lib/modules/checkbox/checkbox.component.js.map +1 -1
- package/esm2015/lib/modules/file-attachment/file-attachment.component.js +2 -2
- package/esm2015/lib/modules/file-attachment/file-attachment.component.js.map +1 -1
- package/esm2015/lib/modules/input-box/input-box.component.js +1 -1
- package/esm2015/lib/modules/radio/radio-group.component.js +2 -2
- package/esm2015/lib/modules/radio/radio-group.component.js.map +1 -1
- package/esm2015/lib/modules/radio/radio.component.js +3 -3
- package/esm2015/lib/modules/radio/radio.component.js.map +1 -1
- package/esm2015/lib/modules/shared/sky-forms-resources.module.js +1 -1
- package/esm2015/lib/modules/shared/sky-forms-resources.module.js.map +1 -1
- package/esm2015/lib/modules/toggle-switch/toggle-switch.component.js +2 -1
- package/esm2015/lib/modules/toggle-switch/toggle-switch.component.js.map +1 -1
- package/fesm2015/skyux-forms.js +14 -11
- package/fesm2015/skyux-forms.js.map +1 -1
- package/lib/modules/shared/sky-forms-resources.module.d.ts +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"character-counter.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/character-counter/character-counter.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAEL,aAAa,GAGd,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;;AAEhG;;;;;GAKG;AAWH,MAAM,OAAO,iCAAiC;IAV9C;
|
|
1
|
+
{"version":3,"file":"character-counter.directive.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/character-counter/character-counter.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAEL,aAAa,GAGd,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,qCAAqC,EAAE,MAAM,yCAAyC,CAAC;;AAEhG;;;;;GAKG;AAWH,MAAM,OAAO,iCAAiC;IAV9C;QA0EE,gEAAgE;QACxD,qBAAgB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;KACrC;IAzDC;;;;OAIG;IACH,IACW,wBAAwB,CAAC,KAAa;QAC/C,IAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC;QACvC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,IAAW,wBAAwB;QACjC,OAAO,IAAI,CAAC,yBAAyB,IAAI,CAAC,CAAC;IAC7C,CAAC;IAIM,QAAQ,CAAC,OAAwB;QACtC,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAE5B,IAAI,CAAC,oBAAoB,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAExD,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,wBAAwB,EAAE;YAChD,qEAAqE;YACrE,OAAO,CAAC,aAAa,EAAE,CAAC;YAExB,OAAO;gBACL,mBAAmB,EAAE;oBACnB,OAAO,EAAE,KAAK;iBACf;aACF,CAAC;SACH;IACH,CAAC;IAEM,yBAAyB,CAAC,EAAc;QAC7C,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;IAC7B,CAAC;IAEO,oBAAoB,CAAC,KAAa;QACxC,IAAI,IAAI,CAAC,4BAA4B,EAAE;YACrC,IAAI,CAAC,4BAA4B,CAAC,cAAc,GAAG,KAAK,CAAC;SAC1D;IACH,CAAC;IAEO,oBAAoB,CAAC,KAAa;QACxC,IAAI,IAAI,CAAC,4BAA4B,EAAE;YACrC,IAAI,CAAC,4BAA4B,CAAC,mBAAmB,GAAG,KAAK,CAAC;SAC/D;IACH,CAAC;;+HA9DU,iCAAiC;mHAAjC,iCAAiC,gLARjC;QACT;YACE,OAAO,EAAE,aAAa;YACtB,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE,IAAI;SACZ;KACF;4FAEU,iCAAiC;kBAV7C,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,aAAa;4BACtB,WAAW,mCAAmC;4BAC9C,KAAK,EAAE,IAAI;yBACZ;qBACF;iBACF;8BAQQ,4BAA4B;sBADlC,KAAK;gBASK,wBAAwB;sBADlC,KAAK","sourcesContent":["import { Directive, Input } from '@angular/core';\nimport {\n AbstractControl,\n NG_VALIDATORS,\n ValidationErrors,\n Validator,\n} from '@angular/forms';\n\nimport { SkyCharacterCounterIndicatorComponent } from './character-counter-indicator.component';\n\n/**\n * Creates an input field that validates the number of characters. Place this directive on\n * an `input` or `textarea` element. If users enter more characters than allowed, then the\n * input field is invalid and the component displays an error indicator.\n * @required\n */\n@Directive({\n selector: '[skyCharacterCounter]',\n providers: [\n {\n provide: NG_VALIDATORS,\n useExisting: SkyCharacterCounterInputDirective,\n multi: true,\n },\n ],\n})\nexport class SkyCharacterCounterInputDirective implements Validator {\n /**\n * Specifies the character count indicator component that displays the character count,\n * character limit, and over-the-limit indicator. Place this directive on an `input` or\n * `textarea` element.\n */\n @Input()\n public skyCharacterCounterIndicator: SkyCharacterCounterIndicatorComponent;\n\n /**\n * Specifies the maximum number of characters allowed in the input field. Place this directive\n * on an `input` or `textarea` element. This property accepts `number` values.\n * @required\n */\n @Input()\n public set skyCharacterCounterLimit(value: number) {\n this._skyCharacterCounterLimit = value;\n this.updateIndicatorLimit(this.skyCharacterCounterLimit);\n this._validatorChange();\n }\n\n public get skyCharacterCounterLimit(): number {\n return this._skyCharacterCounterLimit || 0;\n }\n\n private _skyCharacterCounterLimit: number;\n\n public validate(control: AbstractControl): ValidationErrors {\n const value = control.value;\n\n this.updateIndicatorCount((value && value.length) || 0);\n\n if (!value) {\n return;\n }\n\n if (value.length > this.skyCharacterCounterLimit) {\n // This is needed to apply the appropriate error styles to the input.\n control.markAsTouched();\n\n return {\n skyCharacterCounter: {\n invalid: value,\n },\n };\n }\n }\n\n public registerOnValidatorChange(fn: () => void): void {\n this._validatorChange = fn;\n }\n\n private updateIndicatorCount(count: number): void {\n if (this.skyCharacterCounterIndicator) {\n this.skyCharacterCounterIndicator.characterCount = count;\n }\n }\n\n private updateIndicatorLimit(limit: number): void {\n if (this.skyCharacterCounterIndicator) {\n this.skyCharacterCounterIndicator.characterCountLimit = limit;\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private _validatorChange = () => {};\n}\n"]}
|
|
@@ -44,8 +44,9 @@ export class SkyCheckboxComponent {
|
|
|
44
44
|
this._disabledChange = new BehaviorSubject(this._disabled);
|
|
45
45
|
this._required = false;
|
|
46
46
|
/** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
|
|
47
|
-
|
|
47
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
48
48
|
this.onTouched = () => { };
|
|
49
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
49
50
|
this._controlValueAccessorChangeFn = (value) => { };
|
|
50
51
|
if (this.ngControl) {
|
|
51
52
|
this.ngControl.valueAccessor = this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/checkbox/checkbox.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/checkbox/checkbox.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n OnInit,\n Optional,\n Output,\n Self,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\n\nimport { BehaviorSubject, Observable } from 'rxjs';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyCheckboxChange } from './checkbox-change';\n\n/**\n * Monotonically increasing integer used to auto-generate unique ids for checkbox components.\n */\nlet nextId = 0;\n\n/**\n * Replaces the HTML input element with `type=\"checkbox\"`. When users select a checkbox, its value\n * is driven through an `ngModel` attribute that you specify on the `sky-checkbox` element.\n */\n@Component({\n selector: 'sky-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n})\nexport class SkyCheckboxComponent implements ControlValueAccessor, OnInit {\n /**\n * Specifies an ARIA label for the checkbox. This sets the checkbox's `aria-label` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility)\n * when the checkbox does not include a visible label. You must set this property for icon\n * checkboxes. If the checkbox includes a visible label, use `labelledBy` instead.\n */\n @Input()\n public label: string;\n\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels the\n * checkbox. This sets the checkbox's `aria-labelledby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility).\n * If the checkbox does not include a visible label, use `label` instead.\n */\n @Input()\n public labelledBy: string;\n\n /**\n * Specifies an ID for the checkbox.\n * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`\n */\n @Input()\n public id = `sky-checkbox-${++nextId}`;\n\n /**\n * Indicates whether to disable the checkbox.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);\n if (coercedValue !== this.disabled) {\n this._disabled = coercedValue;\n this._disabledChange.next(this._disabled);\n }\n }\n\n /**\n * Indicates whether the checkbox is disabled.\n */\n public get disabled() {\n return this._disabled;\n }\n\n /**\n * Specifies an index for the checkbox. If not defined, the index is set to the position of the\n * checkbox on load.\n */\n @Input()\n public tabindex = 0;\n\n /**\n * Specifies a name for a group of checkboxes.\n * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`\n */\n @Input()\n public name = `sky-checkbox-${++nextId}`;\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n public change = new EventEmitter<SkyCheckboxChange>();\n\n /**\n * Specifies an icon to display in place of the checkbox. To group icon checkboxes\n * like in the demo, place the `sky-switch-icon-group` class on the direct parent\n * element of the checkboxes.\n */\n @Input()\n public icon: string;\n\n /**\n * Specifies a type to set the background color after users select a checkbox where the\n * `icon` property displays an icon in place of the checkbox. The valid options correspond to\n * [the label component's](https://developer.blackbaud.com/skyux/components/label)\n * label types. `\"info\"` creates a blue background, `\"success\"` creates a green\n * background, `\"warning\"` creates an orange background, and `\"danger\"` creates a red background.\n * @default \"info\"\n */\n @Input()\n public set checkboxType(value: string) {\n if (value) {\n this._checkboxType = value.toLowerCase();\n }\n }\n\n public get checkboxType(): string {\n return this._checkboxType || 'info';\n }\n\n public get inputId(): string {\n return `input-${this.id}`;\n }\n\n /**\n * Indicates whether the checkbox is selected.\n * @default false\n */\n @Input()\n public set checked(checked: boolean) {\n if (checked !== this.checked) {\n this._checked = checked;\n this._controlValueAccessorChangeFn(checked);\n this._checkedChange.next(this._checked);\n\n // Do not mark the field as \"dirty\"\n // if the field has been initialized with a value.\n if (this.isFirstChange && this.ngControl && this.ngControl.control) {\n this.ngControl.control.markAsPristine();\n this.isFirstChange = false;\n }\n }\n }\n\n /**\n * Indicates whether the checkbox is selected.\n */\n public get checked() {\n return this._checked;\n }\n\n /**\n * Indicates whether the input is required for form validation.\n * When you set this property to `true`, the component adds `aria-required` and `required`\n * attributes to the input element so that forms display an invalid state until the input element\n * is complete.\n * @default false\n */\n @Input()\n set required(value: boolean) {\n this._required = SkyFormsUtility.coerceBooleanProperty(value);\n }\n\n get required(): boolean {\n return this._required;\n }\n\n /**\n * Fires when users select or deselect the checkbox.\n */\n @Output()\n public get checkedChange(): Observable<boolean> {\n return this._checkedChange;\n }\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n public get disabledChange(): Observable<boolean> {\n return this._disabledChange;\n }\n\n private isFirstChange = true;\n\n private _checkboxType: string;\n\n private _checked = false;\n\n private _checkedChange = new BehaviorSubject<boolean>(this._checked);\n\n private _disabled = false;\n\n private _disabledChange = new BehaviorSubject<boolean>(this._disabled);\n\n private _required = false;\n\n constructor(@Self() @Optional() private ngControl: NgControl) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n public ngOnInit(): void {\n if (this.ngControl) {\n // Backwards compatibility support for anyone still using Validators.Required.\n this.required =\n this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);\n }\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public writeValue(value: any) {\n this.checked = !!value;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public registerOnChange(fn: (value: any) => void) {\n this._controlValueAccessorChangeFn = fn;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public registerOnTouched(fn: any) {\n this.onTouched = fn;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n /**\n * Event handler for checkbox input element.\n * Toggles checked state if element is not disabled.\n */\n public onInteractionEvent(event: Event) {\n // We always have to stop propagation on the change event.\n // Otherwise the change event, from the input element, will bubble up and\n // emit its event object to the `change` output.\n event.stopPropagation();\n\n if (!this.disabled) {\n this._toggle();\n this._emitChangeEvent();\n }\n }\n\n public onInputBlur() {\n this.onTouched();\n }\n\n /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */\n /*istanbul ignore next */\n public onTouched: () => any = () => {};\n\n private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};\n\n private _emitChangeEvent() {\n const event = new SkyCheckboxChange();\n event.source = this;\n event.checked = this._checked;\n\n this._controlValueAccessorChangeFn(this._checked);\n this.change.emit(event);\n }\n\n /**\n * Toggles the `checked` value between true and false\n */\n private _toggle() {\n this.checked = !this.checked;\n }\n}\n","<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 />\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 || checked\"\n class=\"sky-checkbox-icon-default\"\n fixedWidth=\"true\"\n [icon]=\"icon || 'check'\"\n >\n </sky-icon>\n <div class=\"sky-checkbox-icon-modern\">\n <sky-icon\n *ngIf=\"icon; else checkedTemplate\"\n fixedWidth=\"true\"\n [icon]=\"icon\"\n >\n </sky-icon>\n <ng-template #checkedTemplate>\n <sky-icon\n *ngIf=\"checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n fixedWidth=\"true\"\n icon=\"check\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </ng-template>\n </div>\n </span>\n <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n"]}
|
|
1
|
+
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/checkbox/checkbox.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/checkbox/checkbox.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n OnInit,\n Optional,\n Output,\n Self,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\n\nimport { BehaviorSubject, Observable } from 'rxjs';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyCheckboxChange } from './checkbox-change';\n\n/**\n * Monotonically increasing integer used to auto-generate unique ids for checkbox components.\n */\nlet nextId = 0;\n\n/**\n * Replaces the HTML input element with `type=\"checkbox\"`. When users select a checkbox, its value\n * is driven through an `ngModel` attribute that you specify on the `sky-checkbox` element.\n */\n@Component({\n selector: 'sky-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n})\nexport class SkyCheckboxComponent implements ControlValueAccessor, OnInit {\n /**\n * Specifies an ARIA label for the checkbox. This sets the checkbox's `aria-label` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility)\n * when the checkbox does not include a visible label. You must set this property for icon\n * checkboxes. If the checkbox includes a visible label, use `labelledBy` instead.\n */\n @Input()\n public label: string;\n\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels the\n * checkbox. This sets the checkbox's `aria-labelledby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/components/checkbox#accessibility).\n * If the checkbox does not include a visible label, use `label` instead.\n */\n @Input()\n public labelledBy: string;\n\n /**\n * Specifies an ID for the checkbox.\n * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`\n */\n @Input()\n public id = `sky-checkbox-${++nextId}`;\n\n /**\n * Indicates whether to disable the checkbox.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);\n if (coercedValue !== this.disabled) {\n this._disabled = coercedValue;\n this._disabledChange.next(this._disabled);\n }\n }\n\n /**\n * Indicates whether the checkbox is disabled.\n */\n public get disabled() {\n return this._disabled;\n }\n\n /**\n * Specifies an index for the checkbox. If not defined, the index is set to the position of the\n * checkbox on load.\n */\n @Input()\n public tabindex = 0;\n\n /**\n * Specifies a name for a group of checkboxes.\n * @default a unique, auto-incrementing integer. For example: `sky-checkbox-1`\n */\n @Input()\n public name = `sky-checkbox-${++nextId}`;\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n public change = new EventEmitter<SkyCheckboxChange>();\n\n /**\n * Specifies an icon to display in place of the checkbox. To group icon checkboxes\n * like in the demo, place the `sky-switch-icon-group` class on the direct parent\n * element of the checkboxes.\n */\n @Input()\n public icon: string;\n\n /**\n * Specifies a type to set the background color after users select a checkbox where the\n * `icon` property displays an icon in place of the checkbox. The valid options correspond to\n * [the label component's](https://developer.blackbaud.com/skyux/components/label)\n * label types. `\"info\"` creates a blue background, `\"success\"` creates a green\n * background, `\"warning\"` creates an orange background, and `\"danger\"` creates a red background.\n * @default \"info\"\n */\n @Input()\n public set checkboxType(value: string) {\n if (value) {\n this._checkboxType = value.toLowerCase();\n }\n }\n\n public get checkboxType(): string {\n return this._checkboxType || 'info';\n }\n\n public get inputId(): string {\n return `input-${this.id}`;\n }\n\n /**\n * Indicates whether the checkbox is selected.\n * @default false\n */\n @Input()\n public set checked(checked: boolean) {\n if (checked !== this.checked) {\n this._checked = checked;\n this._controlValueAccessorChangeFn(checked);\n this._checkedChange.next(this._checked);\n\n // Do not mark the field as \"dirty\"\n // if the field has been initialized with a value.\n if (this.isFirstChange && this.ngControl && this.ngControl.control) {\n this.ngControl.control.markAsPristine();\n this.isFirstChange = false;\n }\n }\n }\n\n /**\n * Indicates whether the checkbox is selected.\n */\n public get checked() {\n return this._checked;\n }\n\n /**\n * Indicates whether the input is required for form validation.\n * When you set this property to `true`, the component adds `aria-required` and `required`\n * attributes to the input element so that forms display an invalid state until the input element\n * is complete.\n * @default false\n */\n @Input()\n set required(value: boolean) {\n this._required = SkyFormsUtility.coerceBooleanProperty(value);\n }\n\n get required(): boolean {\n return this._required;\n }\n\n /**\n * Fires when users select or deselect the checkbox.\n */\n @Output()\n public get checkedChange(): Observable<boolean> {\n return this._checkedChange;\n }\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n public get disabledChange(): Observable<boolean> {\n return this._disabledChange;\n }\n\n private isFirstChange = true;\n\n private _checkboxType: string;\n\n private _checked = false;\n\n private _checkedChange = new BehaviorSubject<boolean>(this._checked);\n\n private _disabled = false;\n\n private _disabledChange = new BehaviorSubject<boolean>(this._disabled);\n\n private _required = false;\n\n constructor(@Self() @Optional() private ngControl: NgControl) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n public ngOnInit(): void {\n if (this.ngControl) {\n // Backwards compatibility support for anyone still using Validators.Required.\n this.required =\n this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);\n }\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public writeValue(value: any) {\n this.checked = !!value;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public registerOnChange(fn: (value: any) => void) {\n this._controlValueAccessorChangeFn = fn;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public registerOnTouched(fn: any) {\n this.onTouched = fn;\n }\n\n /**\n * Implemented as part of ControlValueAccessor.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n /**\n * Event handler for checkbox input element.\n * Toggles checked state if element is not disabled.\n */\n public onInteractionEvent(event: Event) {\n // We always have to stop propagation on the change event.\n // Otherwise the change event, from the input element, will bubble up and\n // emit its event object to the `change` output.\n event.stopPropagation();\n\n if (!this.disabled) {\n this._toggle();\n this._emitChangeEvent();\n }\n }\n\n public onInputBlur() {\n this.onTouched();\n }\n\n /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n public onTouched: () => any = () => {};\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};\n\n private _emitChangeEvent() {\n const event = new SkyCheckboxChange();\n event.source = this;\n event.checked = this._checked;\n\n this._controlValueAccessorChangeFn(this._checked);\n this.change.emit(event);\n }\n\n /**\n * Toggles the `checked` value between true and false\n */\n private _toggle() {\n this.checked = !this.checked;\n }\n}\n","<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 />\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 || checked\"\n class=\"sky-checkbox-icon-default\"\n fixedWidth=\"true\"\n [icon]=\"icon || 'check'\"\n >\n </sky-icon>\n <div class=\"sky-checkbox-icon-modern\">\n <sky-icon\n *ngIf=\"icon; else checkedTemplate\"\n fixedWidth=\"true\"\n [icon]=\"icon\"\n >\n </sky-icon>\n <ng-template #checkedTemplate>\n <sky-icon\n *ngIf=\"checked\"\n class=\"sky-checkbox-icon-modern-checked\"\n fixedWidth=\"true\"\n icon=\"check\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </ng-template>\n </div>\n </span>\n <ng-content select=\"sky-checkbox-label\"> </ng-content>\n</label>\n"]}
|
|
@@ -55,9 +55,9 @@ export class SkyFileAttachmentComponent {
|
|
|
55
55
|
this.fileAttachmentId = uniqueId++;
|
|
56
56
|
this.ngUnsubscribe = new Subject();
|
|
57
57
|
this._disabled = false;
|
|
58
|
-
|
|
58
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
59
59
|
this._onChange = (_) => { };
|
|
60
|
-
|
|
60
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
61
61
|
this._onTouched = () => { };
|
|
62
62
|
this.labelElementId = `sky-file-attachment-label-${this.fileAttachmentId}`;
|
|
63
63
|
this.fileDropDescriptionElementId = `sky-file-attachment-drop-description-${this.fileAttachmentId}`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-attachment.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n QueryList,\n Self,\n ViewChild,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { SkyThemeService } from '@skyux/theme';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyFileAttachmentLabelComponent } from './file-attachment-label.component';\nimport { SkyFileAttachmentService } from './file-attachment.service';\nimport { SkyFileItem } from './file-item';\nimport { SkyFileItemService } from './file-item.service';\nimport { SkyFileAttachmentChange } from './types/file-attachment-change';\nimport { SkyFileAttachmentClick } from './types/file-attachment-click';\n\nlet uniqueId = 0;\n\n/**\n * Provides an element to attach a single local file.\n */\n@Component({\n selector: 'sky-file-attachment',\n templateUrl: './file-attachment.component.html',\n styleUrls: ['./file-attachment.component.scss'],\n providers: [SkyFileAttachmentService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyFileAttachmentComponent\n implements AfterViewInit, AfterContentInit, OnInit, OnDestroy\n{\n /**\n * Specifies a comma-delimited string literal of MIME types that users can attach.\n * By default, all file types are allowed.\n * @required\n */\n @Input()\n public acceptedTypes: string;\n\n /**\n * Indicates whether to disable the input.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);\n if (this._disabled !== newDisabledState) {\n this._disabled = newDisabledState;\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Specifies the maximum size in bytes for valid files.\n */\n @Input()\n public maxFileSize = 500000;\n\n /**\n * Specifies the minimum size in bytes for valid files.\n */\n @Input()\n public minFileSize = 0;\n\n /**\n * Specifies a custom validation function. This validation runs alongside the internal\n * file validation. This function takes a `SkyFileItem` object as a parameter.\n */\n @Input()\n public validateFn: Function;\n\n /**\n * Fires when users add or remove files.\n */\n @Output()\n public fileChange = new EventEmitter<SkyFileAttachmentChange>();\n\n /**\n * Fires when users select the file name link. Make sure to bind the event.\n * If you do not, the file name link will be a dead link.\n */\n @Output()\n public fileClick = new EventEmitter<SkyFileAttachmentClick>();\n\n public acceptedOver = false;\n\n public get hasLabelComponent(): boolean {\n return this.labelComponents.length > 0;\n }\n\n public fileDropDescriptionElementId: string;\n\n public labelElementId: string;\n\n public rejectedOver = false;\n\n /**\n * Indicates whether the input is required for form validation.\n * When you set this property to `true`, the component adds `aria-required` and `required`\n * attributes to the input element so that forms display an invalid state until the input element\n * is complete.\n */\n @Input()\n public required = false;\n\n public set value(value: SkyFileItem) {\n // The null check is needed to address a bug in Angular 4.\n // writeValue is being called twice, first time with a phantom null value\n // See: https://github.com/angular/angular/issues/14988\n // tslint:disable-next-line:no-null-keyword\n const isNewValue = value !== this.value && value !== null;\n\n if (isNewValue) {\n this._value = value;\n this._onChange(value);\n this.updateFileAttachmentButton();\n }\n }\n\n public get value(): SkyFileItem {\n return this._value;\n }\n\n public currentThemeName: string;\n\n public showFileAttachmentButton: boolean;\n\n @ViewChild('fileInput')\n private inputEl: ElementRef;\n\n @ContentChildren(SkyFileAttachmentLabelComponent)\n private labelComponents: QueryList<SkyFileAttachmentLabelComponent>;\n\n private enterEventTarget: any;\n\n private fileAttachmentId = uniqueId++;\n\n private ngUnsubscribe = new Subject<void>();\n\n private _disabled = false;\n\n private _value: any;\n\n constructor(\n public themeSvc: SkyThemeService,\n private changeDetector: ChangeDetectorRef,\n private fileAttachmentService: SkyFileAttachmentService,\n private fileItemService: SkyFileItemService,\n @Self() @Optional() private ngControl: NgControl\n ) {\n this.labelElementId = `sky-file-attachment-label-${this.fileAttachmentId}`;\n this.fileDropDescriptionElementId = `sky-file-attachment-drop-description-${this.fileAttachmentId}`;\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n public ngOnInit(): void {\n this.themeSvc.settingsChange\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((themeSettings) => {\n this.currentThemeName = themeSettings.currentSettings.theme.name;\n this.updateFileAttachmentButton();\n });\n }\n\n public ngAfterViewInit(): void {\n // This is needed to address a bug in Angular 7.\n // When a control value is set intially, its value is not represented on the view.\n // See: https://github.com/angular/angular/issues/13792\n // Of note is the parent check which allows us to determine if the form is reactive.\n // Without this check there is a changed before checked error\n /* istanbul ignore else */\n if (this.ngControl) {\n setTimeout(() => {\n this.ngControl.control.setValue(this.value, {\n emitEvent: false,\n });\n this.changeDetector.markForCheck();\n });\n\n // Backwards compatibility support for anyone still using Validators.Required.\n this.required =\n this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);\n }\n }\n\n public ngAfterContentInit(): void {\n // Handles updating classes when label changes\n this.labelComponents.changes\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe(() => {\n this.changeDetector.detectChanges();\n });\n }\n\n public isImage(): boolean {\n return this.fileItemService.isImage(this.value);\n }\n\n public onDropClicked(): void {\n this._onTouched();\n this.inputEl.nativeElement.click();\n }\n\n public fileChangeEvent(fileChangeEvent: any): void {\n this.handleFiles(fileChangeEvent.target.files);\n }\n\n public fileDragEnter(dragEnterEvent: any): void {\n // Save this target to know when the drag event leaves\n this.enterEventTarget = dragEnterEvent.target;\n dragEnterEvent.stopPropagation();\n dragEnterEvent.preventDefault();\n }\n\n public fileDragOver(dragOverEvent: any): void {\n const transfer = dragOverEvent.dataTransfer;\n\n dragOverEvent.stopPropagation();\n dragOverEvent.preventDefault();\n\n if (transfer) {\n if (transfer.items) {\n const files = transfer.items;\n\n for (let index = 0; index < files.length; index++) {\n const file: any = files[index];\n\n if (\n file.type &&\n this.fileAttachmentService.fileTypeRejected(\n file.type,\n this.acceptedTypes\n )\n ) {\n this.rejectedOver = true;\n this.acceptedOver = false;\n return;\n }\n }\n\n if (files.length > 0 && !this.acceptedOver) {\n this.rejectedOver = false;\n this.acceptedOver = true;\n }\n } else if (transfer.files) {\n // If the browser does not support DataTransfer.items,\n // defer file-type checking to drop handler.\n // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility\n this.rejectedOver = false;\n this.acceptedOver = true;\n }\n }\n }\n\n public fileDrop(dropEvent: DragEvent): void {\n dropEvent.stopPropagation();\n dropEvent.preventDefault();\n\n this.enterEventTarget = undefined;\n this.rejectedOver = false;\n this.acceptedOver = false;\n\n if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {\n if (dropEvent.dataTransfer.files.length > 1) {\n return;\n }\n\n if (\n this.fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files)\n ) {\n return;\n }\n\n this.handleFiles(dropEvent.dataTransfer.files);\n }\n }\n\n public fileDragLeave(dragLeaveEvent: any): void {\n if (this.enterEventTarget === dragLeaveEvent.target) {\n this.rejectedOver = false;\n this.acceptedOver = false;\n }\n }\n\n public deleteFileAttachment(): void {\n this.value = undefined;\n this.changeDetector.markForCheck();\n this.emitFileChangeEvent(this.value);\n }\n\n public getFileName(truncate = true): string | undefined {\n if (this.value) {\n // tslint:disable-next-line: max-line-length\n const dropName =\n this.fileItemService.isFile(this.value) && this.value.file.name\n ? this.value.file.name\n : this.value.url;\n\n if (truncate && dropName.length > 26) {\n return dropName.slice(0, 26) + '...';\n } else {\n return dropName;\n }\n } else {\n return undefined;\n }\n }\n\n public ngOnDestroy(): void {\n this.fileChange.complete();\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n\n public registerOnChange(fn: (value: any) => any): void {\n this._onChange = fn;\n }\n public registerOnTouched(fn: () => any): void {\n this._onTouched = fn;\n }\n\n public writeValue(value: any): void {\n this.value = value;\n this.changeDetector.markForCheck();\n }\n\n /**\n * @internal\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.changeDetector.markForCheck();\n }\n\n public emitClick(): void {\n this.fileClick.emit({\n file: this.value,\n });\n }\n\n private emitFileChangeEvent(currentFile: SkyFileItem): void {\n if (currentFile && !currentFile.errorType) {\n this.writeValue(currentFile);\n }\n this.fileChange.emit({\n file: currentFile,\n } as SkyFileAttachmentChange);\n\n this.inputEl.nativeElement.value = '';\n }\n\n private loadFile(file: SkyFileItem): void {\n const reader = new FileReader();\n\n reader.addEventListener('load', (event: any): void => {\n file.url = event.target.result;\n this.emitFileChangeEvent(file);\n });\n\n reader.addEventListener('error', (event: any): void => {\n this.emitFileChangeEvent(file);\n });\n\n reader.addEventListener('abort', (event: any): void => {\n this.emitFileChangeEvent(file);\n });\n\n reader.readAsDataURL(file.file);\n }\n\n private handleFiles(files: FileList): void {\n // tslint:disable-next-line: max-line-length\n const processedFiles = this.fileAttachmentService.checkFiles(\n files,\n this.minFileSize,\n this.maxFileSize,\n this.acceptedTypes,\n this.validateFn\n );\n\n for (const file of processedFiles) {\n if (file.errorType) {\n this.emitFileChangeEvent(file);\n } else {\n this.loadFile(file);\n }\n }\n }\n\n private updateFileAttachmentButton(): void {\n this.showFileAttachmentButton = !(\n this.value && this.currentThemeName === 'modern'\n );\n this.changeDetector.markForCheck();\n }\n\n /*istanbul ignore next */\n private _onChange = (_: any) => {};\n /*istanbul ignore next */\n private _onTouched = () => {};\n}\n","<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.aria-required]=\"required ? true : null\"\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=\"\n sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n \"\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 <button\n *ngIf=\"showFileAttachmentButton\"\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n >\n <sky-icon icon=\"folder-open-o\"></sky-icon>\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n }}\n </button>\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 </sky-icon>\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"getFileName(false)\"\n (click)=\"emitClick()\"\n >\n {{ getFileName() }}\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 type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete' | skyLibResources\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\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\"></ng-content>\n</ng-template>\n"]}
|
|
1
|
+
{"version":3,"file":"file-attachment.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/file-attachment/file-attachment.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n QueryList,\n Self,\n ViewChild,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { SkyThemeService } from '@skyux/theme';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyFileAttachmentLabelComponent } from './file-attachment-label.component';\nimport { SkyFileAttachmentService } from './file-attachment.service';\nimport { SkyFileItem } from './file-item';\nimport { SkyFileItemService } from './file-item.service';\nimport { SkyFileAttachmentChange } from './types/file-attachment-change';\nimport { SkyFileAttachmentClick } from './types/file-attachment-click';\n\nlet uniqueId = 0;\n\n/**\n * Provides an element to attach a single local file.\n */\n@Component({\n selector: 'sky-file-attachment',\n templateUrl: './file-attachment.component.html',\n styleUrls: ['./file-attachment.component.scss'],\n providers: [SkyFileAttachmentService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyFileAttachmentComponent\n implements AfterViewInit, AfterContentInit, OnInit, OnDestroy\n{\n /**\n * Specifies a comma-delimited string literal of MIME types that users can attach.\n * By default, all file types are allowed.\n * @required\n */\n @Input()\n public acceptedTypes: string;\n\n /**\n * Indicates whether to disable the input.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);\n if (this._disabled !== newDisabledState) {\n this._disabled = newDisabledState;\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Specifies the maximum size in bytes for valid files.\n */\n @Input()\n public maxFileSize = 500000;\n\n /**\n * Specifies the minimum size in bytes for valid files.\n */\n @Input()\n public minFileSize = 0;\n\n /**\n * Specifies a custom validation function. This validation runs alongside the internal\n * file validation. This function takes a `SkyFileItem` object as a parameter.\n */\n @Input()\n public validateFn: Function;\n\n /**\n * Fires when users add or remove files.\n */\n @Output()\n public fileChange = new EventEmitter<SkyFileAttachmentChange>();\n\n /**\n * Fires when users select the file name link. Make sure to bind the event.\n * If you do not, the file name link will be a dead link.\n */\n @Output()\n public fileClick = new EventEmitter<SkyFileAttachmentClick>();\n\n public acceptedOver = false;\n\n public get hasLabelComponent(): boolean {\n return this.labelComponents.length > 0;\n }\n\n public fileDropDescriptionElementId: string;\n\n public labelElementId: string;\n\n public rejectedOver = false;\n\n /**\n * Indicates whether the input is required for form validation.\n * When you set this property to `true`, the component adds `aria-required` and `required`\n * attributes to the input element so that forms display an invalid state until the input element\n * is complete.\n */\n @Input()\n public required = false;\n\n public set value(value: SkyFileItem) {\n // The null check is needed to address a bug in Angular 4.\n // writeValue is being called twice, first time with a phantom null value\n // See: https://github.com/angular/angular/issues/14988\n // tslint:disable-next-line:no-null-keyword\n const isNewValue = value !== this.value && value !== null;\n\n if (isNewValue) {\n this._value = value;\n this._onChange(value);\n this.updateFileAttachmentButton();\n }\n }\n\n public get value(): SkyFileItem {\n return this._value;\n }\n\n public currentThemeName: string;\n\n public showFileAttachmentButton: boolean;\n\n @ViewChild('fileInput')\n private inputEl: ElementRef;\n\n @ContentChildren(SkyFileAttachmentLabelComponent)\n private labelComponents: QueryList<SkyFileAttachmentLabelComponent>;\n\n private enterEventTarget: any;\n\n private fileAttachmentId = uniqueId++;\n\n private ngUnsubscribe = new Subject<void>();\n\n private _disabled = false;\n\n private _value: any;\n\n constructor(\n public themeSvc: SkyThemeService,\n private changeDetector: ChangeDetectorRef,\n private fileAttachmentService: SkyFileAttachmentService,\n private fileItemService: SkyFileItemService,\n @Self() @Optional() private ngControl: NgControl\n ) {\n this.labelElementId = `sky-file-attachment-label-${this.fileAttachmentId}`;\n this.fileDropDescriptionElementId = `sky-file-attachment-drop-description-${this.fileAttachmentId}`;\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n public ngOnInit(): void {\n this.themeSvc.settingsChange\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((themeSettings) => {\n this.currentThemeName = themeSettings.currentSettings.theme.name;\n this.updateFileAttachmentButton();\n });\n }\n\n public ngAfterViewInit(): void {\n // This is needed to address a bug in Angular 7.\n // When a control value is set intially, its value is not represented on the view.\n // See: https://github.com/angular/angular/issues/13792\n // Of note is the parent check which allows us to determine if the form is reactive.\n // Without this check there is a changed before checked error\n /* istanbul ignore else */\n if (this.ngControl) {\n setTimeout(() => {\n this.ngControl.control.setValue(this.value, {\n emitEvent: false,\n });\n this.changeDetector.markForCheck();\n });\n\n // Backwards compatibility support for anyone still using Validators.Required.\n this.required =\n this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);\n }\n }\n\n public ngAfterContentInit(): void {\n // Handles updating classes when label changes\n this.labelComponents.changes\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe(() => {\n this.changeDetector.detectChanges();\n });\n }\n\n public isImage(): boolean {\n return this.fileItemService.isImage(this.value);\n }\n\n public onDropClicked(): void {\n this._onTouched();\n this.inputEl.nativeElement.click();\n }\n\n public fileChangeEvent(fileChangeEvent: any): void {\n this.handleFiles(fileChangeEvent.target.files);\n }\n\n public fileDragEnter(dragEnterEvent: any): void {\n // Save this target to know when the drag event leaves\n this.enterEventTarget = dragEnterEvent.target;\n dragEnterEvent.stopPropagation();\n dragEnterEvent.preventDefault();\n }\n\n public fileDragOver(dragOverEvent: any): void {\n const transfer = dragOverEvent.dataTransfer;\n\n dragOverEvent.stopPropagation();\n dragOverEvent.preventDefault();\n\n if (transfer) {\n if (transfer.items) {\n const files = transfer.items;\n\n for (let index = 0; index < files.length; index++) {\n const file: any = files[index];\n\n if (\n file.type &&\n this.fileAttachmentService.fileTypeRejected(\n file.type,\n this.acceptedTypes\n )\n ) {\n this.rejectedOver = true;\n this.acceptedOver = false;\n return;\n }\n }\n\n if (files.length > 0 && !this.acceptedOver) {\n this.rejectedOver = false;\n this.acceptedOver = true;\n }\n } else if (transfer.files) {\n // If the browser does not support DataTransfer.items,\n // defer file-type checking to drop handler.\n // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items#Browser_compatibility\n this.rejectedOver = false;\n this.acceptedOver = true;\n }\n }\n }\n\n public fileDrop(dropEvent: DragEvent): void {\n dropEvent.stopPropagation();\n dropEvent.preventDefault();\n\n this.enterEventTarget = undefined;\n this.rejectedOver = false;\n this.acceptedOver = false;\n\n if (dropEvent.dataTransfer && dropEvent.dataTransfer.files) {\n if (dropEvent.dataTransfer.files.length > 1) {\n return;\n }\n\n if (\n this.fileAttachmentService.hasDirectory(dropEvent.dataTransfer.files)\n ) {\n return;\n }\n\n this.handleFiles(dropEvent.dataTransfer.files);\n }\n }\n\n public fileDragLeave(dragLeaveEvent: any): void {\n if (this.enterEventTarget === dragLeaveEvent.target) {\n this.rejectedOver = false;\n this.acceptedOver = false;\n }\n }\n\n public deleteFileAttachment(): void {\n this.value = undefined;\n this.changeDetector.markForCheck();\n this.emitFileChangeEvent(this.value);\n }\n\n public getFileName(truncate = true): string | undefined {\n if (this.value) {\n // tslint:disable-next-line: max-line-length\n const dropName =\n this.fileItemService.isFile(this.value) && this.value.file.name\n ? this.value.file.name\n : this.value.url;\n\n if (truncate && dropName.length > 26) {\n return dropName.slice(0, 26) + '...';\n } else {\n return dropName;\n }\n } else {\n return undefined;\n }\n }\n\n public ngOnDestroy(): void {\n this.fileChange.complete();\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n\n public registerOnChange(fn: (value: any) => any): void {\n this._onChange = fn;\n }\n public registerOnTouched(fn: () => any): void {\n this._onTouched = fn;\n }\n\n public writeValue(value: any): void {\n this.value = value;\n this.changeDetector.markForCheck();\n }\n\n /**\n * @internal\n * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.\n * @param isDisabled Whether the control should be disabled.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n this.changeDetector.markForCheck();\n }\n\n public emitClick(): void {\n this.fileClick.emit({\n file: this.value,\n });\n }\n\n private emitFileChangeEvent(currentFile: SkyFileItem): void {\n if (currentFile && !currentFile.errorType) {\n this.writeValue(currentFile);\n }\n this.fileChange.emit({\n file: currentFile,\n } as SkyFileAttachmentChange);\n\n this.inputEl.nativeElement.value = '';\n }\n\n private loadFile(file: SkyFileItem): void {\n const reader = new FileReader();\n\n reader.addEventListener('load', (event: any): void => {\n file.url = event.target.result;\n this.emitFileChangeEvent(file);\n });\n\n reader.addEventListener('error', (event: any): void => {\n this.emitFileChangeEvent(file);\n });\n\n reader.addEventListener('abort', (event: any): void => {\n this.emitFileChangeEvent(file);\n });\n\n reader.readAsDataURL(file.file);\n }\n\n private handleFiles(files: FileList): void {\n // tslint:disable-next-line: max-line-length\n const processedFiles = this.fileAttachmentService.checkFiles(\n files,\n this.minFileSize,\n this.maxFileSize,\n this.acceptedTypes,\n this.validateFn\n );\n\n for (const file of processedFiles) {\n if (file.errorType) {\n this.emitFileChangeEvent(file);\n } else {\n this.loadFile(file);\n }\n }\n }\n\n private updateFileAttachmentButton(): void {\n this.showFileAttachmentButton = !(\n this.value && this.currentThemeName === 'modern'\n );\n this.changeDetector.markForCheck();\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private _onChange = (_: any) => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private _onTouched = () => {};\n}\n","<div class=\"sky-file-attachment-wrapper\">\n <div\n class=\"sky-file-attachment-label-wrapper\"\n [attr.aria-required]=\"required ? true : null\"\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=\"\n sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\n \"\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 <button\n *ngIf=\"showFileAttachmentButton\"\n class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n type=\"button\"\n [attr.aria-describedby]=\"fileDropDescriptionElementId\"\n [disabled]=\"disabled\"\n (click)=\"onDropClicked()\"\n >\n <sky-icon icon=\"folder-open-o\"></sky-icon>\n {{\n value\n ? ('skyux_file_attachment_button_label_replace_file'\n | skyLibResources)\n : ('skyux_file_attachment_button_label_choose_file' | skyLibResources)\n }}\n </button>\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 </sky-icon>\n <span\n *ngIf=\"value || currentThemeName === 'default'\"\n class=\"sky-file-attachment-name\"\n >\n <a\n *ngIf=\"value; else noFile\"\n [attr.title]=\"getFileName(false)\"\n (click)=\"emitClick()\"\n >\n {{ getFileName() }}\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 type=\"button\"\n [attr.aria-label]=\"\n 'skyux_file_attachment_file_item_delete' | skyLibResources\n \"\n [disabled]=\"disabled\"\n [skyThemeClass]=\"{\n 'sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"deleteFileAttachment()\"\n >\n <sky-icon icon=\"trash-o\" size=\"md\"> </sky-icon>\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\"></ng-content>\n</ng-template>\n"]}
|
|
@@ -68,7 +68,7 @@ export class SkyInputBoxComponent {
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
SkyInputBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyInputBoxHostService }, { token: i2.SkyInputBoxAdapterService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
71
|
-
SkyInputBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled" }, providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], 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 }], 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 <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\"></ng-container>\n </div>\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\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\"></ng-container>\n <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\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\"></ng-container>\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\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n <ng-container\n *ngTemplateOutlet=\"characterCountTemplate\"\n ></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n <ng-content select=\".sky-control-label\"></ng-content>\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <ng-content select=\".sky-control-help\"></ng-content>\n</ng-template>\n\n<ng-template #characterCountTemplate>\n <ng-content select=\"sky-character-counter-indicator\"></ng-content>\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content select=\".sky-form-control\"></ng-content>\n <ng-container *ngTemplateOutlet=\"hostInputTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\"></ng-content>\n <ng-container *ngTemplateOutlet=\"hostButtonsLeftTemplate\"></ng-container>\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 ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostButtonsTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n <ng-content\n select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostButtonsInsetTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n <ng-content\n select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostIconsInsetTemplate\"></ng-container>\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\n select=\".sky-input-group-icon.sky-input-box-icon-inset-left\"\n ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n <ng-content select=\".sky-error-label\"></ng-content>\n</ng-template>\n", styles: ["sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap}sky-input-box .sky-form-group .sky-control-help{margin:0 0 0 4px}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-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 #ef4044;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{background-color:#fff;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-control-help,.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-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:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.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{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.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-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;padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:0;padding-top:5px}@-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{resize:vertical}.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 #ef4044;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 #ef4044;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"], directives: [{ type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
71
|
+
SkyInputBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled" }, providers: [SkyInputBoxAdapterService, SkyInputBoxHostService], 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 }], 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 <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"characterCountTemplate\"></ng-container>\n </div>\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\"></ng-container>\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\"></ng-container>\n <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\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\"></ng-container>\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\"></ng-container>\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 <ng-container *ngTemplateOutlet=\"inlineHelpTemplate\"></ng-container>\n <ng-container\n *ngTemplateOutlet=\"characterCountTemplate\"\n ></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\"></ng-container>\n </div>\n </div>\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n <ng-container *ngTemplateOutlet=\"errorLabelTemplate\"></ng-container>\n</div>\n\n<ng-template #labelTemplate>\n <ng-content select=\".sky-control-label\"></ng-content>\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n <ng-content select=\".sky-control-help\"></ng-content>\n</ng-template>\n\n<ng-template #characterCountTemplate>\n <ng-content select=\"sky-character-counter-indicator\"></ng-content>\n</ng-template>\n\n<ng-template #inputTemplate>\n <ng-content select=\".sky-form-control\"></ng-content>\n <ng-container *ngTemplateOutlet=\"hostInputTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\"></ng-content>\n <ng-container *ngTemplateOutlet=\"hostButtonsLeftTemplate\"></ng-container>\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 ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostButtonsTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n <ng-content\n select=\".sky-input-group-btn.sky-input-box-btn-inset\"\n ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostButtonsInsetTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n <ng-content\n select=\".sky-input-group-icon.sky-input-box-icon-inset\"\n ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostIconsInsetTemplate\"></ng-container>\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\n select=\".sky-input-group-icon.sky-input-box-icon-inset-left\"\n ></ng-content>\n <ng-container *ngTemplateOutlet=\"hostIconsInsetLeftTemplate\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n <ng-content select=\".sky-error-label\"></ng-content>\n</ng-template>\n", styles: ["sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap}sky-input-box .sky-form-group .sky-control-help{margin:0 0 0 4px}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-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 #ef4044;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{background-color:#fff;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-control-help,.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-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:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help .sky-help-inline{font-size:16px;padding:3px 10px 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:last-child .sky-help-inline{padding:3px 0 0 10px}.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{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:18px;margin-top:-23px;padding:26px 15px 10px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:first-line{line-height:19px}.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-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;padding-top:10px}@-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{resize:vertical}.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 #ef4044;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 #ef4044;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"], directives: [{ type: i3.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
72
72
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
|
|
73
73
|
type: Component,
|
|
74
74
|
args: [{
|
|
@@ -28,9 +28,9 @@ export class SkyRadioGroupComponent {
|
|
|
28
28
|
this.ngUnsubscribe = new Subject();
|
|
29
29
|
this._disabled = false;
|
|
30
30
|
this._name = `sky-radio-group-${nextUniqueId++}`;
|
|
31
|
-
|
|
31
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
32
32
|
this.onChange = () => { };
|
|
33
|
-
|
|
33
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
34
34
|
this.onTouched = () => { };
|
|
35
35
|
if (this.ngControl) {
|
|
36
36
|
this.ngControl.valueAccessor = this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/radio/radio-group.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/radio/radio-group.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n Input,\n OnDestroy,\n Optional,\n QueryList,\n Self,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyRadioComponent } from './radio.component';\nimport { SkyRadioChange } from './types/radio-change';\n\nlet nextUniqueId = 0;\n\n/**\n * Organizes radio buttons into a group. It is required for radio\n * buttons on Angular reactive forms, and we recommend using it with all radio buttons.\n * On Angular forms, the component manages the selected values and keeps the forms up-to-date.\n * When users select a radio button, its value is driven through an `ngModel` attribute that you specify on the `sky-radio-group` element.\n */\n@Component({\n selector: 'sky-radio-group',\n templateUrl: './radio-group.component.html',\n})\nexport class SkyRadioGroupComponent\n implements AfterContentInit, AfterViewInit, OnDestroy\n{\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels\n * the radio button group. This sets the radio button group's `aria-labelledby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the radio button group does not include a visible label, use `ariaLabel` instead.\n */\n @Input()\n public ariaLabelledBy: string;\n\n /**\n * Specifies an ARIA label for the radio button group. This sets the\n * radio button group's `aria-label` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the radio button group includes a visible label, use `ariaLabelledBy` instead.\n */\n @Input()\n public ariaLabel: string;\n\n /**\n * Indicates whether to disable the input.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);\n if (this._disabled !== newDisabledState) {\n this._disabled = newDisabledState;\n this.updateRadioButtonDisabled();\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Specifies a name for the collection of radio buttons that the component groups together.\n * This property overwrites the deprecated `name` property on individual `sky-radio` elements,\n * and it is required unless the `name` property is set on individual `sky-radio` elements.\n * @required\n */\n @Input()\n public set name(value: string) {\n this._name = value;\n this.updateRadioButtonNames();\n }\n public get name(): string {\n return this._name;\n }\n\n /**\n * Indicates whether the input is required for form validation.\n * When you set this property to `true`, the component adds `aria-required` and `required`\n * attributes to the input element so that forms display an invalid state until the input element\n * is complete.\n * @default false\n */\n @Input()\n public required = false;\n\n /**\n * Specifies the value of the radio button to select by default when the group loads.\n * The value corresponds to the `value` property of an individual `sky-radio` element within the\n * group.\n */\n @Input()\n public set value(value: any) {\n const isNewValue = value !== this._value;\n\n /* istanbul ignore else */\n if (isNewValue) {\n this._value = value;\n this.onChange(this._value);\n this.updateCheckedRadioFromValue();\n }\n }\n public get value(): any {\n return this._value;\n }\n\n /**\n * Specifies an index for all the radio buttons in the group. If the index is not defined,\n * the indices for individual radio buttons are set to their positions on load.\n * This property supports accessibility by placing focus on the currently selected radio\n * button. If no radio button is selected, it places focus on the first or last button\n * depending on how users navigate to the radio button group.\n */\n @Input()\n public set tabIndex(value: number) {\n if (this._tabIndex !== value) {\n this._tabIndex = value;\n this.updateRadioButtonTabIndexes();\n }\n }\n public get tabIndex(): number {\n return this._tabIndex;\n }\n\n @ContentChildren(SkyRadioComponent, { descendants: true })\n private radios: QueryList<SkyRadioComponent>;\n\n private ngUnsubscribe = new Subject();\n\n private _disabled = false;\n\n private _name = `sky-radio-group-${nextUniqueId++}`;\n\n private _tabIndex: number;\n\n private _value: any;\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n @Self() @Optional() private ngControl: NgControl\n ) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n public ngAfterContentInit(): void {\n // Let child radio components render before updating.\n setTimeout(() => {\n this.resetRadioButtons();\n });\n\n // Watch for radio selections.\n this.watchForSelections();\n\n this.radios.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n // Wait for child radio components to finish any rendering updates.\n setTimeout(() => {\n this.resetRadioButtons();\n });\n\n // Subscribe to the new radio buttons\n this.watchForSelections();\n });\n }\n\n public ngAfterViewInit(): void {\n if (this.ngControl) {\n // Backwards compatibility support for anyone still using Validators.Required.\n this.required =\n this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);\n\n // Avoid an ExpressionChangedAfterItHasBeenCheckedError.\n this.changeDetector.detectChanges();\n }\n }\n\n public watchForSelections() {\n this.radios.forEach((radio) => {\n radio.change\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((change: SkyRadioChange) => {\n this.onTouched();\n this.writeValue(change.value);\n });\n radio.blur.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n this.onTouched();\n this.changeDetector.markForCheck();\n });\n });\n }\n\n public ngOnDestroy() {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n\n public writeValue(value: any): void {\n this.value = value;\n }\n\n /**\n * @internal\n * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n public registerOnChange(fn: (value: any) => void): void {\n this.onChange = fn;\n }\n\n public registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n /* istanbul ignore next */\n private onChange: (value: any) => void = () => {};\n /* istanbul ignore next */\n private onTouched: () => any = () => {};\n\n private updateRadioButtonDisabled(): void {\n if (this.radios) {\n this.radios.forEach((radio) => {\n radio.disabled = this.disabled;\n });\n }\n }\n\n private updateRadioButtonNames(): void {\n if (this.radios) {\n this.radios.forEach((radio) => {\n radio.name = this.name;\n });\n }\n }\n\n private updateRadioButtonTabIndexes(): void {\n if (this.radios) {\n this.radios.forEach((radio) => {\n radio.groupTabIndex = this.tabIndex;\n });\n }\n }\n\n private updateCheckedRadioFromValue(): void {\n if (!this.radios) {\n return;\n }\n\n this.radios.forEach((radio) => {\n radio.checked = this._value === radio.value;\n });\n }\n\n private resetRadioButtons(): void {\n this.updateCheckedRadioFromValue();\n this.updateRadioButtonNames();\n this.updateRadioButtonTabIndexes();\n }\n}\n","<div\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.required]=\"required ? '' : null\"\n>\n <ng-content></ng-content>\n</div>\n"]}
|
|
1
|
+
{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/radio/radio-group.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/radio/radio-group.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n Input,\n OnDestroy,\n Optional,\n QueryList,\n Self,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyRadioComponent } from './radio.component';\nimport { SkyRadioChange } from './types/radio-change';\n\nlet nextUniqueId = 0;\n\n/**\n * Organizes radio buttons into a group. It is required for radio\n * buttons on Angular reactive forms, and we recommend using it with all radio buttons.\n * On Angular forms, the component manages the selected values and keeps the forms up-to-date.\n * When users select a radio button, its value is driven through an `ngModel` attribute that you specify on the `sky-radio-group` element.\n */\n@Component({\n selector: 'sky-radio-group',\n templateUrl: './radio-group.component.html',\n})\nexport class SkyRadioGroupComponent\n implements AfterContentInit, AfterViewInit, OnDestroy\n{\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels\n * the radio button group. This sets the radio button group's `aria-labelledby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the radio button group does not include a visible label, use `ariaLabel` instead.\n */\n @Input()\n public ariaLabelledBy: string;\n\n /**\n * Specifies an ARIA label for the radio button group. This sets the\n * radio button group's `aria-label` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the radio button group includes a visible label, use `ariaLabelledBy` instead.\n */\n @Input()\n public ariaLabel: string;\n\n /**\n * Indicates whether to disable the input.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const newDisabledState = SkyFormsUtility.coerceBooleanProperty(value);\n if (this._disabled !== newDisabledState) {\n this._disabled = newDisabledState;\n this.updateRadioButtonDisabled();\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Specifies a name for the collection of radio buttons that the component groups together.\n * This property overwrites the deprecated `name` property on individual `sky-radio` elements,\n * and it is required unless the `name` property is set on individual `sky-radio` elements.\n * @required\n */\n @Input()\n public set name(value: string) {\n this._name = value;\n this.updateRadioButtonNames();\n }\n public get name(): string {\n return this._name;\n }\n\n /**\n * Indicates whether the input is required for form validation.\n * When you set this property to `true`, the component adds `aria-required` and `required`\n * attributes to the input element so that forms display an invalid state until the input element\n * is complete.\n * @default false\n */\n @Input()\n public required = false;\n\n /**\n * Specifies the value of the radio button to select by default when the group loads.\n * The value corresponds to the `value` property of an individual `sky-radio` element within the\n * group.\n */\n @Input()\n public set value(value: any) {\n const isNewValue = value !== this._value;\n\n /* istanbul ignore else */\n if (isNewValue) {\n this._value = value;\n this.onChange(this._value);\n this.updateCheckedRadioFromValue();\n }\n }\n public get value(): any {\n return this._value;\n }\n\n /**\n * Specifies an index for all the radio buttons in the group. If the index is not defined,\n * the indices for individual radio buttons are set to their positions on load.\n * This property supports accessibility by placing focus on the currently selected radio\n * button. If no radio button is selected, it places focus on the first or last button\n * depending on how users navigate to the radio button group.\n */\n @Input()\n public set tabIndex(value: number) {\n if (this._tabIndex !== value) {\n this._tabIndex = value;\n this.updateRadioButtonTabIndexes();\n }\n }\n public get tabIndex(): number {\n return this._tabIndex;\n }\n\n @ContentChildren(SkyRadioComponent, { descendants: true })\n private radios: QueryList<SkyRadioComponent>;\n\n private ngUnsubscribe = new Subject();\n\n private _disabled = false;\n\n private _name = `sky-radio-group-${nextUniqueId++}`;\n\n private _tabIndex: number;\n\n private _value: any;\n\n constructor(\n private changeDetector: ChangeDetectorRef,\n @Self() @Optional() private ngControl: NgControl\n ) {\n if (this.ngControl) {\n this.ngControl.valueAccessor = this;\n }\n }\n\n public ngAfterContentInit(): void {\n // Let child radio components render before updating.\n setTimeout(() => {\n this.resetRadioButtons();\n });\n\n // Watch for radio selections.\n this.watchForSelections();\n\n this.radios.changes.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n // Wait for child radio components to finish any rendering updates.\n setTimeout(() => {\n this.resetRadioButtons();\n });\n\n // Subscribe to the new radio buttons\n this.watchForSelections();\n });\n }\n\n public ngAfterViewInit(): void {\n if (this.ngControl) {\n // Backwards compatibility support for anyone still using Validators.Required.\n this.required =\n this.required || SkyFormsUtility.hasRequiredValidation(this.ngControl);\n\n // Avoid an ExpressionChangedAfterItHasBeenCheckedError.\n this.changeDetector.detectChanges();\n }\n }\n\n public watchForSelections() {\n this.radios.forEach((radio) => {\n radio.change\n .pipe(takeUntil(this.ngUnsubscribe))\n .subscribe((change: SkyRadioChange) => {\n this.onTouched();\n this.writeValue(change.value);\n });\n radio.blur.pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {\n this.onTouched();\n this.changeDetector.markForCheck();\n });\n });\n }\n\n public ngOnDestroy() {\n this.ngUnsubscribe.next();\n this.ngUnsubscribe.complete();\n }\n\n public writeValue(value: any): void {\n this.value = value;\n }\n\n /**\n * @internal\n * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n public registerOnChange(fn: (value: any) => void): void {\n this.onChange = fn;\n }\n\n public registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChange: (value: any) => void = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouched: () => any = () => {};\n\n private updateRadioButtonDisabled(): void {\n if (this.radios) {\n this.radios.forEach((radio) => {\n radio.disabled = this.disabled;\n });\n }\n }\n\n private updateRadioButtonNames(): void {\n if (this.radios) {\n this.radios.forEach((radio) => {\n radio.name = this.name;\n });\n }\n }\n\n private updateRadioButtonTabIndexes(): void {\n if (this.radios) {\n this.radios.forEach((radio) => {\n radio.groupTabIndex = this.tabIndex;\n });\n }\n }\n\n private updateCheckedRadioFromValue(): void {\n if (!this.radios) {\n return;\n }\n\n this.radios.forEach((radio) => {\n radio.checked = this._value === radio.value;\n });\n }\n\n private resetRadioButtons(): void {\n this.updateCheckedRadioFromValue();\n this.updateRadioButtonNames();\n this.updateRadioButtonTabIndexes();\n }\n}\n","<div\n class=\"sky-radio-group\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-required]=\"required ? true : null\"\n [attr.required]=\"required ? '' : null\"\n>\n <ng-content></ng-content>\n</div>\n"]}
|
|
@@ -42,11 +42,11 @@ export class SkyRadioComponent {
|
|
|
42
42
|
this._checkedChange = new BehaviorSubject(this._checked);
|
|
43
43
|
this._disabled = false;
|
|
44
44
|
this._disabledChange = new BehaviorSubject(this._disabled);
|
|
45
|
-
|
|
45
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
46
46
|
this.removeUniqueSelectionListener = () => { };
|
|
47
|
-
|
|
47
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
48
48
|
this.onChangeCallback = (value) => { };
|
|
49
|
-
|
|
49
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
50
50
|
this.onTouchedCallback = () => { };
|
|
51
51
|
}
|
|
52
52
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/radio/radio.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/radio/radio.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n Provider,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BehaviorSubject, Observable, Subject } from 'rxjs';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyRadioChange } from './types/radio-change';\n\n/**\n * Auto-incrementing integer that generates unique IDs for radio components.\n */\nlet nextUniqueId = 0;\n\n/**\n * Provider Expression that allows sky-radio to register as a ControlValueAccessor.\n * This allows it to support [(ngModel)].\n */\n// tslint:disable:no-forward-ref no-use-before-declare\nconst SKY_RADIO_CONTROL_VALUE_ACCESSOR: Provider = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SkyRadioComponent),\n multi: true,\n};\n// tslint:enable\n\n/**\n * Renders a SKY UX-themed replacement for an HTML `input` element\n * with `type=\"radio\"`. When users select a radio button, its value is driven through an\n * `ngModel` attribute that you specify on the `sky-radio` element or the parent `sky-radio-group` element.\n */\n@Component({\n selector: 'sky-radio',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyRadioComponent implements OnDestroy, ControlValueAccessor {\n /**\n * Fires when users focus off a radio button.\n */\n public blur = new Subject<void>();\n\n /**\n * Indicates whether the radio button is selected.\n * @default false\n */\n @Input()\n public set checked(value: boolean) {\n const newCheckedState = !!value;\n\n if (this._checked !== newCheckedState) {\n this._checked = newCheckedState;\n this._checkedChange.next(this._checked);\n\n if (newCheckedState) {\n this.selectedValue = this.value;\n }\n }\n\n this.changeDetector.markForCheck();\n }\n\n public get checked(): boolean {\n return this._checked;\n }\n\n /**\n * Indicates whether to disable the input.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);\n if (coercedValue !== this.disabled) {\n this._disabled = coercedValue;\n this._disabledChange.next(this._disabled);\n this.changeDetector.markForCheck();\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Specifies an ID for the radio button.\n * @default a unique, auto-incrementing integer. For example: `sky-radio-1`\n */\n @Input()\n public id = `sky-radio-${++nextUniqueId}`;\n\n /**\n * Specifies an ARIA label for the radio button. This sets the radio button's `aria-label`\n * attribute [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n * when the radio button does not include a visible label. You must set this property for icon\n * radio buttons. If the radio button includes a visible label, use `labelledBy` instead.\n */\n @Input()\n public label: string;\n\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels\n * the radio button. This sets the radio button's `aria-labelledby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the radio button does not include a visible label, use `label` instead.\n */\n @Input()\n public labelledBy: string;\n\n /**\n * This property is deprecated in favor of the `name` property on the `sky-radio-group element`.\n * We recommend using the `sky-radio-group` element with all radio buttons, but if you opt not to,\n * then this property specifies a name for a group of radio buttons.\n * @deprecated\n */\n @Input()\n public set name(value: string) {\n this._name = value;\n this.changeDetector.markForCheck();\n }\n\n public get name(): string {\n return this._name;\n }\n\n /**\n * This property is deprecated in favor of\n * the `tabIndex` property on the `sky-radio-group` element. It specifies an index for the radio\n * button. If the index is not defined, it is set to the position of the radio button on load.\n * @deprecated\n */\n @Input()\n public set tabindex(value: number) {\n console.warn(\n 'The sky-radio `tabindex` property is deprecated. Please use the `tabindex` property on the sky-radio-group component.'\n );\n this._tabindex = value;\n this.changeDetector.markForCheck();\n }\n public get tabindex(): number {\n return this._tabindex || 0;\n }\n\n // For setting the tabindex from the radio group\n public set groupTabIndex(value: number) {\n this._tabindex = value;\n this.changeDetector.markForCheck();\n }\n\n /**\n * Specifies and binds a value to the radio button's `value` property. The value usually\n * corresponds to the radio button's label, which you specify with the `sky-radio-label`\n * component.\n * @required\n */\n @Input()\n public set value(value: any) {\n /* istanbul ignore else */\n if (this._value !== value) {\n if (this.selectedValue && this.selectedValue === this._value) {\n this.selectedValue = value;\n this.onChangeCallback(this.selectedValue);\n this.onTouchedCallback();\n }\n\n this._value = value;\n }\n\n this.changeDetector.markForCheck();\n }\n\n public get value(): any {\n return this._value;\n }\n\n /**\n * Specifies an icon to display in place of the radio button. To group radio buttons like in\n * the demo above, place the `sky-switch-icon-group` class on the direct parent element of the\n * radio buttons.\n */\n @Input()\n public icon: string;\n\n /**\n * Specifies a type to set the background color after users select an icon radio button.\n * The valid options correspond\n * [the label component's](https://developer.blackbaud.com/skyux/components/label)\n * label types. `danger` creates a red background, `info` creates a blue background,\n * `success` creates a green background, and `warning` creates an orange background.\n * @default \"info\"\n */\n @Input()\n public get radioType(): string {\n return this._radioType || 'info';\n }\n public set radioType(value: string) {\n if (value) {\n this._radioType = value.toLowerCase();\n }\n }\n\n /**\n * Fires when users select a radio button.\n */\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n public get change(): Observable<SkyRadioChange> {\n return this._change;\n }\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n public get checkedChange(): Observable<boolean> {\n return this._checkedChange;\n }\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n public get disabledChange(): Observable<boolean> {\n return this._disabledChange;\n }\n\n public get inputId(): string {\n return `sky-radio-${this.id}-input`;\n }\n\n public set selectedValue(value: any) {\n if (value !== this._selectedValue) {\n this._selectedValue = value;\n }\n }\n public get selectedValue(): any {\n return this._selectedValue;\n }\n\n private _change = new EventEmitter<SkyRadioChange>();\n private _checked = false;\n private _checkedChange = new BehaviorSubject<boolean>(this._checked);\n private _disabled = false;\n private _disabledChange = new BehaviorSubject<boolean>(this._disabled);\n private _name: string;\n private _radioType: string;\n private _selectedValue: any;\n private _tabindex: number;\n private _value: any;\n\n constructor(private changeDetector: ChangeDetectorRef) {}\n\n public ngOnDestroy(): void {\n this.removeUniqueSelectionListener();\n }\n\n public writeValue(value: any): void {\n if (value === undefined) {\n return;\n }\n\n this.selectedValue = value;\n this.checked = this.value === this.selectedValue;\n\n this.changeDetector.markForCheck();\n }\n\n /**\n * @internal\n * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n public registerOnChange(fn: any): void {\n this.onChangeCallback = fn;\n }\n\n public registerOnTouched(fn: any): void {\n this.onTouchedCallback = fn;\n }\n\n public onInputChange(event: Event): void {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.checked = true;\n this._change.emit({\n source: this,\n value: this._value,\n });\n\n this.onInputFocusChange(undefined);\n this.onChangeCallback(this.value);\n }\n }\n\n public onInputFocusChange(event: Event): void {\n this.onTouchedCallback();\n this.blur.next();\n }\n\n /* istanbul ignore next */\n private removeUniqueSelectionListener = () => {};\n /* istanbul ignore next */\n private onChangeCallback = (value: any) => {};\n /* istanbul ignore next */\n private onTouchedCallback = () => {};\n}\n","<label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled }\"\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\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange($event)\"\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\"> </sky-icon>\n </span>\n <ng-content select=\"sky-radio-label\"></ng-content>\n</label>\n"]}
|
|
1
|
+
{"version":3,"file":"radio.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/radio/radio.component.ts","../../../../../../../../libs/components/forms/src/lib/modules/radio/radio.component.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,KAAK,EAEL,MAAM,EAEN,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAwB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;;;AAI1D;;GAEG;AACH,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;GAGG;AACH,sDAAsD;AACtD,MAAM,gCAAgC,GAAa;IACjD,OAAO,EAAE,iBAAiB;IAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC;IAChD,KAAK,EAAE,IAAI;CACZ,CAAC;AACF,gBAAgB;AAEhB;;;;GAIG;AAQH,MAAM,OAAO,iBAAiB;IAsN5B,YAAoB,cAAiC;QAAjC,mBAAc,GAAd,cAAc,CAAmB;QArNrD;;WAEG;QACI,SAAI,GAAG,IAAI,OAAO,EAAQ,CAAC;QA4ClC;;;WAGG;QAEI,OAAE,GAAG,aAAa,EAAE,YAAY,EAAE,CAAC;QAsJlC,YAAO,GAAG,IAAI,YAAY,EAAkB,CAAC;QAC7C,aAAQ,GAAG,KAAK,CAAC;QACjB,mBAAc,GAAG,IAAI,eAAe,CAAU,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,cAAS,GAAG,KAAK,CAAC;QAClB,oBAAe,GAAG,IAAI,eAAe,CAAU,IAAI,CAAC,SAAS,CAAC,CAAC;QA4DvE,gEAAgE;QACxD,kCAA6B,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACjD,gEAAgE;QACxD,qBAAgB,GAAG,CAAC,KAAU,EAAE,EAAE,GAAE,CAAC,CAAC;QAC9C,gEAAgE;QACxD,sBAAiB,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IA1DmB,CAAC;IAhNzD;;;OAGG;IACH,IACW,OAAO,CAAC,KAAc;QAC/B,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE;YACrC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;YAChC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAExC,IAAI,eAAe,EAAE;gBACnB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;aACjC;SACF;QAED,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;IAED,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,IACW,QAAQ,CAAC,KAAc;QAChC,MAAM,YAAY,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,YAAY,KAAK,IAAI,CAAC,QAAQ,EAAE;YAClC,IAAI,CAAC,SAAS,GAAG,YAAY,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC1C,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;SACpC;IACH,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IA2BD;;;;;OAKG;IACH,IACW,IAAI,CAAC,KAAa;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;IAED,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED;;;;;OAKG;IACH,IACW,QAAQ,CAAC,KAAa;QAC/B,OAAO,CAAC,IAAI,CACV,uHAAuH,CACxH,CAAC;QACF,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;IACD,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,gDAAgD;IAChD,IAAW,aAAa,CAAC,KAAa;QACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;IAED;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAU;QACzB,0BAA0B;QAC1B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;YACzB,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC5D,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC3B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAC1C,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;YAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;QAED,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAUD;;;;;;;OAOG;IACH,IACW,SAAS;QAClB,OAAO,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC;IACnC,CAAC;IACD,IAAW,SAAS,CAAC,KAAa;QAChC,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;SACvC;IACH,CAAC;IAED;;OAEG;IACH,IAEW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED;;OAEG;IACH,IACW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IACW,cAAc;QACvB,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,IAAW,OAAO;QAChB,OAAO,aAAa,IAAI,CAAC,EAAE,QAAQ,CAAC;IACtC,CAAC;IAED,IAAW,aAAa,CAAC,KAAU;QACjC,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;YACjC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC7B;IACH,CAAC;IACD,IAAW,aAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAeM,WAAW;QAChB,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEM,UAAU,CAAC,KAAU;QAC1B,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,OAAO;SACR;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC;QAEjD,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IACrC,CAAC;IAED;;;OAGG;IACI,gBAAgB,CAAC,UAAmB;QACzC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC7B,CAAC;IAEM,gBAAgB,CAAC,EAAO;QAC7B,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;IAC7B,CAAC;IAEM,iBAAiB,CAAC,EAAO;QAC9B,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;IAC9B,CAAC;IAEM,aAAa,CAAC,KAAY;QAC/B,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,MAAM,EAAE,IAAI;gBACZ,KAAK,EAAE,IAAI,CAAC,MAAM;aACnB,CAAC,CAAC;YAEH,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;YACnC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACnC;IACH,CAAC;IAEM,kBAAkB,CAAC,KAAY;QACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnB,CAAC;;+GAzQU,iBAAiB;mGAAjB,iBAAiB,yUAHjB,CAAC,gCAAgC,CAAC,0BC7C/C,6lCAkCA;4FDca,iBAAiB;kBAP7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,WAAW,EAAE,wBAAwB;oBACrC,SAAS,EAAE,CAAC,wBAAwB,CAAC;oBACrC,SAAS,EAAE,CAAC,gCAAgC,CAAC;oBAC7C,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;wGAYY,OAAO;sBADjB,KAAK;gBAyBK,QAAQ;sBADlB,KAAK;gBAmBC,EAAE;sBADR,KAAK;gBAUC,KAAK;sBADX,KAAK;gBAUC,UAAU;sBADhB,KAAK;gBAUK,IAAI;sBADd,KAAK;gBAiBK,QAAQ;sBADlB,KAAK;gBAyBK,KAAK;sBADf,KAAK;gBA0BC,IAAI;sBADV,KAAK;gBAYK,SAAS;sBADnB,KAAK;gBAeK,MAAM;sBAFhB,MAAM;gBAUI,aAAa;sBADvB,MAAM;gBASI,cAAc;sBADxB,MAAM","sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n Provider,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { BehaviorSubject, Observable, Subject } from 'rxjs';\n\nimport { SkyFormsUtility } from '../shared/forms-utility';\n\nimport { SkyRadioChange } from './types/radio-change';\n\n/**\n * Auto-incrementing integer that generates unique IDs for radio components.\n */\nlet nextUniqueId = 0;\n\n/**\n * Provider Expression that allows sky-radio to register as a ControlValueAccessor.\n * This allows it to support [(ngModel)].\n */\n// tslint:disable:no-forward-ref no-use-before-declare\nconst SKY_RADIO_CONTROL_VALUE_ACCESSOR: Provider = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SkyRadioComponent),\n multi: true,\n};\n// tslint:enable\n\n/**\n * Renders a SKY UX-themed replacement for an HTML `input` element\n * with `type=\"radio\"`. When users select a radio button, its value is driven through an\n * `ngModel` attribute that you specify on the `sky-radio` element or the parent `sky-radio-group` element.\n */\n@Component({\n selector: 'sky-radio',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyRadioComponent implements OnDestroy, ControlValueAccessor {\n /**\n * Fires when users focus off a radio button.\n */\n public blur = new Subject<void>();\n\n /**\n * Indicates whether the radio button is selected.\n * @default false\n */\n @Input()\n public set checked(value: boolean) {\n const newCheckedState = !!value;\n\n if (this._checked !== newCheckedState) {\n this._checked = newCheckedState;\n this._checkedChange.next(this._checked);\n\n if (newCheckedState) {\n this.selectedValue = this.value;\n }\n }\n\n this.changeDetector.markForCheck();\n }\n\n public get checked(): boolean {\n return this._checked;\n }\n\n /**\n * Indicates whether to disable the input.\n * @default false\n */\n @Input()\n public set disabled(value: boolean) {\n const coercedValue = SkyFormsUtility.coerceBooleanProperty(value);\n if (coercedValue !== this.disabled) {\n this._disabled = coercedValue;\n this._disabledChange.next(this._disabled);\n this.changeDetector.markForCheck();\n }\n }\n\n public get disabled(): boolean {\n return this._disabled;\n }\n\n /**\n * Specifies an ID for the radio button.\n * @default a unique, auto-incrementing integer. For example: `sky-radio-1`\n */\n @Input()\n public id = `sky-radio-${++nextUniqueId}`;\n\n /**\n * Specifies an ARIA label for the radio button. This sets the radio button's `aria-label`\n * attribute [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n * when the radio button does not include a visible label. You must set this property for icon\n * radio buttons. If the radio button includes a visible label, use `labelledBy` instead.\n */\n @Input()\n public label: string;\n\n /**\n * Specifies the HTML element ID (without the leading `#`) of the element that labels\n * the radio button. This sets the radio button's `aria-labelledby` attribute\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the radio button does not include a visible label, use `label` instead.\n */\n @Input()\n public labelledBy: string;\n\n /**\n * This property is deprecated in favor of the `name` property on the `sky-radio-group element`.\n * We recommend using the `sky-radio-group` element with all radio buttons, but if you opt not to,\n * then this property specifies a name for a group of radio buttons.\n * @deprecated\n */\n @Input()\n public set name(value: string) {\n this._name = value;\n this.changeDetector.markForCheck();\n }\n\n public get name(): string {\n return this._name;\n }\n\n /**\n * This property is deprecated in favor of\n * the `tabIndex` property on the `sky-radio-group` element. It specifies an index for the radio\n * button. If the index is not defined, it is set to the position of the radio button on load.\n * @deprecated\n */\n @Input()\n public set tabindex(value: number) {\n console.warn(\n 'The sky-radio `tabindex` property is deprecated. Please use the `tabindex` property on the sky-radio-group component.'\n );\n this._tabindex = value;\n this.changeDetector.markForCheck();\n }\n public get tabindex(): number {\n return this._tabindex || 0;\n }\n\n // For setting the tabindex from the radio group\n public set groupTabIndex(value: number) {\n this._tabindex = value;\n this.changeDetector.markForCheck();\n }\n\n /**\n * Specifies and binds a value to the radio button's `value` property. The value usually\n * corresponds to the radio button's label, which you specify with the `sky-radio-label`\n * component.\n * @required\n */\n @Input()\n public set value(value: any) {\n /* istanbul ignore else */\n if (this._value !== value) {\n if (this.selectedValue && this.selectedValue === this._value) {\n this.selectedValue = value;\n this.onChangeCallback(this.selectedValue);\n this.onTouchedCallback();\n }\n\n this._value = value;\n }\n\n this.changeDetector.markForCheck();\n }\n\n public get value(): any {\n return this._value;\n }\n\n /**\n * Specifies an icon to display in place of the radio button. To group radio buttons like in\n * the demo above, place the `sky-switch-icon-group` class on the direct parent element of the\n * radio buttons.\n */\n @Input()\n public icon: string;\n\n /**\n * Specifies a type to set the background color after users select an icon radio button.\n * The valid options correspond\n * [the label component's](https://developer.blackbaud.com/skyux/components/label)\n * label types. `danger` creates a red background, `info` creates a blue background,\n * `success` creates a green background, and `warning` creates an orange background.\n * @default \"info\"\n */\n @Input()\n public get radioType(): string {\n return this._radioType || 'info';\n }\n public set radioType(value: string) {\n if (value) {\n this._radioType = value.toLowerCase();\n }\n }\n\n /**\n * Fires when users select a radio button.\n */\n @Output()\n // eslint-disable-next-line @angular-eslint/no-output-native\n public get change(): Observable<SkyRadioChange> {\n return this._change;\n }\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n public get checkedChange(): Observable<boolean> {\n return this._checkedChange;\n }\n\n /**\n * Fires when the selected value changes.\n */\n @Output()\n public get disabledChange(): Observable<boolean> {\n return this._disabledChange;\n }\n\n public get inputId(): string {\n return `sky-radio-${this.id}-input`;\n }\n\n public set selectedValue(value: any) {\n if (value !== this._selectedValue) {\n this._selectedValue = value;\n }\n }\n public get selectedValue(): any {\n return this._selectedValue;\n }\n\n private _change = new EventEmitter<SkyRadioChange>();\n private _checked = false;\n private _checkedChange = new BehaviorSubject<boolean>(this._checked);\n private _disabled = false;\n private _disabledChange = new BehaviorSubject<boolean>(this._disabled);\n private _name: string;\n private _radioType: string;\n private _selectedValue: any;\n private _tabindex: number;\n private _value: any;\n\n constructor(private changeDetector: ChangeDetectorRef) {}\n\n public ngOnDestroy(): void {\n this.removeUniqueSelectionListener();\n }\n\n public writeValue(value: any): void {\n if (value === undefined) {\n return;\n }\n\n this.selectedValue = value;\n this.checked = this.value === this.selectedValue;\n\n this.changeDetector.markForCheck();\n }\n\n /**\n * @internal\n * Indicates whether to disable the control. Implemented as a part of ControlValueAccessor.\n */\n public setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n public registerOnChange(fn: any): void {\n this.onChangeCallback = fn;\n }\n\n public registerOnTouched(fn: any): void {\n this.onTouchedCallback = fn;\n }\n\n public onInputChange(event: Event): void {\n event.stopPropagation();\n\n if (!this.disabled) {\n this.checked = true;\n this._change.emit({\n source: this,\n value: this._value,\n });\n\n this.onInputFocusChange(undefined);\n this.onChangeCallback(this.value);\n }\n }\n\n public onInputFocusChange(event: Event): void {\n this.onTouchedCallback();\n this.blur.next();\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private removeUniqueSelectionListener = () => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onChangeCallback = (value: any) => {};\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private onTouchedCallback = () => {};\n}\n","<label\n class=\"sky-radio-wrapper sky-switch\"\n [ngClass]=\"{ 'sky-switch-disabled': disabled }\"\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\"\n [id]=\"inputId\"\n [name]=\"name\"\n [tabIndex]=\"tabindex\"\n [value]=\"value\"\n (blur)=\"onInputFocusChange($event)\"\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\"> </sky-icon>\n </span>\n <ng-content select=\"sky-radio-label\"></ng-content>\n</label>\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* NOTICE: DO NOT MODIFY THIS FILE!
|
|
3
3
|
* The contents of this file were automatically generated by
|
|
4
|
-
* the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-forms' schematic.
|
|
4
|
+
* the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-forms' schematic.
|
|
5
5
|
* To update this file, simply rerun the command.
|
|
6
6
|
*/
|
|
7
7
|
import { NgModule } from '@angular/core';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sky-forms-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,2BAA2B,EAE3B,aAAa,EAGb,qBAAqB,GACtB,MAAM,aAAa,CAAC;;AAErB,MAAM,SAAS,GAA0C;IACvD,OAAO,EAAE;QACP,6BAA6B,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;QAC/D,gCAAgC,EAAE;YAChC,OAAO,EAAE,mCAAmC;SAC7C;QACD,8CAA8C,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;QAC1E,+CAA+C,EAAE;YAC/C,OAAO,EAAE,cAAc;SACxB;QACD,sCAAsC,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;QAClE,wCAAwC,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;QAClE,0CAA0C,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QACnE,kCAAkC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACzD,kCAAkC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACzD,kCAAkC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACzD,gDAAgD,EAAE;YAChD,OAAO,EAAE,kBAAkB;SAC5B;QACD,+CAA+C,EAAE;YAC/C,OAAO,EAAE,qCAAqC;SAC/C;QACD,iDAAiD,EAAE;YACjD,OAAO,EAAE,iBAAiB;SAC3B;QACD,wDAAwD,EAAE;YACxD,OAAO,EAAE,eAAe;SACzB;QACD,8CAA8C,EAAE;YAC9C,OAAO,EAAE,2BAA2B;SACrC;QACD,4CAA4C,EAAE;YAC5C,OAAO,EAAE,sBAAsB;SAChC;QACD,kDAAkD,EAAE;YAClD,OAAO,EAAE,+BAA+B;SACzC;QACD,oDAAoD,EAAE;YACpD,OAAO,EAAE,oBAAoB;SAC9B;QACD,4CAA4C,EAAE;YAC5C,OAAO,EAAE,wBAAwB;SAClC;QACD,iDAAiD,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACtE,0CAA0C,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;KAC1E;CACF,CAAC;AAEF,MAAM,OAAO,yBAAyB;IAC7B,SAAS,
|
|
1
|
+
{"version":3,"file":"sky-forms-resources.module.js","sourceRoot":"","sources":["../../../../../../../../libs/components/forms/src/lib/modules/shared/sky-forms-resources.module.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,2BAA2B,EAE3B,aAAa,EAGb,qBAAqB,GACtB,MAAM,aAAa,CAAC;;AAErB,MAAM,SAAS,GAA0C;IACvD,OAAO,EAAE;QACP,6BAA6B,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE;QAC/D,gCAAgC,EAAE;YAChC,OAAO,EAAE,mCAAmC;SAC7C;QACD,8CAA8C,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;QAC1E,+CAA+C,EAAE;YAC/C,OAAO,EAAE,cAAc;SACxB;QACD,sCAAsC,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;QAClE,wCAAwC,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;QAClE,0CAA0C,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE;QACnE,kCAAkC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACzD,kCAAkC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACzD,kCAAkC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACzD,gDAAgD,EAAE;YAChD,OAAO,EAAE,kBAAkB;SAC5B;QACD,+CAA+C,EAAE;YAC/C,OAAO,EAAE,qCAAqC;SAC/C;QACD,iDAAiD,EAAE;YACjD,OAAO,EAAE,iBAAiB;SAC3B;QACD,wDAAwD,EAAE;YACxD,OAAO,EAAE,eAAe;SACzB;QACD,8CAA8C,EAAE;YAC9C,OAAO,EAAE,2BAA2B;SACrC;QACD,4CAA4C,EAAE;YAC5C,OAAO,EAAE,sBAAsB;SAChC;QACD,kDAAkD,EAAE;YAClD,OAAO,EAAE,+BAA+B;SACzC;QACD,oDAAoD,EAAE;YACpD,OAAO,EAAE,oBAAoB;SAC9B;QACD,4CAA4C,EAAE;YAC5C,OAAO,EAAE,wBAAwB;SAClC;QACD,iDAAiD,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACtE,0CAA0C,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;KAC1E;CACF,CAAC;AAEF,MAAM,OAAO,yBAAyB;IAC7B,SAAS,CACd,UAA4B,EAC5B,IAAY;QAEZ,OAAO,qBAAqB,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnE,CAAC;CACF;AAED;;GAEG;AAWH,MAAM,OAAO,uBAAuB;;qHAAvB,uBAAuB;sHAAvB,uBAAuB,YATxB,aAAa;sHASZ,uBAAuB,aARvB;QACT;YACE,OAAO,EAAE,2BAA2B;YACpC,QAAQ,EAAE,yBAAyB;YACnC,KAAK,EAAE,IAAI;SACZ;KACF,YAPS,aAAa;4FASZ,uBAAuB;kBAVnC,QAAQ;mBAAC;oBACR,OAAO,EAAE,CAAC,aAAa,CAAC;oBACxB,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,2BAA2B;4BACpC,QAAQ,EAAE,yBAAyB;4BACnC,KAAK,EAAE,IAAI;yBACZ;qBACF;iBACF","sourcesContent":["/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-forms' schematic.\n * To update this file, simply rerun the command.\n */\nimport { NgModule } from '@angular/core';\nimport {\n SKY_LIB_RESOURCES_PROVIDERS,\n SkyAppLocaleInfo,\n SkyI18nModule,\n SkyLibResources,\n SkyLibResourcesProvider,\n getLibStringForLocale,\n} from '@skyux/i18n';\n\nconst RESOURCES: { [locale: string]: SkyLibResources } = {\n 'EN-US': {\n skyux_character_count_message: { message: 'characters out of' },\n skyux_character_count_over_limit: {\n message: 'You are over the character limit.',\n },\n skyux_file_attachment_button_label_choose_file: { message: 'Choose file' },\n skyux_file_attachment_button_label_replace_file: {\n message: 'Replace file',\n },\n skyux_file_attachment_file_item_delete: { message: 'Delete file' },\n skyux_file_attachment_file_size_b_plural: { message: '{0} bytes' },\n skyux_file_attachment_file_size_b_singular: { message: '{0} byte' },\n skyux_file_attachment_file_size_gb: { message: '{0} GB' },\n skyux_file_attachment_file_size_kb: { message: '{0} KB' },\n skyux_file_attachment_file_size_mb: { message: '{0} MB' },\n skyux_file_attachment_file_upload_drag_file_here: {\n message: 'Drag a file here',\n },\n skyux_file_attachment_file_upload_drag_or_click: {\n message: 'Drag a file here or click to browse',\n },\n skyux_file_attachment_file_upload_drop_files_here: {\n message: 'Drop files here',\n },\n skyux_file_attachment_file_upload_image_preview_alt_text: {\n message: 'Image preview',\n },\n skyux_file_attachment_file_upload_invalid_file: {\n message: 'This file type is invalid',\n },\n skyux_file_attachment_file_upload_link_input: {\n message: 'Add a link to a file',\n },\n skyux_file_attachment_file_upload_link_placeholder: {\n message: 'http://www.something.com/file',\n },\n skyux_file_attachment_file_upload_or_click_to_browse: {\n message: 'or click to browse',\n },\n skyux_file_attachment_file_upload_paste_link: {\n message: 'Paste a link to a file',\n },\n skyux_file_attachment_file_upload_paste_link_done: { message: 'Done' },\n skyux_file_attachment_label_no_file_chosen: { message: 'No file chosen' },\n },\n};\n\nexport class SkyFormsResourcesProvider implements SkyLibResourcesProvider {\n public getString(\n localeInfo: SkyAppLocaleInfo,\n name: string\n ): string | undefined {\n return getLibStringForLocale(RESOURCES, localeInfo.locale, name);\n }\n}\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n exports: [SkyI18nModule],\n providers: [\n {\n provide: SKY_LIB_RESOURCES_PROVIDERS,\n useClass: SkyFormsResourcesProvider,\n multi: true,\n },\n ],\n})\nexport class SkyFormsResourcesModule {}\n"]}
|
|
@@ -39,8 +39,9 @@ export class SkyToggleSwitchComponent {
|
|
|
39
39
|
this.ngUnsubscribe = new Subject();
|
|
40
40
|
this.toggleSwitchId = uniqueId++;
|
|
41
41
|
this._checked = false;
|
|
42
|
-
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
43
43
|
this.onTouched = () => { };
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
44
45
|
this.onChange = () => { };
|
|
45
46
|
}
|
|
46
47
|
/**
|