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]
80 lines • 12.5 kB
JavaScript
import { Component, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Color, mixinClassName, mixinColor, mixinDisable, mixinFocus, mixinSize, 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 "../number-input-core/number-input-core.component";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
const SbNumberInputCore = mixinDisable(mixinFocus(mixinSize(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-input'), Color.PRIMARY), Size.MEDIUM)));
export class SbNumberInputComponent extends SbNumberInputCore {
constructor(elementRef, themeService) {
super(elementRef, themeService);
this.placeholder = '';
this.min = Number.MIN_SAFE_INTEGER;
this.max = Number.MAX_SAFE_INTEGER;
this.prefixIcon = '';
this.suffixIcon = '';
this.onChange = () => { };
this.onTouch = () => { };
this.innerValue = undefined;
}
set value(value) {
if (this.hasChange(value)) {
this.writeValue(value);
this.onChange(value);
}
}
get value() {
return this.innerValue;
}
writeValue(value) {
if (this.hasChange(value)) {
this.innerValue = value;
}
}
hasChange(value) {
return value !== undefined && value !== this.innerValue && !this.disabled;
}
registerOnChange(fn) { this.onChange = fn; }
registerOnTouched(fn) { this.onTouch = fn; }
onBlur() { this.onTouch(); }
}
SbNumberInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbNumberInputComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbNumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbNumberInputComponent, selector: "sb-input[type=number]", inputs: { size: "size", color: "color", disabled: "disabled", placeholder: "placeholder", min: "min", max: "max", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon" }, outputs: { focus: "focus", blur: "blur" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbNumberInputComponent,
multi: true
}], usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"className + '__border'\"></div>\n<sb-icon\n *ngIf=\"prefixIcon\"\n [ngClass]=\"className + '__prefix'\"\n [icon]=\"prefixIcon\"\n size=\"s\">\n</sb-icon>\n<sb-input-core\n [size]=\"size\"\n [color]=\"color\"\n [placeholder]=\"placeholder\"\n type=\"number\"\n [min]=\"min\"\n [max]=\"max\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\">\n</sb-input-core>\n<sb-icon\n *ngIf=\"suffixIcon\"\n [ngClass]=\"className + '__suffix'\"\n [icon]=\"suffixIcon\"\n size=\"s\">\n</sb-icon>\n", components: [{ type: i2.SbIconComponent, selector: "sb-icon", inputs: ["size", "color", "icon", "isOutline"] }, { type: i3.SbNumberInputCoreComponent, selector: "sb-input-core[type=number]", inputs: ["size", "color", "disabled", "placeholder", "min", "max", "prefixIcon", "suffixIcon"], outputs: ["focus", "blur", "overflow", "underflow"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbNumberInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-input[type=number]', inputs: [
'size',
'color',
'disabled'
], outputs: [
'focus',
'blur'
], providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbNumberInputComponent,
multi: true
}], template: "<div [ngClass]=\"className + '__border'\"></div>\n<sb-icon\n *ngIf=\"prefixIcon\"\n [ngClass]=\"className + '__prefix'\"\n [icon]=\"prefixIcon\"\n size=\"s\">\n</sb-icon>\n<sb-input-core\n [size]=\"size\"\n [color]=\"color\"\n [placeholder]=\"placeholder\"\n type=\"number\"\n [min]=\"min\"\n [max]=\"max\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\">\n</sb-input-core>\n<sb-icon\n *ngIf=\"suffixIcon\"\n [ngClass]=\"className + '__suffix'\"\n [icon]=\"suffixIcon\"\n size=\"s\">\n</sb-icon>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }]; }, propDecorators: { placeholder: [{
type: Input
}], min: [{
type: Input
}], max: [{
type: Input
}], prefixIcon: [{
type: Input
}], suffixIcon: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnVtYmVyLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9mb3Jtcy9udW1iZXItaW5wdXQvbnVtYmVyLWlucHV0L251bWJlci1pbnB1dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zYi1lbGVtZW50L3NyYy9saWIvZm9ybXMvbnVtYmVyLWlucHV0L251bWJlci1pbnB1dC9udW1iZXItaW5wdXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0QsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQWtCLE1BQU0sZUFBZSxDQUFDOzs7Ozs7O0FBRTdILE1BQU0saUJBQWlCLEdBQUcsWUFBWSxDQUNwQyxVQUFVLENBQ1IsU0FBUyxDQUNQLFVBQVUsQ0FDUixjQUFjLENBQ1o7SUFDRSxZQUNTLFdBQXVCLEVBQ3ZCLGFBQTZCO1FBRDdCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLGtCQUFhLEdBQWIsYUFBYSxDQUFnQjtJQUFHLENBQUM7Q0FDM0MsRUFBRSxVQUFVLENBQ2QsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUNqQixFQUFFLElBQUksQ0FBQyxNQUFNLENBQ2YsQ0FDRixDQUNGLENBQUM7QUFvQkYsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGlCQUFpQjtJQStCM0QsWUFDRSxVQUFzQixFQUN0QixZQUE0QjtRQUU1QixLQUFLLENBQUMsVUFBVSxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBaEMzQixnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUd6QixRQUFHLEdBQVcsTUFBTSxDQUFDLGdCQUFnQixDQUFDO1FBRXRDLFFBQUcsR0FBVyxNQUFNLENBQUMsZ0JBQWdCLENBQUM7UUFHdEMsZUFBVSxHQUFXLEVBQUUsQ0FBQztRQUV4QixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBRXZCLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsWUFBTyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUV4QixlQUFVLEdBQXVCLFNBQVMsQ0FBQztJQWtCbkQsQ0FBQztJQWhCRCxJQUFJLEtBQUssQ0FBQyxLQUF5QjtRQUNqQyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDekIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUVELElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN6QixDQUFDO0lBVU0sVUFBVSxDQUFDLEtBQXlCO1FBQ3pDLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUN6QixJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztTQUN6QjtJQUNILENBQUM7SUFFTyxTQUFTLENBQUMsS0FBeUI7UUFDekMsT0FBTyxLQUFLLEtBQUssU0FBUyxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUM1RSxDQUFDO0lBRU0sZ0JBQWdCLENBQUMsRUFBTyxJQUFVLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFBLENBQUMsQ0FBQztJQUN0RCxpQkFBaUIsQ0FBQyxFQUFPLElBQVUsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUEsQ0FBQyxDQUFDO0lBQ3RELE1BQU0sS0FBVyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUEsQ0FBQyxDQUFDOzttSEFuRDdCLHNCQUFzQjt1R0FBdEIsc0JBQXNCLG1RQU50QixDQUFDO1lBQ1YsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsc0JBQXNCO1lBQ25DLEtBQUssRUFBRSxJQUFJO1NBQ1osQ0FBQyxpRENwQ0osK2tCQXlCQTsyRkRhYSxzQkFBc0I7a0JBbEJsQyxTQUFTOytCQUNFLHVCQUF1QixVQUV6Qjt3QkFDTixNQUFNO3dCQUNOLE9BQU87d0JBQ1AsVUFBVTtxQkFDWCxXQUNRO3dCQUNQLE9BQU87d0JBQ1AsTUFBTTtxQkFDUCxhQUNVLENBQUM7NEJBQ1YsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyx3QkFBd0I7NEJBQ25DLEtBQUssRUFBRSxJQUFJO3lCQUNaLENBQUM7OEhBS0ssV0FBVztzQkFEakIsS0FBSztnQkFJQyxHQUFHO3NCQURULEtBQUs7Z0JBR0MsR0FBRztzQkFEVCxLQUFLO2dCQUlDLFVBQVU7c0JBRGhCLEtBQUs7Z0JBR0MsVUFBVTtzQkFEaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IENvbG9yLCBtaXhpbkNsYXNzTmFtZSwgbWl4aW5Db2xvciwgbWl4aW5EaXNhYmxlLCBtaXhpbkZvY3VzLCBtaXhpblNpemUsIFNpemUsIFNiVGhlbWVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vY29yZSc7XG5cbmNvbnN0IFNiTnVtYmVySW5wdXRDb3JlID0gbWl4aW5EaXNhYmxlKFxuICBtaXhpbkZvY3VzKFxuICAgIG1peGluU2l6ZShcbiAgICAgIG1peGluQ29sb3IoXG4gICAgICAgIG1peGluQ2xhc3NOYW1lKFxuICAgICAgICAgIGNsYXNzIHtcbiAgICAgICAgICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICAgICAgICBwdWJsaWMgX2VsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgICAgICAgICAgIHB1YmxpYyBfdGhlbWVTZXJ2aWNlOiBTYlRoZW1lU2VydmljZSkge31cbiAgICAgICAgICB9LCAnc2ItaW5wdXQnXG4gICAgICAgICksIENvbG9yLlBSSU1BUllcbiAgICAgICksIFNpemUuTUVESVVNXG4gICAgKVxuICApXG4pO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzYi1pbnB1dFt0eXBlPW51bWJlcl0nLFxuICB0ZW1wbGF0ZVVybDogJy4vbnVtYmVyLWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgaW5wdXRzOiBbXG4gICAgJ3NpemUnLFxuICAgICdjb2xvcicsXG4gICAgJ2Rpc2FibGVkJ1xuICBdLFxuICBvdXRwdXRzOiBbXG4gICAgJ2ZvY3VzJyxcbiAgICAnYmx1cidcbiAgXSxcbiAgcHJvdmlkZXJzOiBbe1xuICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgIHVzZUV4aXN0aW5nOiBTYk51bWJlcklucHV0Q29tcG9uZW50LFxuICAgIG11bHRpOiB0cnVlXG4gIH1dXG59KVxuZXhwb3J0IGNsYXNzIFNiTnVtYmVySW5wdXRDb21wb25lbnQgZXh0ZW5kcyBTYk51bWJlcklucHV0Q29yZSBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgcGxhY2Vob2xkZXI6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBtaW46IG51bWJlciA9IE51bWJlci5NSU5fU0FGRV9JTlRFR0VSO1xuICBASW5wdXQoKVxuICBwdWJsaWMgbWF4OiBudW1iZXIgPSBOdW1iZXIuTUFYX1NBRkVfSU5URUdFUjtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgcHJlZml4SWNvbjogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBzdWZmaXhJY29uOiBzdHJpbmcgPSAnJztcblxuICBwcml2YXRlIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcbiAgcHJpdmF0ZSBvblRvdWNoOiBhbnkgPSAoKSA9PiB7fTtcblxuICBwcml2YXRlIGlubmVyVmFsdWU6IG51bWJlciB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcblxuICBzZXQgdmFsdWUodmFsdWU6IG51bWJlciB8IHVuZGVmaW5lZCkge1xuICAgIGlmICh0aGlzLmhhc0NoYW5nZSh2YWx1ZSkpIHtcbiAgICAgIHRoaXMud3JpdGVWYWx1ZSh2YWx1ZSk7XG4gICAgICB0aGlzLm9uQ2hhbmdlKHZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBnZXQgdmFsdWUoKTogbnVtYmVyIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gdGhpcy5pbm5lclZhbHVlO1xuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICB0aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlXG4gICkge1xuICAgIHN1cGVyKGVsZW1lbnRSZWYsIHRoZW1lU2VydmljZSk7XG4gIH1cblxuXG4gIHB1YmxpYyB3cml0ZVZhbHVlKHZhbHVlOiBudW1iZXIgfCB1bmRlZmluZWQpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5oYXNDaGFuZ2UodmFsdWUpKSB7XG4gICAgICB0aGlzLmlubmVyVmFsdWUgPSB2YWx1ZTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGhhc0NoYW5nZSh2YWx1ZTogbnVtYmVyIHwgdW5kZWZpbmVkKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHZhbHVlICE9PSB1bmRlZmluZWQgJiYgdmFsdWUgIT09IHRoaXMuaW5uZXJWYWx1ZSAmJiAhdGhpcy5kaXNhYmxlZDtcbiAgfVxuXG4gIHB1YmxpYyByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vbkNoYW5nZSA9IGZuIH1cbiAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vblRvdWNoID0gZm4gfVxuICBwdWJsaWMgb25CbHVyKCk6IHZvaWQgeyB0aGlzLm9uVG91Y2goKSB9XG5cbn1cbiIsIjxkaXYgW25nQ2xhc3NdPVwiY2xhc3NOYW1lICsgJ19fYm9yZGVyJ1wiPjwvZGl2PlxuPHNiLWljb25cbiAgKm5nSWY9XCJwcmVmaXhJY29uXCJcbiAgW25nQ2xhc3NdPVwiY2xhc3NOYW1lICsgJ19fcHJlZml4J1wiXG4gIFtpY29uXT1cInByZWZpeEljb25cIlxuICBzaXplPVwic1wiPlxuPC9zYi1pY29uPlxuPHNiLWlucHV0LWNvcmVcbiAgW3NpemVdPVwic2l6ZVwiXG4gIFtjb2xvcl09XCJjb2xvclwiXG4gIFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG4gIHR5cGU9XCJudW1iZXJcIlxuICBbbWluXT1cIm1pblwiXG4gIFttYXhdPVwibWF4XCJcbiAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gIChibHVyKT1cInNldEZvY3VzZWRTdGF0ZShmYWxzZSlcIlxuICAoZm9jdXMpPVwic2V0Rm9jdXNlZFN0YXRlKHRydWUpXCI+XG48L3NiLWlucHV0LWNvcmU+XG48c2ItaWNvblxuICAqbmdJZj1cInN1ZmZpeEljb25cIlxuICBbbmdDbGFzc109XCJjbGFzc05hbWUgKyAnX19zdWZmaXgnXCJcbiAgW2ljb25dPVwic3VmZml4SWNvblwiXG4gIHNpemU9XCJzXCI+XG48L3NiLWljb24+XG4iXX0=