UNPKG

fundamental-ngx

Version:

SAP Fiori Fundamentals, implemented in Angular

227 lines 14.8 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, ElementRef, EventEmitter, forwardRef, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { HashService } from '../utils/hash.service'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; /** * The Toggle component is used to activate or deactivate an element. * It uses a visual metaphor to inform the user of the state of the toggle. */ export class ToggleComponent { /** * @hidden * @param {?} hasher */ constructor(hasher) { this.hasher = hasher; /** * Whether the toggle is disabled. */ this.disabled = false; /** * Whether the toggle is checked. */ this.checked = false; /** * aria-label attribute of the inner input element. */ this.ariaLabel = null; /** * aria-labelledby attribute of the inner input element. */ this.ariaLabelledby = null; /** * Event fired when the state of the toggle changes. * *$event* can be used to retrieve the new state of the toggle. */ this.checkedChange = new EventEmitter(); /** * @hidden */ this.onChange = (/** * @return {?} */ () => { }); /** * @hidden */ this.onTouched = (/** * @return {?} */ () => { }); } /** * @hidden * @return {?} */ ngOnInit() { if (!this.id) { this.id = this.hasher.hash(); } if (this.size && this.size !== 'xs' && this.size !== 's' && this.size !== 'l') { this.size = null; } } /** * Set focus on the input element. * @return {?} */ focus() { this.inputElement.nativeElement.focus(); } /** * Get the id of the inner input element of the toggle. * @return {?} */ get innerInputId() { return `${this.id}-input`; } /** * Get the isChecked property of the toggle. * @return {?} */ get isChecked() { return this.checked; } /** * Set the isChecked property of the toggle. * @param {?} value * @return {?} */ set isChecked(value) { this.checked = value; this.onChange(value); this.onTouched(); this.checkedChange.emit(value); } /** * @hidden * @param {?} value Sets the value of the *checked* property of the toggle. * @return {?} */ writeValue(value) { this.checked = value; } /** * @hidden * @param {?} fn User defined function that handles the *onChange* event of the toggle. * @return {?} */ registerOnChange(fn) { this.onChange = fn; } /** * @hidden * @param {?} fn User defined function that handles the *onTouch* event of the toggle. * @return {?} */ registerOnTouched(fn) { this.onTouched = fn; } /** * @hidden * @param {?} isDisabled Sets the value of the *disabled* property of the toggle. * @return {?} */ setDisabledState(isDisabled) { this.disabled = isDisabled; } } ToggleComponent.decorators = [ { type: Component, args: [{ selector: 'fd-toggle', template: "<label class=\"fd-form__label\" [attr.for]=\"innerInputId\">\n <span class=\"fd-toggle fd-form__control\" [ngClass]=\"(this.size ? ('fd-toggle--' + this.size) : '')\">\n <input #input\n type=\"checkbox\"\n [id]=\"innerInputId\"\n [disabled]=\"this.disabled\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"this.ariaLabel\"\n [attr.aria-labelledby]=\"this.ariaLabelledby\"\n [(ngModel)]=\"this.isChecked\">\n <span class=\"fd-toggle__switch\" role=\"presentation\"></span>\n </span>\n <ng-content></ng-content>\n</label>\n", providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef((/** * @return {?} */ () => ToggleComponent)), multi: true } ], host: { class: 'fd-form__item fd-form__item--check fd-toggle-custom', '[id]': 'id', }, encapsulation: ViewEncapsulation.None, styles: [".fd-toggle-custom{display:block}"] }] } ]; /** @nocollapse */ ToggleComponent.ctorParameters = () => [ { type: HashService } ]; ToggleComponent.propDecorators = { inputElement: [{ type: ViewChild, args: ['input',] }], size: [{ type: Input }], disabled: [{ type: Input }], id: [{ type: Input }], checked: [{ type: Input }], ariaLabel: [{ type: Input }], ariaLabelledby: [{ type: Input }], checkedChange: [{ type: Output }] }; if (false) { /** * @hidden * @type {?} */ ToggleComponent.prototype.inputElement; /** * The size of the toggle. * Can be one of the four *xs*, *s*, *l*, *error* or default. * @type {?} */ ToggleComponent.prototype.size; /** * Whether the toggle is disabled. * @type {?} */ ToggleComponent.prototype.disabled; /** * Id for the toggle component. If omitted, a unique one is generated. * @type {?} */ ToggleComponent.prototype.id; /** * Whether the toggle is checked. * @type {?} */ ToggleComponent.prototype.checked; /** * aria-label attribute of the inner input element. * @type {?} */ ToggleComponent.prototype.ariaLabel; /** * aria-labelledby attribute of the inner input element. * @type {?} */ ToggleComponent.prototype.ariaLabelledby; /** * Event fired when the state of the toggle changes. * *$event* can be used to retrieve the new state of the toggle. * @type {?} */ ToggleComponent.prototype.checkedChange; /** * @hidden * @type {?} */ ToggleComponent.prototype.onChange; /** * @hidden * @type {?} */ ToggleComponent.prototype.onTouched; /** * @type {?} * @private */ ToggleComponent.prototype.hasher; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2Z1bmRhbWVudGFsLW5neC8iLCJzb3VyY2VzIjpbImxpYi90b2dnbGUvdG9nZ2xlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNySSxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDcEQsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7OztBQXVCekUsTUFBTSxPQUFPLGVBQWU7Ozs7O0lBOEN4QixZQUFvQixNQUFtQjtRQUFuQixXQUFNLEdBQU4sTUFBTSxDQUFhOzs7O1FBaEN2QyxhQUFRLEdBQVksS0FBSyxDQUFDOzs7O1FBUTFCLFlBQU8sR0FBWSxLQUFLLENBQUM7Ozs7UUFJekIsY0FBUyxHQUFXLElBQUksQ0FBQzs7OztRQUl6QixtQkFBYyxHQUFXLElBQUksQ0FBQzs7Ozs7UUFPckIsa0JBQWEsR0FBMEIsSUFBSSxZQUFZLEVBQVcsQ0FBQzs7OztRQUc1RSxhQUFROzs7UUFBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLEVBQUM7Ozs7UUFHekIsY0FBUzs7O1FBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxFQUFDO0lBR2dCLENBQUM7Ozs7O0lBRzNDLFFBQVE7UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRTtZQUNWLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNoQztRQUVELElBQUksSUFBSSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLEdBQUcsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLEdBQUcsRUFBRTtZQUMzRSxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUNwQjtJQUNMLENBQUM7Ozs7O0lBR00sS0FBSztRQUNSLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQzVDLENBQUM7Ozs7O0lBR0QsSUFBSSxZQUFZO1FBQ1osT0FBTyxHQUFHLElBQUksQ0FBQyxFQUFFLFFBQVEsQ0FBQztJQUM5QixDQUFDOzs7OztJQUdELElBQUksU0FBUztRQUNULE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN4QixDQUFDOzs7Ozs7SUFHRCxJQUFJLFNBQVMsQ0FBQyxLQUFLO1FBQ2YsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7UUFDckIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQzs7Ozs7O0lBTUQsVUFBVSxDQUFDLEtBQVU7UUFDakIsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQzs7Ozs7O0lBTUQsZ0JBQWdCLENBQUMsRUFBRTtRQUNmLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7Ozs7OztJQU1ELGlCQUFpQixDQUFDLEVBQUU7UUFDaEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs7Ozs7O0lBTUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDaEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7SUFDL0IsQ0FBQzs7O1lBaklKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsV0FBVztnQkFDckIsdXBCQUFzQztnQkFFdEMsU0FBUyxFQUFFO29CQUNQO3dCQUNJLE9BQU8sRUFBRSxpQkFBaUI7d0JBQzFCLFdBQVcsRUFBRSxVQUFVOzs7d0JBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxFQUFDO3dCQUM5QyxLQUFLLEVBQUUsSUFBSTtxQkFDZDtpQkFDSjtnQkFDRCxJQUFJLEVBQUU7b0JBQ0YsS0FBSyxFQUFFLHFEQUFxRDtvQkFDNUQsTUFBTSxFQUFFLElBQUk7aUJBQ2Y7Z0JBQ0QsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7O2FBQ3hDOzs7O1lBdkJRLFdBQVc7OzsyQkEwQmYsU0FBUyxTQUFDLE9BQU87bUJBT2pCLEtBQUs7dUJBSUwsS0FBSztpQkFJTCxLQUFLO3NCQUlMLEtBQUs7d0JBSUwsS0FBSzs2QkFJTCxLQUFLOzRCQU9MLE1BQU07Ozs7Ozs7SUFsQ1AsdUNBQzJDOzs7Ozs7SUFNM0MsK0JBQ2E7Ozs7O0lBR2IsbUNBQzBCOzs7OztJQUcxQiw2QkFDVzs7Ozs7SUFHWCxrQ0FDeUI7Ozs7O0lBR3pCLG9DQUN5Qjs7Ozs7SUFHekIseUNBQzhCOzs7Ozs7SUFNOUIsd0NBQzRFOzs7OztJQUc1RSxtQ0FBeUI7Ozs7O0lBR3pCLG9DQUEwQjs7Ozs7SUFHZCxpQ0FBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgZm9yd2FyZFJlZiwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBIYXNoU2VydmljZSB9IGZyb20gJy4uL3V0aWxzL2hhc2guc2VydmljZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbi8qKlxuICogVGhlIFRvZ2dsZSBjb21wb25lbnQgaXMgdXNlZCB0byBhY3RpdmF0ZSBvciBkZWFjdGl2YXRlIGFuIGVsZW1lbnQuIFxuICogSXQgdXNlcyBhIHZpc3VhbCBtZXRhcGhvciB0byBpbmZvcm0gdGhlIHVzZXIgb2YgdGhlIHN0YXRlIG9mIHRoZSB0b2dnbGUuIFxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ZkLXRvZ2dsZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdG9nZ2xlLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgcHJvdmlkZXJzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gVG9nZ2xlQ29tcG9uZW50KSxcbiAgICAgICAgICAgIG11bHRpOiB0cnVlXG4gICAgICAgIH1cbiAgICBdLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdmZC1mb3JtX19pdGVtIGZkLWZvcm1fX2l0ZW0tLWNoZWNrIGZkLXRvZ2dsZS1jdXN0b20nLFxuICAgICAgICAnW2lkXSc6ICdpZCcsXG4gICAgfSxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIFRvZ2dsZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICAgIC8qKiBAaGlkZGVuICovXG4gICAgQFZpZXdDaGlsZCgnaW5wdXQnKVxuICAgIGlucHV0RWxlbWVudDogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICAgIC8qKiBcbiAgICAgKiBUaGUgc2l6ZSBvZiB0aGUgdG9nZ2xlLiBcbiAgICAgKiBDYW4gYmUgb25lIG9mIHRoZSBmb3VyICp4cyosICpzKiwgKmwqLCAqZXJyb3IqIG9yIGRlZmF1bHQuIFxuICAgICAqL1xuICAgIEBJbnB1dCgpXG4gICAgc2l6ZTogc3RyaW5nO1xuXG4gICAgLyoqIFdoZXRoZXIgdGhlIHRvZ2dsZSBpcyBkaXNhYmxlZC4gKi9cbiAgICBASW5wdXQoKVxuICAgIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICAvKiogSWQgZm9yIHRoZSB0b2dnbGUgY29tcG9uZW50LiBJZiBvbWl0dGVkLCBhIHVuaXF1ZSBvbmUgaXMgZ2VuZXJhdGVkLiAqL1xuICAgIEBJbnB1dCgpXG4gICAgaWQ6IHN0cmluZztcblxuICAgIC8qKiBXaGV0aGVyIHRoZSB0b2dnbGUgaXMgY2hlY2tlZC4gKi9cbiAgICBASW5wdXQoKVxuICAgIGNoZWNrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKiBhcmlhLWxhYmVsIGF0dHJpYnV0ZSBvZiB0aGUgaW5uZXIgaW5wdXQgZWxlbWVudC4gKi9cbiAgICBASW5wdXQoKVxuICAgIGFyaWFMYWJlbDogc3RyaW5nID0gbnVsbDtcblxuICAgIC8qKiBhcmlhLWxhYmVsbGVkYnkgYXR0cmlidXRlIG9mIHRoZSBpbm5lciBpbnB1dCBlbGVtZW50LiAqL1xuICAgIEBJbnB1dCgpXG4gICAgYXJpYUxhYmVsbGVkYnk6IHN0cmluZyA9IG51bGw7XG5cbiAgICAvKiogXG4gICAgICogRXZlbnQgZmlyZWQgd2hlbiB0aGUgc3RhdGUgb2YgdGhlIHRvZ2dsZSBjaGFuZ2VzLiBcbiAgICAgKiAqJGV2ZW50KiBjYW4gYmUgdXNlZCB0byByZXRyaWV2ZSB0aGUgbmV3IHN0YXRlIG9mIHRoZSB0b2dnbGUuXG4gICAgICovXG4gICAgQE91dHB1dCgpXG4gICAgcmVhZG9ubHkgY2hlY2tlZENoYW5nZTogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBvbkNoYW5nZTogYW55ID0gKCkgPT4ge307XG5cbiAgICAvKiogQGhpZGRlbiAqL1xuICAgIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG5cbiAgICAvKiogQGhpZGRlbiAqL1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgaGFzaGVyOiBIYXNoU2VydmljZSkge31cblxuICAgIC8qKiBAaGlkZGVuICovXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIGlmICghdGhpcy5pZCkge1xuICAgICAgICAgICAgdGhpcy5pZCA9IHRoaXMuaGFzaGVyLmhhc2goKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICh0aGlzLnNpemUgJiYgdGhpcy5zaXplICE9PSAneHMnICYmIHRoaXMuc2l6ZSAhPT0gJ3MnICYmIHRoaXMuc2l6ZSAhPT0gJ2wnKSB7XG4gICAgICAgICAgICB0aGlzLnNpemUgPSBudWxsO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgLyoqIFNldCBmb2N1cyBvbiB0aGUgaW5wdXQgZWxlbWVudC4gKi9cbiAgICBwdWJsaWMgZm9jdXMoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuaW5wdXRFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG5cbiAgICAvKiogR2V0IHRoZSBpZCBvZiB0aGUgaW5uZXIgaW5wdXQgZWxlbWVudCBvZiB0aGUgdG9nZ2xlLiAqL1xuICAgIGdldCBpbm5lcklucHV0SWQoKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIGAke3RoaXMuaWR9LWlucHV0YDtcbiAgICB9XG5cbiAgICAvKiogR2V0IHRoZSBpc0NoZWNrZWQgcHJvcGVydHkgb2YgdGhlIHRvZ2dsZS4gKi9cbiAgICBnZXQgaXNDaGVja2VkKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5jaGVja2VkO1xuICAgIH1cblxuICAgIC8qKiBTZXQgdGhlIGlzQ2hlY2tlZCBwcm9wZXJ0eSBvZiB0aGUgdG9nZ2xlLiAqL1xuICAgIHNldCBpc0NoZWNrZWQodmFsdWUpIHtcbiAgICAgICAgdGhpcy5jaGVja2VkID0gdmFsdWU7XG4gICAgICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgICAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICAgICAgICB0aGlzLmNoZWNrZWRDaGFuZ2UuZW1pdCh2YWx1ZSk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogQGhpZGRlbiBcbiAgICAgKiBAcGFyYW0gdmFsdWUgU2V0cyB0aGUgdmFsdWUgb2YgdGhlICpjaGVja2VkKiBwcm9wZXJ0eSBvZiB0aGUgdG9nZ2xlLlxuICAgICAqL1xuICAgIHdyaXRlVmFsdWUodmFsdWU6IGFueSkge1xuICAgICAgICB0aGlzLmNoZWNrZWQgPSB2YWx1ZTtcbiAgICB9XG5cbiAgICAvKiogXG4gICAgICogQGhpZGRlbiBcbiAgICAgKiBAcGFyYW0gZm4gVXNlciBkZWZpbmVkIGZ1bmN0aW9uIHRoYXQgaGFuZGxlcyB0aGUgKm9uQ2hhbmdlKiBldmVudCBvZiB0aGUgdG9nZ2xlLlxuICAgICAqL1xuICAgIHJlZ2lzdGVyT25DaGFuZ2UoZm4pIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICAgIH1cblxuICAgIC8qKiBcbiAgICAgKiBAaGlkZGVuIFxuICAgICAqIEBwYXJhbSBmbiBVc2VyIGRlZmluZWQgZnVuY3Rpb24gdGhhdCBoYW5kbGVzIHRoZSAqb25Ub3VjaCogZXZlbnQgb2YgdGhlIHRvZ2dsZS5cbiAgICAgKi9cbiAgICByZWdpc3Rlck9uVG91Y2hlZChmbikge1xuICAgICAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIEBoaWRkZW4gXG4gICAgICogQHBhcmFtIGlzRGlzYWJsZWQgU2V0cyB0aGUgdmFsdWUgb2YgdGhlICpkaXNhYmxlZCogcHJvcGVydHkgb2YgdGhlIHRvZ2dsZS5cbiAgICAgKi9cbiAgICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICAgICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gICAgfVxuXG59XG4iXX0=