@alyle/ui
Version:
Minimal Design, a set of components for Angular
284 lines (279 loc) • 11.6 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, ElementRef, Input, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { st2c, StyleCollection, mixinStyleUpdater, mixinBg, mixinColor, mixinRaised, mixinDisabled, mixinOutlined, mixinElevation, mixinShadowColor, StyleRenderer, LyCommonModule } from '@alyle/ui';
const LY_BADGE_DEFAULT_OPTIONS = new InjectionToken('BADGE_DEFAULT_OPTIONS');
const STYLE_PRIORITY = -2;
const DEFAULT_H_POSITION = 'after';
const DEFAULT_V_POSITION = 'above';
const DEFAULT_BG = 'primary';
const DEFAULT_APPEARANCE = 'default';
const DEFAULT_OVERLAP = 'rectangle';
const STYLES = (theme, ref) => {
const badge = ref.selectorsOf(STYLES);
return {
$name: LyBadge.и,
$priority: STYLE_PRIORITY,
root: () => (_className) => `${_className}{position:absolute;display:flex;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:${theme.pxToRem(12)};font-family:${theme.typography.fontFamily};justify-content:center;align-items:center;box-sizing:border-box;z-index:1;}${st2c(((theme.badge
&& theme.badge.root
&& (theme.badge.root instanceof StyleCollection
? theme.badge.root.setTransformer(fn => fn(badge))
: theme.badge.root(badge)))), `${_className}`)}`,
relative: (_className) => `${_className}{position:relative;}`
};
};
/** @docs-private */
class LyBadgeBase {
constructor(_theme) {
this._theme = _theme;
}
}
/** @docs-private */
const LyBadgeMixinBase = mixinStyleUpdater(mixinBg(mixinColor(mixinRaised(mixinDisabled(mixinOutlined(mixinElevation(mixinShadowColor(LyBadgeBase))))))));
class LyBadge extends LyBadgeMixinBase {
static { this.и = 'LyBadge'; }
/** The content for the badge */
set content(val) {
if (val !== this.content) {
this._content = val;
this._createBadge();
}
}
get content() {
return this._content;
}
set container(container) {
if (container == null) {
throw new Error(`${LyBadge.и}: [container] is undefined.`);
}
if (this.content != null) {
throw new Error(`${LyBadge.и}: [container] with [content] don't work together.`);
}
if (!container.tagName) {
throw new Error(`${LyBadge.и}: the value given to container is not an HTMLElement`);
}
this._container = container;
this._renderer.appendChild(container, this._el.nativeElement);
}
get container() {
return this._container;
}
get overlap() {
return this._overlap;
}
set overlap(val) {
if (val !== this.overlap) {
this._overlap = val;
Promise.resolve(null).then(() => {
const overlap = val;
const hp = this.hPosition;
const vp = this.vPosition;
const newClass = this._theme.renderStyle(`${LyBadge.и}-overlap-${val}&${hp}&${vp}`, (theme) => {
const p = overlap === 'circle'
? 14 : 0;
return (_className) => `${_className}{${theme.getDirection(vp)}:${p}%;${theme.getDirection(hp)}:${p}%;}`;
}, STYLE_PRIORITY);
this._overlapClass = this._sRenderer.updateClass(newClass, this._overlapClass);
});
}
}
/** The color of the badge */
get bg() {
return this._lyBadgeBg;
}
set bg(val) {
if (this.content == null) {
this.lyBadgeBg = val;
}
}
/** The color of the badge */
get lyBadgeBg() {
return this._lyBadgeBg;
}
set lyBadgeBg(val) {
if (val !== this.lyBadgeBg) {
this._lyBadgeBg = val;
const newClass = this._theme.renderStyle(`${LyBadge.и}--bg-${val}`, (theme) => (_className) => `${_className}{background-color:${theme.colorOf(val)};color:${theme.colorOf(`${val}:contrast`)};`, STYLE_PRIORITY);
Promise.resolve(null).then(() => {
this[0x1] = this._sRenderer.updateClass(newClass, this[0x1]);
});
}
}
get appearance() {
return this._appearance;
}
set appearance(val) {
if (this.content == null) {
this.lyBadgeAppearance = val;
}
}
get lyBadgeAppearance() {
return this._appearance;
}
set lyBadgeAppearance(val) {
if (val !== this.appearance) {
this._appearance = val;
const styleID = `${LyBadge.и}--appearance-${val}`;
const newClass = this._theme.renderStyle(styleID, (theme) => {
const appearance = theme.badge
&& theme.badge.appearance
&& theme.badge.appearance[val]
&& theme.badge.appearance[val](this.classes);
if (appearance) {
return appearance;
}
throw new Error(`${styleID} is not defined in the theme.`);
}, STYLE_PRIORITY);
Promise.resolve(null).then(() => {
this._appearanceClass = this._sRenderer.updateClass(newClass, this._appearanceClass);
});
}
}
constructor(_el, _theme, _renderer) {
super(_theme);
this._el = _el;
this._renderer = _renderer;
/**
* Styles
* @docs-private
*/
this.classes = this._theme.renderStyleSheet(STYLES);
this.setAutoContrast();
this._badgeElementRef = this._el.nativeElement;
}
ngOnChanges() {
if (this.content == null) {
this.updateStyle(this._el);
}
this._updatePosition();
if (!this._sRenderer) {
this._sRenderer = new StyleRenderer(this._theme, this._el, this._renderer);
}
}
ngOnInit() {
/** Add root styles */
this._renderer.addClass(this._badgeElementRef, this.classes.root);
/** Set default bg */
if (!this.bg) {
this.lyBadgeBg = DEFAULT_BG;
}
/** Set default position */
let requireUpdate = false;
if (!this.hPosition) {
requireUpdate = true;
this.hPosition = DEFAULT_H_POSITION;
}
if (!this.vPosition) {
requireUpdate = true;
this.vPosition = DEFAULT_V_POSITION;
}
if (requireUpdate) {
this._updatePosition();
}
/** Set default appearance */
if (!this.appearance) {
this.lyBadgeAppearance = DEFAULT_APPEARANCE;
}
/** Set default overlap */
if (!this.overlap) {
this.overlap = DEFAULT_OVERLAP;
}
}
ngOnDestroy() {
if (this._badgeEl) {
this._renderer.removeChild(this._el.nativeElement, this._badgeEl);
}
}
_updatePosition() {
const hp = this.hPosition;
const vp = this.vPosition;
if (hp && vp) {
let y;
let x;
if (hp && vp) {
if (hp === 'after') {
x = 50;
}
else {
x = -50;
}
if (vp === 'above') {
y = -50;
}
else {
y = 50;
}
}
const newClass = this._theme.renderStyle(`${LyBadge.и}--position-${hp}-${vp}`, (theme) => (_className) => `${_className}{transform:translate(${theme.after === 'right'
? x : -x}%,${y}%);}`, STYLE_PRIORITY);
Promise.resolve(null).then(() => {
this._positionClass = this._sRenderer.updateClass(newClass, this._positionClass);
});
}
}
_createBadge() {
if (!this._badgeEl) {
const badge = this._badgeEl = this._renderer.createElement('div');
this._renderer.appendChild((this.container) || this._el.nativeElement, badge);
this._badgeElementRef = badge;
this._sRenderer = new StyleRenderer(this._theme, new ElementRef(badge), this._renderer);
/** Add position relative */
this._renderer.addClass(this._el.nativeElement, this.classes.relative);
}
this._badgeEl.textContent = `${this.content}`;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyBadge, deps: [{ token: i0.ElementRef }, { token: i1.LyTheme2 }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyBadge, isStandalone: false, selector: "ly-badge, [lyBadge]", inputs: { bg: "bg", color: "color", raised: "raised", disabled: "disabled", outlined: "outlined", elevation: "elevation", shadowColor: "shadowColor", content: ["lyBadge", "content"], container: "container", hPosition: "hPosition", vPosition: "vPosition", overlap: "overlap", lyBadgeBg: "lyBadgeBg", appearance: "appearance", lyBadgeAppearance: "lyBadgeAppearance" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyBadge, decorators: [{
type: Directive,
args: [{
selector: 'ly-badge, [lyBadge]',
inputs: [
'bg',
'color',
'raised',
'disabled',
'outlined',
'elevation',
'shadowColor'
],
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.LyTheme2 }, { type: i0.Renderer2 }], propDecorators: { content: [{
type: Input,
args: ['lyBadge']
}], container: [{
type: Input
}], hPosition: [{
type: Input
}], vPosition: [{
type: Input
}], overlap: [{
type: Input
}], bg: [{
type: Input
}], lyBadgeBg: [{
type: Input
}], appearance: [{
type: Input
}], lyBadgeAppearance: [{
type: Input
}] } });
class LyBadgeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyBadgeModule, declarations: [LyBadge], exports: [LyBadge, LyCommonModule] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyBadgeModule, imports: [LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyBadgeModule, decorators: [{
type: NgModule,
args: [{
exports: [LyBadge, LyCommonModule],
declarations: [LyBadge]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LY_BADGE_DEFAULT_OPTIONS, LyBadge, LyBadgeBase, LyBadgeMixinBase, LyBadgeModule, STYLES };
//# sourceMappingURL=alyle-ui-badge.mjs.map