accumulation-ui
Version:
Super fast and modern framework for web application development
145 lines (135 loc) • 10.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ChangeDetectionStrategy, Input, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class AccumulationUIService {
constructor() {
this.rootElement = document.documentElement;
}
toggleTheme(theme) {
this.rootElement.setAttribute('theme', theme);
}
}
AccumulationUIService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
AccumulationUIService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: function () { return []; } });
class IconComponent {
constructor() { }
ngOnInit() { }
}
IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: IconComponent, selector: "acc-icon", inputs: { icon: "icon" }, ngImport: i0, template: "<div class=\"icon\" [ngClass]=\"icon\"></div>\n", styles: [".icon{width:100%;height:100%;background-color:currentColor}.github{-webkit-mask:var(--svg-github) no-repeat center;mask:var(--svg-github) no-repeat center}.google{-webkit-mask:var(--svg-google) no-repeat center;mask:var(--svg-google) no-repeat center}.facebook{-webkit-mask:var(--svg-facebook) no-repeat center;mask:var(--svg-facebook) no-repeat center}.lock{-webkit-mask:var(--svg-lock) no-repeat center;mask:var(--svg-lock) no-repeat center}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{
selector: 'acc-icon',
templateUrl: './icon.component.html',
styleUrls: ['./icon.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; }, propDecorators: { icon: [{
type: Input
}] } });
class ButtonComponent {
constructor() {
this.color = 'light';
}
get getClass() {
return this.color;
}
ngOnInit() { }
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ButtonComponent, selector: "button[acc-button]", inputs: { color: "color", icon: "icon" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<span class=\"image\" *ngIf=\"icon\">\n <acc-icon [icon]=\"icon\"></acc-icon>\n</span>\n\n<span class=\"text\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{height:48px;width:100%;padding:0 12px;font-size:1rem;font-weight:500;line-height:1.5;display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;border:1px solid;border-radius:5px;transition-property:background-color,border-color,color,box-shadow;transition-duration:.15s;transition-timing-function:ease}:host:disabled{cursor:default}:host>.image{height:20px;width:20px;margin-right:8px}:host>.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host{color:var(--button-color);border-color:var(--button-border);background-color:var(--button-background)}:host:hover,:host:focus{color:var(--button-color-hover);border-color:var(--button-border-hover);background-color:var(--button-background-hover)}:host:active,:host:focus{box-shadow:0 0 0 1.5px var(--body-background),0 0 0 3px var(--button-border-hover)}:host:disabled{box-shadow:none;color:var(--button-color-disabled);border-color:var(--button-border-disabled);background-color:var(--button-background-disabled)}:host.light{--button-color: #666666;--button-border: #ced6e0;--button-background: #ffffff;--button-color-hover: #666666;--button-border-hover: #ced6e0;--button-background-hover: #f5f7f9}:host.pink{--button-color: #ffffff;--button-border: #6b4fbb;--button-background: #6b4fbb;--button-color-hover: #ffffff;--button-border-hover: #8367d3;--button-background-hover: #8367d3}:host.dark{--button-color: #ffffff;--button-border: #24292e;--button-background: #24292e;--button-color-hover: #ffffff;--button-border-hover: #555555;--button-background-hover: #555555}:host.blue{--button-color: #ffffff;--button-border: #4687fc;--button-background: #4687fc;--button-color-hover: #ffffff;--button-border-hover: #3f73e6;--button-background-hover: #3f73e6}:host.primary{--button-color: #ffffff;--button-border: #3880ff;--button-background: #3880ff;--button-color-hover: #ffffff;--button-border-hover: #4d8dfd;--button-background-hover: #4d8dfd}:host.secondary{--button-color: red;--button-border: red;--button-background: red}\n"], components: [{ type: IconComponent, selector: "acc-icon", inputs: ["icon"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{
selector: 'button[acc-button]',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
type: Input
}], icon: [{
type: Input
}], getClass: [{
type: HostBinding,
args: ['class']
}] } });
class DividerComponent {
constructor() { }
ngOnInit() { }
}
DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DividerComponent, selector: "acc-divider", ngImport: i0, template: "<hr class=\"divider\" />\n", styles: [".divider{margin:0;border:none;border-top:1px solid var(--divider-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DividerComponent, decorators: [{
type: Component,
args: [{
selector: 'acc-divider',
templateUrl: './divider.component.html',
styleUrls: ['./divider.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; } });
class InputComponent {
constructor() { }
ngOnInit() { }
}
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: InputComponent, selector: "input[acc-input]", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{width:100%;height:48px;padding:0 15px;font-size:16px;outline:none;border:1px solid;border-radius:5px;background-color:transparent;transition-property:background-color,border-color,color,box-shadow;transition-duration:.15s;transition-timing-function:ease}:host{color:var(--input-color);border-color:var(--input-border)}:host:focus-visible{border-color:#97a6ba}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{
selector: 'input[acc-input]',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: function () { return []; } });
class AccumulationUIModule {
}
AccumulationUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AccumulationUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIModule, declarations: [ButtonComponent,
DividerComponent,
IconComponent,
InputComponent], imports: [CommonModule], exports: [ButtonComponent,
DividerComponent,
IconComponent,
InputComponent] });
AccumulationUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccumulationUIModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ButtonComponent,
DividerComponent,
IconComponent,
InputComponent
],
imports: [
CommonModule
],
exports: [
ButtonComponent,
DividerComponent,
IconComponent,
InputComponent
]
}]
}] });
/*
* Public API Surface of core
*/
/**
* Generated bundle index. Do not edit.
*/
export { AccumulationUIModule, AccumulationUIService, ButtonComponent, DividerComponent, IconComponent, InputComponent };
//# sourceMappingURL=accumulation-ui.js.map