@alyle/ui
Version:
Minimal Design, a set of components for Angular
261 lines (256 loc) • 15.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, ContentChild, forwardRef, ContentChildren, ViewChild, 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, LyCommonModule } from '@alyle/ui';
import { LyAvatar } from '@alyle/ui/avatar';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/cdk/platform';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
const STYLE_PRIORITY = 2;
const DISABLE_PADDING = false;
const STYLES = (theme, ref) => {
const list = ref.selectorsOf(STYLES);
const { before } = theme;
return {
$name: LyList.и,
$priority: STYLE_PRIORITY,
root: () => (_className) => `${_className}{display:block;position:relative;padding-top:8px;padding-bottom:8px;}${st2c(((theme.list
&& theme.list.root
&& (theme.list.root instanceof StyleCollection
? theme.list.root.setTransformer(fn => fn(list))
: theme.list.root(list)))), `${_className}`)}`,
listItem: () => (_className) => `${st2c((LY_COMMON_STYLES.button), `${_className}`)}${_className}{font-family:${theme.typography.fontFamily};font-size:${theme.pxToRem(16)};color:${theme.text.default};display:flex;width:100%;position:relative;padding:0 16px;min-height:48px;overflow:hidden;text-align:left;align-items:flex-start;justify-content:flex-start;border-radius:0;}${_className}::after{content:'';}${st2c((LY_COMMON_STYLES.fill), `${_className}::after`)}${_className}::after{width:100%;height:100%;background:transparent;opacity:0;pointer-events:none;}${_className}${list.onFocusByKeyboard}::after,${_className}${list.actionListItem}:hover::after{background:currentColor;opacity:.13;border-radius:inherit;}`,
onFocusByKeyboard: null,
listItemContent: (_className) => `${_className}{display:flex;justify-content:inherit;align-items:inherit;align-content:inherit;font-size:inherit;width:100%;height:100%;box-sizing:border-box;}`,
oneLine: (_className) => `${_className}{padding-top:8px;padding-bottom:8px;min-height:48px;}`,
twoLine: () => (_className) => `${_className}{padding-top:16px;padding-bottom:16px;min-height:64px;}${_className} ${list.lines}{margin-bottom:-4px;}`,
actionListItem: (_className) => `${_className}{cursor:pointer;user-select:none;}`,
lines: (_className) => `${_className}{align-self:stretch;min-width:0;width:100%;justify-content:center;flex-direction:column;display:flex;}`,
listItemWithIcon: () => (_className) => `${_className} ${list.lines}{padding-${before}:16px;}`,
twoLineWithIcon: () => (_className) => `${_className}{padding-top:16px;padding-bottom:16px;}${_className} ${list.lines}{margin-bottom:-4px;}`
};
};
/** List container */
class LyList {
static { this.и = 'LyList'; }
constructor(theme) {
this.theme = theme;
/** @docs-private */
this.classes = this.theme.addStyleSheet(STYLES);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyList, deps: [{ token: i1.LyTheme2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyList, isStandalone: false, selector: "ly-list", host: { properties: { "className": "classes.root" } }, exportAs: ["lyList"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyList, decorators: [{
type: Directive,
args: [{
selector: 'ly-list',
exportAs: 'lyList',
host: {
'[className]': 'classes.root'
},
standalone: false
}]
}], ctorParameters: () => [{ type: i1.LyTheme2 }] });
/** @docs-private */
class LyListItemBase {
constructor(_theme, _ngZone, _platform) {
this._theme = _theme;
this._ngZone = _ngZone;
this._platform = _platform;
}
}
/** @docs-private */
const LyListItemMixinBase = mixinStyleUpdater(mixinBg(mixinColor(mixinRaised(mixinDisabled(mixinOutlined(mixinElevation(mixinShadowColor(mixinDisableRipple(LyListItemBase)))))))));
/** List Item */
class LyListItem extends LyListItemMixinBase {
get _listItemClasses() {
const { listItemContent, twoLine, oneLine, listItemWithIcon, twoLineWithIcon } = this.classes;
const classes = [listItemContent];
const hasIcon = this._icon || this._avatar;
if (hasIcon) {
classes.push(listItemWithIcon);
}
if (this._lines && this._lines.length) {
if (hasIcon && this._lines.length > 1) {
classes.push(twoLineWithIcon);
}
else {
classes.push(this._lines.length > 1 ? twoLine : oneLine);
}
}
return classes;
}
/** @docs-private */
set isActionListItem(val) {
this._isActionListItem = coerceBooleanProperty(val);
}
get isActionListItem() {
return this._isActionListItem;
}
constructor(_el, _renderer, theme, ngZone, _rippleService, _focusState, _list, _cd, _platform) {
super(theme, ngZone, _platform);
this._el = _el;
this._renderer = _renderer;
this._rippleService = _rippleService;
this._focusState = _focusState;
this._list = _list;
this._cd = _cd;
/** @docs-private */
this.classes = this._list.classes;
this._isBrowser = this._platform.isBrowser;
this.setAutoContrast();
this._triggerElement = _el;
}
ngOnInit() {
this._renderer.addClass(this._el.nativeElement, this._list.classes.listItem);
if (this.disableRipple == null) {
if (this.isActionListItem) {
this._renderer.addClass(this._el.nativeElement, this.classes.actionListItem);
this.disableRipple = false;
const focusState = this._focusState.listen(this._el);
if (focusState) {
focusState.subscribe((event) => {
if (this._onFocusByKeyboardState === true) {
this._renderer.removeClass(this._el.nativeElement, this.classes.onFocusByKeyboard);
this._onFocusByKeyboardState = false;
}
if (event === 'keyboard') {
this._onFocusByKeyboardState = true;
this._renderer.addClass(this._el.nativeElement, this.classes.onFocusByKeyboard);
}
});
}
}
}
}
ngAfterContentInit() {
this._lines.changes.subscribe(() => this._cd.markForCheck());
}
ngOnDestroy() {
this._focusState.unlisten(this._el);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListItem, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LyTheme2 }, { token: i0.NgZone }, { token: i1.LyRippleService }, { token: i1.LyFocusState }, { token: LyList }, { token: i0.ChangeDetectorRef }, { token: i2.Platform }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LyListItem, isStandalone: false, selector: "ly-list-item, a[ly-list-item], button[ly-list-item]", inputs: { bg: "bg", color: "color", raised: "raised", disabled: "disabled", outlined: "outlined", elevation: "elevation", shadowColor: "shadowColor", disableRipple: "disableRipple", isActionListItem: ["ly-list-item", "isActionListItem"] }, queries: [{ propertyName: "_icon", first: true, predicate: i0.forwardRef(() => LyListIcon), descendants: true }, { propertyName: "_avatar", first: true, predicate: LyAvatar, descendants: true }, { propertyName: "_lines", predicate: i0.forwardRef(() => LyLine) }], viewQueries: [{ propertyName: "_rippleContainer", first: true, predicate: ["rippleContainer"], descendants: true }], exportAs: ["lyListItem"], usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"_listItemClasses\">\n <ng-content></ng-content>\n <div *ngIf=\"_lines?.length\" [className]=\"classes.lines\">\n <ng-content select=\"[ly-line]\"></ng-content>\n </div>\n</span>\n<div *ngIf=\"_isBrowser\" #rippleContainer [className]=\"_rippleService.classes.container\"></div>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListItem, decorators: [{
type: Component,
args: [{ selector: 'ly-list-item, a[ly-list-item], button[ly-list-item]', changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
'bg',
'color',
'raised',
'disabled',
'outlined',
'elevation',
'shadowColor',
'disableRipple'
], exportAs: 'lyListItem', standalone: false, template: "<span [ngClass]=\"_listItemClasses\">\n <ng-content></ng-content>\n <div *ngIf=\"_lines?.length\" [className]=\"classes.lines\">\n <ng-content select=\"[ly-line]\"></ng-content>\n </div>\n</span>\n<div *ngIf=\"_isBrowser\" #rippleContainer [className]=\"_rippleService.classes.container\"></div>" }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LyTheme2 }, { type: i0.NgZone }, { type: i1.LyRippleService }, { type: i1.LyFocusState }, { type: LyList }, { type: i0.ChangeDetectorRef }, { type: i2.Platform }], propDecorators: { _rippleContainer: [{
type: ViewChild,
args: ['rippleContainer']
}], _lines: [{
type: ContentChildren,
args: [forwardRef(() => LyLine)]
}], _icon: [{
type: ContentChild,
args: [forwardRef(() => LyListIcon)]
}], _avatar: [{
type: ContentChild,
args: [LyAvatar]
}], isActionListItem: [{
type: Input,
args: ['ly-list-item']
}] } });
class LyListIcon {
/** Disable extra padding */
set disablePadding(val) {
const newVal = this._disablePadding = coerceBooleanProperty(val);
this._disablePaddingClass = this._theme.addStyle(`lyIconPadding:${newVal.toString()}`, () => ({
paddingTop: newVal ? '4px' : '8px',
paddingBottom: newVal ? '4px' : '8px'
}));
this._renderer.addClass(this._el.nativeElement, this._disablePaddingClass);
}
get disablePadding() {
return this._disablePadding;
}
constructor(_theme, _el, _renderer) {
this._theme = _theme;
this._el = _el;
this._renderer = _renderer;
this._renderer.addClass(this._el.nativeElement, this._theme.addSimpleStyle('lyListIcon', (theme) => ({
color: theme.text.secondary,
paddingAfter: '16px'
}), STYLE_PRIORITY));
}
ngOnInit() {
if (this.disablePadding == null) {
this.disablePadding = DISABLE_PADDING;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListIcon, deps: [{ token: i1.LyTheme2 }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyListIcon, isStandalone: false, selector: "[ly-list-icon]", inputs: { disablePadding: "disablePadding" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListIcon, decorators: [{
type: Directive,
args: [{
selector: '[ly-list-icon]',
standalone: false
}]
}], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { disablePadding: [{
type: Input
}] } });
class LyLine {
constructor(_theme, _el, _renderer) {
this._theme = _theme;
this._el = _el;
this._renderer = _renderer;
this._renderer.addClass(this._el.nativeElement, this._theme.addSimpleStyle('lyLine', (theme) => ({
margin: 0,
padding: 0,
fontWeight: 400,
textAlign: 'initial',
'&:first-child': {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
lineHeight: 1,
fontSize: theme.pxToRem(16)
},
'&:nth-child(n+2)': {
lineHeight: '20px',
fontSize: theme.pxToRem(14)
}
}), STYLE_PRIORITY));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyLine, deps: [{ token: i1.LyTheme2 }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyLine, isStandalone: false, selector: "[ly-line]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyLine, decorators: [{
type: Directive,
args: [{
selector: '[ly-line]',
standalone: false
}]
}], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
class LyListModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyListModule, declarations: [LyList, LyListItem, LyListIcon, LyLine], imports: [CommonModule], exports: [LyCommonModule, LyList, LyListItem, LyListIcon, LyLine] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListModule, imports: [CommonModule, LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyListModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule
],
declarations: [LyList, LyListItem, LyListIcon, LyLine],
exports: [LyCommonModule, LyList, LyListItem, LyListIcon, LyLine]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LyLine, LyList, LyListIcon, LyListItem, LyListItemBase, LyListItemMixinBase, LyListModule, STYLES };
//# sourceMappingURL=alyle-ui-list.mjs.map