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]
77 lines • 11.2 kB
JavaScript
import { Component, Input, ViewEncapsulation } 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 "@angular/forms";
import * as i3 from "@angular/common";
const SbInputCoreCore = mixinDisable(mixinFocus(mixinSize(mixinColor(mixinClassName(class {
constructor(_elementRef, _themeService) {
this._elementRef = _elementRef;
this._themeService = _themeService;
}
}, 'sb-input-core'), Color.PRIMARY), Size.MEDIUM)));
export class SbInputCoreComponent extends SbInputCoreCore {
constructor(elementRef, themeService) {
super(elementRef, themeService);
this.placeholder = '';
this.type = 'text';
this.spellcheck = false;
this.onChange = () => { };
this.onTouch = () => { };
this.innerValue = undefined;
}
set value(value) {
this.writeValue(value);
this.onChange(value);
}
get value() {
if (this.innerValue) {
return this.innerValue;
}
else
return '';
}
getPlaceholderClasses() {
let classes = new Array();
classes.push(this.className + '__placeholder');
classes.push(this.value || this.focused ? 'top' : '');
return classes;
}
writeValue(value) {
if (value == '' || value !== this.innerValue && !this.disabled) {
this.innerValue = value;
}
}
registerOnChange(fn) { this.onChange = fn; }
registerOnTouched(fn) { this.onTouch = fn; }
onBlur() { this.onTouch(); }
}
SbInputCoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbInputCoreComponent, deps: [{ token: i0.ElementRef }, { token: i1.SbThemeService }], target: i0.ɵɵFactoryTarget.Component });
SbInputCoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: SbInputCoreComponent, selector: "sb-input-core", inputs: { size: "size", color: "color", disabled: "disabled", placeholder: "placeholder", type: "type", spellcheck: "spellcheck" }, outputs: { focus: "focus", blur: "blur" }, providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbInputCoreComponent,
multi: true
}], usesInheritance: true, ngImport: i0, template: "<input\n [type]=\"type\"\n [(ngModel)]=\"value\"\n [spellcheck]=\"spellcheck\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\"\n [disabled]=\"disabled\">\n<div [ngClass]=\"getPlaceholderClasses()\">\n {{ placeholder }}\n</div>\n", directives: [{ type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: SbInputCoreComponent, decorators: [{
type: Component,
args: [{ selector: 'sb-input-core', encapsulation: ViewEncapsulation.None, inputs: [
'size',
'color',
'disabled'
], outputs: [
'focus',
'blur'
], providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: SbInputCoreComponent,
multi: true
}], template: "<input\n [type]=\"type\"\n [(ngModel)]=\"value\"\n [spellcheck]=\"spellcheck\"\n (blur)=\"setFocusedState(false)\"\n (focus)=\"setFocusedState(true)\"\n [disabled]=\"disabled\">\n<div [ngClass]=\"getPlaceholderClasses()\">\n {{ placeholder }}\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SbThemeService }]; }, propDecorators: { placeholder: [{
type: Input
}], type: [{
type: Input
}], spellcheck: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtY29yZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zYi1lbGVtZW50L3NyYy9saWIvZm9ybXMvaW5wdXQvaW5wdXQtY29yZS9pbnB1dC1jb3JlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NiLWVsZW1lbnQvc3JjL2xpYi9mb3Jtcy9pbnB1dC9pbnB1dC1jb3JlL2lucHV0LWNvcmUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxLQUFLLEVBQUUsY0FBYyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQWtCLE1BQU0sZUFBZSxDQUFDOzs7OztBQUU3SCxNQUFNLGVBQWUsR0FBRyxZQUFZLENBQ2xDLFVBQVUsQ0FDUixTQUFTLENBQ1AsVUFBVSxDQUNSLGNBQWMsQ0FDWjtJQUNFLFlBQ1MsV0FBdUIsRUFDdkIsYUFBNkI7UUFEN0IsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsa0JBQWEsR0FBYixhQUFhLENBQWdCO0lBQUcsQ0FBQztDQUMzQyxFQUFFLGVBQWUsQ0FDbkIsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUNqQixFQUFFLElBQUksQ0FBQyxNQUFNLENBQ2YsQ0FDRixDQUNGLENBQUM7QUFxQkYsTUFBTSxPQUFPLG9CQUFxQixTQUFRLGVBQWU7SUFrQ3ZELFlBQ0UsVUFBc0IsRUFDdEIsWUFBNEI7UUFFNUIsS0FBSyxDQUFDLFVBQVUsRUFBRSxZQUFZLENBQUMsQ0FBQztRQW5DM0IsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFHekIsU0FBSSxHQUFXLE1BQU0sQ0FBQztRQUd0QixlQUFVLEdBQVksS0FBSyxDQUFDO1FBRTNCLGFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDekIsWUFBTyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUV4QixlQUFVLEdBQXVCLFNBQVMsQ0FBQztJQXlCbkQsQ0FBQztJQXZCRCxJQUFJLEtBQUssQ0FBQyxLQUFhO1FBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QixDQUFDO0lBRUQsSUFBSSxLQUFLO1FBQ1AsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQztTQUN4Qjs7WUFBTSxPQUFPLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRU0scUJBQXFCO1FBQzFCLElBQUksT0FBTyxHQUFHLElBQUksS0FBSyxFQUFVLENBQUM7UUFDbEMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsU0FBUyxHQUFHLGVBQWUsQ0FBQyxDQUFBO1FBQzlDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFBO1FBQ3JELE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFVTSxVQUFVLENBQUMsS0FBYTtRQUM3QixJQUFJLEtBQUssSUFBSSxFQUFFLElBQUksS0FBSyxLQUFLLElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQzlELElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQztJQUVNLGdCQUFnQixDQUFDLEVBQU8sSUFBVSxJQUFJLENBQUMsUUFBUSxHQUFHLEVBQUUsQ0FBQSxDQUFDLENBQUM7SUFDdEQsaUJBQWlCLENBQUMsRUFBTyxJQUFVLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFBLENBQUMsQ0FBQztJQUN0RCxNQUFNLEtBQVcsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFBLENBQUMsQ0FBQzs7aUhBbEQ3QixvQkFBb0I7cUdBQXBCLG9CQUFvQix1TkFOcEIsQ0FBQztZQUNWLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLG9CQUFvQjtZQUNqQyxLQUFLLEVBQUUsSUFBSTtTQUNaLENBQUMsaURDckNKLHFRQVVBOzJGRDZCYSxvQkFBb0I7a0JBbkJoQyxTQUFTOytCQUNFLGVBQWUsaUJBRVYsaUJBQWlCLENBQUMsSUFBSSxVQUM3Qjt3QkFDTixNQUFNO3dCQUNOLE9BQU87d0JBQ1AsVUFBVTtxQkFDWCxXQUNRO3dCQUNQLE9BQU87d0JBQ1AsTUFBTTtxQkFDUCxhQUNVLENBQUM7NEJBQ1YsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxzQkFBc0I7NEJBQ2pDLEtBQUssRUFBRSxJQUFJO3lCQUNaLENBQUM7OEhBS0ssV0FBVztzQkFEakIsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsVUFBVTtzQkFEaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBDb2xvciwgbWl4aW5DbGFzc05hbWUsIG1peGluQ29sb3IsIG1peGluRGlzYWJsZSwgbWl4aW5Gb2N1cywgbWl4aW5TaXplLCBTaXplLCBTYlRoZW1lU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL2NvcmUnO1xuXG5jb25zdCBTYklucHV0Q29yZUNvcmUgPSBtaXhpbkRpc2FibGUoXG4gIG1peGluRm9jdXMoXG4gICAgbWl4aW5TaXplKFxuICAgICAgbWl4aW5Db2xvcihcbiAgICAgICAgbWl4aW5DbGFzc05hbWUoXG4gICAgICAgICAgY2xhc3Mge1xuICAgICAgICAgICAgY29uc3RydWN0b3IoXG4gICAgICAgICAgICAgIHB1YmxpYyBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgICAgICAgcHVibGljIF90aGVtZVNlcnZpY2U6IFNiVGhlbWVTZXJ2aWNlKSB7fVxuICAgICAgICAgIH0sICdzYi1pbnB1dC1jb3JlJ1xuICAgICAgICApLCBDb2xvci5QUklNQVJZXG4gICAgICApLCBTaXplLk1FRElVTVxuICAgIClcbiAgKVxuKTtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc2ItaW5wdXQtY29yZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnB1dC1jb3JlLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgaW5wdXRzOiBbXG4gICAgJ3NpemUnLFxuICAgICdjb2xvcicsXG4gICAgJ2Rpc2FibGVkJ1xuICBdLFxuICBvdXRwdXRzOiBbXG4gICAgJ2ZvY3VzJyxcbiAgICAnYmx1cidcbiAgXSxcbiAgcHJvdmlkZXJzOiBbe1xuICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgIHVzZUV4aXN0aW5nOiBTYklucHV0Q29yZUNvbXBvbmVudCxcbiAgICBtdWx0aTogdHJ1ZVxuICB9XVxufSlcbmV4cG9ydCBjbGFzcyBTYklucHV0Q29yZUNvbXBvbmVudCBleHRlbmRzIFNiSW5wdXRDb3JlQ29yZSBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgcGxhY2Vob2xkZXI6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyB0eXBlOiBzdHJpbmcgPSAndGV4dCc7XG5cbiAgQElucHV0KClcbiAgcHVibGljIHNwZWxsY2hlY2s6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBwcml2YXRlIG9uQ2hhbmdlOiBhbnkgPSAoKSA9PiB7fTtcbiAgcHJpdmF0ZSBvblRvdWNoOiBhbnkgPSAoKSA9PiB7fTtcblxuICBwcml2YXRlIGlubmVyVmFsdWU6IHN0cmluZyB8IHVuZGVmaW5lZCA9IHVuZGVmaW5lZDtcblxuICBzZXQgdmFsdWUodmFsdWU6IHN0cmluZykge1xuICAgIHRoaXMud3JpdGVWYWx1ZSh2YWx1ZSk7XG4gICAgdGhpcy5vbkNoYW5nZSh2YWx1ZSk7XG4gIH1cblxuICBnZXQgdmFsdWUoKTogc3RyaW5nIHtcbiAgICBpZiAodGhpcy5pbm5lclZhbHVlKSB7XG4gICAgICByZXR1cm4gdGhpcy5pbm5lclZhbHVlO1xuICAgIH0gZWxzZSByZXR1cm4gJyc7XG4gIH1cblxuICBwdWJsaWMgZ2V0UGxhY2Vob2xkZXJDbGFzc2VzKCk6IEFycmF5PHN0cmluZz4ge1xuICAgIGxldCBjbGFzc2VzID0gbmV3IEFycmF5PHN0cmluZz4oKTtcbiAgICBjbGFzc2VzLnB1c2godGhpcy5jbGFzc05hbWUgKyAnX19wbGFjZWhvbGRlcicpXG4gICAgY2xhc3Nlcy5wdXNoKHRoaXMudmFsdWUgfHwgdGhpcy5mb2N1c2VkID8gJ3RvcCcgOiAnJylcbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgdGhlbWVTZXJ2aWNlOiBTYlRoZW1lU2VydmljZVxuICApIHtcbiAgICBzdXBlcihlbGVtZW50UmVmLCB0aGVtZVNlcnZpY2UpO1xuICB9XG5cblxuICBwdWJsaWMgd3JpdGVWYWx1ZSh2YWx1ZTogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKHZhbHVlID09ICcnIHx8IHZhbHVlICE9PSB0aGlzLmlubmVyVmFsdWUgJiYgIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuaW5uZXJWYWx1ZSA9IHZhbHVlO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vbkNoYW5nZSA9IGZuIH1cbiAgcHVibGljIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHsgdGhpcy5vblRvdWNoID0gZm4gfVxuICBwdWJsaWMgb25CbHVyKCk6IHZvaWQgeyB0aGlzLm9uVG91Y2goKSB9XG5cbn1cbiIsIjxpbnB1dFxuICBbdHlwZV09XCJ0eXBlXCJcbiAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiXG4gIFtzcGVsbGNoZWNrXT1cInNwZWxsY2hlY2tcIlxuICAoYmx1cik9XCJzZXRGb2N1c2VkU3RhdGUoZmFsc2UpXCJcbiAgKGZvY3VzKT1cInNldEZvY3VzZWRTdGF0ZSh0cnVlKVwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuPGRpdiBbbmdDbGFzc109XCJnZXRQbGFjZWhvbGRlckNsYXNzZXMoKVwiPlxuICB7eyBwbGFjZWhvbGRlciB9fVxuPC9kaXY+XG4iXX0=