@alyle/ui
Version:
Minimal Design, a set of components for Angular
206 lines (201 loc) • 11.5 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Input, ViewChild, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { st2c, LY_COMMON_STYLES, StyleCollection, mixinStyleUpdater, mixinBg, mixinColor, mixinRaised, mixinDisabled, mixinOutlined, mixinElevation, mixinShadowColor, mixinDisableRipple, getLyThemeVariableUndefinedError, StyleRenderer, LyCommonModule } from '@alyle/ui';
import { Color } from '@alyle/ui/color';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/cdk/a11y';
import * as i3 from '@angular/cdk/platform';
const DEFAULT_DISABLE_RIPPLE = false;
const DEFAULT_SIZE = 'medium';
const STYLE_PRIORITY = -2;
const LY_BUTTON_DEFAULT_OPTIONS = new InjectionToken('LY_BUTTON_DEFAULT_OPTIONS');
const STYLES = (theme, selectors) => {
const typography = theme.typography;
const button = selectors(STYLES);
return {
$priority: STYLE_PRIORITY,
$name: LyButton.name,
root: () => [(_className) => `${_className}{font-family:${typography.fontFamily};color:${theme.text.default};-webkit-tap-highlight-color:transparent;background-color:${new Color(0, 0, 0, 0)};border:0;padding:0 1em;-moz-appearance:none;margin:0;border-radius:3px;outline:none;font-weight:500;box-sizing:border-box;position:relative;justify-content:center;align-items:center;align-content:center;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration-line:none;-webkit-text-decoration-line:none;font-size:${theme.pxToRem(14)};}${_className}::-moz-focus-inner{border:0;}${_className}::before{content:'';}${st2c((LY_COMMON_STYLES.fill), `${_className}::before`)}${_className}::before{width:100%;height:100%;background:transparent;opacity:0;pointer-events:none;}${_className}.cdk-keyboard-focused::before,${_className}.cdk-program-focused::before,${_className}:hover::before{background:currentColor;opacity:.13;border-radius:inherit;}`, (theme.button?.root instanceof StyleCollection
? theme.button.root.setTransformer(fn => fn(button)).css
: theme.button?.root?.(button))],
content: [(_className) => `${_className}{padding:0;display:flex;justify-content:inherit;align-items:inherit;align-content:inherit;width:100%;height:100%;box-sizing:border-box;}`],
animations: (_className) => `${_className}:hover,${_className}:hover::before,${_className}:focus,${_className}:focus::before{transition:background 375ms cubic-bezier(0.23,1,0.32,1) 0ms,box-shadow 280ms cubic-bezier(.4,0,.2,1) 0ms;}`
};
};
/** @docs-private */
class LyButtonBase {
constructor(_theme, _ngZone, _platform) {
this._theme = _theme;
this._ngZone = _ngZone;
this._platform = _platform;
}
}
/** @docs-private */
const LyButtonMixinBase = mixinStyleUpdater(mixinBg(mixinColor(mixinRaised(mixinDisabled(mixinOutlined(mixinElevation(mixinShadowColor(mixinDisableRipple(LyButtonBase)))))))));
class LyButton extends LyButtonMixinBase {
static { this.и = 'LyButton'; }
/** @docs-private */
get rippleSensitive() {
return this._rippleSensitive;
}
set rippleSensitive(value) {
const newVal = this._rippleSensitive = coerceBooleanProperty(value);
this._rippleConfig.sensitive = newVal;
}
/** Button size */
get size() {
return this._size;
}
set size(val) {
if (val !== this.size) {
this._size = val;
const newClass = this._theme.renderStyle(`${LyButton.и}--${val}-size`, (theme, ref) => {
if (theme.button && theme.button.size && theme.button.size[val]) {
return theme.button.size[val](ref.selectorsOf(STYLES));
}
throw new Error(`Value button.size['${val}'] not found in ThemeVariables`);
}, STYLE_PRIORITY);
this._sizeClass = this.sRenderer.updateClass(newClass, this._sizeClass);
}
}
/** Button appearance */
get appearance() { return this._appearance; }
set appearance(val) {
if (val !== this.appearance) {
if (val === 'icon' && !this._rippleConfig.centered) {
this._rippleConfig.centered = true;
}
this._appearance = val;
const newClass = this._theme.renderStyle(`${LyButton.и}--${val}-appearance`, (theme, ref) => {
if (!(theme.button.appearance && theme.button.appearance[val])) {
throw new Error(`Value button.appearance['${val}'] not found in ThemeVariables`);
}
return theme.button.appearance[val](ref.selectorsOf(STYLES));
}, STYLE_PRIORITY + 1);
this._appearanceClass = this.sRenderer.updateClass(newClass, this._appearanceClass);
}
}
/** @docs-private */
get hostElement() {
return this._el.nativeElement;
}
constructor(_el, _renderer, _theme, _ngZone, _rippleService, _focusMonitor, sRenderer, platform, _defaultConfig) {
super(_theme, _ngZone, platform);
this._el = _el;
this._renderer = _renderer;
this._rippleService = _rippleService;
this._focusMonitor = _focusMonitor;
this.sRenderer = sRenderer;
this._defaultConfig = _defaultConfig;
/**
* Style
* @docs-private
*/
this.classes = this.sRenderer.renderSheet(STYLES);
this._rippleSensitive = false;
this.setAutoContrast();
this._triggerElement = _el;
this._renderer.addClass(this._el.nativeElement, this.classes.animations);
if (!_theme.variables.button) {
throw getLyThemeVariableUndefinedError('button');
}
}
ngOnChanges() {
this.updateStyle(this._el);
const isDisabled = this.disabled;
this._renderer.setProperty(this._el.nativeElement, 'disabled', isDisabled);
}
ngOnInit() {
const { button } = this._theme.variables;
if (button) {
this._renderer.addClass(this._el.nativeElement, this.classes.root);
if (this.size == null && this.appearance == null) {
// Apply default config
this.size = (this._defaultConfig && this._defaultConfig.size)
|| DEFAULT_SIZE;
}
else {
if (this._defaultConfig && this._defaultConfig.appearance) {
if (this.appearance == null) {
this.appearance = this._defaultConfig.appearance;
}
}
}
}
// set default disable ripple
if (this.disableRipple == null) {
this.disableRipple = DEFAULT_DISABLE_RIPPLE;
}
}
ngAfterViewInit() {
this._focusMonitor.monitor(this._el, true);
}
ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._el);
this._removeRippleEvents();
}
/** Focuses the button. */
focus(origin, options) {
if (origin) {
this._focusMonitor.focusVia(this._getHostElement(), origin, options);
}
else {
this._getHostElement().focus(options);
}
}
_getHostElement() {
return this._el.nativeElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyButton, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LyTheme2 }, { token: i0.NgZone }, { token: i1.LyRippleService }, { token: i2.FocusMonitor }, { token: i1.StyleRenderer }, { token: i3.Platform }, { token: LY_BUTTON_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LyButton, isStandalone: false, selector: "button[ly-button], a[ly-button]", inputs: { bg: "bg", color: "color", raised: "raised", disabled: "disabled", outlined: "outlined", elevation: "elevation", shadowColor: "shadowColor", disableRipple: "disableRipple", rippleSensitive: ["sensitive", "rippleSensitive"], size: "size", appearance: "appearance" }, providers: [
StyleRenderer
], viewQueries: [{ propertyName: "_rippleContainer", first: true, predicate: ["rippleContainer"], descendants: true }], exportAs: ["lyButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<span [className]=\"classes.content\">\n <ng-content></ng-content>\n</span>\n<div #rippleContainer [className]=\"_rippleService.classes.container\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyButton, decorators: [{
type: Component,
args: [{ selector: 'button[ly-button], a[ly-button]', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
'bg',
'color',
'raised',
'disabled',
'outlined',
'elevation',
'shadowColor',
'disableRipple'
], providers: [
StyleRenderer
], exportAs: 'lyButton', standalone: false, template: "<span [className]=\"classes.content\">\n <ng-content></ng-content>\n</span>\n<div #rippleContainer [className]=\"_rippleService.classes.container\"></div>" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LyTheme2 }, { type: i0.NgZone }, { type: i1.LyRippleService }, { type: i2.FocusMonitor }, { type: i1.StyleRenderer }, { type: i3.Platform }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [LY_BUTTON_DEFAULT_OPTIONS]
}] }], propDecorators: { _rippleContainer: [{
type: ViewChild,
args: ['rippleContainer']
}], rippleSensitive: [{
type: Input,
args: ['sensitive']
}], size: [{
type: Input
}], appearance: [{
type: Input
}] } });
class LyButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyButtonModule, declarations: [LyButton], exports: [LyCommonModule, LyButton] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyButtonModule, imports: [LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyButtonModule, decorators: [{
type: NgModule,
args: [{
exports: [LyCommonModule, LyButton],
declarations: [LyButton]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LY_BUTTON_DEFAULT_OPTIONS, LyButton, LyButtonBase, LyButtonMixinBase, LyButtonModule, STYLES };
//# sourceMappingURL=alyle-ui-button.mjs.map