@alyle/ui
Version:
Minimal Design, a set of components for Angular
216 lines (211 loc) • 10.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { __decorate } from 'tslib';
import * as i1 from '@alyle/ui';
import { st2c, StyleCollection, mixinStyleUpdater, mixinBg, mixinColor, mixinRaised, mixinDisabled, mixinOutlined, mixinElevation, mixinShadowColor, mixinDisableRipple, StyleRenderer, Style, LyCommonModule } from '@alyle/ui';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/cdk/platform';
const STYLES = (theme, ref) => {
const card = ref.selectorsOf(STYLES);
return {
$priority: STYLE_PRIORITY,
$name: LyCard.и,
root: () => (_className) => `${_className}{display:block;overflow:hidden;border-radius:2px;}${st2c(((theme.card
&& theme.card.root
&& (theme.card.root instanceof StyleCollection
? theme.card.root.setTransformer(fn => fn(card))
: theme.card.root(card)))), `${_className}`)}`,
bgImg: (_className) => `${_className}{display:block;background-size:cover;background-repeat:no-repeat;background-position:center;}`,
content: (_className) => `${_className}{display:block;padding:16px 24px;}@media ${theme.breakpoints['XSmall']}{${_className}{padding:16px 16px;}}`,
actions: (_className) => `${_className}{display:block;padding:8px 12px;}@media ${theme.breakpoints['XSmall']}{${_className}{padding:8px 4px;}}`,
actionsItem: (_className) => `${_className}{margin:0 4px;}`
};
};
const DEFAULT_ASPECT_RATIO = '16:9';
const STYLE_PRIORITY = -1;
/** @docs-private */
class LyCardBase {
constructor(_theme, _ngZone, _platform) {
this._theme = _theme;
this._ngZone = _ngZone;
this._platform = _platform;
}
}
/** @docs-private */
const LyCardMixinBase = mixinStyleUpdater(mixinBg(mixinColor(mixinRaised(mixinDisabled(mixinOutlined(mixinElevation(mixinShadowColor(mixinDisableRipple(LyCardBase)))))))));
class LyCard extends LyCardMixinBase {
static { this.и = 'LyCard'; }
constructor(theme, _el, renderer, ngZone, platform) {
super(theme, ngZone, platform);
this.theme = theme;
this._el = _el;
this.renderer = renderer;
/**
* styles
* @docs-private
*/
this.classes = this.theme.renderStyleSheet(STYLES);
this.setAutoContrast();
}
ngOnChanges() {
this.updateStyle(this._el);
}
ngOnInit() {
let requireOnChanges;
if (!this.bg) {
this.bg = 'background:primary';
requireOnChanges = true;
}
if (!this.elevation) {
this.elevation = 2;
requireOnChanges = true;
}
if (requireOnChanges) {
this.updateStyle(this._el);
}
this.renderer.addClass(this._el.nativeElement, this.classes.root);
}
ngOnDestroy() {
this._removeRippleEvents();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCard, deps: [{ token: i1.LyTheme2 }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i2.Platform }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyCard, isStandalone: false, selector: "ly-card", inputs: { bg: "bg", color: "color", raised: "raised", outlined: "outlined", elevation: "elevation", shadowColor: "shadowColor", disableRipple: "disableRipple" }, providers: [StyleRenderer], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCard, decorators: [{
type: Directive,
args: [{
selector: 'ly-card',
inputs: [
'bg',
'color',
'raised',
'outlined',
'elevation',
'shadowColor',
'disableRipple',
],
providers: [StyleRenderer],
standalone: false
}]
}], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i2.Platform }] });
class LyCardContent {
constructor(el, renderer, card) {
this.el = el;
this.renderer = renderer;
this.card = card;
}
ngOnInit() {
this.renderer.addClass(this.el.nativeElement, this.card.classes.content);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardContent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LyCard }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyCardContent, isStandalone: false, selector: "ly-card-content", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardContent, decorators: [{
type: Directive,
args: [{
selector: 'ly-card-content',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: LyCard }] });
class LyCardActions {
constructor(el, renderer, card) {
this.el = el;
this.renderer = renderer;
this.card = card;
}
ngOnInit() {
this.renderer.addClass(this.el.nativeElement, this.card.classes.actions);
if (!coerceBooleanProperty(this.disableActionSpacing)) {
this.el.nativeElement.childNodes.forEach(element => {
this.renderer.addClass(element, this.card.classes.actionsItem);
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardActions, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LyCard }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyCardActions, isStandalone: false, selector: "ly-card-actions", inputs: { disableActionSpacing: "disableActionSpacing" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardActions, decorators: [{
type: Directive,
args: [{
selector: 'ly-card-actions',
standalone: false
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: LyCard }], propDecorators: { disableActionSpacing: [{
type: Input
}] } });
/**
* @dynamic
*/
class LyCardMedia {
/**
* Aspect ratio
*
* e.g:
* 4:3
* 1:1
*/
set ratio(val) {
if (val !== this.ratio) {
this._ratio = val;
this[0x2] = this.sRenderer.add(`${LyCardMedia.и}--ratio-${val}`, () => (_className) => `${_className}::before{content:'';display:block;padding-top:${val
.split(':')
.reduce((prev, current) => (+current / +prev * 100).toString())}%;}`, STYLE_PRIORITY, this[0x2]);
}
}
get ratio() {
return this._ratio;
}
constructor(sRenderer, card) {
this.sRenderer = sRenderer;
sRenderer.addClass(card.classes.bgImg);
}
static { this.и = 'LyCardMedia'; }
static { this.$priority = STYLE_PRIORITY; }
ngOnInit() {
if (!this.ratio) {
this.ratio = DEFAULT_ASPECT_RATIO;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardMedia, deps: [{ token: i1.StyleRenderer }, { token: LyCard }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyCardMedia, isStandalone: false, selector: "ly-card-media", inputs: { ratio: "ratio", bgImg: "bgImg" }, providers: [
StyleRenderer
], ngImport: i0 }); }
}
__decorate([
Style((val) => () => (_className) => `${_className}{background-image:url('${val}');}`)
], LyCardMedia.prototype, "bgImg", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardMedia, decorators: [{
type: Directive,
args: [{
selector: 'ly-card-media',
providers: [
StyleRenderer
],
standalone: false
}]
}], ctorParameters: () => [{ type: i1.StyleRenderer }, { type: LyCard }], propDecorators: { ratio: [{
type: Input
}], bgImg: [{
type: Input
}] } });
class LyCardModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyCardModule, declarations: [LyCard, LyCardContent, LyCardActions, LyCardMedia], imports: [CommonModule], exports: [LyCard, LyCardContent, LyCardActions, LyCardMedia, LyCommonModule] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardModule, imports: [CommonModule, LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyCardModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
exports: [LyCard, LyCardContent, LyCardActions, LyCardMedia, LyCommonModule],
declarations: [LyCard, LyCardContent, LyCardActions, LyCardMedia]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LyCard, LyCardActions, LyCardBase, LyCardContent, LyCardMedia, LyCardMixinBase, LyCardModule, STYLES };
//# sourceMappingURL=alyle-ui-card.mjs.map