sb-element
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.1. It is a component library constructed around the SCSS library [Sb-Theming](https://github.com/SeverinBuchser/SbTheming) and supports [Angular Schematics]
101 lines • 13 kB
JavaScript
import { Attribute, Component, Input, Optional, ViewEncapsulation } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { mixinDisable, mixinFocus, mixinColor, mixinSize, mixinClassName, Color, Size } from '../../core';
import * as i0 from "@angular/core";
import * as i1 from "../../core";
import * as i2 from "../../icon/icon/icon.component";
import * as i3 from "@angular/common";
const SbFileInputCore = mixinDisable(mixinFocus(mixinSize(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-file-input'), Color.PRIMARY), Size.MEDIUM)));
export class SbFileInputComponent extends SbFileInputCore {
constructor(elementRef, themeService, pill, plain) {
super(elementRef, themeService);
this.placeholder = '';
this.plain = false;
this.pill = false;
this.onChange = () => { };
this.onTouch = () => { };
this.innerValue = undefined;
if (pill == '')
this.pill = true;
if (plain == '')
this.plain = true;
}
get message() {
if (this.value) {
return this.value.name;
}
return this.placeholder;
}
set value(value) {
if (value !== this.innerValue && !this.disabled) {
this.innerValue = value;
this.onChange(value);
}
}
get value() {
return this.innerValue;
}
hendleInput(event) {
let files = event.target.files;
if (files) {
let file = files.item(0);
if (file) {
this.value = file;
}
else {
this.value = undefined;
}
}
}
writeValue(value) {
if (value !== this.innerValue && !this.disabled) {
this.innerValue = value;
}
}
registerOnChange(fn) { this.onChange = fn; }
registerOnTouched(fn) { this.onTouch = fn; }
onBlur() { this.onTouch(); }
}
SbFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbFileInputComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }, { token: 'pill', attribute: true, optional: true }, { token: 'plain', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
SbFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbFileInputComponent, selector: "sb-input[type=file]", inputs: { size: "size", color: "color", disabled: "disabled", placeholder: "placeholder" }, outputs: { focus: "focus", blur: "blur" }, host: { properties: { "class.pill": "pill", "class.plain": "plain", "class.disabled": "disabled" } }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbFileInputComponent,
multi: true
}], usesInheritance: true, ngImport: i0, template: "<label>\n {{ message }}\n <sb-icon *ngIf=\"!value\"></sb-icon>\n <input\n type=\"file\"\n (input)=\"hendleInput($event)\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\"\n [disabled]=\"disabled\">\n</label>\n", components: [{ type: i2.SbIconComponent, selector: "sb-icon", inputs: ["size", "color", "icon", "isOutline"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbFileInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-input[type=file]', encapsulation: ViewEncapsulation.None, inputs: [
'size',
'color',
'disabled'
], outputs: [
'focus',
'blur'
], host: {
'[class.pill]': 'pill',
'[class.plain]': 'plain',
'[class.disabled]': 'disabled'
}, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbFileInputComponent,
multi: true
}], template: "<label>\n {{ message }}\n <sb-icon *ngIf=\"!value\"></sb-icon>\n <input\n type=\"file\"\n (input)=\"hendleInput($event)\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\"\n [disabled]=\"disabled\">\n</label>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }, { type: undefined, decorators: [{
type: Optional
}, {
type: Attribute,
args: ['pill']
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Attribute,
args: ['plain']
}] }]; }, propDecorators: { placeholder: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zYi1lbGVtZW50L3NyYy9saWIvZm9ybXMvZmlsZS1pbnB1dC9maWxlLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9mb3Jtcy9maWxlLWlucHV0L2ZpbGUtaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFFLFFBQVEsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNyRyxPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFrQixZQUFZLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsTUFBTSxZQUFZLENBQUM7Ozs7O0FBRTFILE1BQU0sZUFBZSxHQUFHLFlBQVksQ0FDbEMsVUFBVSxDQUNSLFNBQVMsQ0FDUCxVQUFVLENBQ1IsY0FBYyxDQUNaO0lBQ0UsWUFDUyxXQUF1QixFQUN2QixhQUE2QjtRQUQ3QixnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2QixrQkFBYSxHQUFiLGFBQWEsQ0FBZ0I7SUFBRyxDQUFDO0NBQzNDLEVBQUUsZUFBZSxDQUNuQixFQUFFLEtBQUssQ0FBQyxPQUFPLENBQ2pCLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FDZixDQUNGLENBQ0YsQ0FBQztBQTBCRixNQUFNLE9BQU8sb0JBQXFCLFNBQVEsZUFBZTtJQStCdkQsWUFDRSxVQUFzQixFQUN0QixZQUE0QixFQUNHLElBQVMsRUFDUixLQUFVO1FBRTFDLEtBQUssQ0FBQyxVQUFVLEVBQUUsWUFBWSxDQUFDLENBQUM7UUFsQzNCLGdCQUFXLEdBQVcsRUFBRSxDQUFDO1FBRXpCLFVBQUssR0FBWSxLQUFLLENBQUM7UUFDdkIsU0FBSSxHQUFZLEtBQUssQ0FBQztRQVNyQixhQUFRLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO1FBQ3pCLFlBQU8sR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFFeEIsZUFBVSxHQUFxQixTQUFTLENBQUM7UUFvQi9DLElBQUksSUFBSSxJQUFJLEVBQUU7WUFBRSxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNqQyxJQUFJLEtBQUssSUFBSSxFQUFFO1lBQUUsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7SUFDckMsQ0FBQztJQWhDRCxJQUFJLE9BQU87UUFDVCxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDO1NBQ3hCO1FBQ0QsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQzFCLENBQUM7SUFPRCxJQUFJLEtBQUssQ0FBQyxLQUF1QjtRQUMvQixJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUMvQyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztZQUN4QixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBYU0sV0FBVyxDQUFDLEtBQVk7UUFDN0IsSUFBSSxLQUFLLEdBQUksS0FBSyxDQUFDLE1BQTRCLENBQUMsS0FBSyxDQUFDO1FBQ3RELElBQUksS0FBSyxFQUFFO1lBQ1QsSUFBSSxJQUFJLEdBQWdCLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDdEMsSUFBSSxJQUFJLEVBQUU7Z0JBQ1IsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUM7YUFDbkI7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLEtBQUssR0FBRyxTQUFTLENBQUM7YUFDeEI7U0FDRjtJQUNILENBQUM7SUFFTSxVQUFVLENBQUMsS0FBdUI7UUFDdkMsSUFBSSxLQUFLLEtBQUssSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDL0MsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7U0FDekI7SUFDSCxDQUFDO0lBRU0sZ0JBQWdCLENBQUMsRUFBTyxJQUFVLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFBLENBQUMsQ0FBQztJQUN0RCxpQkFBaUIsQ0FBQyxFQUFPLElBQVUsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUEsQ0FBQyxDQUFDO0lBQ3RELE1BQU0sS0FBVyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUEsQ0FBQyxDQUFDOztpSEE5RDdCLG9CQUFvQiwwRUFrQ04sTUFBTSw4Q0FDTixPQUFPO3FHQW5DckIsb0JBQW9CLDJSQU5wQixDQUFDO1lBQ1YsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsb0JBQW9CO1lBQ2pDLEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQyxpREMxQ0osb1FBVUE7MkZEa0NhLG9CQUFvQjtrQkF4QmhDLFNBQVM7K0JBQ0UscUJBQXFCLGlCQUVoQixpQkFBaUIsQ0FBQyxJQUFJLFVBQzdCO3dCQUNOLE1BQU07d0JBQ04sT0FBTzt3QkFDUCxVQUFVO3FCQUNYLFdBQ1E7d0JBQ1AsT0FBTzt3QkFDUCxNQUFNO3FCQUNQLFFBQ0s7d0JBQ0osY0FBYyxFQUFFLE1BQU07d0JBQ3RCLGVBQWUsRUFBRSxPQUFPO3dCQUN4QixrQkFBa0IsRUFBRSxVQUFVO3FCQUMvQixhQUNVLENBQUM7NEJBQ1YsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxzQkFBc0I7NEJBQ2pDLEtBQUssRUFBRSxJQUFJO3lCQUNaLENBQUM7OzBCQW9DQyxRQUFROzswQkFBSSxTQUFTOzJCQUFDLE1BQU07OzBCQUM1QixRQUFROzswQkFBSSxTQUFTOzJCQUFDLE9BQU87NENBaEN6QixXQUFXO3NCQURqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXR0cmlidXRlLCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0LCBPcHRpb25hbCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFNiVGhlbWVTZXJ2aWNlLCBtaXhpbkRpc2FibGUsIG1peGluRm9jdXMsIG1peGluQ29sb3IsIG1peGluU2l6ZSwgbWl4aW5DbGFzc05hbWUsIENvbG9yLCBTaXplIH0gZnJvbSAnLi4vLi4vY29yZSc7XG5cbmNvbnN0IFNiRmlsZUlucHV0Q29yZSA9IG1peGluRGlzYWJsZShcbiAgbWl4aW5Gb2N1cyhcbiAgICBtaXhpblNpemUoXG4gICAgICBtaXhpbkNvbG9yKFxuICAgICAgICBtaXhpbkNsYXNzTmFtZShcbiAgICAgICAgICBjbGFzcyB7XG4gICAgICAgICAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgICAgICAgcHVibGljIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgICAgICAgICAgICBwdWJsaWMgX3RoZW1lU2VydmljZTogU2JUaGVtZVNlcnZpY2UpIHt9XG4gICAgICAgICAgfSwgJ3NiLWZpbGUtaW5wdXQnXG4gICAgICAgICksIENvbG9yLlBSSU1BUllcbiAgICAgICksIFNpemUuTUVESVVNXG4gICAgKVxuICApXG4pO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi1pbnB1dFt0eXBlPWZpbGVdJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbGUtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBpbnB1dHM6IFtcbiAgICAnc2l6ZScsXG4gICAgJ2NvbG9yJyxcbiAgICAnZGlzYWJsZWQnXG4gIF0sXG4gIG91dHB1dHM6IFtcbiAgICAnZm9jdXMnLFxuICAgICdibHVyJ1xuICBdLFxuICBob3N0OiB7XG4gICAgJ1tjbGFzcy5waWxsXSc6ICdwaWxsJyxcbiAgICAnW2NsYXNzLnBsYWluXSc6ICdwbGFpbicsXG4gICAgJ1tjbGFzcy5kaXNhYmxlZF0nOiAnZGlzYWJsZWQnXG4gIH0sXG4gIHByb3ZpZGVyczogW3tcbiAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICB1c2VFeGlzdGluZzogU2JGaWxlSW5wdXRDb21wb25lbnQsXG4gICAgbXVsdGk6IHRydWVcbiAgfV1cbn0pXG5leHBvcnQgY2xhc3MgU2JGaWxlSW5wdXRDb21wb25lbnQgZXh0ZW5kcyBTYkZpbGVJbnB1dENvcmUgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG5cbiAgQElucHV0KClcbiAgcHVibGljIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnJztcblxuICBwdWJsaWMgcGxhaW46IGJvb2xlYW4gPSBmYWxzZTtcbiAgcHVibGljIHBpbGw6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBnZXQgbWVzc2FnZSgpOiBzdHJpbmcge1xuICAgIGlmICh0aGlzLnZhbHVlKSB7XG4gICAgICByZXR1cm4gdGhpcy52YWx1ZS5uYW1lO1xuICAgIH1cbiAgICByZXR1cm4gdGhpcy5wbGFjZWhvbGRlcjtcbiAgfVxuXG4gIHByaXZhdGUgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xuICBwcml2YXRlIG9uVG91Y2g6IGFueSA9ICgpID0+IHt9O1xuXG4gIHByaXZhdGUgaW5uZXJWYWx1ZTogRmlsZSB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcblxuICBzZXQgdmFsdWUodmFsdWU6IEZpbGUgfCB1bmRlZmluZWQpIHtcbiAgICBpZiAodmFsdWUgIT09IHRoaXMuaW5uZXJWYWx1ZSAmJiAhdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy5pbm5lclZhbHVlID0gdmFsdWU7XG4gICAgICB0aGlzLm9uQ2hhbmdlKHZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBnZXQgdmFsdWUoKTogRmlsZSB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMuaW5uZXJWYWx1ZTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgdGhlbWVTZXJ2aWNlOiBTYlRoZW1lU2VydmljZSxcbiAgICBAT3B0aW9uYWwoKSBAQXR0cmlidXRlKCdwaWxsJykgcGlsbDogYW55LFxuICAgIEBPcHRpb25hbCgpIEBBdHRyaWJ1dGUoJ3BsYWluJykgcGxhaW46IGFueVxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCB0aGVtZVNlcnZpY2UpO1xuICAgIGlmIChwaWxsID09ICcnKSB0aGlzLnBpbGwgPSB0cnVlO1xuICAgIGlmIChwbGFpbiA9PSAnJykgdGhpcy5wbGFpbiA9IHRydWU7XG4gIH1cblxuICBwdWJsaWMgaGVuZGxlSW5wdXQoZXZlbnQ6IEV2ZW50KSB7XG4gICAgbGV0IGZpbGVzID0gKGV2ZW50LnRhcmdldCEgYXMgSFRNTElucHV0RWxlbWVudCkuZmlsZXM7XG4gICAgaWYgKGZpbGVzKSB7XG4gICAgICBsZXQgZmlsZTogRmlsZSB8IG51bGwgPSBmaWxlcy5pdGVtKDApO1xuICAgICAgaWYgKGZpbGUpIHtcbiAgICAgICAgdGhpcy52YWx1ZSA9IGZpbGU7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLnZhbHVlID0gdW5kZWZpbmVkO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyB3cml0ZVZhbHVlKHZhbHVlOiBGaWxlIHwgdW5kZWZpbmVkKTogdm9pZCB7XG4gICAgaWYgKHZhbHVlICE9PSB0aGlzLmlubmVyVmFsdWUgJiYgIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuaW5uZXJWYWx1ZSA9IHZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vbkNoYW5nZSA9IGZuIH1cbiAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vblRvdWNoID0gZm4gfVxuICBwdWJsaWMgb25CbHVyKCk6IHZvaWQgeyB0aGlzLm9uVG91Y2goKSB9XG59XG4iLCI8bGFiZWw+XG4gIHt7IG1lc3NhZ2UgfX1cbiAgPHNiLWljb24gKm5nSWY9XCIhdmFsdWVcIj4mI3hlMmM2Ozwvc2ItaWNvbj5cbiAgPGlucHV0XG4gICAgdHlwZT1cImZpbGVcIlxuICAgIChpbnB1dCk9XCJoZW5kbGVJbnB1dCgkZXZlbnQpXCJcbiAgICAoYmx1cik9XCJzZXRGb2N1c2VkU3RhdGUoZmFsc2UpXCJcbiAgICAoZm9jdXMpPVwic2V0Rm9jdXNlZFN0YXRlKHRydWUpXCJcbiAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIj5cbjwvbGFiZWw+XG4iXX0=